BC-14: feat: table rows clickable.

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js

@@ -90,6 +90,10 @@ function EstimatesDataTable({
     openDialog('estimate-pdf-preview', { estimateId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('estimate-detail-drawer', { estimateId: cell.row.original.id });
+  };
   // Handles fetch data.
   const handleFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -125,6 +129,7 @@ function EstimatesDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onApprove: handleApproveEstimate,
         onEdit: handleEditEstimate,

client/src/containers/Sales/Estimates/EstimatesLanding/components.js

@@ -164,6 +164,7 @@ export function useEstiamtesTableColumns() {
         Cell: DateCell,
         width: 140,
         className: 'estimate_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -171,6 +172,7 @@ export function useEstiamtesTableColumns() {
         accessor: 'customer.display_name',
         width: 140,
         className: 'customer_id',
+        clickable: true,
       },
       {
         id: 'expiration_date',
@@ -179,6 +181,7 @@ export function useEstiamtesTableColumns() {
         Cell: DateCell,
         width: 140,
         className: 'expiration_date',
+        clickable: true,
       },
       {
         id: 'estimate_number',
@@ -187,6 +190,7 @@ export function useEstiamtesTableColumns() {
           row.estimate_number ? `#${row.estimate_number}` : null,
         width: 140,
         className: 'estimate_number',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -194,6 +198,7 @@ export function useEstiamtesTableColumns() {
         accessor: AmountAccessor,
         width: 140,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'status',
@@ -201,6 +206,7 @@ export function useEstiamtesTableColumns() {
         accessor: (row) => statusAccessor(row),
         width: 140,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -208,6 +214,7 @@ export function useEstiamtesTableColumns() {
         accessor: 'reference',
         width: 90,
         className: 'reference',
+        clickable: true,
       },
     ],
     [],

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -86,6 +86,10 @@ function InvoicesDataTable({
     openDialog('invoice-pdf-preview', { invoiceId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id });
+  };
   // Handles fetch data once the table state change.
   const handleDataTableFetchData = useCallback(
     ({ pageSize, pageIndex, sortBy }) => {
@@ -124,6 +128,7 @@ function InvoicesDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeleteInvoice,
         onDeliver: handleDeliverInvoice,

client/src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -174,6 +174,7 @@ export function useInvoicesTableColumns() {
         accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
         width: 110,
         className: 'invoice_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -181,6 +182,7 @@ export function useInvoicesTableColumns() {
         accessor: 'customer.display_name',
         width: 180,
         className: 'customer_id',
+        clickable: true,
       },
 
       {
@@ -189,6 +191,7 @@ export function useInvoicesTableColumns() {
         accessor: 'invoice_no',
         width: 100,
         className: 'invoice_no',
+        clickable: true,
       },
       {
         id: 'balance',
@@ -198,6 +201,7 @@ export function useInvoicesTableColumns() {
         ),
         width: 120,
         className: 'balance',
+        clickable: true,
       },
       {
         id: 'status',
@@ -205,6 +209,7 @@ export function useInvoicesTableColumns() {
         accessor: (row) => statusAccessor(row),
         width: 160,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'due_date',
@@ -212,6 +217,7 @@ export function useInvoicesTableColumns() {
         accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
         width: 110,
         className: 'due_date',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -219,8 +225,9 @@ export function useInvoicesTableColumns() {
         accessor: 'reference_no',
         width: 90,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],
   );
-}
+}

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js

@@ -66,6 +66,13 @@ function PaymentReceivesDataTable({
     openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
   };
 
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-receive-detail-drawer', {
+      paymentReceiveId: cell.row.original.id,
+    });
+  };
+
   // Handle datatable fetch once the table's state changing.
   const handleDataTableFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
@@ -103,6 +110,7 @@ function PaymentReceivesDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeletePaymentReceive,
         onEdit: handleEditPaymentReceive,

client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js

@@ -89,6 +89,7 @@ export function usePaymentReceivesColumns() {
         accessor: PaymentDateAccessor,
         width: 140,
         className: 'payment_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -96,6 +97,7 @@ export function usePaymentReceivesColumns() {
         accessor: 'customer.display_name',
         width: 160,
         className: 'customer_id',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -103,6 +105,7 @@ export function usePaymentReceivesColumns() {
         accessor: AmountAccessor,
         width: 120,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'payment_receive_no',
@@ -111,6 +114,7 @@ export function usePaymentReceivesColumns() {
           row.payment_receive_no ? `#${row.payment_receive_no}` : null,
         width: 140,
         className: 'payment_receive_no',
+        clickable: true,
       },
       {
         id: 'deposit_account',
@@ -118,6 +122,7 @@ export function usePaymentReceivesColumns() {
         accessor: 'deposit_account.name',
         width: 140,
         className: 'deposit_account_id',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -125,6 +130,7 @@ export function usePaymentReceivesColumns() {
         accessor: 'reference_no',
         width: 140,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js

@@ -95,6 +95,10 @@ function ReceiptsDataTable({
   if (isEmptyStatus) {
     return <ReceiptsEmptyStatus />;
   }
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('receipt-detail-drawer', { receiptId: cell.row.original.id });
+  };
 
   return (
     <DataTable
@@ -117,6 +121,7 @@ function ReceiptsDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onEdit: handleEditReceipt,
         onDelete: handleDeleteReceipt,

client/src/containers/Sales/Receipts/ReceiptsLanding/components.js

@@ -106,6 +106,7 @@ export function useReceiptsTableColumns() {
         accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
         width: 140,
         className: 'receipt_date',
+        clickable: true,
       },
       {
         id: 'customer',
@@ -113,6 +114,7 @@ export function useReceiptsTableColumns() {
         accessor: 'customer.display_name',
         width: 140,
         className: 'customer_id',
+        clickable: true,
       },
       {
         id: 'receipt_number',
@@ -120,6 +122,7 @@ export function useReceiptsTableColumns() {
         accessor: 'receipt_number',
         width: 140,
         className: 'receipt_number',
+        clickable: true,
       },
       {
         id: 'deposit_account',
@@ -127,6 +130,7 @@ export function useReceiptsTableColumns() {
         accessor: 'deposit_account.name',
         width: 140,
         className: 'deposit_account',
+        clickable: true,
       },
       {
         id: 'amount',
@@ -134,6 +138,7 @@ export function useReceiptsTableColumns() {
         accessor: (r) => <Money amount={r.amount} currency={r.currency_code} />,
         width: 140,
         className: 'amount',
+        clickable: true,
       },
       {
         id: 'status',
@@ -141,6 +146,7 @@ export function useReceiptsTableColumns() {
         accessor: StatusAccessor,
         width: 140,
         className: 'status',
+        clickable: true,
       },
       {
         id: 'reference_no',
@@ -148,6 +154,7 @@ export function useReceiptsTableColumns() {
         accessor: 'reference_no',
         width: 140,
         className: 'reference_no',
+        clickable: true,
       },
     ],
     [],