update

src/pages/wallet/wallet-statement/blocks/ShowDetailDialog.tsx

@@ -1,11 +1,16 @@
-import { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Dialog,
   DialogBody,
   DialogContent,
+  DialogDescription,
   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,
@@ -13,277 +18,324 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
-import { useManageStatementContext } from '../hooks/useManageWalletStatementContext';
 import { DefaultTooltip, KeenIcon } from '@/components';
-import { toast } from 'sonner';
+import { useManageStatementContext } from '../hooks/useManageWalletStatementContext';
-import { Button } from '@/components/ui/button';
-import { useCallApi } from '@/hooks';
-import { apiConfig } from '@/config/api.config';
 
-const API_URL_WALLET = apiConfig.service_wallet;
+interface TransferType {
-const API_URL = apiConfig.service_transaction;
-
-interface TransactionType {
   id: string;
   name: string;
 }
 
-interface WalletTransaction {
+const formatDate = (date: Date) => date.toLocaleDateString('sv-SE');
-  ID: string;
+const getDefaultDateRange = () => {
-  id_balance: string;
+  const today = new Date();
-  transaction_code: string;
+  const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
-  transaction_type: {
+  return {
-    id: string;
+    from: formatDate(sevenDaysAgo),
-    name: string;
+    to: formatDate(today)
   };
-  type: string;
+};
-  amount: number;
-  pre_amount: number;
-  post_amount: number;
-  category: string;
-  notes: string;
-  date: string;
-  msisdn_reff: string;
-  purpose: string;
-}
 
-const ShowDialog = () => {
+const ShowDetailWalletDialog = () => {
-  const { showDetailDialog, setShowDetailDialog, selectedWallet } = useManageStatementContext();
-  const [isLoading, setIsLoading] = useState(false);
   const { GetData } = useCallApi();
 
-  const [transactionType, setTransactionType] = useState<TransactionType[]>([]);
+  const { showDetailDialog, setShowDetailDialog, selectedWallet } = useManageStatementContext();
-  const [filteredTransactions, setFilteredTransactions] = useState<WalletTransaction[]>([]);
-
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalItems, setTotalItems] = useState(0);
-  const [totalPages, setTotalPages] = useState(1);
-  const itemsPerPage = 10;
-
-  const getDefaultDateRange = () => {
-    const today = new Date();
-    today.setHours(23, 59, 59, 999);
-
-    const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
-    sevenDaysAgo.setHours(0, 0, 0, 0);
-
-    return {
-      from: formatDate(sevenDaysAgo, true),
-      to: formatDate(today, true)
-    };
-  };
-
-  const formatDate = (date: Date, includeTime = false) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-
-    if (includeTime) {
-      const hours = String(date.getHours()).padStart(2, '0');
-      const minutes = String(date.getMinutes()).padStart(2, '0');
-      const seconds = String(date.getSeconds()).padStart(2, '0');
-      return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
-    }
-
-    return `${year}-${month}-${day}`;
-  };
-
   const [dateRange, setDateRange] = useState(getDefaultDateRange());
-  const [category, setCategory] = useState<TransactionKindValue | null>(null);
+  const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
-  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [transferType, setTransferType] = useState<TransferType[]>([]);
-  const [selectedTransactionType, setSelectedTransactionType] = useState<string>('');
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [searchValue, setSearchValue] = useState('');
+  const [category, setCategory] = useState<string[]>([]);
+  const [transaction, setTransaction] = useState<any[]>([]);
+  const [filters, setFilters] = useState<any>({});
+  console.log(selectedCategory);
 
-  const TransactionKind = {
+  const fetchTransferType = useCallback(async () => {
-    return: 'R',
-    transfer: 'T',
-    purchase: 'P',
-    purchase_loja: 'L',
-    withdraw: 'W',
-    topup: 'U',
-    topup_p24: 'B',
-    topup_partner: 'N',
-    reward: 'E',
-    transfer_agent: 'A',
-    withdraw_agent: 'M',
-    topup_agent: 'O',
-    transfer_p24: 'S',
-    withdraw_merchant: 'I',
-    donation: 'D',
-    fee: 'F',
-    raversal: 'V',
-    cashback_cash: 'C',
-    cashback_point: 'H',
-    withdraw_admin: 'J'
-  };
-
-  type TransactionKindValue = (typeof TransactionKind)[keyof typeof TransactionKind];
-
-  const fetchTransactionType = async () => {
     try {
-      setIsLoading(true);
+      const response = await GetData(`${apiConfig.service_transaction}/transactiontype/list`, {
-      const response = await GetData(`${API_URL}/transactiontype/list`, {
         limit: 100,
         page: 1,
         with_deleted: false,
         order_field: 'created_at',
         order_direction: 'ASC'
       });
-      setTransactionType(
+      (response?.data?.list || []).sort((a: any, b: any) => a.name.localeCompare(b.name));
-        (response?.data?.list || []).sort((a: any, b: any) => a.name.localeCompare(b.name))
-      );
     } catch (error) {
-      console.error('Error fetching Transaction type', error);
+      console.error('Error fetching transfer types', error);
-      toast.error('Failed to load transaction types');
-    } finally {
-      setIsLoading(false);
     }
+  }, [GetData]);
+
+  useEffect(() => {
+    fetchTransferType();
+  }, [fetchTransferType]);
+
+  const categoryMap: Record<string, string> = {
+    T: 'TRANSFER',
+    P: 'PURCHASE',
+    W: 'WITHDRAW',
+    U: 'TOP UP',
+    R: 'RETURN',
+    N: 'TOP UP PARTNER',
+    E: 'REWARD',
+    L: 'PURCHASE LOJA',
+    B: 'TOP UP P24',
+    A: 'TRANSFER AGENT',
+    M: 'WITHDRAWAL AGENT',
+    O: 'TOP UP AGENT',
+    S: 'TRANSFER P24',
+    I: 'WIJTDRAW MERCHANT',
+    D: 'DONATION',
+    F: 'FEE',
+    V: 'REVERSAL',
+    C: 'CASHBACK CASH',
+    H: 'CASHBACK POINT'
   };
 
   useEffect(() => {
-    fetchTransactionType();
+    const uniqueCategories = Array.from(
-  }, []);
+      new Set(
+        transaction
+          .map((tx) => categoryMap[tx.category] || '_')
+          .filter((cat) => !!cat && cat !== '_')
+      )
+    );
 
-  const fetchFilteredTransactions = async () => {
+    setCategory(uniqueCategories);
-    if (!selectedWallet?.ID) return;
+  }, [transaction]);
 
-    setIsLoading(true);
+  const reverseCategoryMap = Object.fromEntries(
-    try {
+    Object.entries(categoryMap).map(([key, value]) => [value, key])
-      let fromDateTime = dateRange.from;
+  );
-      if (!fromDateTime.includes('T')) {
-        const fromDate = new Date(fromDateTime);
-        fromDateTime = formatDate(fromDate, true);
-      }
 
-      let toDateTime = dateRange.to;
+  const handleTransferTypeChange = (value: string) => {
-      if (!toDateTime.includes('T')) {
+    setSelectedTransferType(value === 'all' ? null : value);
-        const toDate = new Date(toDateTime);
-        toDate.setHours(23, 59, 59, 999);
-        toDateTime = formatDate(toDate, true);
-      }
-
-      const response = await GetData(
-        `${API_URL_WALLET}/dashboard/balance/list-balance-detail/${selectedWallet.ID}`,
-        {
-          limit: itemsPerPage,
-          page: currentPage,
-          order_field: 'created_at',
-          order_direction: 'DESC',
-          start_date: fromDateTime,
-          end_date: toDateTime,
-          transaction_type: selectedTransactionType || undefined,
-          category: selectedCategory || undefined,
-          search: searchValue || undefined
-        }
-      );
-      console.log(response);
-      setFilteredTransactions(response?.data?.list || []);
-      setTotalItems(response?.data?.total || 0);
-      setTotalPages(Math.ceil((response?.data?.total || 0) / itemsPerPage));
-    } catch (error) {
-      console.error('Error fetching filtered transactions:', error);
-      toast.error('Failed to load filtered transactions');
-    } finally {
-      setIsLoading(false);
-    }
   };
 
-  useEffect(() => {
+  const handleCategoryChange = (value: string) => {
-    if (!showDetailDialog || !selectedWallet?.ID) return;
+    setSelectedCategory(value === '' ? null : value);
-
-    const timer = setTimeout(() => {
-      fetchFilteredTransactions();
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [
-    showDetailDialog,
-    dateRange.from,
-    dateRange.to,
-    selectedTransactionType,
-    selectedCategory,
-    searchValue,
-    selectedWallet?.ID,
-    currentPage
-  ]);
-
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setSearchValue(value);
-  };
-
-  const handleDateChange = (type: 'from' | 'to', value: string) => {
-    const date = new Date(value);
-
-    if (type === 'from') {
-      date.setHours(0, 0, 0, 0);
-    } else {
-      date.setHours(23, 59, 59, 999);
-    }
-
-    const formattedDate = formatDate(date, true);
-    console.log(`Setting ${type} date to:`, formattedDate);
-    setDateRange((prev) => ({ ...prev, [type]: formattedDate }));
   };
 
   const handleClearAllFilters = () => {
-    const defaultDates = getDefaultDateRange();
+    setDateRange(getDefaultDateRange());
-    console.log('Resetting filters to default:', defaultDates);
+    setSelectedTransferType(null);
-    setDateRange(defaultDates);
+    setSelectedCategory(null);
-    setSelectedTransactionType('');
     setSearchValue('');
-    setSelectedCategory('');
+    setFilters({});
-    setCurrentPage(1);
   };
 
-  const handlePageChange = (page: number) => {
+  const handleApplyFilters = () => {
-    setCurrentPage(page);
+    const appliedFilters: any = {};
+
+    if (dateRange.from && dateRange.to) {
+      const fromDate = new Date(`${dateRange.from}T00:00:00Z`);
+      const toDate = new Date(`${dateRange.to}T23:59:59Z`);
+      appliedFilters.date = {
+        from: fromDate.toISOString(),
+        to: toDate.toISOString()
+      };
+    }
+
+    if (selectedTransferType) {
+      appliedFilters.transaction_type_id = selectedTransferType;
+    }
+
+    if (selectedCategory) {
+      appliedFilters.category = selectedCategory;
+    }
+
+    if (searchValue) {
+      appliedFilters.transaction_code = searchValue;
+    }
+
+    setFilters(appliedFilters);
+    console.log('applied filter :', appliedFilters.category);
   };
 
-  useEffect(() => {
+  const columns = [
-    if (!showDetailDialog) return;
+    {
-
+      accessorKey: 'transaction_code',
-    const checkNewDay = () => {
+      header: ({ column }: any) => (
-      const now = new Date();
+        <DataGridColumnHeader title="Transaction Code" column={column} />
-      const currentDate = formatDate(now);
+      ),
-      const fromDate = new Date(dateRange.from);
+      enableSorting: false,
-
+      meta: { headerClassName: 'min-w-[120px]' }
-      if (
+    },
-        currentDate !== formatDate(new Date(dateRange.to)) &&
+    {
-        now.getTime() - fromDate.getTime() > 7 * 24 * 60 * 60 * 1000
+      accessorKey: 'msisdn_reff',
-      ) {
+      header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
-        setDateRange(getDefaultDateRange());
+      enableSorting: false,
-        toast.info('Date range has been updated to the current period');
+      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]' }
+    },
+    {
+      accessorFn: (row: any) => {
+        switch (row.category) {
+          case 'T':
+            return 'TRANSFER';
+          case 'P':
+            return 'PURCHASE';
+          case 'W':
+            return 'WITHDRAW';
+          case 'U':
+            return 'TOP UP';
+          case 'R':
+            return 'RETURN';
+          case 'N':
+            return 'TOP UP PARTNER';
+          case 'E':
+            return 'REWARD';
+          case 'L':
+            return 'PURCHASE LOJA';
+          case 'B':
+            return 'TOP UP P24';
+          case 'A':
+            return 'TRANSFER AGENT';
+          case 'M':
+            return 'WITHDRAWAL AGENT';
+          case 'O':
+            return 'TOP UP AGENT';
+          case 'S':
+            return 'TRANSFER P24';
+          case 'I':
+            return 'WIJTDRAW MERCHANT';
+          case 'D':
+            return 'DONATION';
+          case 'F':
+            return 'FEE';
+          case 'V':
+            return 'REVERSAL';
+          case 'C':
+            return 'CASHBACK CASH';
+          case 'H':
+            return 'CASHBACK POINT';
+          default:
+            return '_';
+        }
+      },
+      accessorKey: 'category',
+      header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />,
+      enableSorting: false,
+      enableHiding: false,
+      meta: {
+        headerClassName: 'w-[250px]'
       }
-    };
+    },
+    {
+      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]' }
+    }
+  ];
 
-    checkNewDay();
+  const getTransactionLists = useCallback(
+    async (page: number, limit: number, sorting: any, _columnFilters: any) => {
+      try {
+        const response = await GetData(
+          `${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${selectedWallet?.ID}`,
+          {
+            limit,
+            page: page + 1,
+            with_deleted: false,
+            order_field: 'created_at',
+            order_direction: 'DESC',
+            filter: JSON.stringify(filters)
+          }
+        );
 
-    const interval = setInterval(checkNewDay, 60 * 60 * 1000);
+        // console.log(response);
-    return () => clearInterval(interval);
-  }, [showDetailDialog, dateRange]);
 
-  const getDisplayDate = (dateTimeString: string) => {
+        if (!response || !response.data) {
-    if (!dateTimeString) return '';
+          console.warn('No data received:', response);
-    return dateTimeString.split('T')[0];
+          return { data: [], totalCount: 0 };
-  };
+        }
+
+        setTransaction(response.data.list);
+        return { data: response.data.list, totalCount: response.data.total_count };
+      } catch (error) {
+        console.error('Error fetching transaction', error);
+        return { data: [], totalCount: 0 };
+      }
+    },
+    [GetData, filters, selectedWallet]
+  );
 
   return (
     <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
-      <DialogContent className="max-w-[95vw] sm:max-w-[1200px] p-4 overflow-hidden">
+      <DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
         <DialogHeader>
           <DialogTitle>Details Wallet Statement</DialogTitle>
         </DialogHeader>
+        <DialogDescription />
+
         <DialogBody>
-          <div className="py-4 max-h-[90vh] overflow-y-auto overflow-x auto flex flex-wrap gap-2 lg:gap-5 w-full">
+          <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"
-                  placeholder="From"
+                  value={dateRange.from}
-                  value={getDisplayDate(dateRange.from)}
+                  onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
-                  onChange={(e) => handleDateChange('from', e.target.value)}
                 />
               </label>
 
@@ -291,24 +343,24 @@ const ShowDialog = () => {
                 To
                 <input
                   type="date"
-                  placeholder="To"
+                  value={dateRange.to}
-                  value={getDisplayDate(dateRange.to)}
+                  onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
-                  onChange={(e) => handleDateChange('to', e.target.value)}
                 />
               </label>
 
-              <div className="w-full sm:w-[200px]">
+              <div className="w-full sm:w-[160px]">
                 <Select
-                  value={selectedTransactionType}
+                  value={selectedTransferType || 'all'}
-                  onValueChange={(value) => setSelectedTransactionType(value)}
+                  onValueChange={handleTransferTypeChange}
                 >
                   <SelectTrigger className="h-[32px]">
                     <SelectValue placeholder="Transaction Type" />
                   </SelectTrigger>
                   <SelectContent>
-                    {transactionType.map((transaction) => (
+                    <SelectItem value="all">Select Transaction</SelectItem>
-                      <SelectItem key={transaction.id} value={transaction.id}>
+                    {transferType.map((transfer) => (
-                        {transaction.name}
+                      <SelectItem key={transfer.id} value={transfer.id}>
+                        {transfer.name}
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -316,19 +368,20 @@ const ShowDialog = () => {
               </div>
 
               <div className="w-full sm:w-[160px]">
-                <Select
+                <Select value={selectedCategory ?? ''} onValueChange={handleCategoryChange}>
-                  value={selectedCategory}
-                  onValueChange={(value) => setSelectedCategory(value)}
-                >
                   <SelectTrigger className="h-[32px]">
-                    <SelectValue placeholder="Status Kind" />
+                    <SelectValue placeholder="Select Category" />
                   </SelectTrigger>
                   <SelectContent>
-                    {Object.entries(TransactionKind).map(([label, value]) => (
+                    {category.length === 0 ? (
-                      <SelectItem key={value} value={value}>
+                      <div className="text-gray-500 px-4 py-2">No data</div>
-                        {label}
+                    ) : (
-                      </SelectItem>
+                      category.map((cat) => (
-                    ))}
+                        <SelectItem key={cat} value={reverseCategoryMap[cat]}>
+                          {cat}
+                        </SelectItem>
+                      ))
+                    )}
                   </SelectContent>
                 </Select>
               </div>
@@ -340,159 +393,34 @@ const ShowDialog = () => {
                   placeholder="Transaction Code"
                   className="overflow-hidden text-ellipsis w-full"
                   value={searchValue}
-                  onChange={handleSearchChange}
+                  onChange={(e) => setSearchValue(e.target.value)}
                 />
               </label>
 
-              <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+              <DefaultTooltip title="Reset Filter" placement="top">
-                <Button
+                <Button variant="outline" className="h-8" onClick={handleClearAllFilters}>
-                  variant="outline"
-                  className="h-8 disabled:bg-gray-400"
-                  onClick={handleClearAllFilters}
-                >
                   <KeenIcon icon="arrow-circle-left" />
                 </Button>
               </DefaultTooltip>
+
+              <Button variant="outline" className="h-8" onClick={handleApplyFilters}>
+                Filter Data
+              </Button>
             </div>
+          </div>
 
-            {isLoading ? (
+          <div className="py-4 max-h-[70vh] overflow-y-auto">
-              <div className="w-full text-center text-gray-500">Loading details...</div>
+            <DataGridProvider
-            ) : filteredTransactions.length > 0 ? (
+              key={JSON.stringify(filters)}
-              <div className="w-[80%] border overflow-hidden">
+              columns={columns}
-                <div className="overflow-x-auto">
+              pagination={{ size: 5 }}
-                  <table className="w-full border-collapse table-auto">
+              layout={{ card: true }}
-                    <thead>
+              sorting={[{ id: 'id', desc: false }]}
-                      <tr className="bg-gray-100 text-left">
+              serverSide={true}
-                        <th className="p-3 text-sm min-w-[120px] border border-gray-300">
+              onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
-                          Transaction Code
+                getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
-                        </th>
+              }
-                        <th className="p-3 text-sm min-w-[120px] border border-gray-300">
+            />
-                          MSISDN Reffer
-                        </th>
-                        <th className="p-3 text-sm min-w-[180px] border border-gray-300">
-                          Transaction Type
-                        </th>
-                        <th className="p-3 text-sm min-w-[80px] border border-gray-300">Type</th>
-                        <th className="p-3 text-sm min-w-[100px] border border-gray-300">Amount</th>
-                        <th className="p-3 text-sm min-w-[100px] border border-gray-300">
-                          Pre Amount
-                        </th>
-                        <th className="p-3 text-sm min-w-[100px] border border-gray-300">
-                          Post Amount
-                        </th>
-                        <th className="p-3 text-sm min-w-[80px] border border-gray-300">
-                          Status Kind
-                        </th>
-                        <th className="p-3 text-sm min-w-[150px] border border-gray-300">
-                          Date Time
-                        </th>
-                        <th className="p-3 text-sm min-w-[180px] border border-gray-300">Notes</th>
-                        <th className="p-3 text-sm min-w-[180px] border border-gray-300">
-                          Purpose
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {filteredTransactions.map((transaction) => (
-                        <tr key={transaction.ID} className="hover:bg-gray-50">
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.transaction_code}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.msisdn_reff}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.transaction_type?.name || 'N/A'}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">{transaction.type}</td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.amount.toFixed(2)}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.pre_amount.toFixed(2)}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.post_amount.toFixed(2)}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.category}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {new Date(transaction.date).toLocaleString('id-ID', {
-                              day: '2-digit',
-                              month: 'short',
-                              year: 'numeric',
-                              hour: '2-digit',
-                              minute: '2-digit'
-                            })}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.notes || '-'}
-                          </td>
-                          <td className="p-3 text-sm border border-gray-300">
-                            {transaction.purpose || '-'}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            ) : (
-              <div className="text-center text-gray-500 py-10">No transaction data available</div>
-            )}
-            <div className="flex justify-between items-center mt-4 flex-wrap gap-2">
-              <div className="text-sm text-gray-600">
-                Showing {(currentPage - 1) * itemsPerPage + 1} to{' '}
-                {Math.min(currentPage * itemsPerPage, totalItems)} of {totalItems} entries
-              </div>
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
-                  disabled={currentPage === 1}
-                >
-                  Prev
-                </Button>
-
-                <div className="flex items-center gap-1">
-                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                    let pageToShow;
-                    if (totalPages <= 5) {
-                      pageToShow = i + 1;
-                    } else if (currentPage <= 3) {
-                      pageToShow = i + 1;
-                    } else if (currentPage >= totalPages - 2) {
-                      pageToShow = totalPages - 4 + i;
-                    } else {
-                      pageToShow = currentPage - 2 + i;
-                    }
-
-                    return (
-                      <Button
-                        key={pageToShow}
-                        variant={currentPage === pageToShow ? 'default' : 'outline'}
-                        size="sm"
-                        onClick={() => handlePageChange(pageToShow)}
-                        className="w-8 h-8 p-0"
-                      >
-                        {pageToShow}
-                      </Button>
-                    );
-                  })}
-                </div>
-
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
-                  disabled={currentPage === totalPages}
-                >
-                  Next
-                </Button>
-              </div>
-            </div>
           </div>
         </DialogBody>
       </DialogContent>
@@ -500,4 +428,4 @@ const ShowDialog = () => {
   );
 };
 
-export default ShowDialog;
+export default ShowDetailWalletDialog;

src/pages/wallet/wallet-statement/hooks/ManageWalletStatementContext.tsx

@@ -16,7 +16,6 @@ const formatNumber = (num: number): string => {
 
 interface WalletProps {
   ID: string;
-  id: string;
   id_wallet: string;
   name: string;
   id_currency: string;