99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
|
import { useTransactionContext } from '../hooks/useTransactionContext';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useCallback, useState, useEffect } from 'react';
|
|
import { toast } from 'sonner';
|
|
|
|
const ListToolbar = () => {
|
|
const { table, reload } = useDataGrid();
|
|
|
|
// Set the initial state for trxDate
|
|
const [trxDate, settrxDate] = useState({ from: '', to: '' });
|
|
|
|
// Function to format date to YYYY-MM-DD
|
|
const formatDate = (date: Date): string => {
|
|
return date.toISOString().split('T')[0];
|
|
};
|
|
|
|
// useEffect to set the default date values
|
|
useEffect(() => {
|
|
const today = new Date();
|
|
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
settrxDate({
|
|
from: formatDate(firstDayOfMonth),
|
|
to: formatDate(today),
|
|
});
|
|
}, []);
|
|
|
|
const handleFilterData = useCallback(() => {
|
|
try {
|
|
table.getColumn('transaction_date')?.setFilterValue(trxDate);
|
|
} catch (error) {
|
|
toast.error('Error applying filter');
|
|
console.error('Error applying filter:', error);
|
|
}
|
|
}, [trxDate, table]);
|
|
|
|
useEffect(() => {
|
|
if (trxDate.from && trxDate.to) {
|
|
handleFilterData();
|
|
}
|
|
}, [trxDate]);
|
|
|
|
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">
|
|
<div className="flex justify-between w-full items-center">
|
|
<div className="flex w-[50%] gap-3 items-center">
|
|
<label className="input input-sm w-1/3">
|
|
From
|
|
<input
|
|
type="date"
|
|
placeholder="From"
|
|
value={trxDate.from}
|
|
onChange={(event) =>
|
|
settrxDate({ ...trxDate, from: event.target.value })
|
|
}
|
|
name="from"
|
|
/>
|
|
</label>
|
|
|
|
<label className="input input-sm w-1/3">
|
|
To
|
|
<input
|
|
type="date"
|
|
placeholder="To"
|
|
value={trxDate.to}
|
|
onChange={(event) =>
|
|
settrxDate({ ...trxDate, to: event.target.value })
|
|
}
|
|
name="to"
|
|
/>
|
|
</label>
|
|
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
|
<Button
|
|
variant="outline"
|
|
className="h-7.5"
|
|
onClick={() => {
|
|
const today = new Date();
|
|
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
settrxDate({
|
|
from: formatDate(firstDayOfMonth),
|
|
to: formatDate(today),
|
|
});
|
|
reload();
|
|
}}
|
|
>
|
|
<KeenIcon icon="arrows-circle" />
|
|
</Button>
|
|
</DefaultTooltip>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ListToolbar;
|