();
-
-
-
- // 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 (
@@ -93,11 +78,8 @@ const ListToolbar = () => {
From
- settrxDate({ ...trxDate, from: event.target.value })
- }
+ onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
name="from"
/>
@@ -106,20 +88,15 @@ const ListToolbar = () => {
To
- settrxDate({ ...trxDate, to: event.target.value })
- }
+ onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
name="to"
/>
@@ -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();
}}
>
diff --git a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
index 2a56ce4..72987dc 100644
--- 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(''); // default: empty string
- const [typeSearchValue, setSearchTypeValue] = useState(''); // default: empty string
+ const [searchValue, setSearchValue] = useState('');
+ const [typeSearchValue, setSearchTypeValue] = useState('');
const [typeValue, setTypeValue] = useState(
(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}`, {
- method: 'GET',
- headers: {
- Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
+ const response = await fetch(
+ `${API_URL}/transaction/export?filter=${filterParam}`,
+ {
+ method: 'GET',
+ headers: {
+ Authorization: `Bearer ${getAuth()?.access_token}`,
+ },
}
- });
+ );
if (!response.ok) {
throw new Error('Failed to fetch file');
@@ -161,16 +146,11 @@ const ListToolbar = () => {
name="to"
/>
-
-
@@ -245,28 +227,17 @@ const ListToolbar = () => {
Export Data
-
-