TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update for filter transaction

Browse Source
This commit is contained in:
wayanrivan
2025-04-21 15:39:09 +07:00
parent 7f87e0ee44
commit 2db0287cc2
4 changed files with 160 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
View File

@ -3,6 +3,13 @@ import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useCallback, useState, useEffect } from 'react'; import { useCallback, useState, useEffect } from 'react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
const ListToolbar = () => { const ListToolbar = () => {
const { table, reload } = useDataGrid(); const { table, reload } = useDataGrid();
@ -10,6 +17,18 @@ const ListToolbar = () => {
// Set the initial state for trxDate // Set the initial state for trxDate
const [trxDate, settrxDate] = useState({ from: '', to: '' }); const [trxDate, settrxDate] = useState({ from: '', to: '' });
const [statusApproval, setStatusApproval] = useState<string>(
(table.getColumn('status_approve')?.getFilterValue() as 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 // Function to format date to YYYY-MM-DD
const formatDate = (date: Date): string => { const formatDate = (date: Date): string => {
return date.toISOString().split('T')[0]; return date.toISOString().split('T')[0];
@ -83,6 +102,22 @@ const ListToolbar = () => {
/> />
</label> </label>
<Select
value={statusApproval}
onValueChange={(value) => {
setStatusApproval(value);
}}
>
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">APPROVED</SelectItem>
<SelectItem value="N">REJECT</SelectItem>
<SelectItem value="W">WAITING APPROVAL</SelectItem>
</SelectContent>
</Select>
<label className="input input-sm w-1/3"> <label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" /> <KeenIcon icon="magnifier" />
<input <input
@ -111,6 +146,7 @@ const ListToolbar = () => {
}); });
table.getColumn('code')?.setFilterValue(''); table.getColumn('code')?.setFilterValue('');
table.getColumn('status_approve')?.setFilterValue('');
table.setPageIndex(0); table.setPageIndex(0);
reload(); reload();

36
src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
View File

@ -250,7 +250,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
let startdate = firstDayOfMonth.toISOString().split('T')[0]; let startdate = firstDayOfMonth.toISOString().split('T')[0];
let enddate = today.toISOString().split('T')[0]; let enddate = today.toISOString().split('T')[0];
let transactioncode = ''; let transactioncode = '';
// let transactionstatus = ''; let approvalstatus = '';
if (Array.isArray(filter)) { if (Array.isArray(filter)) {
filter.forEach((f: any) => { filter.forEach((f: any) => {
@ -264,35 +264,37 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
transactioncode = f.value; transactioncode = f.value;
} }
// if (f.id === 'status' && f.value) { if (f.id === 'status_approve' && f.value) {
// transactionstatus = f.value; approvalstatus = f.value;
// } }
}); });
} }
const formattedFilter = { // Constructing filter object with dynamic properties
const formattedFilter: any = {
"Transactions.transaction_date": { "Transactions.transaction_date": {
from: `${startdate} 00:00:00`, from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59` to: `${enddate} 23:59:59`,
}, },
"Transactions.code": {
like: `%${transactioncode}%`
},
"Transactions.status_approve": { in: ["W", "Y", "N"] },
// "Transactions.status": {
// like: `%${transactionstatus}%`
// }
}; };
if (transactioncode) {
formattedFilter["Transactions.code"] = { like: `%${transactioncode}%` };
}
// Handle approval status filter
formattedFilter["Transactions.status_approve"] = approvalstatus
? approvalstatus
: { in: ["W", "Y", "N"] };
// Fetch data from API
const response = await GetData(`${API_URL}/transaction/history`, { const response = await GetData(`${API_URL}/transaction/history`, {
limit, limit,
page: page + 1, page: page + 1,
with_deleted: false, with_deleted: false,
order_field: "Transactions.created_at", order_field: "Transactions.created_at",
order_direction: 'DESC', order_direction: 'DESC',
filter: JSON.stringify(formattedFilter) filter: JSON.stringify(formattedFilter),
}); });
if (!response || !response.data) { if (!response || !response.data) {
@ -300,12 +302,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
return { data: [], totalCount: 0 }; return { data: [], totalCount: 0 };
} }
setTransaction(response.data.list); setTransaction(response.data.list); // Assuming this is a state setter
return { data: response.data.list, totalCount: response.data.total_count }; return { data: response.data.list, totalCount: response.data.total_count };
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
return { data: [], totalCount: 0 }; // optional: fail-safe fallback return { data: [], totalCount: 0 }; // Fail-safe fallback
} }
}; };

89
src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
View File

@ -3,30 +3,30 @@ import { useTransactionContext } from '../hooks/useTransactionContext';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useCallback, useState, useEffect } from 'react'; import { useCallback, useState, useEffect } from 'react';
import { toast } from 'sonner'; import { toast } from 'sonner';
// import { import {
// Select, Select,
// SelectContent, SelectContent,
// SelectItem, SelectItem,
// SelectTrigger, SelectTrigger,
// SelectValue, SelectValue,
// } from '@/components/ui/select'; } from '@/components/ui/select';
const ListToolbar = () => { const ListToolbar = () => {
const { table, reload } = useDataGrid(); const { table, reload } = useDataGrid();
// Set the initial state for trxDate
const [trxDate, settrxDate] = useState({ from: '', to: '' }); const [trxDate, settrxDate] = useState({ from: '', to: '' });
const [searchValue, setSearchValue] = useState<string>( const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('code')?.getFilterValue() as string) ?? '' (table.getColumn('code')?.getFilterValue() as string) ?? ''
); );
const [statusValue, setStatusValue] = useState<string>(
(table.getColumn('status')?.getFilterValue() as string) ?? ''
);
// const [statusValue, setStatusValue] = useState<string>( const [typeValue, setTypeValue] = useState<string>(
// (table.getColumn('status')?.getFilterValue() as string) ?? '' (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
// ); );
// Function to format date to YYYY-MM-DD
const formatDate = (date: Date): string => { const formatDate = (date: Date): string => {
return date.toISOString().split('T')[0]; return date.toISOString().split('T')[0];
}; };
@ -40,17 +40,25 @@ const ListToolbar = () => {
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [searchValue, table]); }, [searchValue, table]);
// useEffect(() => { useEffect(() => {
// const timer = setTimeout(() => { const timer = setTimeout(() => {
// table.getColumn('status')?.setFilterValue(statusValue); table.getColumn('status')?.setFilterValue(statusValue);
// table.setPageIndex(0); table.setPageIndex(0);
// }, 200); }, 200);
// return () => clearTimeout(timer); return () => clearTimeout(timer);
// }, [statusValue, table]); }, [statusValue, table]);
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 to set the default date values
useEffect(() => { useEffect(() => {
const today = new Date(); const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
@ -105,13 +113,13 @@ const ListToolbar = () => {
/> />
</label> </label>
{/* <Select <Select
value={statusValue} value={statusValue}
onValueChange={(value) => { onValueChange={(value) => {
setStatusValue(value); setStatusValue(value);
}} }}
> >
<SelectTrigger> <SelectTrigger className="input input-sm w-[160px] h-[31px]">
<SelectValue placeholder="Select Status" /> <SelectValue placeholder="Select Status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -119,7 +127,25 @@ const ListToolbar = () => {
<SelectItem value="F">FAILED</SelectItem> <SelectItem value="F">FAILED</SelectItem>
<SelectItem value="O">ON PROCESS</SelectItem> <SelectItem value="O">ON PROCESS</SelectItem>
</SelectContent> </SelectContent>
</Select> */} </Select>
<Select
value={typeValue}
onValueChange={(value) => {
setTypeValue(value);
}}
>
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="T">TRANSFER</SelectItem>
<SelectItem value="P">PURCHASE</SelectItem>
<SelectItem value="W">WITHDRAW</SelectItem>
<SelectItem value="U">TOP UP</SelectItem>
<SelectItem value="R">RETURN</SelectItem>
</SelectContent>
</Select>
<label className="input input-sm w-1/3"> <label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" /> <KeenIcon icon="magnifier" />
@ -130,7 +156,6 @@ const ListToolbar = () => {
onChange={(event) => setSearchValue(event.target.value)} onChange={(event) => setSearchValue(event.target.value)}
/> />
</label> </label>
</div> </div>
<div className="ml-auto"> <div className="ml-auto">
@ -143,16 +168,20 @@ const ListToolbar = () => {
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
setSearchValue(''); setSearchValue('');
// setStatusValue(''); setStatusValue('');
setTypeValue('');
settrxDate({ settrxDate({
from: formatDate(firstDayOfMonth), from: formatDate(firstDayOfMonth),
to: formatDate(today), to: formatDate(today),
}); });
table.getColumn('code')?.setFilterValue(''); table.setColumnFilters([
// table.getColumn('status')?.setFilterValue(''); { id: 'code', value: '' },
table.setPageIndex(0); { id: 'status', value: '' },
{ id: 'kind', value: '' },
]);
table.setPageIndex(0);
reload(); reload();
}} }}
> >

60
src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
View File

@ -79,6 +79,25 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
headerClassName: 'w-[250px]' headerClassName: 'w-[250px]'
} }
}, },
{
accessorFn: (row) => {
switch (row.kind) {
case 'T': return 'TRANSFER';
case 'P': return 'PURCHASE';
case 'W': return 'WITHDRAW';
case 'U': return 'TOP UP';
case 'R': return 'RETURN';
default: return '_';
}
},
accessorKey: 'kind',
header: ({ column }) => <DataGridColumnHeader title="Transaction Kind" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{ {
accessorKey: 'transaction_date', accessorKey: 'transaction_date',
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@ -249,11 +268,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
let startdate = firstDayOfMonth.toISOString().split('T')[0]; let startdate = firstDayOfMonth.toISOString().split('T')[0];
let enddate = today.toISOString().split('T')[0]; let enddate = today.toISOString().split('T')[0];
let transactioncode = ''; let transactioncode = '';
// let transactionstatus = ''; let transactionstatus = '';
let type = ''
if (Array.isArray(filter)) { if (Array.isArray(filter)) {
// console.log(filter);
filter.forEach((f: any) => { filter.forEach((f: any) => {
// console.log(f.id);
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) { if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
startdate = f.value.from; startdate = f.value.from;
enddate = f.value.to; enddate = f.value.to;
@ -263,25 +283,37 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
transactioncode = f.value; transactioncode = f.value;
} }
// if (f.id === 'status' && f.value) { if (f.id === 'status' && f.value) {
// transactionstatus = f.value; transactionstatus = f.value;
// } }
if (f.id === 'kind' && f.value) {
type = f.value;
}
}); });
} }
const formattedFilter = { // Build filter object dynamically
const formattedFilter: any = {
"Transactions.transaction_date": { "Transactions.transaction_date": {
from: `${startdate} 00:00:00`, from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59` to: `${enddate} 23:59:59`
}, }
"Transactions.code": {
like: `%${transactioncode}%`
},
// "Transactions.status": {
// like: `%${transactionstatus}%`
// }
}; };
if (transactioncode) {
formattedFilter["Transactions.code"] = {
like: `%${transactioncode}%`
};
}
if (transactionstatus) {
formattedFilter["Transactions.status"] = transactionstatus;
}
if (type) {
formattedFilter["Transactions.kind"] = type;
}
const response = await GetData(`${API_URL}/transaction/history`, { const response = await GetData(`${API_URL}/transaction/history`, {
limit, limit,
@ -302,7 +334,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
return { data: [], totalCount: 0 }; // optional: fail-safe fallback return { data: [], totalCount: 0 };
} }
}; };