update

src/pages/members/agent-balance/AgentBalance.tsx

@@ -115,6 +115,39 @@ const AgentBalance = () => {
   };
   // ─────────────────────────────────────────────────────────────────────────────
 
+  const fetchExportPdf = async (filter: any) => {
+    try {
+      toast.info('Preparing export…');
+
+      // API expects filter as array of { id, value } — same shape as columnFilters
+      const filterArray = Object.entries(filter)
+        .filter(([, value]) => value !== '' && value != null)
+        .map(([id, value]) => ({ id, value }));
+
+      const res = await axios.get(`${BASE_URL}/customer/agent-balance/export-pdf`, {
+        params: {
+          with_deleted: false,
+          order_field: 'created_at',
+          order_direction: 'DESC',
+          filter: JSON.stringify(filterArray),
+          specialFilter: true
+        },
+        responseType: 'blob'
+      });
+
+      const url = URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `agent_balance_export_${new Date().toISOString().slice(0, 10)}.pdf`;
+      link.click();
+      URL.revokeObjectURL(url);
+      toast.success('Export complete');
+    } catch (error: any) {
+      const msg = error?.response?.data?.error || error.message;
+      toast.error(`Export failed: ${msg}`);
+    }
+  };
+
   const openDialog = () => setIsDialogOpen(true);
   const closeDialog = () => {
     setIsDialogOpen(false);
@@ -203,6 +236,7 @@ const AgentBalance = () => {
                   onReload={handleReload}
                   isReloading={isReloading}
                   onExport={fetchExport}
+                  onExportPdf={fetchExportPdf}
                 />
               }
               onRowSelectionChange={(selected, table: any) => {

src/pages/members/agent-balance/ListToolbar.tsx

@@ -7,9 +7,10 @@ interface ListToolBarProps {
   onReload: () => void;
   isReloading: boolean;
   onExport: (filter: Record<string, string>) => void;
+  onExportPdf: (filter: Record<string, string>) => void;
 }
 
-const ListToolBar = ({ createGroup, onReload, isReloading, onExport }: ListToolBarProps) => {
+const ListToolBar = ({ createGroup, onReload, isReloading, onExport, onExportPdf }: ListToolBarProps) => {
   const { table, reload } = useDataGrid();
   const [usernameFilter, setUsernameFilter] = useState('');
   const [msisdn, setMsisdn] = useState('');
@@ -55,6 +56,10 @@ const ListToolBar = ({ createGroup, onReload, isReloading, onExport }: ListToolB
     onExport(buildFilter());
   };
 
+  const handleExportPdf = () => {
+    onExportPdf(buildFilter());
+  };
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@@ -78,7 +83,10 @@ const ListToolBar = ({ createGroup, onReload, isReloading, onExport }: ListToolB
                 <KeenIcon icon="magnifier" />
               </Button>
               <Button className="h-7.5" type="button" onClick={handleExport}>
-                Export
+                Export Excel
+              </Button>
+              <Button className="h-7.5" type="button" onClick={handleExportPdf}>
+                Export PDF
               </Button>
             </div>
           </form>