Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

2025-05-07 11:55:37 +07:00
parent 8dc29aeb7d bbf17930a7
commit d2d45a3433
3 changed files with 132 additions and 66 deletions
--- a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
+++ b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
@ -95,7 +95,22 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
      },
      {
        accessorKey: 'origin_customer.fullname',
-        header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Origin Customer Full Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
+      {
+        accessorFn: (row) => {
+          const purchase = row?.purchase?.destination_customer.fullname;
+          const transfer = row?.transfer?.destination_customer.fullname;
+
+          return purchase ?? transfer ?? "-";
+        },
+        id: 'destination_customer.fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Destination Customer Full Name" column={column} />,
        enableSorting: false,
        enableHiding: false,
        meta: {
@ -270,7 +285,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
        });
      }

-      
+
      // ✅ Declare formattedFilter early
      const formattedFilter: any = {
        "Transactions.transaction_date": {
--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@ -10,35 +10,33 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { getAuth } from '@/auth';

 const ListToolbar = () => {
  const { table, reload } = useDataGrid();
-
  const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [searchValue, setSearchValue] = useState<string>();
-
-  // const [statusValue, setStatusValue] = useState<string>(
-  //   (table.getColumn('status')?.getFilterValue() as string) ?? ''
-  // );
-
+  const [searchValue, setSearchValue] = useState<string>(''); // default: empty string
+  const [typeSearchValue, setSearchTypeValue] = useState<string>(''); // default: empty string
  const [typeValue, setTypeValue] = useState<string>(
    (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
  );

-  const [typeSearchValue, setSearchTypeValue] = useState<string>();
+  const { GetData } = useCallApi();
+  const API_URL = apiConfig.transaction;

  const formatDate = (date: Date): string => {
    return date.toISOString().split('T')[0];
  };

-
-  // useEffect(() => {
-  //   const timer = setTimeout(() => {
-  //     table.getColumn('status')?.setFilterValue(statusValue);
-  //     table.setPageIndex(0);
-  //   }, 200);
-  //   return () => clearTimeout(timer);
-  // }, [statusValue, table]);
+  useEffect(() => {
+    const today = new Date();
+    settrxDate({
+      from: formatDate(today),
+      to: formatDate(today),
+    });
+  }, []);

  useEffect(() => {
    const timer = setTimeout(() => {
@ -51,10 +49,8 @@ const ListToolbar = () => {
    return () => clearTimeout(timer);
  }, [typeValue, table]);

-
  useEffect(() => {
    const timer = setTimeout(() => {
-      // Add search type filter to column filters
      table.setColumnFilters((prev) => [
        ...prev.filter((f) => f.id !== 'searchtype'),
        { id: 'searchtype', value: typeSearchValue },
@ -64,26 +60,14 @@ const ListToolbar = () => {
    return () => clearTimeout(timer);
  }, [typeSearchValue, table]);

-
  useEffect(() => {
    const timer = setTimeout(() => {
      table.getColumn('code')?.setFilterValue(searchValue);
      table.setPageIndex(0);
    }, 200);
-
    return () => clearTimeout(timer);
  }, [searchValue, table]);

-
-  useEffect(() => {
-    const today = new Date();
-    // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-    settrxDate({
-      from: formatDate(today),
-      to: formatDate(today),
-    });
-  }, []);
-
  const handleFilterData = useCallback(() => {
    try {
      table.getColumn('transaction_date')?.setFilterValue(trxDate);
@ -99,6 +83,58 @@ const ListToolbar = () => {
    }
  }, [trxDate]);

+  const exporDataToExcel = async (
+    typeSearchValue: string,
+    searchValue: string,
+    trxDate: any,
+    typeValue: string
+  ) => {
+    try {
+      const formattedFilter: any = {
+        "Transactions.transaction_date": {
+          from: `${trxDate.from} 00:00:00`,
+          to: `${trxDate.to} 23:59:59`
+        }
+      };
+
+      if (typeSearchValue === 'msisdn') {
+        formattedFilter['origin_customer.msisdn'] = searchValue;
+      } else if (typeSearchValue === 'fullname') {
+        formattedFilter['origin_customer.fullname'] = searchValue;
+      } else if (typeSearchValue === 'trxid') {
+        formattedFilter['Transactions.code'] = searchValue;
+      }
+
+      if (typeValue) {
+        formattedFilter["Transactions.kind"] = typeValue;
+      }
+
+      const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));
+
+      const response = await fetch(`${API_URL}/transaction/export?filter=${filterParam}`, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch file');
+      }
+
+      const blob = await response.blob();
+      const contentDisposition = response.headers.get('content-disposition');
+      const filenameMatch = contentDisposition?.match(/filename="?(.+)"?/);
+      const filename = filenameMatch ? filenameMatch[1] : 'transaction_history.xlsx';
+
+      return { blob, filename };
+    } catch (error) {
+      console.error('Error exporting data:', error);
+      return null;
+    }
+  };
+
+
  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 justify-between items-center">
@ -107,7 +143,6 @@ const ListToolbar = () => {
            From
            <input
              type="date"
-              placeholder="From"
              value={trxDate.from}
              onChange={(event) =>
                settrxDate({ ...trxDate, from: event.target.value })
@ -120,7 +155,6 @@ const ListToolbar = () => {
            To
            <input
              type="date"
-              placeholder="To"
              value={trxDate.to}
              onChange={(event) =>
                settrxDate({ ...trxDate, to: event.target.value })
@ -129,27 +163,9 @@ const ListToolbar = () => {
            />
          </label>

-          {/* <Select
-            value={statusValue}
-            onValueChange={(value) => {
-              setStatusValue(value);
-            }}
-          >
-            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
-              <SelectValue placeholder="Select Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="C">COMPLETE</SelectItem>
-              <SelectItem value="F">FAILED</SelectItem>
-              <SelectItem value="O">ON PROCESS</SelectItem>
-            </SelectContent>
-          </Select> */}
-
          <Select
            value={typeValue}
-            onValueChange={(value) => {
-              setTypeValue(value);
-            }}
+            onValueChange={(value) => setTypeValue(value)}
          >
            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
              <SelectValue placeholder="Select Transaction Type" />
@ -160,15 +176,13 @@ const ListToolbar = () => {
              <SelectItem value="W">WITHDRAW</SelectItem>
              <SelectItem value="U">TOP UP</SelectItem>
              <SelectItem value="R">RETURN</SelectItem>
-              <SelectItem value='N'>TOP UP PARTNER</SelectItem>
+              <SelectItem value="N">TOP UP PARTNER</SelectItem>
            </SelectContent>
          </Select>

          <Select
            value={typeSearchValue}
-            onValueChange={(value) => {
-              setSearchTypeValue(value);
-            }}
+            onValueChange={(value) => setSearchTypeValue(value)}
          >
            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
              <SelectValue placeholder="Select Search Type" />
@ -184,37 +198,59 @@ const ListToolbar = () => {
            <KeenIcon icon="magnifier" />
            <input
              type="text"
-              placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
+              placeholder={`Search ${typeSearchValue || ''}`}
              value={searchValue}
              onChange={(event) => setSearchValue(event.target.value)}
            />
          </label>
        </div>

-        <div className="ml-auto">
+        <div className="ml-auto flex gap-2">
+          <Button
+            variant="outline"
+            className="h-7.5"
+            onClick={async () => {
+              const result = await exporDataToExcel(
+                typeSearchValue || '',
+                searchValue || '',
+                trxDate || {},
+                typeValue || ''
+              );
+
+              if (result) {
+                const url = window.URL.createObjectURL(result.blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = result.filename;
+                a.click();
+                window.URL.revokeObjectURL(url);
+              } else {
+                toast.error('Failed to export data');
+              }
+            }}
+          >
+            Export Data
+          </Button>
+
+
+
          <DefaultTooltip title={'Refresh'} placement={'top'}>
            <Button
              variant="outline"
              className="h-7.5"
              onClick={() => {
-                // Preserve trxDate values (from, to) and reset others
                const today = new Date();
-                // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

-                // Only reset filters excluding from and to
                setSearchValue('');
                setSearchTypeValue('');
-                // setStatusValue('');
                setTypeValue('');
                settrxDate({
                  from: formatDate(today),
                  to: formatDate(today),
                });

-                // Reset other filters except for date range
                table.setColumnFilters([
                  { id: 'code', value: '' },
-                  // { id: 'status', value: '' },
                  { id: 'kind', value: '' },
                ]);

--- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
@ -107,13 +107,28 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
      },
      {
        accessorKey: 'origin_customer.fullname',
-        header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Origin Customer Full Name" column={column} />,
        enableSorting: false,
        enableHiding: false,
        meta: {
          headerClassName: 'w-[250px]'
        }
      },
+      {
+        accessorFn: (row) => {
+          const purchase = row?.purchase?.destination_customer.fullname;
+          const transfer = row?.transfer?.destination_customer.fullname;
+
+          return purchase ?? transfer ?? "-";
+        },
+        id: 'destination_customer.fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Destination Customer Full Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]',
+        },
+      },
      {
        accessorFn: (row) => {
          const purchaseAmount = row?.purchase?.amount;