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

update add filter trx code in history transaction and approval transaction

Browse Source
This commit is contained in:
wayanrivan
2025-04-21 10:29:31 +07:00
parent ca0e8f33b8
commit dc4f33ffcd
4 changed files with 208 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,10 @@ const ListToolbar = () => {
return date.toISOString().split('T')[0];
};
const [searchValue, setSearchValue] = useState<string>(
(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"
/>
</label>
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Transaction ID"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
</label>
</div>
<div className="ml-auto">
@ -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();
}}
>

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

@ -63,6 +63,15 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorKey: 'code',
header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorKey: 'transaction_date',
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
@ -164,7 +173,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
},
{
accessorKey: 'status_approve',
header: 'Status',
header: 'Status Approval',
cell: ({ row }) => {
const statusCode = row.original.status_approve;
let label = '';
@ -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
}
};

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

@ -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<string>(
(table.getColumn('code')?.getFilterValue() as string) ?? ''
);
// const [statusValue, setStatusValue] = useState<string>(
// (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"
/>
</label>
{/* <Select
value={statusValue}
onValueChange={(value) => {
setStatusValue(value);
}}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="C">COMPLETE</SelectItem>
<SelectItem value="F">FAILED</SelectItem>
<SelectItem value="O">ON PROCESS</SelectItem>
</SelectContent>
</Select> */}
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Transaction ID"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
</label>
</div>
<div className="ml-auto">
@ -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();
}}
>

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

@ -70,15 +70,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const columns = useMemo<ColumnDef<any>[]>(
() => [
// {
// accessorKey: 'transaction_date',
// header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
// enableSorting: false,
// enableHiding: false,
// meta: {
// headerClassName: 'w-[250px]'
// }
// },
{
accessorKey: 'code',
header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorKey: 'transaction_date',
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={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 (
<ManageTransactionContext.Provider
value={{