From dc4f33ffcd87fa489523fe4dc0bb93b01ade58f1 Mon Sep 17 00:00:00 2001 From: wayanrivan Date: Mon, 21 Apr 2025 10:29:31 +0700 Subject: [PATCH] update add filter trx code in history transaction and approval transaction --- .../blocks/ListToolbar.tsx | 30 +++++++ .../hooks/ApprovalTransactionContext.tsx | 77 +++++++++++++----- .../blocks/ListToolbar.tsx | 70 ++++++++++++++++ .../hooks/TransactionContext.tsx | 79 ++++++++++++------- 4 files changed, 208 insertions(+), 48 deletions(-) diff --git a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx index 6a8d4db..d5b36ea 100644 --- a/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx +++ b/src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx @@ -15,6 +15,10 @@ const ListToolbar = () => { return date.toISOString().split('T')[0]; }; + const [searchValue, setSearchValue] = useState( + (table.getColumn('code')?.getFilterValue() as string) ?? '' + ); + // useEffect to set the default date values useEffect(() => { const today = new Date(); @@ -34,6 +38,15 @@ const ListToolbar = () => { } }, [trxDate, 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(); @@ -69,6 +82,17 @@ const ListToolbar = () => { name="to" /> + + +
@@ -79,10 +103,16 @@ const ListToolbar = () => { onClick={() => { const today = new Date(); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); + + setSearchValue(''); settrxDate({ from: formatDate(firstDayOfMonth), to: formatDate(today), }); + + table.getColumn('code')?.setFilterValue(''); + table.setPageIndex(0); + reload(); }} > diff --git a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx index 5c74f68..6ac3b2e 100644 --- a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx +++ b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx @@ -63,6 +63,15 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode } const columns = useMemo[]>( () => [ + { + accessorKey: 'code', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, { accessorKey: 'transaction_date', header: ({ column }) => , @@ -164,12 +173,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode } }, { accessorKey: 'status_approve', - header: 'Status', + header: 'Status Approval', cell: ({ row }) => { const statusCode = row.original.status_approve; let label = ''; let badgeClass = ''; - + switch (statusCode) { case 'Y': label = 'APPROVED'; @@ -184,14 +193,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode } badgeClass = 'bg-gray-100 text-gray-800'; break; } - + return ( {label} ); }, - }, + }, { id: 'actions', header: ({ column }) => , @@ -234,43 +243,69 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode } const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => { try { - let startdate, enddate; + const today = new Date(); + const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); - if (!filter || filter.length === 0) { - const today = new Date(); - const nextWeek = new Date(); - nextWeek.setDate(today.getDate() + 7); - startdate = today.toISOString().split('T')[0]; - enddate = nextWeek.toISOString().split('T')[0]; - } else { - startdate = filter[0]?.value?.from; - enddate = filter[0]?.value?.to; + // Default values + let startdate = firstDayOfMonth.toISOString().split('T')[0]; + let enddate = today.toISOString().split('T')[0]; + let transactioncode = ''; + // let transactionstatus = ''; + + if (Array.isArray(filter)) { + filter.forEach((f: any) => { + // console.log(f.id); + if (f.id === 'transaction_date' && f.value?.from && f.value?.to) { + startdate = f.value.from; + enddate = f.value.to; + } + + if (f.id === 'code' && f.value) { + transactioncode = f.value; + } + + // if (f.id === 'status' && f.value) { + // transactionstatus = f.value; + // } + }); } const formattedFilter = { "Transactions.transaction_date": { 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}%` + // } }; + const response = await GetData(`${API_URL}/transaction/history`, { limit, page: page + 1, with_deleted: false, order_field: "Transactions.created_at", order_direction: 'DESC', - filter: JSON.stringify(formattedFilter), + filter: JSON.stringify(formattedFilter) }); - setTransaction(response?.data?.list || []); - return { - data: response?.data?.list || [], - totalCount: response?.data?.total_count || 0, - }; + if (!response || !response.data) { + console.warn('No data received:', response); + return { data: [], totalCount: 0 }; + } + + setTransaction(response.data.list); + return { data: response.data.list, totalCount: response.data.total_count }; + } catch (error) { console.error('Error fetching transaction', error); + return { data: [], totalCount: 0 }; // optional: fail-safe fallback } }; diff --git a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx index aeb3e0d..9138911 100644 --- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx +++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx @@ -3,6 +3,13 @@ import { useTransactionContext } from '../hooks/useTransactionContext'; import { Button } from '@/components/ui/button'; import { useCallback, useState, useEffect } from 'react'; import { toast } from 'sonner'; +// import { +// Select, +// SelectContent, +// SelectItem, +// SelectTrigger, +// SelectValue, +// } from '@/components/ui/select'; const ListToolbar = () => { const { table, reload } = useDataGrid(); @@ -10,11 +17,39 @@ const ListToolbar = () => { // Set the initial state for trxDate const [trxDate, settrxDate] = useState({ from: '', to: '' }); + const [searchValue, setSearchValue] = useState( + (table.getColumn('code')?.getFilterValue() as string) ?? '' + ); + + + // const [statusValue, setStatusValue] = useState( + // (table.getColumn('status')?.getFilterValue() as string) ?? '' + // ); + // Function to format date to YYYY-MM-DD const formatDate = (date: Date): string => { return date.toISOString().split('T')[0]; }; + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('code')?.setFilterValue(searchValue); + table.setPageIndex(0); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); + + // useEffect(() => { + // const timer = setTimeout(() => { + // table.getColumn('status')?.setFilterValue(statusValue); + // table.setPageIndex(0); + // }, 200); + // return () => clearTimeout(timer); + // }, [statusValue, table]); + + + // useEffect to set the default date values useEffect(() => { const today = new Date(); @@ -69,6 +104,33 @@ const ListToolbar = () => { name="to" /> + + {/* */} + + +
@@ -79,10 +141,18 @@ const ListToolbar = () => { onClick={() => { const today = new Date(); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); + + setSearchValue(''); + // setStatusValue(''); settrxDate({ from: formatDate(firstDayOfMonth), to: formatDate(today), }); + + table.getColumn('code')?.setFilterValue(''); + // table.getColumn('status')?.setFilterValue(''); + table.setPageIndex(0); + reload(); }} > diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx index b9eeb9e..6b02b50 100644 --- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx +++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx @@ -70,15 +70,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { const columns = useMemo[]>( () => [ - // { - // accessorKey: 'transaction_date', - // header: ({ column }) => , - // enableSorting: false, - // enableHiding: false, - // meta: { - // headerClassName: 'w-[250px]' - // } - // }, + { + accessorKey: 'code', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, { accessorKey: 'transaction_date', header: ({ column }) => , @@ -242,30 +242,47 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => { try { - let startdate; - let enddate; - let formattedFilter; + const today = new Date(); + const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); - if (filter == undefined || filter.length == 0) { - const today = new Date(); + // Default values + let startdate = firstDayOfMonth.toISOString().split('T')[0]; + let enddate = today.toISOString().split('T')[0]; + let transactioncode = ''; + // let transactionstatus = ''; - // Tanggal 1 di bulan sekarang - const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); + if (Array.isArray(filter)) { + filter.forEach((f: any) => { + // console.log(f.id); + if (f.id === 'transaction_date' && f.value?.from && f.value?.to) { + startdate = f.value.from; + enddate = f.value.to; + } - startdate = firstDayOfMonth.toISOString().split('T')[0]; - enddate = today.toISOString().split('T')[0]; - } else if (filter != undefined || filter.length != 0) { - startdate = filter[0].value.from; - enddate = filter[0].value.to; + if (f.id === 'code' && f.value) { + transactioncode = f.value; + } + + // if (f.id === 'status' && f.value) { + // transactionstatus = f.value; + // } + }); } - formattedFilter = { + const formattedFilter = { "Transactions.transaction_date": { - from: startdate + " 00:00:00", - to: enddate + " 23:59:59" - } + from: `${startdate} 00:00:00`, + to: `${enddate} 23:59:59` + }, + "Transactions.code": { + like: `%${transactioncode}%` + }, + // "Transactions.status": { + // like: `%${transactionstatus}%` + // } }; + const response = await GetData(`${API_URL}/transaction/history`, { limit, page: page + 1, @@ -275,13 +292,21 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { filter: JSON.stringify(formattedFilter) }); - setTransaction(response?.data.list); - return { data: response?.data.list, totalCount: response?.data.total_count }; + if (!response || !response.data) { + console.warn('No data received:', response); + return { data: [], totalCount: 0 }; + } + + setTransaction(response.data.list); + return { data: response.data.list, totalCount: response.data.total_count }; + } catch (error) { console.error('Error fetching transaction', error); + return { data: [], totalCount: 0 }; // optional: fail-safe fallback } }; + return (