update button filter

2025-05-21 16:59:04 +07:00
parent c2df876489
commit 831627c371
3 changed files with 109 additions and 160 deletions
--- a/src/pages/dashboards/home/DashboardHomePage.tsx
+++ b/src/pages/dashboards/home/DashboardHomePage.tsx
@ -269,7 +269,7 @@ const DashboardHomePage = () => {

        <div className="flex space-x-4 mt-5">
          {bankaccount?.data && bankaccount?.data.length > 0 
-          // && getAuth()?.statusbalance=='Y' 
+          && getAuth()?.statusbalance=='Y' 
          ? (
            bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => (
              <BankSaldo
--- a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
@ -14,76 +14,61 @@ import {
 const ListToolbar = () => {
  const { table, reload } = useDataGrid();

-  // Set the initial state for trxDate
+  // State untuk filter
  const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [statusApproval, setStatusApproval] = useState<string>(
-    (table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
-  );
+  const [statusApproval, setStatusApproval] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [typeSearchValue, setSearchTypeValue] = useState<string>('');

-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('status_approve')?.setFilterValue(statusApproval);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [statusApproval, table]);
-
-  // Function to format date to YYYY-MM-DD
-  const formatDate = (date: Date): string => {
-    return date.toISOString().split('T')[0];
-  };
-
-  const [searchValue, setSearchValue] = useState<string>();
-  const [typeSearchValue, setSearchTypeValue] = useState<string>();
-
-
-
-  // useEffect to set the default date values
+  // Set tanggal default saat pertama mount
  useEffect(() => {
    const today = new Date();
-    // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    const formatDate = (date: Date) => date.toISOString().split('T')[0];
    settrxDate({
      from: formatDate(today),
      to: formatDate(today),
    });
  }, []);

+  // Fungsi untuk apply semua filter sekaligus saat tombol Filter ditekan
  const handleFilterData = useCallback(() => {
    try {
+      if (!trxDate.from || !trxDate.to) {
+        toast.error('Please select From and To dates');
+        return;
+      }
+
+      // Set filter tanggal
      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+
+      // Set filter status approval
+      table.getColumn('status_approve')?.setFilterValue(statusApproval || '');
+
+      // Set filter search type sebagai column filter id 'searchtype'
+      table.setColumnFilters((prevFilters) => {
+        // Hapus dulu filter dengan id 'searchtype' dan 'code' agar gak duplikat
+        const filtered = prevFilters.filter(
+          (f) => f.id !== 'searchtype' && f.id !== 'code'
+        );
+
+        // Tambahkan filter baru jika ada
+        if (typeSearchValue) {
+          filtered.push({ id: 'searchtype', value: typeSearchValue });
+        }
+        if (searchValue) {
+          filtered.push({ id: 'code', value: searchValue });
+        }
+
+        return filtered;
+      });
+
+      // Reset ke halaman pertama
+      table.setPageIndex(0);
    } catch (error) {
      toast.error('Error applying filter');
-      console.error('Error applying filter:', error);
+      console.error(error);
    }
-  }, [trxDate, 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 },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeSearchValue, table]);
-
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('code')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
-
-  useEffect(() => {
-    if (trxDate.from && trxDate.to) {
-      handleFilterData();
-    }
-  }, [trxDate]);
+  }, [trxDate, statusApproval, searchValue, typeSearchValue, table]);

  return (
    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -93,11 +78,8 @@ const ListToolbar = () => {
            From
            <input
              type="date"
-              placeholder="From"
              value={trxDate.from}
-              onChange={(event) =>
-                settrxDate({ ...trxDate, from: event.target.value })
-              }
+              onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
              name="from"
            />
          </label>
@ -106,20 +88,15 @@ const ListToolbar = () => {
            To
            <input
              type="date"
-              placeholder="To"
              value={trxDate.to}
-              onChange={(event) =>
-                settrxDate({ ...trxDate, to: event.target.value })
-              }
+              onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
              name="to"
            />
          </label>

          <Select
            value={statusApproval}
-            onValueChange={(value) => {
-              setStatusApproval(value);
-            }}
+            onValueChange={setStatusApproval}
          >
            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
              <SelectValue placeholder="Select Status" />
@ -133,9 +110,7 @@ const ListToolbar = () => {

          <Select
            value={typeSearchValue}
-            onValueChange={(value) => {
-              setSearchTypeValue(value);
-            }}
+            onValueChange={setSearchTypeValue}
          >
            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
              <SelectValue placeholder="Select Search Type" />
@ -151,12 +126,16 @@ 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)}
+              onChange={(e) => setSearchValue(e.target.value)}
            />
          </label>

+          {/* Tombol Filter */}
+          <Button onClick={handleFilterData}>
+            Filter
+          </Button>
        </div>

        <div className="ml-auto">
@ -166,23 +145,22 @@ const ListToolbar = () => {
              className="h-7.5"
              onClick={() => {
                const today = new Date();
-                // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                const formatDate = (date: Date) => date.toISOString().split('T')[0];

-                // Resetting all filters
+                // Reset semua filter dan tanggal ke hari ini
                setSearchValue('');
                setStatusApproval('');
-                settrxDate({
-                  from: formatDate(today),
-                  to: formatDate(today),
-                });
-
+                settrxDate({ from: formatDate(today), to: formatDate(today) });
                setSearchTypeValue('');

+                // Reset filter di tabel
                table.getColumn('code')?.setFilterValue('');
                table.getColumn('status_approve')?.setFilterValue('');
+                table.getColumn('transaction_date')?.setFilterValue('');
+                table.setColumnFilters([]);
                table.setPageIndex(0);

-                reload(); // Reload table data
+                reload();
              }}
            >
              <KeenIcon icon="arrows-circle" />
--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@ -1,7 +1,7 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useTransactionContext } from '../hooks/useTransactionContext';
 import { Button } from '@/components/ui/button';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import {
  Select,
@ -17,8 +17,8 @@ import { getAuth } from '@/auth';
 const ListToolbar = () => {
  const { table, reload } = useDataGrid();
  const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [searchValue, setSearchValue] = useState<string>(''); // default: empty string
-  const [typeSearchValue, setSearchTypeValue] = useState<string>(''); // default: empty string
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [typeSearchValue, setSearchTypeValue] = useState<string>('');
  const [typeValue, setTypeValue] = useState<string>(
    (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
  );
@ -26,62 +26,44 @@ const ListToolbar = () => {
  const { GetData } = useCallApi();
  const API_URL = apiConfig.transaction;

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

+  // Set tanggal default hari ini saat mount
  useEffect(() => {
    const today = new Date();
-    settrxDate({
-      from: formatDate(today),
-      to: formatDate(today),
-    });
+    const formatted = formatDate(today);
+    settrxDate({ from: formatted, to: formatted });
  }, []);

-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.setColumnFilters((prev) => [
-        ...prev.filter((f) => f.id !== 'kind'),
-        { id: 'kind', value: typeValue },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeValue, table]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.setColumnFilters((prev) => [
-        ...prev.filter((f) => f.id !== 'searchtype'),
-        { id: 'searchtype', value: typeSearchValue },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeSearchValue, table]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('code')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
+  // **Hilangkan semua useEffect yang auto apply filter saat input berubah**
+  // Karena kamu mau filter apply hanya lewat tombol Filter

+  // Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
  const handleFilterData = useCallback(() => {
-    try {
-      table.getColumn('transaction_date')?.setFilterValue(trxDate);
-    } catch (error) {
-      toast.error('Error applying filter');
-      console.error('Error applying filter:', error);
+    if (!trxDate.from || !trxDate.to) {
+      toast.error('Please select both From and To dates');
+      return;
    }
-  }, [trxDate, table]);

-  useEffect(() => {
-    if (trxDate.from && trxDate.to) {
-      handleFilterData();
-    }
-  }, [trxDate]);
+    // Terapkan filter tanggal
+    table.getColumn('transaction_date')?.setFilterValue(trxDate);
+
+    // Terapkan filter jenis transaksi (kind)
+    table.setColumnFilters((prev) => {
+      // Hapus filter 'kind' dan 'searchtype' agar bisa set ulang
+      const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code');
+      // Bangun array baru dengan filter yang diinginkan
+      const filters: any[] = [...others];
+
+      if (typeValue) filters.push({ id: 'kind', value: typeValue });
+      if (typeSearchValue) filters.push({ id: 'searchtype', value: typeSearchValue });
+      if (searchValue) filters.push({ id: 'code', value: searchValue });
+
+      return filters;
+    });
+
+    table.setPageIndex(0);
+  }, [trxDate, typeValue, typeSearchValue, searchValue, table]);

  const exporDataToExcel = async (
    typeSearchValue: string,
@ -93,8 +75,8 @@ const ListToolbar = () => {
      const formattedFilter: any = {
        "Transactions.transaction_date": {
          from: `${trxDate.from} 00:00:00`,
-          to: `${trxDate.to} 23:59:59`
-        }
+          to: `${trxDate.to} 23:59:59`,
+        },
      };

      if (typeSearchValue === 'msisdn') {
@ -106,17 +88,20 @@ const ListToolbar = () => {
      }

      if (typeValue) {
-        formattedFilter["Transactions.kind"] = typeValue;
+        formattedFilter['Transactions.kind'] = typeValue;
      }

      const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));

-      const response = await fetch(`${API_URL}/transaction/export?filter=${filterParam}`, {
+      const response = await fetch(
+        `${API_URL}/transaction/export?filter=${filterParam}`,
+        {
          method: 'GET',
          headers: {
-          Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
+            Authorization: `Bearer ${getAuth()?.access_token}`,
+          },
        }
-      });
+      );

      if (!response.ok) {
        throw new Error('Failed to fetch file');
@ -161,16 +146,11 @@ const ListToolbar = () => {
              name="to"
            />
          </label>
-
-          <Select
-            value={typeValue}
-            onValueChange={(value) => setTypeValue(value)}
-          >
+          <Select value={typeValue} onValueChange={(value) => setTypeValue(value)}>
            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
              <SelectValue placeholder="Select Transaction Type" />
            </SelectTrigger>
            <SelectContent>
-
              <SelectItem value="T">TRANSFER</SelectItem>
              <SelectItem value="P">PURCHASE</SelectItem>
              <SelectItem value="W">WITHDRAW</SelectItem>
@ -193,10 +173,7 @@ const ListToolbar = () => {
            </SelectContent>
          </Select>

-          <Select
-            value={typeSearchValue}
-            onValueChange={(value) => setSearchTypeValue(value)}
-          >
+          <Select value={typeSearchValue} onValueChange={(value) => setSearchTypeValue(value)}>
            <SelectTrigger className="input input-sm w-[250px] h-[31px]">
              <SelectValue placeholder="Select Search Type" />
            </SelectTrigger>
@ -216,6 +193,11 @@ const ListToolbar = () => {
              onChange={(event) => setSearchValue(event.target.value)}
            />
          </label>
+
+          <Button className="h-7.5" onClick={handleFilterData}>
+            Filter
+          </Button>
+
        </div>

        <div className="ml-auto flex gap-2">
@ -245,28 +227,17 @@ const ListToolbar = () => {
            Export Data
          </Button>

-
-
          <DefaultTooltip title={'Refresh'} placement={'top'}>
            <Button
              variant="outline"
              className="h-7.5"
              onClick={() => {
                const today = new Date();
-
                setSearchValue('');
                setSearchTypeValue('');
                setTypeValue('');
-                settrxDate({
-                  from: formatDate(today),
-                  to: formatDate(today),
-                });
-
-                table.setColumnFilters([
-                  { id: 'code', value: '' },
-                  { id: 'kind', value: '' },
-                ]);
-
+                settrxDate({ from: formatDate(today), to: formatDate(today) });
+                table.setColumnFilters([]);
                table.setPageIndex(0);
                reload();
              }}