diff --git a/package.json b/package.json
index bc73844..be06bb0 100644
--- a/package.json
+++ b/package.json
@@ -50,10 +50,13 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "date-fns": "^3.0.0",
+    "file-saver": "^2.0.5",
     "formik": "^2.4.6",
     "helmet": "^8.1.0",
     "html2canvas": "^1.4.1",
     "https": "^1.0.0",
+    "jspdf": "^3.0.1",
+    "jspdf-autotable": "^5.0.2",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.456.0",
     "metronic-tailwind-react": "file:",
@@ -86,10 +89,12 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "vite-plugin-windicss": "^1.9.3",
+    "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",
+    "@types/file-saver": "^2.0.7",
     "@types/leaflet": "^1.9.14",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
diff --git a/public/media/avatars/KopDetailWalletStatement.png b/public/media/avatars/KopDetailWalletStatement.png
new file mode 100644
index 0000000..a2c150b
Binary files /dev/null and b/public/media/avatars/KopDetailWalletStatement.png differ
diff --git a/src/auth/pages/jwt/Login.tsx b/src/auth/pages/jwt/Login.tsx
index f15ae46..fec6898 100644
--- a/src/auth/pages/jwt/Login.tsx
+++ b/src/auth/pages/jwt/Login.tsx
@@ -17,12 +17,16 @@ const loginSchema = Yup.object().shape({
     .min(3, 'Minimum 3 symbols')
     .max(50, 'Maximum 50 symbols')
     .required('Password is required'),
+  token: Yup.string(),
+  // .max(3, 'Maximum 6 code'),
+  // .required('Token is required'),
   remember: Yup.boolean()
 });
 
 const initialValues = {
   username: '',
   password: '',
+  token: '',
   remember: false
 };
 
@@ -43,7 +47,7 @@ const Login = () => {
 
       try {
         if (!login) throw new Error('JWTProvider is required for this form.');
-        await login(values.username, values.password);
+        await login(values.username, values.password, values.token);
 
         if (values.remember) {
           localStorage.setItem('username', values.username);
@@ -141,6 +145,33 @@ const Login = () => {
             )}
           </div>
 
+          <div className="flex flex-col gap-1">
+            <label className="form-label text-gray-900 ps-2.5">Code Verify</label>
+            <label className="input">
+              <input
+                placeholder="Enter code verify"
+                type="text"
+                inputMode="numeric"
+                autoComplete="off"
+                maxLength={6}
+                {...formik.getFieldProps('token')}
+                className={clsx('form-control', {
+                  'is-invalid': formik.touched.token && formik.errors.token
+                })}
+                onKeyPress={(e) => {
+                  if (!/[0-9]/.test(e.key)) {
+                    e.preventDefault();
+                  }
+                }}
+              />
+            </label>
+            {formik.touched.token && formik.errors.token && (
+              <span role="alert" className="text-danger text-xs mt-1">
+                {formik.errors.token}
+              </span>
+            )}
+          </div>
+
           <div className="flex items-center justify-between gap-1">
             <label className="checkbox-group">
               <input
diff --git a/src/auth/providers/JWTProvider.tsx b/src/auth/providers/JWTProvider.tsx
index 8cba25e..b580279 100644
--- a/src/auth/providers/JWTProvider.tsx
+++ b/src/auth/providers/JWTProvider.tsx
@@ -28,7 +28,7 @@ interface AuthContextProps {
   saveAuth: (auth: AuthModel | undefined) => void;
   currentUser: UserModel | undefined;
   setCurrentUser: Dispatch<SetStateAction<UserModel | undefined>>;
-  login: (email: string, password: string) => Promise<void>;
+  login: (email: string, password: string, token?: string) => Promise<void>;
   requestPasswordResetLink: (email: string) => Promise<void>;
   changePassword: (token: string, password: string, password_confirmation: string) => Promise<void>;
   getUser: () => Promise<AxiosResponse<any> | {}>;
@@ -52,10 +52,10 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
     }
   };
 
-  const login = async (username: string, password: string) => {
+  const login = async (username: string, password: string, token?: string) => {
     try {
       const { data: auth } = await axios
-        .post(LOGIN_URL, { username, password })
+        .post(LOGIN_URL, { username, password, token })
         .then((response) => response.data);
 
       const enhancedAuth: AuthModel = {
@@ -63,7 +63,7 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
         id: auth.user.id,
         role_name: auth.role_name,
         user: auth.user,
-        statusbalance: auth.role?.status_balance ?? null  // SAFE ACCESS
+        statusbalance: auth.role?.status_balance ?? null // SAFE ACCESS
       };
 
       saveAuth(enhancedAuth);
@@ -161,4 +161,4 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
   );
 };
 
-export { AuthContext, AuthProvider };
\ No newline at end of file
+export { AuthContext, AuthProvider };
diff --git a/src/pages/account/home/user-profile/blocks/GenerateQr.tsx b/src/pages/account/home/user-profile/blocks/GenerateQr.tsx
index f8fba97..a656cb0 100644
--- a/src/pages/account/home/user-profile/blocks/GenerateQr.tsx
+++ b/src/pages/account/home/user-profile/blocks/GenerateQr.tsx
@@ -68,6 +68,7 @@ const GenerateQr = () => {
       toast.error('Something went wrong, please try again');
     } finally {
       setIsSubmitting(false);
+      setQrCodeUrl(null);
     }
   };
 
diff --git a/src/pages/notification/blocks/AddDialog.tsx b/src/pages/notification/blocks/AddDialog.tsx
index 9036f2d..2e9322c 100644
--- a/src/pages/notification/blocks/AddDialog.tsx
+++ b/src/pages/notification/blocks/AddDialog.tsx
@@ -28,6 +28,7 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog';
 import { Check, ChevronDown } from 'lucide-react';
 import { initialStateNotification, selectedNotification, validateFormNotification } from './Types';
+import { useDebounce } from './useDebounce';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_NOTIFICATION = apiConfig.service_notification;
@@ -39,6 +40,8 @@ const AddDialog = () => {
   const [alert, setAlert] = useState({ show: false, message: '' });
   const isSubmittingRef = useRef(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearchQuery = useDebounce(searchQuery, 500);
 
   const [formField, setFormField] = useState<selectedNotification>(initialStateNotification);
   const [open, setOpen] = useState(false);
@@ -95,7 +98,6 @@ const AddDialog = () => {
         }
       } catch (err) {
         toast.error('Something went wrong');
-        console.log(err);
       } finally {
         isSubmittingRef.current = false;
         setIsSubmitting(false);
@@ -104,22 +106,35 @@ const AddDialog = () => {
     [PostData, formField, handleAddDialog, reload]
   );
 
-  const getCustomerList = async (sorting: any) => {
-    try {
-      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
-        limit: 100,
-        page: 1,
-        with_deleted: false,
-        order_field: sorting[0].id,
-        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-      });
+  useEffect(() => {
+    const fetchCustomers = async () => {
+      try {
+        const filters = [];
 
-      setCustomers(response?.data.list);
-    } catch (error) {
-      console.error('Error fetching customer', error);
-    }
-  };
+        if (debouncedSearchQuery) {
+          filters.push({
+            id: 'fullname',
+            value: debouncedSearchQuery
+          });
+        }
+
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 1000,
+          page: 1,
+          with_deleted: false,
+          order_field: 'fullname',
+          order_direction: 'ASC',
+          filter: JSON.stringify(filters),
+          specialFilter: filters.length > 0
+        });
+        setCustomers(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching customers', error);
+      }
+    };
+
+    fetchCustomers();
+  }, [debouncedSearchQuery]);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -127,10 +142,6 @@ const AddDialog = () => {
     doCreateNotification(e);
   };
 
-  useEffect(() => {
-    getCustomerList([{ id: 'id', desc: false }]);
-  }, []);
-
   useEffect(() => {
     if (showAddDialog === false) {
       resetForm();
@@ -217,7 +228,11 @@ const AddDialog = () => {
                     </PopoverTrigger>
                     <PopoverContent className="w-[400px] p-0">
                       <Command>
-                        <CommandInput placeholder="Search Customer..." />
+                        <CommandInput
+                          placeholder="Search Customer..."
+                          value={searchQuery}
+                          onValueChange={setSearchQuery}
+                        />
                         <CommandList
                           className="max-h-[300px] overflow-y-auto"
                           style={{ touchAction: 'pan-y' }}
@@ -232,24 +247,20 @@ const AddDialog = () => {
                               return (
                                 <CommandItem
                                   key={customer.id}
-                                  value={customer.username}
+                                  value={customer.fullname}
                                   onSelect={() => {
-                                    const customerId = customer.id;
-                                    setFormField((prev) => {
-                                      const isSelected = prev.customers.includes(customerId);
-                                      return {
-                                        ...prev,
-                                        customers: isSelected
-                                          ? prev.customers.filter((id) => id !== customerId)
-                                          : [...prev.customers, customerId]
-                                      };
-                                    });
+                                    setFormField((prev) => ({
+                                      ...prev,
+                                      customers: isSelected
+                                        ? prev.customers.filter((id) => id !== customer.id)
+                                        : [...prev.customers, customer.id]
+                                    }));
                                   }}
                                   className={isSelected ? 'bg-accent font-semibold' : ''}
                                 >
                                   <span className="flex items-center gap-2">
                                     {isSelected && <Check className="w-4 h-4 text-green-600" />}
-                                    {customer.username}
+                                    {customer.fullname} ({customer.msisdn})
                                   </span>
                                 </CommandItem>
                               );
diff --git a/src/pages/notification/blocks/useDebounce.tsx b/src/pages/notification/blocks/useDebounce.tsx
new file mode 100644
index 0000000..2605ca6
--- /dev/null
+++ b/src/pages/notification/blocks/useDebounce.tsx
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
\ No newline at end of file
diff --git a/src/pages/notification/hooks/ManageNotificationContext.tsx b/src/pages/notification/hooks/ManageNotificationContext.tsx
index c4995f3..b6b7ca4 100644
--- a/src/pages/notification/hooks/ManageNotificationContext.tsx
+++ b/src/pages/notification/hooks/ManageNotificationContext.tsx
@@ -158,7 +158,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
   const getNotificationList = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
-      const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
+      const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'ASC' : 'DESC') : 'ASC';
 
       // Initialize filter object
       let filterParams: any = {};
@@ -219,7 +219,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
           pagination={{ size: 10 }}
           toolbar={<ListToolBar />}
           layout={{ card: true }}
-          sorting={[{ id: 'created_at', desc: true }]}
+          sorting={[{ id: 'created_at', desc: false }]}
           serverSide={true}
           onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
             getNotificationList(pageIndex, pageSize, sorting, columnFilters)
diff --git a/src/pages/wallet/wallet-statement/blocks/FilterSection.tsx b/src/pages/wallet/wallet-statement/blocks/FilterSection.tsx
index e2b4084..d4224e1 100644
--- a/src/pages/wallet/wallet-statement/blocks/FilterSection.tsx
+++ b/src/pages/wallet/wallet-statement/blocks/FilterSection.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useContext } from 'react';
 import { Button } from '@/components/ui/button';
 import {
   Select,
@@ -11,6 +11,7 @@ import { DefaultTooltip, KeenIcon } from '@/components';
 import { toAbsoluteUrl } from '@/utils';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
+import { showDetailWalletContext } from './ShowDetailDialog';
 
 interface TransferType {
   id: string;
@@ -40,24 +41,44 @@ const FilterSection: React.FC<FilterSectionProps> = ({
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [category, setCategory] = useState<string[]>([]);
   const [searchValue, setSearchValue] = useState('');
+  const { doExportExcel, doExportPDF } = useContext(showDetailWalletContext);
+
+  const handleExportExcel = async () => {
+    try {
+      await doExportExcel();
+      // console.log('Excel export initiated successfully');
+    } catch (error) {
+      console.error('Error during Excel export:', error);
+    }
+  };
+
+  const handleExportPDF = async () => {
+    try {
+      await doExportPDF();
+      // console.log('PDF export initiated successfully');
+    } catch (error) {
+      console.error('Error during PDF export:', error);
+    }
+  };
 
   const fetchTransferType = useCallback(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'
-    });
-    
-    const sortedData = (response?.data?.list || [])
-      .sort((a: any, b: any) => a.name.localeCompare(b.name));
-    setTransferType(sortedData);
-  } catch (error) {
-    console.error('Error fetching transfer types', error);
-  }
-}, [GetData]);
+    try {
+      const response = await GetData(`${apiConfig.service_transaction}/transactiontype/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'ASC'
+      });
+
+      const sortedData = (response?.data?.list || []).sort((a: any, b: any) =>
+        a.name.localeCompare(b.name)
+      );
+      setTransferType(sortedData);
+    } catch (error) {
+      console.error('Error fetching transfer types', error);
+    }
+  }, [GetData]);
 
   useEffect(() => {
     fetchTransferType();
@@ -70,8 +91,8 @@ const FilterSection: React.FC<FilterSectionProps> = ({
   );
 
   useEffect(() => {
-  setCategory(categories);
-}, [transaction, categoryMap]);
+    setCategory(categories);
+  }, [transaction, categoryMap]);
 
   const reverseCategoryMap = Object.fromEntries(
     Object.entries(categoryMap).map(([key, value]) => [value, key])
@@ -108,7 +129,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({
       };
     }
 
-   if (selectedTransferType) {
+    if (selectedTransferType) {
       appliedFilters.id_transaction_type = selectedTransferType;
     }
 
@@ -200,20 +221,22 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           Filter Data
         </Button>
 
-        <DefaultTooltip title={'Export Data'} placement={'top'}>
-          <Button variant={'outline'} className="h-7.5 min-w-[58px]">
-            <img src={toAbsoluteUrl('/media/file-types/xls.svg')} className="" alt="" />
-          </Button>
-        </DefaultTooltip>
+        <div className="flex gap-2">
+          <DefaultTooltip title={'Export to Excel'} placement={'top'}>
+            <Button variant={'outline'} className="h-7.5 min-w-[58px]" onClick={handleExportExcel}>
+              <img src={toAbsoluteUrl('/media/file-types/xls.svg')} className="" alt="Excel" />
+            </Button>
+          </DefaultTooltip>
 
-        <DefaultTooltip title={'Export Data'} placement={'top'}>
-          <Button variant={'outline'} className="h-7.5 min-w-[58px]">
-            <img src={toAbsoluteUrl('/media/file-types/pdf.svg')} className="" alt="" />
-          </Button>
-        </DefaultTooltip>
+          <DefaultTooltip title={'Export to PDF'} placement={'top'}>
+            <Button variant={'outline'} className="h-7.5 min-w-[58px]" onClick={handleExportPDF}>
+              <img src={toAbsoluteUrl('/media/file-types/pdf.svg')} className="" alt="PDF" />
+            </Button>
+          </DefaultTooltip>
+        </div>
       </div>
     </div>
   );
 };
 
-export default FilterSection;
\ No newline at end of file
+export default FilterSection;
diff --git a/src/pages/wallet/wallet-statement/blocks/ShowDetailDialog.tsx b/src/pages/wallet/wallet-statement/blocks/ShowDetailDialog.tsx
index 64e6521..2cd58be 100644
--- a/src/pages/wallet/wallet-statement/blocks/ShowDetailDialog.tsx
+++ b/src/pages/wallet/wallet-statement/blocks/ShowDetailDialog.tsx
@@ -11,16 +11,29 @@ import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { DataGridColumnHeader, DataGridProvider } from '@/components';
 import { useManageStatementContext } from '../hooks/useManageWalletStatementContext';
-import { Toaster } from 'sonner';
+import { toast, Toaster } from 'sonner';
 import { format } from 'date-fns';
 import FilterSection from './FilterSection';
+import * as XLSX from 'xlsx';
+import jsPDF from 'jspdf';
+import 'jspdf-autotable';
+
+interface AutoTableData {
+  pageNumber: number;
+  table: any;
+  doc: jsPDF;
+}
 
 interface ContextProps {
   doExportData: (sorting: any, filter: any) => Promise<any>;
+  doExportExcel: () => Promise<void>;
+  doExportPDF: () => Promise<void>;
 }
 
 const initialProps: ContextProps = {
-  doExportData: async () => ({ data: [], totalCount: 0 })
+  doExportData: async () => ({ data: [], totalCount: 0 }),
+  doExportExcel: async () => {},
+  doExportPDF: async () => {}
 };
 
 export const showDetailWalletContext = createContext<ContextProps>(initialProps);
@@ -174,6 +187,336 @@ const ShowDetailWalletDialog = () => {
     [GetData, filters, selectedWallet]
   );
 
+  const getAllTransactionData = async () => {
+    try {
+      const response = await GetData(
+        `${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${selectedWallet?.ID}`,
+        {
+          limit: 10000,
+          page: 1,
+          with_deleted: false,
+          order_field: 'amount',
+          order_direction: 'DESC',
+          filter: JSON.stringify(filters)
+        }
+      );
+
+      return response?.data?.list || [];
+    } catch (error) {
+      console.error('Error fetching all transaction data', error);
+      return [];
+    }
+  };
+
+  const formatTransactionData = (data: any[]) => {
+    return data.map((item) => ({
+      'Transaction Code': item.transaction_code || '-',
+      'MSISDN Reffer': item.msisdn_reff || '-',
+      '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',
+      'Post Amount': item.post_amount?.toFixed(2) || '0.00',
+      Category: categoryMap[item.category] || '-',
+      Date: item.date
+        ? new Date(item.date).toLocaleString('id-ID', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+          })
+        : '-',
+      Purpose: item.purpose || '-',
+      Notes: item.notes || '-'
+    }));
+  };
+
+  const doExportExcel = async () => {
+    try {
+      const allData = await getAllTransactionData();
+      const formattedData = formatTransactionData(allData);
+
+      const wb = XLSX.utils.book_new();
+
+      const ws = XLSX.utils.json_to_sheet([]);
+
+      const companyHeader = [
+        ['T•PAY'],
+        ['Telin Digital Solution'],
+        ['Av. Pres. Nicolau Lobato, Dili'],
+        ['Tel: (+670) 74147147 / 147'],
+        ['www.t-pay.tl'],
+        [''],
+        ['Wallet Statement Details'],
+        [`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`],
+        [`Wallet ID: ${selectedWallet?.ID || '-'}`],
+        ['']
+      ];
+
+      const columnHeaders = [
+        [
+          'Transaction Code',
+          'MSISDN Reffer',
+          'Transaction Type',
+          'Type',
+          'Pre Amount',
+          'Amount',
+          'Post Amount',
+          'Category',
+          'Date',
+          'Purpose',
+          'Notes'
+        ]
+      ];
+
+      const excelData = [
+        ...companyHeader,
+        ...columnHeaders,
+        ...formattedData.map((item) => Object.values(item))
+      ];
+
+      XLSX.utils.sheet_add_aoa(ws, excelData);
+
+      const colWidths = [
+        { wch: 20 },
+        { wch: 15 },
+        { wch: 25 },
+        { wch: 10 },
+        { wch: 12 },
+        { wch: 12 },
+        { wch: 12 },
+        { wch: 15 },
+        { wch: 20 },
+        { wch: 25 },
+        { wch: 25 }
+      ];
+      ws['!cols'] = colWidths;
+
+      const tpayCell = XLSX.utils.encode_cell({ r: 0, c: 0 });
+      if (ws[tpayCell]) {
+        ws[tpayCell].s = {
+          font: { bold: true, sz: 18, color: { rgb: '000000' } },
+          alignment: { horizontal: 'center' },
+          fill: { fgColor: { rgb: 'F4C2C2' } }
+        };
+      }
+
+      for (let i = 1; i < 5; i++) {
+        const cellRef = XLSX.utils.encode_cell({ r: i, c: 0 });
+        if (ws[cellRef]) {
+          ws[cellRef].s = {
+            font: { sz: 12, color: { rgb: '000000' } },
+            alignment: { horizontal: 'center' },
+            fill: { fgColor: { rgb: 'F4C2C2' } }
+          };
+        }
+      }
+
+      const titleCell = XLSX.utils.encode_cell({ r: 6, c: 0 });
+      if (ws[titleCell]) {
+        ws[titleCell].s = {
+          font: { bold: true, sz: 14 },
+          alignment: { horizontal: 'center' }
+        };
+      }
+
+      for (let i = 7; i < 9; i++) {
+        const cellRef = XLSX.utils.encode_cell({ r: i, c: 0 });
+        if (ws[cellRef]) {
+          ws[cellRef].s = {
+            font: { sz: 11 },
+            alignment: { horizontal: 'left' }
+          };
+        }
+      }
+
+      for (let i = 0; i < 6; i++) {
+        const range = XLSX.utils.encode_range({ s: { r: i, c: 0 }, e: { r: i, c: 10 } });
+        if (!ws['!merges']) ws['!merges'] = [];
+        ws['!merges'].push(XLSX.utils.decode_range(range));
+      }
+
+      for (let col = 0; col < columnHeaders[0].length; col++) {
+        const cellRef = XLSX.utils.encode_cell({ r: 10, c: col });
+        if (ws[cellRef]) {
+          ws[cellRef].s = {
+            font: { bold: true, color: { rgb: 'FFFFFF' } },
+            fill: { fgColor: { rgb: '4472C4' } },
+            alignment: { horizontal: 'center' },
+            border: {
+              top: { style: 'thin', color: { rgb: '000000' } },
+              bottom: { style: 'thin', color: { rgb: '000000' } },
+              left: { style: 'thin', color: { rgb: '000000' } },
+              right: { style: 'thin', color: { rgb: '000000' } }
+            }
+          };
+        }
+      }
+
+      for (let row = 11; row < 11 + formattedData.length; row++) {
+        for (let col = 0; col < columnHeaders[0].length; col++) {
+          const cellRef = XLSX.utils.encode_cell({ r: row, c: col });
+          if (ws[cellRef]) {
+            ws[cellRef].s = {
+              border: {
+                top: { style: 'thin', color: { rgb: 'D9D9D9' } },
+                bottom: { style: 'thin', color: { rgb: 'D9D9D9' } },
+                left: { style: 'thin', color: { rgb: 'D9D9D9' } },
+                right: { style: 'thin', color: { rgb: 'D9D9D9' } }
+              }
+            };
+
+            if ([4, 5, 6].includes(col)) {
+              ws[cellRef].s.alignment = { horizontal: 'right' };
+            }
+          }
+        }
+      }
+
+      XLSX.utils.book_append_sheet(wb, ws, 'Wallet Statement');
+
+      const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.xlsx`;
+      XLSX.writeFile(wb, fileName);
+
+      // console.log('Excel export completed successfully');
+    } catch (error) {
+      console.error('Error exporting to Excel:', error);
+    }
+  };
+
+  // Perbaikan untuk fungsi doExportPDF
+const doExportPDF = async () => {
+  try {
+    // Import jsPDF dengan cara yang benar
+    const jsPDF = (await import('jspdf')).default;
+    
+    // Import autoTable plugin
+    const autoTable = (await import('jspdf-autotable')).default;
+    
+    const allData = await getAllTransactionData();
+    const formattedData = formatTransactionData(allData);
+
+    // Buat instance jsPDF
+    const pdf = new jsPDF({
+      orientation: 'landscape', // Ubah ke landscape untuk tabel yang lebar
+      unit: 'mm',
+      format: 'a4'
+    });
+
+    // Header perusahaan
+    pdf.setFontSize(18);
+    pdf.setFont('helvetica', 'bold');
+    pdf.text('T•PAY', pdf.internal.pageSize.getWidth() / 2, 20, { align: 'center' });
+    
+    pdf.setFontSize(12);
+    pdf.setFont('helvetica', 'normal');
+    pdf.text('Telin Digital Solution', pdf.internal.pageSize.getWidth() / 2, 28, { align: 'center' });
+    pdf.text('Av. Pres. Nicolau Lobato, Dili', pdf.internal.pageSize.getWidth() / 2, 34, { align: 'center' });
+    pdf.text('Tel: (+670) 74147147 / 147', pdf.internal.pageSize.getWidth() / 2, 40, { align: 'center' });
+    pdf.text('www.t-pay.tl', pdf.internal.pageSize.getWidth() / 2, 46, { align: 'center' });
+
+    // Garis pemisah
+    pdf.setDrawColor(0, 0, 0);
+    pdf.setLineWidth(0.5);
+    pdf.line(20, 52, pdf.internal.pageSize.getWidth() - 20, 52);
+
+    // Judul laporan
+    pdf.setFontSize(16);
+    pdf.setFont('helvetica', 'bold');
+    pdf.text('Wallet Statement Details', pdf.internal.pageSize.getWidth() / 2, 62, { align: 'center' });
+
+    // Informasi tambahan
+    pdf.setFontSize(10);
+    pdf.setFont('helvetica', 'normal');
+    pdf.text(`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`, 20, 72);
+    pdf.text(`Wallet ID: ${selectedWallet?.ID || '-'}`, 20, 78);
+
+    // Siapkan data tabel
+    const tableHeaders = [
+      'Transaction Code',
+      'MSISDN Reffer', 
+      'Transaction Type',
+      'Type',
+      'Pre Amount',
+      'Amount',
+      'Post Amount',
+      'Category',
+      'Date',
+      'Purpose',
+      'Notes'
+    ];
+
+    const tableData = formattedData.map((item) => [
+      item['Transaction Code'],
+      item['MSISDN Reffer'],
+      item['Transaction Type'],
+      item['Type'],
+      item['Pre Amount'],
+      item['Amount'],
+      item['Post Amount'],
+      item['Category'],
+      item['Date'],
+      item['Purpose'],
+      item['Notes']
+    ]);
+
+    // Gunakan autoTable dengan cara yang benar
+    autoTable(pdf, {
+      head: [tableHeaders],
+      body: tableData,
+      startY: 85,
+      styles: {
+        fontSize: 7,
+        cellPadding: 2,
+        overflow: 'linebreak',
+        halign: 'center'
+      },
+      headStyles: {
+        fillColor: [68, 114, 196],
+        textColor: [255, 255, 255],
+        fontStyle: 'bold',
+        halign: 'center'
+      },
+      columnStyles: {
+        0: { cellWidth: 25, halign: 'left' },   // Transaction Code
+        1: { cellWidth: 20, halign: 'left' },   // MSISDN Reffer
+        2: { cellWidth: 25, halign: 'left' },   // Transaction Type
+        3: { cellWidth: 15, halign: 'center' }, // Type
+        4: { cellWidth: 18, halign: 'right' },  // Pre Amount
+        5: { cellWidth: 18, halign: 'right' },  // Amount
+        6: { cellWidth: 18, halign: 'right' },  // Post Amount
+        7: { cellWidth: 20, halign: 'left' },   // Category
+        8: { cellWidth: 30, halign: 'left' },   // Date
+        9: { cellWidth: 25, halign: 'left' },   // Purpose
+        10: { cellWidth: 25, halign: 'left' }   // Notes
+      },
+      margin: { top: 85, left: 10, right: 10 },
+      tableWidth: 'auto',
+      // Callback untuk styling baris
+      didDrawCell: (data: any) => {
+        // Tambahkan border pada setiap cell
+        if (data.section === 'body') {
+          pdf.setDrawColor(200, 200, 200);
+          pdf.setLineWidth(0.1);
+        }
+      }
+    });
+
+    // Generate nama file
+    const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.pdf`;
+    
+    // Save file
+    pdf.save(fileName);
+
+    toast.success('PDF exported successfully');
+    
+  } catch (error) {
+      console.error('Error exporting to PDF:', error);
+      toast.error('Failed to export PDF');
+    }
+};
+
   const doExportData = async (sorting: any, filter: any) => {
     const user = localStorage.getItem(
       `${import.meta.env.VITE_APP_NAME}-auth-v${import.meta.env.VITE_APP_VERSION}`
@@ -219,7 +562,7 @@ const ShowDetailWalletDialog = () => {
   };
 
   return (
-    <showDetailWalletContext.Provider value={{ doExportData }}>
+    <showDetailWalletContext.Provider value={{ doExportData, doExportExcel, doExportPDF }}>
       <Toaster expand visibleToasts={9} duration={3000} />
       <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
         <DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">