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

trying fixing filter history transaction

Browse Source
This commit is contained in:
bagusajisaputroo
2025-07-14 13:45:01 +07:00
parent d9b0dc7d85
commit 9df149ee1a
2 changed files with 116 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,8 +7,8 @@ import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
@ -20,11 +20,11 @@ const ListToolbar = () => {
const [searchValue, setSearchValue] = useState<string>('');
const [typeSearchValue, setSearchTypeValue] = useState<string>('');
const [typeValue, setTypeValue] = useState<string>(
(table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
(table.getState().columnFilters.find((f) => f.id === 'kind')?.value as string) ?? ''
);
const [status, setStatus] = useState<string>(
(table.getState().columnFilters.find(f => f.id === 'status')?.value as string) ?? ''
(table.getState().columnFilters.find((f) => f.id === 'status')?.value as string) ?? ''
);
const { GetData } = useCallApi();
@ -54,7 +54,9 @@ const ListToolbar = () => {
table.getColumn('transaction_date')?.setFilterValue(trxDate);
table.setColumnFilters((prev) => {
const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code' && f.id !== 'status');
const others = prev.filter(
(f) => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code' && f.id !== 'status'
);
const filters: any[] = [...others];
if (typeValue) filters.push({ id: 'kind', value: typeValue });
@ -75,38 +77,45 @@ const ListToolbar = () => {
status: string
) => {
try {
const formattedFilter: any = {
"Transactions.transaction_date": {
from: `${trxDate.from} 00:00:00`,
to: `${trxDate.to} 23:59:59`,
},
};
const formattedFilter: any = {};
if (typeSearchValue === 'msisdn') {
formattedFilter['Transactions.origin_msisdn'] = searchValue;
} else if (typeSearchValue === 'fullname') {
formattedFilter['Transactions.origin_name'] = searchValue;
} else if (typeSearchValue === 'trxid') {
formattedFilter['Transactions.code'] = searchValue;
// Tambahkan filter tanggal (selalu ada)
if (trxDate.from && trxDate.to) {
formattedFilter['Transactions.transaction_date'] = {
from: `${trxDate.from} 00:00:00`,
to: `${trxDate.to} 23:59:59`
};
}
// Tambahkan filter berdasarkan searchType (sama seperti di search)
if (typeSearchValue && searchValue) {
if (typeSearchValue === 'msisdn') {
formattedFilter['origin_customer.msisdn'] = { like: `%${searchValue}%` };
} else if (typeSearchValue === 'fullname') {
formattedFilter['origin_customer.fullname'] = { like: `%${searchValue}%` };
} else if (typeSearchValue === 'trxid') {
formattedFilter['Transactions.code'] = { like: `%${searchValue}%` };
}
}
// Tambahkan filter jenis transaksi jika ada
if (typeValue) {
formattedFilter['Transactions.kind'] = typeValue;
}
formattedFilter['Transactions.status'] = status;
// Tambahkan filter status jika ada
if (status) {
formattedFilter['Transactions.status'] = status;
}
const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));
const response = await fetch(
`${API_URL}/transaction/export?filter=${filterParam}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${getAuth()?.access_token}`,
},
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');
@ -133,9 +142,7 @@ const ListToolbar = () => {
<input
type="date"
value={trxDate.from}
onChange={(event) =>
settrxDate({ ...trxDate, from: event.target.value })
}
onChange={(event) => settrxDate({ ...trxDate, from: event.target.value })}
name="from"
/>
</label>
@ -145,9 +152,7 @@ const ListToolbar = () => {
<input
type="date"
value={trxDate.to}
onChange={(event) =>
settrxDate({ ...trxDate, to: event.target.value })
}
onChange={(event) => settrxDate({ ...trxDate, to: event.target.value })}
name="to"
/>
</label>

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

@ -14,13 +14,13 @@ import { start } from 'repl';
interface TransactionProps {
id: number;
name: string;
}
}
interface ContextProps {
getTransactionLists: (
limit: number,
page: number,
with_deleted: boolean,
with_deleted: boolean,
order_field: any,
order_direction: any,
filter: any
@ -36,11 +36,11 @@ interface ContextProps {
const initialProps: ContextProps = {
getTransactionLists: async () => ({ data: [], totalCount: 0 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
setShowDetailDialog: () => {},
showRollbackDialog: false,
setShowRollbackDialog: () => { },
setShowRollbackDialog: () => {},
selectedTransactionId: null,
setSelectedTransactionId: () => { }
setSelectedTransactionId: () => {}
};
const ManageTransactionContext = createContext<ContextProps>(initialProps);
@ -58,7 +58,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const url = navigate(`${API_URL}/transaction/history/${path}`);
};
const handleShowDetail = (transactionId: any) => {
setIsLoadingDetail(true);
setSelectedTransactionId(transactionId);
@ -70,7 +69,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}, 1000); // 500ms loading
};
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
@ -85,27 +83,48 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
{
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';
case 'N': return 'TOP UP PARTNER';
case 'E': return 'REWARD';
case 'L': return 'PURCHASE LOJA';
case 'B': return 'TOP UP P24';
case 'A': return 'TRANSFER AGENT';
case 'M': return 'WITHDRAWAL AGENT';
case 'O': return 'TOP UP AGENT';
case 'S': return 'TRANSFER P24';
case 'I': return 'WIJTDRAW MERCHANT';
case 'D': return 'DONATION';
case 'F': return 'FEE';
case 'V': return 'REVERSAL';
case 'C': return 'CASHBACK CASH';
case 'H': return 'CASHBACK POINT';
case 'J': return 'WITHDRAW ADMIN';
default: return '_';
case 'T':
return 'TRANSFER';
case 'P':
return 'PURCHASE';
case 'W':
return 'WITHDRAW';
case 'U':
return 'TOP UP';
case 'R':
return 'RETURN';
case 'N':
return 'TOP UP PARTNER';
case 'E':
return 'REWARD';
case 'L':
return 'PURCHASE LOJA';
case 'B':
return 'TOP UP P24';
case 'A':
return 'TRANSFER AGENT';
case 'M':
return 'WITHDRAWAL AGENT';
case 'O':
return 'TOP UP AGENT';
case 'S':
return 'TRANSFER P24';
case 'I':
return 'WIJTDRAW MERCHANT';
case 'D':
return 'DONATION';
case 'F':
return 'FEE';
case 'V':
return 'REVERSAL';
case 'C':
return 'CASHBACK CASH';
case 'H':
return 'CASHBACK POINT';
case 'J':
return 'WITHDRAW ADMIN';
default:
return '_';
}
},
accessorKey: 'kind',
@ -153,7 +172,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
},
{
accessorFn: (row) => {
const purchase = "T-PAY";
const purchase = 'T-PAY';
const transfer = row?.transfer?.destination_name;
return transfer ?? purchase;
@ -165,38 +184,42 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => {
const purchaseAmount = row?.purchase?.amount;
const transferAmount = row?.transfer?.amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
purchaseAmount ?? transferAmount ?? 0
);
},
id: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => {
const purchaseAmount = row?.purchase?.fee_amount;
const transferAmount = row?.transfer?.fee_amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
purchaseAmount ?? transferAmount ?? 0
);
},
id: 'feeamount',
header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
headerClassName: 'w-[250px]'
}
},
{
accessorKey: 'status',
@ -204,7 +227,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
headerClassName: 'w-[250px]'
},
cell: ({ row }) => {
const statusCode = row.original.status;
@ -247,7 +270,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
{label}
</span>
);
},
}
},
{
accessorKey: 'description',
@ -279,7 +302,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
<div key={`actions-${row.id}`}>
<div className="relative inline-block">
<button
className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? "cursor-not-allowed opacity-60" : ""}`}
className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? 'cursor-not-allowed opacity-60' : ''}`}
onClick={() => !isLoadingDetail && handleShowDetail(row.id)}
>
<KeenIcon icon="eye" />
@ -305,7 +328,8 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}
}
],
[]);
[]
);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
@ -316,7 +340,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
let enddate: string | undefined;
// let transactioncode = '';
let type = '';
let status = '';
let status = '';
let searchType = '';
let codeValue = '';
@ -346,27 +370,21 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
});
// Kalau tidak ada searchType, baru pakai tanggal
if (!searchType) {
if (!startdate || !enddate) {
startdate = firstDayOfMonth.toISOString().split('T')[0];
enddate = today.toISOString().split('T')[0];
}
} else {
// Kosongkan supaya tidak digunakan di bawah
startdate = undefined;
enddate = undefined;
if (!startdate || !enddate) {
startdate = firstDayOfMonth.toISOString().split('T')[0];
enddate = today.toISOString().split('T')[0];
}
// Build formattedFilter setelah semua nilai diketahui
const formattedFilter: any = {};
if (status) {
formattedFilter["Transactions.status"] = status;
formattedFilter['Transactions.status'] = status;
}
// Tambahkan filter tanggal HANYA jika tidak ada searchType
if (startdate && enddate) {
formattedFilter["Transactions.transaction_date"] = {
formattedFilter['Transactions.transaction_date'] = {
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`
};
@ -374,25 +392,25 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
// Tambahkan filter berdasarkan searchType
if (searchType && codeValue) {
if (searchType === "msisdn") {
formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
} else if (searchType === "fullname") {
formattedFilter["origin_customer.fullname"] = { like: `%${codeValue}%` };
} else if (searchType === "trxid") {
formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
if (searchType === 'msisdn') {
formattedFilter['origin_customer.msisdn'] = { like: `%${codeValue}%` };
} else if (searchType === 'fullname') {
formattedFilter['origin_customer.fullname'] = { like: `%${codeValue}%` };
} else if (searchType === 'trxid') {
formattedFilter['Transactions.code'] = { like: `%${codeValue}%` };
}
}
// Tambahkan filter jenis transaksi jika ada
if (type) {
formattedFilter["Transactions.kind"] = type;
formattedFilter['Transactions.kind'] = type;
}
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,
with_deleted: false,
order_field: "Transactions.created_at",
order_field: 'Transactions.created_at',
order_direction: 'DESC',
filter: JSON.stringify(formattedFilter)
});
@ -407,15 +425,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}
return { data: [], totalCount: 0 };
} catch (error) {
console.error('Error fetching transaction', error);
return { data: [], totalCount: 0 };
}
};
return (
<ManageTransactionContext.Provider
value={{
@ -456,7 +471,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
</div>
)}
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}