adding export to excel features in wallet detail dashboard

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

@@ -1,406 +1,489 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import {
-    Dialog,
+  Dialog,
-    DialogBody,
+  DialogBody,
-    DialogContent,
+  DialogContent,
-    DialogDescription,
+  DialogDescription,
-    DialogHeader,
+  DialogHeader,
-    DialogTitle
+  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,
+  Select,
-    SelectContent,
+  SelectContent,
-    SelectItem,
+  SelectItem,
-    SelectTrigger,
+  SelectTrigger,
-    SelectValue,
+  SelectValue
 } from '@/components/ui/select';
 import { DefaultTooltip, KeenIcon } from '@/components';
+import { toAbsoluteUrl } from '@/utils'; 
+import { toast } from 'sonner';
+import * as XLSX from 'xlsx';
+import ExcelJS from 'exceljs';
+import { exportToExcel } from '@/pages/wallet/wallet-statement/details_wallet_statement/ExportData';
 
 interface ShowDetailWalletDialogProps {
-    open: boolean;
+  open: boolean;
-    onClose: () => void;
+  onClose: () => void;
-    idbalance: string;
+  idbalance: string;
 }
 
 interface TransferType {
-    id: string;
+  id: string;
-    name: string;
+  name: string;
 }
 
 const formatDate = (date: Date) => date.toLocaleDateString('sv-SE');
 const getDefaultDateRange = () => {
-    const today = new Date();
+  const today = new Date();
-    const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+  const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
-    return {
+  return {
-        from: formatDate(sevenDaysAgo),
+    from: formatDate(sevenDaysAgo),
-        to: formatDate(today),
+    to: formatDate(today)
-    };
+  };
 };
 
 const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
-    open,
+  open,
-    onClose,
+  onClose,
-    idbalance,
+  idbalance
 }) => {
-    const { GetData } = useCallApi();
+  const { GetData } = useCallApi();
 
-    const [dateRange, setDateRange] = useState(getDefaultDateRange());
+  const [dateRange, setDateRange] = useState(getDefaultDateRange());
-    const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
+  const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
-    const [transferType, setTransferType] = useState<TransferType[]>([]);
+  const [transferType, setTransferType] = useState<TransferType[]>([]);
-    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-    const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState('');
-    const [category, setCategory] = useState<string[]>([]);
+  const [category, setCategory] = useState<string[]>([]);
-    const [transaction, setTransaction] = useState<any[]>([]);
+  const [transaction, setTransaction] = useState<any[]>([]);
-    const [filters, setFilters] = useState<any>({});
+  const [filters, setFilters] = useState<any>({});
 
-    const fetchTransferType = useCallback(async () => {
+  const fetchTransferType = useCallback(async () => {
-        try {
+    try {
-            const response = await GetData(`${apiConfig.service_transaction}/transactiontype/list`, {
+      const response = await GetData(`${apiConfig.service_transaction}/transactiontype/list`, {
-                limit: 100,
+        limit: 100,
-                page: 1,
+        page: 1,
-                with_deleted: false,
+        with_deleted: false,
-                order_field: 'created_at',
+        order_field: 'created_at',
-                order_direction: 'ASC',
+        order_direction: 'ASC'
-            });
+      });
-            setTransferType(response?.data?.list || []);
+      setTransferType(response?.data?.list || []);
-        } catch (error) {
+    } catch (error) {
-            console.error('Error fetching transfer types', error);
+      console.error('Error fetching transfer types', error);
+    }
+  }, [GetData]);
+
+  useEffect(() => {
+    fetchTransferType();
+  }, [fetchTransferType]);
+
+  useEffect(() => {
+    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'
+    };
+
+    const uniqueCategories = Array.from(
+      new Set(
+        transaction
+          .map((tx) => categoryMap[tx.category] || '_') // map code to label or default to '_'
+          .filter((cat) => !!cat && cat !== '_') // remove undefined/null or underscore
+      )
+    );
+
+    setCategory(uniqueCategories);
+  }, [transaction]);
+
+  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('');
+    setFilters({});
+  };
+
+  const handleApplyFilters = () => {
+    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);
+  };
+
+  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: '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: 'amount',
+      header: ({ column }: any) => <DataGridColumnHeader title="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 '_';
         }
-    }, [GetData]);
+      },
+      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]' }
+    }
+  ];
 
-    useEffect(() => {
+  const getTransactionLists = useCallback(
-        fetchTransferType();
+    async (page: number, limit: number, sorting: any, _columnFilters: any) => {
-    }, [fetchTransferType]);
+      // console.log(idbalance);
-    
+      try {
-    useEffect(() => {
+        const response = await GetData(
-        const categoryMap: Record<string, string> = {
+          `${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`,
-            T: 'TRANSFER',
+          {
-            P: 'PURCHASE',
+            limit,
-            W: 'WITHDRAW',
+            page: page + 1,
-            U: 'TOP UP',
+            with_deleted: false,
-            R: 'RETURN',
+            order_field: 'created_at',
-            N: 'TOP UP PARTNER',
+            order_direction: 'DESC',
-            E: 'REWARD',
+            filter: JSON.stringify(filters)
-            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',
-        };
-
-        const uniqueCategories = Array.from(
-            new Set(
-                transaction
-                    .map((tx) => categoryMap[tx.category] || '_') // map code to label or default to '_'
-                    .filter((cat) => !!cat && cat !== '_') // remove undefined/null or underscore
-            )
         );
 
-        setCategory(uniqueCategories);
+        // console.log(response);
-    }, [transaction]);
 
-
+        if (!response || !response.data) {
-    const handleTransferTypeChange = (value: string) => {
+          console.warn('No data received:', response);
-        setSelectedTransferType(value === 'all' ? null : value);
+          return { data: [], totalCount: 0 };
-    };
-
-    const handleCategoryChange = (value: string) => {
-        setSelectedCategory(value === '' ? null : value);
-    };
-
-    const handleClearAllFilters = () => {
-        setDateRange(getDefaultDateRange());
-        setSelectedTransferType(null);
-        setSelectedCategory(null);
-        setSearchValue('');
-        setFilters({});
-    };
-
-    const handleApplyFilters = () => {
-        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) {
+        setTransaction(response.data.list);
-            appliedFilters.transaction_type_id = selectedTransferType;
+        return { data: response.data.list, totalCount: response.data.total_count };
+      } catch (error) {
+        console.error('Error fetching transaction', error);
+        return { data: [], totalCount: 0 };
+      }
+    },
+    [GetData, idbalance, filters]
+  );
+
+  const getAllTransactionData = async () => {
+    try {
+      const response = await GetData(
+        `${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`,
+        {
+          limit: 10000,
+          page: 1,
+          with_deleted: false,
+          order_field: 'created_at',
+          order_direction: 'DESC',
+          filter: JSON.stringify(filters)
         }
+      );
 
-        if (selectedCategory) {
+      return response?.data?.list || [];
-            appliedFilters.category = selectedCategory;
+    } catch (error) {
-        }
+      console.error('Error fetching all transaction data', error);
+      return [];
+    }
+  };
 
-        if (searchValue) {
+  // Tambahkan fungsi handle export excel
-            appliedFilters.transaction_code = searchValue;
+  const handleExportExcel = async () => {
-        }
+    try {
+      const allData = await getAllTransactionData();
+      
+      // Buat objek wallet dummy untuk kompatibilitas dengan fungsi exportToExcel
+      const walletData = {
+        ID: idbalance,
+        name: 'Wallet Details',
+        msisdn: '-'
+      };
 
-        setFilters(appliedFilters);
+      await exportToExcel(allData, walletData);
-    };
+    } catch (error) {
+      console.error('Error exporting to Excel:', error);
+      toast.error('Failed to export Excel');
+    }
+  };
 
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Details Wallet Statement</DialogTitle>
+        </DialogHeader>
+        <DialogDescription />
 
-    const columns = [
+        <DialogBody>
-        {
+          <div className="flex flex-wrap gap-2 lg:gap-5 w-full mb-4">
-            accessorKey: 'transaction_code',
+            <div className="flex flex-wrap gap-3 w-full">
-            header: ({ column }: any) => <DataGridColumnHeader title="Transaction Code" column={column} />,
+              <label className="input input-sm w-full sm:w-[160px]">
-            enableSorting: false,
+                From
-            meta: { headerClassName: 'min-w-[120px]' },
+                <input
-        },
+                  type="date"
-        {
+                  value={dateRange.from}
-            accessorKey: 'msisdn_reff',
+                  onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
-            header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
+                />
-            enableSorting: false,
+              </label>
-            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: '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: 'amount',
-            header: ({ column }: any) => <DataGridColumnHeader title="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]' },
-        },
-    ];
 
-    const getTransactionLists = useCallback(
+              <label className="input input-sm w-full sm:w-[160px]">
-        async (page: number, limit: number, sorting: any, _columnFilters: any) => {
+                To
-            // console.log(idbalance);
+                <input
-            try {
+                  type="date"
-                const response = await GetData(`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`, {
+                  value={dateRange.to}
-                    limit,
+                  onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
-                    page: page + 1,
+                />
-                    with_deleted: false,
+              </label>
-                    order_field: "created_at",
-                    order_direction: 'DESC',
-                    filter: JSON.stringify(filters)
-                });
 
-                // console.log(response);
+              <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>
 
-                if (!response || !response.data) {
+              <div className="w-full sm:w-[160px]">
-                    console.warn('No data received:', response);
+                <Select value={selectedCategory ?? ''} onValueChange={handleCategoryChange}>
-                    return { data: [], totalCount: 0 };
+                  <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>
 
-                setTransaction(response.data.list);
+              <label className="input input-sm w-full sm:w-[160px]">
-                return { data: response.data.list, totalCount: response.data.total_count };
+                <KeenIcon icon="magnifier" />
-            } catch (error) {
+                <input
-                console.error('Error fetching transaction', error);
+                  type="text"
-                return { data: [], totalCount: 0 };
+                  placeholder="Transaction Code"
-            }
+                  className="overflow-hidden text-ellipsis w-full"
-        },
+                  value={searchValue}
-        [GetData, idbalance, filters]
+                  onChange={(e) => setSearchValue(e.target.value)}
-    );
+                />
+              </label>
 
-    return (
+              <DefaultTooltip title="Reset Filter" placement="top">
-        <Dialog open={open} onOpenChange={onClose}>
+                <Button variant="outline" className="h-8" onClick={handleClearAllFilters}>
-            <DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
+                  <KeenIcon icon="arrow-circle-left" />
-                <DialogHeader>
+                </Button>
-                    <DialogTitle>Details Wallet Statement</DialogTitle>
+              </DefaultTooltip>
-                </DialogHeader>
-                <DialogDescription />
 
-                <DialogBody>
+              <Button variant="default" className="h-8" onClick={handleApplyFilters}>
-                    <div className="flex flex-wrap gap-2 lg:gap-5 w-full mb-4">
+                Filter Data
-                        <div className="flex flex-wrap gap-3 w-full">
+              </Button>
-                            <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]">
+              <DefaultTooltip title={'Export to Excel'} placement={'top'}>
-                                To
+                <Button
-                                <input
+                  variant={'outline'}
-                                    type="date"
+                  className="h-7.5 min-w-[58px]"
-                                    value={dateRange.to}
+                  onClick={handleExportExcel}
-                                    onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
+                >
-                                />
+                  <img src={toAbsoluteUrl('/media/file-types/xls.svg')} className="" alt="Excel" />
-                            </label>
+                </Button>
+              </DefaultTooltip>
+            </div>
+          </div>
 
-                            <div className="w-full sm:w-[160px]">
+          <div className="py-4 max-h-[70vh] overflow-y-auto">
-                                <Select value={selectedTransferType || 'all'} onValueChange={handleTransferTypeChange}>
+            <DataGridProvider
-                                    <SelectTrigger className="h-[32px]">
+              key={JSON.stringify(filters)}
-                                        <SelectValue placeholder="Transaction Type" />
+              columns={columns}
-                                    </SelectTrigger>
+              pagination={{ size: 5 }}
-                                    <SelectContent>
+              layout={{ card: true }}
-                                        <SelectItem value="all">Select Transaction</SelectItem>
+              sorting={[{ id: 'id', desc: false }]}
-                                        {transferType.map((transfer) => (
+              serverSide={true}
-                                            <SelectItem key={transfer.id} value={transfer.id}>
+              onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
-                                                {transfer.name}
+                getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
-                                            </SelectItem>
+              }
-                                        ))}
+            />
-                                    </SelectContent>
+          </div>
-                                </Select>
+        </DialogBody>
-                            </div>
+      </DialogContent>
-
+    </Dialog>
-                            <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="outline" className="h-8" onClick={handleApplyFilters}>
-                                Filter Data
-                            </Button>
-                        </div>
-                    </div>
-
-                    <div className="py-4 max-h-[70vh] overflow-y-auto">
-                        <DataGridProvider
-                            key={JSON.stringify(filters)}
-                            columns={columns}
-                            pagination={{ size: 5 }}
-                            layout={{ card: true }}
-                            sorting={[{ id: 'id', desc: false }]}
-                            serverSide={true}
-                            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
-                                getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
-                            }
-                        />
-                    </div>
-                </DialogBody>
-            </DialogContent>
-        </Dialog>
-    );
 };
 
 export default ShowDetailWalletDialog;

src/pages/wallet/wallet-statement/details_wallet_statement/ExportData.tsx

@@ -56,7 +56,7 @@ export const formatTransactionData = (data: TransactionItem[]) => {
   return data.map((item) => ({
     'Transaction Code': item.transaction_code || '-',
     'MSISDN Reffer': item.msisdn_reff || '-',
-    'Transaction Type': item.transaction_type?.name || '-',
+    'Transaction Type': item.transaction_type?.name || '-', 
     Type: item.type || '-',
     'Pre Amount': item.pre_amount?.toFixed(2) || '0.00',
     Amount: item.amount?.toFixed(2) || '0.00',