add detail statement on wallet statement

src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx

@@ -5,6 +5,7 @@ import { useCallApi } from '@/hooks';
 import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolbar';
+import ShowDetailDialog from '../blocks/ShowDetailDialog';
 
 const formatNumber = (num: number): string => {
   return num.toLocaleString('en-US', {
@@ -14,7 +15,9 @@ const formatNumber = (num: number): string => {
 };
 
 interface WalletProps {
+  ID: string;
   id: string;
+  id_wallet: string;
   name: string;
   id_currency: string;
   status: string;
@@ -22,6 +25,8 @@ interface WalletProps {
 
 interface ContextProps {
   wallets: WalletProps[];
+  showDetailDialog: boolean;
+  setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showEditDialog: boolean;
@@ -39,6 +44,8 @@ interface ContextProps {
 
 const initialProps: ContextProps = {
   wallets: [],
+  showDetailDialog: false,
+  setShowDetailDialog: () => {},
   showAddDialog: false,
   handleAddDialog: (show: boolean) => {},
   showEditDialog: false,
@@ -54,6 +61,7 @@ const API_URL_WALLET = apiConfig.service_wallet;
 
 const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -92,7 +100,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         enableSorting: false,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[550px]',
+          headerClassName: 'w-[300px]',
           cellClassName: 'p-[20px]'
         }
       },
@@ -106,6 +114,26 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           headerClassName: 'w-[200px]'
         }
       },
+      {
+        accessorKey: 'total_debit',
+        header: ({ column }) => <DataGridColumnHeader title="Total Debit" column={column} />,
+        cell: ({ row }) => formatNumber(row.original.total_debit),
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorKey: 'total_credit',
+        header: ({ column }) => <DataGridColumnHeader title="Total Credit" column={column} />,
+        cell: ({ row }) => formatNumber(row.original.total_credit),
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
       {
         accessorKey: 'trx_count_today',
         header: ({ column }) => (
@@ -144,16 +172,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           headerClassName: 'w-[200px]'
         }
       },
-      // {
-      //   accessorFn: (row) => row.balance_type?.name,
-      //   id: 'balance_type_name',
-      //   header: ({ column }) => <DataGridColumnHeader title="Balance Type Name" column={column} />,
-      //   enableSorting: false,
-      //   enableHiding: false,
-      //   meta: {
-      //     headerClassName: 'w-[200px]'
-      //   }
-      // },
       {
         accessorKey: 'currency_name',
         header: ({ column }) => <DataGridColumnHeader title="Currency Name" column={column} />,
@@ -182,6 +200,32 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           headerClassName: 'w-[200px]'
         }
       },
+      {
+        accessorKey: 'detail_statemenet',
+        header: ({ column }) => <DataGridColumnHeader title="Detail Statement" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <div key={`detail_statement-${row.id}`} className="flex gap-2 justify-center">
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => {
+                  setSelectedWallet({
+                    ...row,
+                    ID: row.ID || row.id
+                  });
+                  setShowDetailDialog(true);
+                }}
+              >
+                {' '}
+                <KeenIcon icon="eye" />
+              </button>
+            </div>
+          );
+        }
+      }
       // {
       //   accessorFn: (row) => row.group?.is_bank,
       //   id: 'is_bank',
@@ -219,7 +263,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           if (f.id === 'id_wallet' && f.value) {
             filterParams.id_wallet = f.value;
           }
-          
+
           if (f.id === 'id_group' && f.value) {
             filterParams.id_group = f.value;
           }
@@ -325,6 +369,8 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
     <ManageWalletContext.Provider
       value={{
         wallets,
+        showDetailDialog,
+        setShowDetailDialog,
         showAddDialog,
         handleAddDialog,
         showEditDialog,
@@ -336,6 +382,9 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
+
+      <ShowDetailDialog />
+
       <DataGridProvider
         columns={columns}
         pagination={{ size: 10 }}
@@ -353,4 +402,4 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
 };
 
 export { ManageWalletContext, ManageWalletContextProvider };
-export type { WalletProps };
+export type { WalletProps };