update

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -268,13 +268,16 @@ const DashboardHomePage = () => {
         ) : null}
 
         <div className="flex space-x-4 mt-5">
-          {bankaccount?.data && bankaccount?.data.length > 0 && getAuth()?.statusbalance=='Y' ? (
+          {bankaccount?.data && bankaccount?.data.length > 0 
-            bankaccount?.data.map((bankaccountdatas: { amount: string, creditlimit: string, monthlylimit: string; wallet: string; }, index: number) => (
+          && getAuth()?.statusbalance=='Y' 
+          ? (
+            bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => (
               <BankSaldo
                 title={bankaccountdatas.wallet}
                 balance={bankaccountdatas.amount}
-                creditLimit={bankaccountdatas.creditlimit}
+                creditLimit={bankaccountdatas.credit_limit}
-                monthlyLimit={bankaccountdatas.monthlylimit}
+                monthlyLimit={bankaccountdatas.monthly_limit}
+                idbalance={bankaccountdatas.id_balance}
               />
             ))
           ) : (

src/pages/dashboards/home/blocks/BankSaldo.tsx

@@ -1,20 +1,27 @@
-// BankSaldo.tsx
+import React, { useState } from 'react';
-import { Wallet } from "lucide-react";
+import { Wallet } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import ShowDetailWalletDialog from './ShowDetailWalletDialog';
 
 interface AccountCardProps {
     title: string;
     balance: string;
     creditLimit: string;
     monthlyLimit: string;
+    idbalance: string;
 }
 
-export const BankSaldo = ({
+export const BankSaldo: React.FC<AccountCardProps> = ({
     title,
     balance,
     creditLimit,
     monthlyLimit,
-}: AccountCardProps) => {
+    idbalance,
+}) => {
+    const [showDialog, setShowDialog] = useState(false);
+
     return (
+        <>
             <div className="w-full max-w-xs bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
                 <div className="h-1 bg-red-500" />
                 <div className="p-4 space-y-4">
@@ -23,9 +30,9 @@ export const BankSaldo = ({
                         <Wallet className="h-5 w-5 text-gray-500" />
                     </div>
                     <div className="text-2xl font-bold text-gray-800">
-                    {new Intl.NumberFormat("en-US", {
+                        {new Intl.NumberFormat('en-US', {
-                        style: "currency",
+                            style: 'currency',
-                        currency: "USD",
+                            currency: 'USD',
                             minimumFractionDigits: 2,
                             maximumFractionDigits: 2,
                         }).format(parseFloat(balance))}
@@ -39,24 +46,27 @@ export const BankSaldo = ({
                             <span>Monthly Limit:</span>
                             <span>{monthlyLimit}</span>
                         </div>
+                        <div className="flex justify-between mt-3">
+                            <Button
+                                variant="outline"
+                                className="h-7.5"
+                                onClick={() => setShowDialog(true)}
+                            >
+                                Detail Wallet
+                            </Button>
                         </div>
                     </div>
                 </div>
+            </div>
+
+            {showDialog && (
+                <ShowDetailWalletDialog
+                    open={showDialog}
+                    onClose={() => setShowDialog(false)}
+                    idbalance={idbalance}
+                />
+            )}
+        </>
     );
 };
-
+export default BankSaldo;
-interface AccountCardsProps {
-    accounts: AccountCardProps[];
-}
-
-export const AccountCards = ({ accounts }: AccountCardsProps) => {
-    return (
-        <div className="flex flex-wrap gap-4 justify-center">
-            {accounts.map((account, index) => (
-                <BankSaldo key={index} {...account} />
-            ))}
-        </div>
-    );
-};
-
-export default BankSaldo

src/pages/dashboards/home/blocks/ShowDetailWalletDialog.tsx

@@ -0,0 +1,394 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { DataGridColumnHeader, DataGridProvider } from '@/components';
+import { Button } from '@/components/ui/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { DefaultTooltip, KeenIcon } from '@/components';
+
+interface WalletTransaction {
+    ID: string;
+    transaction_code: string;
+    transaction_type: {
+        id: string;
+        name: string;
+    };
+    type: string;
+    amount: number;
+    pre_amount: number;
+    post_amount: number;
+    category: string;
+    notes: string;
+    date: string;
+    msisdn_reff?: string;
+    purpose?: string;
+}
+
+interface ShowDetailWalletDialogProps {
+    open: boolean;
+    onClose: () => void;
+    idbalance: string;
+}
+
+interface TransferType {
+    id: string;
+    name: string;
+}
+
+const formatDate = (date: Date) => date.toLocaleDateString('sv-SE');
+const getDefaultDateRange = () => {
+    const today = new Date();
+    const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+    return {
+        from: formatDate(sevenDaysAgo),
+        to: formatDate(today),
+    };
+};
+
+const columns = [
+    {
+        accessorKey: 'transaction_code',
+        header: ({ column }: any) => <DataGridColumnHeader title="Transaction Code" column={column} />,
+        enableSorting: false,
+        meta: { headerClassName: 'min-w-[120px]' },
+    },
+    {
+        accessorKey: 'msisdn_reff',
+        header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
+        enableSorting: false,
+        meta: { headerClassName: 'min-w-[120px]' },
+    },
+    {
+        accessorKey: 'transaction_type.name',
+        header: ({ column }: any) => <DataGridColumnHeader title="Transaction Type" column={column} />,
+        enableSorting: false,
+        meta: { headerClassName: 'min-w-[180px]' },
+    },
+    {
+        accessorKey: 'type',
+        header: ({ column }: any) => <DataGridColumnHeader title="Type" column={column} />,
+        enableSorting: false,
+        meta: { headerClassName: 'min-w-[80px]' },
+    },
+    {
+        accessorKey: 'amount',
+        header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
+        enableSorting: false,
+        cell: (info: any) => info.getValue()?.toFixed(2),
+        meta: { headerClassName: 'min-w-[100px]' },
+    },
+    {
+        accessorKey: 'pre_amount',
+        header: ({ column }: any) => <DataGridColumnHeader title="Pre Amount" column={column} />,
+        enableSorting: false,
+        cell: (info: any) => info.getValue()?.toFixed(2),
+        meta: { headerClassName: 'min-w-[100px]' },
+    },
+    {
+        accessorKey: 'post_amount',
+        header: ({ column }: any) => <DataGridColumnHeader title="Post Amount" column={column} />,
+        enableSorting: false,
+        cell: (info: any) => info.getValue()?.toFixed(2),
+        meta: { headerClassName: 'min-w-[100px]' },
+    },
+    {
+        accessorKey: 'category',
+        header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />,
+        enableSorting: false,
+        meta: { headerClassName: 'min-w-[80px]' },
+    },
+    {
+        accessorKey: 'date',
+        header: ({ column }: any) => <DataGridColumnHeader title="Date" column={column} />,
+        enableSorting: false,
+        cell: (info: any) => {
+            const val = info.getValue();
+            if (!val) return '-';
+            return new Date(val).toLocaleString('id-ID', {
+                day: '2-digit',
+                month: 'short',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            });
+        },
+        meta: { headerClassName: 'min-w-[150px]' },
+    },
+    {
+        accessorKey: 'purpose',
+        header: ({ column }: any) => <DataGridColumnHeader title="Purpose" column={column} />,
+        enableSorting: false,
+        cell: (info: any) => info.getValue() || '-',
+        meta: { headerClassName: 'min-w-[200px]' },
+    },
+    {
+        accessorKey: 'notes',
+        header: ({ column }: any) => <DataGridColumnHeader title="Notes" column={column} />,
+        enableSorting: false,
+        cell: (info: any) => info.getValue() || '-',
+        meta: { headerClassName: 'min-w-[200px]' },
+    },
+];
+
+const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
+    open,
+    onClose,
+    idbalance,
+}) => {
+    const { GetData } = useCallApi();
+    const [data, setData] = useState<WalletTransaction[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [dateRange, setDateRange] = useState(getDefaultDateRange());
+    const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const [searchValue, setSearchValue] = useState('');
+    const [transferType, setTransferType] = useState<TransferType[]>([]);
+    const [category, setCategory] = useState<string[]>([]);
+
+    const fetchTransferType = async () => {
+        try {
+            const response = await GetData(`${apiConfig.service_transaction}/transactiontype/list`, {
+                limit: 100,
+                page: 1,
+                with_deleted: false,
+                order_field: 'created_at',
+                order_direction: 'ASC',
+            });
+            setTransferType(response?.data?.list || []);
+        } catch (error) {
+            console.error('Error fetching transfer types', error);
+        }
+    };
+
+    const getDetailList = useCallback(
+        async (
+            limit: number,
+            page: number,
+            with_deleted: boolean,
+            order_field: string,
+            order_direction: string,
+            filter: any
+        ): Promise<WalletTransaction[]> => {
+            if (!idbalance) return [];
+            try {
+                const response = await GetData(
+                    `${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`,
+                    {
+                        limit,
+                        page,
+                        with_deleted,
+                        order_field,
+                        order_direction,
+                        filter: JSON.stringify(filter),
+                    }
+                );
+                return response?.data?.list || [];
+            } catch (error) {
+                console.error('Error fetching wallet detail:', error);
+                return [];
+            }
+        },
+        [GetData, idbalance]
+    );
+
+    const fetchData = useCallback(
+        async (params: {
+            pageIndex: number;
+            pageSize: number;
+            sorting: Array<{ id: string; desc: boolean }>;
+            columnFilters: any;
+        }): Promise<{ data: WalletTransaction[] }> => {
+            // setIsLoading(true);
+            const order_field = params.sorting.length ? params.sorting[0].id : 'date';
+            const order_direction = params.sorting.length && params.sorting[0].desc ? 'DESC' : 'ASC';
+            const result = await getDetailList(
+                params.pageSize,
+                params.pageIndex + 1,
+                false,
+                order_field,
+                order_direction,
+                params.columnFilters
+            );
+            setData(result);
+            setIsLoading(false);
+            return { data: result };
+        },
+        [getDetailList]
+    );
+
+    // Ambil unique category dari data transaksi setelah data di-fetch
+    useEffect(() => {
+        const uniqueCategories = Array.from(
+            new Set(data.map((tx) => tx.category).filter((cat) => !!cat))
+        );
+        setCategory(uniqueCategories);
+    }, [data]);
+
+    const handleTransferTypeChange = (value: string) => {
+        setSelectedTransferType(value === 'all' ? null : value);
+    };
+
+    const handleCategoryChange = (value: string) => {
+        setSelectedCategory(value === '' ? null : value);
+    };
+
+    const handleClearAllFilters = () => {
+        setDateRange(getDefaultDateRange());
+        setSelectedTransferType(null);
+        setSelectedCategory(null);
+        setSearchValue('');
+    };
+
+    useEffect(() => {
+        fetchTransferType();
+    }, []);
+
+    const handleApplyFilter = () => {
+        const filters = [];
+
+        if (dateRange.from) filters.push({ id: 'date', value: { gte: dateRange.from } });
+        if (dateRange.to) filters.push({ id: 'date', value: { lte: dateRange.to } });
+        if (selectedTransferType) filters.push({ id: 'transaction_type.id', value: selectedTransferType });
+        if (selectedCategory) filters.push({ id: 'category', value: selectedCategory });
+        if (searchValue) filters.push({ id: 'transaction_code', value: searchValue });
+
+        console.log(filters);
+
+        fetchData({
+            pageIndex: 0,
+            pageSize: 10,
+            sorting: [{ id: 'date', desc: true }],
+            columnFilters: JSON.stringify(filters),
+        });
+    };
+
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="max-w-[95vw] sm:max-w-[1200px] p-4 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Details Wallet Statement</DialogTitle>
+                </DialogHeader>
+                <DialogBody>
+                    <div className="py-4 max-h-[70vh] overflow-y-auto">
+                        {/* <div className="flex flex-wrap gap-2 lg:gap-5 w-full mb-4">
+                            <div className="flex flex-wrap gap-3 w-full">
+                                <label className="input input-sm w-full sm:w-[160px]">
+                                    From
+                                    <input
+                                        type="date"
+                                        value={dateRange.from}
+                                        onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
+                                    />
+                                </label>
+
+                                <label className="input input-sm w-full sm:w-[160px]">
+                                    To
+                                    <input
+                                        type="date"
+                                        value={dateRange.to}
+                                        onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
+                                    />
+                                </label>
+
+                                <div className="w-full sm:w-[160px]">
+                                    <Select value={selectedTransferType || 'all'} onValueChange={handleTransferTypeChange}>
+                                        <SelectTrigger className="h-[32px]">
+                                            <SelectValue placeholder="Transaction Type" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="all">Select Transaction</SelectItem>
+                                            {transferType.map((transfer) => (
+                                                <SelectItem key={transfer.id} value={transfer.id}>
+                                                    {transfer.name}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                <div className="w-full sm:w-[160px]">
+                                    <Select value={selectedCategory ?? ''} onValueChange={handleCategoryChange}>
+                                        <SelectTrigger className="h-[32px]">
+                                            <SelectValue placeholder="Select Category" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {category.length === 0 ? (
+                                                <div className="text-gray-500 px-4 py-2">No data</div>
+                                            ) : (
+                                                category.map((cat) => (
+                                                    <SelectItem key={cat} value={cat}>
+                                                        {cat}
+                                                    </SelectItem>
+                                                ))
+                                            )}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                <label className="input input-sm w-full sm:w-[160px]">
+                                    <KeenIcon icon="magnifier" />
+                                    <input
+                                        type="text"
+                                        placeholder="Transaction Code"
+                                        className="overflow-hidden text-ellipsis w-full"
+                                        value={searchValue}
+                                        onChange={(e) => setSearchValue(e.target.value)}
+                                    />
+                                </label>
+
+                                <DefaultTooltip title="Reset Filter" placement="top">
+                                    <Button variant="outline" className="h-8" onClick={handleClearAllFilters}>
+                                        <KeenIcon icon="arrow-circle-left" />
+                                    </Button>
+                                </DefaultTooltip>
+                                <Button
+                                    variant="default"
+                                    className="h-8"
+                                    onClick={handleApplyFilter}
+                                >
+                                    <KeenIcon icon="filter" className="mr-2" />
+                                    Apply Filter
+                                </Button>
+
+                            </div>
+                        </div> */}
+
+                        <DataGridProvider
+                            columns={columns}
+                            data={data}
+                            pagination={{ size: 10 }}
+                            toolbar={null}
+                            layout={{ card: true }}
+                            sorting={[{ id: 'date', desc: true }]}
+                            serverSide={false}
+                            onFetchData={async (params) => {
+                                return await fetchData({
+                                    pageIndex: params.pageIndex,
+                                    pageSize: params.pageSize,
+                                    sorting: params.sorting ?? [],
+                                    columnFilters: params.columnFilters ?? [],
+                                });
+                            }}
+                        />
+                    </div>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ShowDetailWalletDialog;