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

Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

Browse Source
This commit is contained in:
unknown
2025-05-21 14:38:12 +07:00
parent 6b1c498a56 4e12f9eb78
commit 1f8c5d411e
25 changed files with 879 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/dashboards/home/DashboardHomePage.tsx
View File

@ -268,7 +268,7 @@ const DashboardHomePage = () => {
) : null}
<div className="flex space-x-4 mt-5">
{bankaccount?.data && bankaccount?.data.length > 0 ? (
{bankaccount?.data && bankaccount?.data.length > 0 && getAuth()?.statusbalance=='Y' ? (
bankaccount?.data.map((bankaccountdatas: { amount: string, creditlimit: string, monthlylimit: string; wallet: string; }, index: number) => (
<BankSaldo
title={bankaccountdatas.wallet}

8
src/pages/dashboards/home/blocks/TransactionPieChart.tsx
View File

@ -48,6 +48,14 @@ const TransactionPieChart = ({ startdate, enddate }: Props) => {
{ name: 'Top Up P24', value: parseFloat((responseTransactionValue?.data?.B ?? 0).toFixed(2)), color: '#FADA7A' },
{ name: 'Transfer Agent', value: parseFloat((responseTransactionValue?.data?.A ?? 0).toFixed(2)), color: '#B1C29E' },
{ name: 'Withdrawal Agent', value: parseFloat((responseTransactionValue?.data?.M ?? 0).toFixed(2)), color: '#FCE7C8' },
{ name: 'Top Up Agent', value: parseFloat((responseTransactionValue?.data?.O ?? 0).toFixed(2)), color: '#F0A04B' },
{ name: 'Transfer P24', value: parseFloat((responseTransactionValue?.data?.S ?? 0).toFixed(2)), color: '#FADA7A' },
{ name: 'Withdraw Merchant', value: parseFloat((responseTransactionValue?.data?.I ?? 0).toFixed(2)), color: '#B1C29E' },
{ name: 'Donation', value: parseFloat((responseTransactionValue?.data?.D ?? 0).toFixed(2)), color: '#FCE7C8' },
{ name: 'Fee', value: parseFloat((responseTransactionValue?.data?.F ?? 0).toFixed(2)), color: '#F0A04B' },
{ name: 'Reversal', value: parseFloat((responseTransactionValue?.data?.V ?? 0).toFixed(2)), color: '#FADA7A' },
{ name: 'Cashback Cash', value: parseFloat((responseTransactionValue?.data?.C ?? 0).toFixed(2)), color: '#B1C29E' },
{ name: 'Cashback Point', value: parseFloat((responseTransactionValue?.data?.H ?? 0).toFixed(2)), color: '#FCE7C8' },
];
return (

26
src/pages/dashboards/home/blocks/TransactionValue.tsx
View File

@ -71,7 +71,7 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
type = "Purchase Loja"
break;
case "B":
type ="Top Up P24";
type = "Top Up P24";
break;
case "A":
type = " Transfer Agent";
@ -79,6 +79,30 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
case "M":
type = "Withdrawal Agent";
break;
case 'O':
type = 'TOP UP AGENT';
break;
case 'S':
type = 'TRANSFER P24';
break;
case 'I':
type = 'WIJTDRAW MERCHANT';
break;
case 'D':
type = 'DONATION';
break;
case 'F':
type = 'FEE';
break;
case 'V':
type = 'REVERSAL';
break;
case 'C':
type = 'CASHBACK CASH';
break;
case 'H':
type = 'CASHBACK POINT';
break;
default:
type = "Unknown";
break;

12
src/pages/disbursement/history-transaction/blocks/UploadBatchDialog.tsx
View File

@ -135,15 +135,11 @@ const UploadBatchDialog = () => {
with_deleted: false,
order_field: 'id',
order_direction: 'ASC',
filter: JSON.stringify({})
filter: JSON.stringify({ type: "D" })
});
const validTypes = ['DM', 'DA', 'DE'];
const records: TransferType[] = response?.data?.list ?? [];
const filtered = records.filter((item) => validTypes.includes(item.type));
setTransferTypes(filtered);
setTransferTypes(records);
} catch (error) {
console.error('Failed to fetch transfer types', error);
}
@ -225,7 +221,7 @@ const UploadBatchDialog = () => {
setFormField((prev) => ({ ...prev, id_transaction_type: val }))
}
>
<SelectTrigger className="w-full lg:w-[420px]">
<SelectTrigger className="w-full">
<SelectValue placeholder="Select Transfer Type" />
</SelectTrigger>
<SelectContent>
@ -256,4 +252,4 @@ const UploadBatchDialog = () => {
);
};
export { UploadBatchDialog };
export { UploadBatchDialog };

2
src/pages/master/walletRule/blocks/AddDialog.tsx
View File

@ -293,7 +293,7 @@ const AddDialog = () => {
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Credit Limit<span className="text-red-500">*</span>
Credit Limit per Trx<span className="text-red-500">*</span>
</label>
<div className="w-full">
<NumericFormat

2
src/pages/master/walletRule/blocks/EditDialog.tsx
View File

@ -302,7 +302,7 @@ const EditDialog = () => {
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Credit Limit<span className="text-red-500">*</span>
Credit Limit per Trx<span className="text-red-500">*</span>
</label>
<NumericFormat
className="input"

2
src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
View File

@ -115,7 +115,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
{
accessorFn: (row) => row.credit_limit,
id: 'credit_limit',
header: ({ column }) => <DataGridColumnHeader title="Credit Limit" column={column} />,
header: ({ column }) => <DataGridColumnHeader title="Credit Limit per Trx" column={column} />,
enableSorting: true,
enableHiding: false,
cell: ({ row }) => currencyFormat(row.original.credit_limit),

96
src/pages/notification/blocks/ListToolbar.tsx
View File

@ -5,22 +5,23 @@ import { useCallback, useEffect, useState } from 'react';
import { toast } from 'sonner';
import { DateRangePicker } from '@/pages/dashboards/home/blocks';
const formatDate = (date: Date): string => date.toISOString().split('T')[0];
const formatDate = (date: Date): string => date.toLocaleDateString('sv-SE');
const formatDateTime = (date: Date): string => date.toISOString();
const getLocalDateString = (date: Date): string => {
return date.toLocaleDateString('sv-SE');
};
const ListToolBar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageNotificationContext();
const [dateRange, setDateRange] = useState({ from: '', to: '' });
const [dateRange, setDateRange] = useState({
from: getLocalDateString(new Date()),
to: getLocalDateString(new Date())
});
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('content')?.getFilterValue() as string) ?? ''
);
useEffect(() => {
const today = new Date();
const formatted = formatDate(today);
setDateRange({ from: formatted, to: formatted });
}, []);
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('content')?.setFilterValue(searchValue);
@ -31,13 +32,25 @@ const ListToolBar = () => {
useEffect(() => {
const today = new Date();
const formatted = formatDate(today);
const initialDateRange = { from: formatted, to: formatted };
// Set waktu ke awal hari (00:00:00)
const startOfDay = new Date(today);
startOfDay.setHours(0, 0, 0, 0);
// Set waktu ke akhir hari (23:59:59)
const endOfDay = new Date(today);
endOfDay.setHours(23, 59, 59, 999);
const initialDateRange = {
from: formatDate(startOfDay), // << Gunakan formatDate di sini
to: formatDate(endOfDay)
};
setDateRange(initialDateRange);
try {
table.getColumn('created_at')?.setFilterValue(initialDateRange);
table.getColumn('created_at')?.setFilterValue({
from: formatDateTime(startOfDay),
to: formatDateTime(endOfDay)
});
} catch (error) {
toast.error('Error applying initial date filter');
console.error('Initial date filter error:', error);
@ -46,16 +59,28 @@ const ListToolBar = () => {
const handleClearAllFilters = () => {
const today = new Date();
const startOfDay = new Date(today);
startOfDay.setHours(0, 0, 0, 0);
const endOfDay = new Date(today);
endOfDay.setHours(23, 59, 59, 999);
// Set ulang filter tanggal dengan waktu
const resetDateRange = {
from: formatDate(today),
to: formatDate(today)
from: formatDate(startOfDay), // YYYY-MM-DD untuk input date
to: formatDate(endOfDay)
};
setSearchValue('');
setDateRange(resetDateRange);
table.getColumn('content')?.setFilterValue('');
table.getColumn('created_at')?.setFilterValue(resetDateRange);
table.getColumn('created_at')?.setFilterValue({
from: formatDateTime(startOfDay),
to: formatDateTime(endOfDay)
});
setTimeout(() => {
table.setPageIndex(0);
@ -75,9 +100,24 @@ const ListToolBar = () => {
useEffect(() => {
const checkNewDay = () => {
const now = new Date();
const formattedNow = formatDate(now);
if (formattedNow !== dateRange.from || formattedNow !== dateRange.to) {
setDateRange({ from: formattedNow, to: formattedNow });
const currentDate = formatDate(now); // Tetap gunakan formatDate untuk perbandingan tanggal saja
// Periksa apakah tanggal sekarang berbeda dengan tanggal yang difilter
if (currentDate !== formatDate(new Date(dateRange.from))) {
const startOfDay = new Date(now);
startOfDay.setHours(0, 0, 0, 0);
const endOfDay = new Date(now);
endOfDay.setHours(23, 59, 59, 999);
setDateRange({
from: formatDate(startOfDay), // hanya YYYY-MM-DD
to: formatDate(endOfDay)
});
table.getColumn('created_at')?.setFilterValue({
from: formatDateTime(startOfDay),
to: formatDateTime(endOfDay)
});
}
};
@ -95,7 +135,16 @@ const ListToolBar = () => {
type="date"
placeholder="From"
value={dateRange.from}
onChange={(event) => setDateRange({ ...dateRange, from: event.target.value })}
onChange={(e) => {
setDateRange({ ...dateRange, from: e.target.value });
// Untuk filter, konversi ke Date object dengan waktu awal hari
const date = new Date(e.target.value);
date.setHours(0, 0, 0, 0);
table.getColumn('created_at')?.setFilterValue({
from: date.toISOString(),
to: new Date(dateRange.to).toISOString()
});
}}
name="from"
/>
</label>
@ -106,7 +155,16 @@ const ListToolBar = () => {
type="date"
placeholder="To"
value={dateRange.to}
onChange={(event) => setDateRange({ ...dateRange, to: event.target.value })}
onChange={(e) => {
setDateRange({ ...dateRange, to: e.target.value });
// Untuk filter, konversi ke Date object dengan waktu akhir hari
const date = new Date(e.target.value);
date.setHours(23, 59, 59, 999);
table.getColumn('created_at')?.setFilterValue({
from: new Date(dateRange.from).toISOString(),
to: date.toISOString()
});
}}
name="to"
/>
</label>

40
src/pages/settings/user/manage-position/blocks/AddDialog.tsx
View File

@ -18,6 +18,7 @@ import { useCallApi } from '@/hooks';
import { Checkbox } from '@/components/ui/checkbox';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { set } from 'date-fns';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
const API_URL = apiConfig.service_dashboard;
@ -61,7 +62,8 @@ const MenuItemComponent: React.FC<{
};
const initialState = {
name: ''
name: '',
status_balance: '',
};
const AddDialog = () => {
@ -86,13 +88,15 @@ const AddDialog = () => {
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => {
setFormField(() => ({ name: '' }));
setFormField(initialState);
setErrors(() => ({}));
setSelectMenus([]);
};
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Position Name' }];
const requiredFields = [
{ key: 'name', label: 'Position Name' },
{ key: 'status_balance', label: 'Status Balance' }];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
@ -128,7 +132,8 @@ const AddDialog = () => {
const response = await PostData(`${API_URL}/user_role/create`, {
name: formField.name,
roles: selectMenus,
status: 'Y'
status: 'Y',
status_balance: formField.status_balance
});
if (response?.status) {
@ -203,6 +208,33 @@ const AddDialog = () => {
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Status Balance <span className="text-danger">*</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.status_balance}
onValueChange={(value) => {
setFormField((prev) => ({ ...prev, status_balance: value }));
setErrors((prev) => ({ ...prev, status_balance: '' }));
}}
>
<SelectTrigger className={errors.status ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div>
</div>
<div className="grid md:grid-cols-3 w-full gap-5">
{menus.map((menu) => (

34
src/pages/settings/user/manage-position/blocks/EditDialog.tsx
View File

@ -79,11 +79,15 @@ const EditDialog = () => {
const [selectMenus, setSelectMenus] = useState<string[]>([]);
const [formField, setFormField] = useState({
name: '',
status: ''
status: '',
status_balance: ''
});
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Position Name' }];
const requiredFields = [
{ key: 'name', label: 'Position Name' },
{ key: 'status_balance', label: 'Status Balance' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
@ -131,7 +135,8 @@ const EditDialog = () => {
const response = await PutData(`${API_URL}/user_role/update/${selectedPosition.id}`, {
name: formField.name,
roles: selectMenus,
status: formField.status
status: formField.status,
status_balance: formField.status_balance
});
if (response?.status) {
@ -163,7 +168,8 @@ const EditDialog = () => {
setFormField((prev) => ({
...prev,
name: selectedPosition.name,
status: selectedPosition.status
status: selectedPosition.status,
status_balance: selectedPosition.status_balance
}));
setSelectMenus(selectedPosition.roles);
@ -236,6 +242,26 @@ const EditDialog = () => {
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Status Balance</label>
<div className="grow">
<Select
value={formField.status_balance}
onValueChange={(status_balance) => setFormField((prev) => ({ ...prev, status_balance }))}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Non Active</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
<div className="grid md:grid-cols-3 w-full gap-5">
{menus.map((menu) => (

1
src/pages/settings/user/manage-position/hooks/ManagePositionContext.tsx
View File

@ -23,6 +23,7 @@ interface selectedPosition {
name: string;
roles: string[];
status: string;
status_balance: string;
}
const initialProps: ContextProps = {

39
src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
View File

@ -683,11 +683,11 @@ const DetailApprovalTransaction = () => {
<table className="min-w-full table-auto">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Transaction Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr>
</thead>
@ -861,14 +861,14 @@ const DetailApprovalTransaction = () => {
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr>
</thead>
<tbody>
{transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? (
transactionDetails.p24.map((log: { status: string,request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
transactionDetails.p24.map((log: { status: string, request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">
{(() => {
@ -912,6 +912,22 @@ const DetailApprovalTransaction = () => {
hour12: false
})
: ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">
<pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
{(() => {
try {
if (log.request_body === null) {
return '';
}
const parsed = JSON.parse(log.request_body);
return JSON.stringify(parsed, null, 2) ?? '';
} catch (e) {
return log.request_body ?? ''; // fallback: tampilkan as-is jika gagal parse
}
})()}
</pre>
</td>
<td className="px-4 py-2 text-sm text-gray-500">
<pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
{(() => {
@ -927,22 +943,7 @@ const DetailApprovalTransaction = () => {
})()}
</pre>
</td>
<td className="px-4 py-2 text-sm text-gray-500">
<pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
{(() => {
try {
if (log.request_body === null) {
return '';
}
const parsed = JSON.parse(log.request_body);
return JSON.stringify(parsed, null, 2) ?? '';
} catch (e) {
return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
}
})()}
</pre>
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>

243
src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
View File

@ -175,6 +175,24 @@ const DetailTransaction = () => {
</button>
{/* )} */}
{transactionDetails?.kind == 'P' && (
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'purchase' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('purchase')}
>
Purchase Detail
</button>
)}
{transactionDetails?.kind == 'P' && (
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'productdetail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('productdetail')}
>
Product Detail
</button>
)}
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('origincustomer')}
@ -229,15 +247,105 @@ const DetailTransaction = () => {
</div>
{/* Tab Content */}
{activeTab === 'purchase' && (
<>
<h3 className="font-semibold flex items-center mt-4">
Purchase
</h3>
<div className="grid grid-cols-2 gap-4 mt-4">
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.cashback ?? transactionDetails?.transfer?.cashback ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.cashback_point ?? transactionDetails?.transfer?.cashback_point ?? 0}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.fee_amount ?? transactionDetails?.transfer?.fee_amount ?? 0
)}
</p>
</div>
</div>
</>
)}
{activeTab === 'productdetail' && (
<>
<div className="space-y-4">
<h3 className="font-semibold flex items-center mt-4">
Product Information
</h3>
<div className="grid grid-cols-2 gap-4 mt-4">
<div>
<p className="text-sm text-gray-500">Product Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.name ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Cash</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_cash != null
? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
: "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_point ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.type ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.description ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.type === "h2h"
? "HOST TO HOST"
: transactionDetails?.purchase?.product?.provider?.type === "agent"
? "AGENT"
: "-"}
</p>
</div>
</div>
</div>
</>
)}
<div className="py-4 overflow-y-auto max-h-[400px]">
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Transaction Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
@ -259,7 +367,7 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p>
<p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
</div>
<div>
<p className="text-sm text-gray-500">Amount</p>
@ -348,7 +456,24 @@ const DetailTransaction = () => {
kind = 'TRANSFER AGENT';
} else if (transactionDetails?.kind === 'M') {
kind = 'WITHDRAWAL AGENT';
}else if( transactionDetails?.kind === 'O') {
kind = 'TOPUP AGENT';
}else if (transactionDetails?.kind === 'S') {
kind = 'TOPUP P24';
}else if (transactionDetails?.kind === 'I') {
kind = 'WITHDRAW MERCHANT';
}else if (transactionDetails?.kind === 'D') {
kind = 'DONATION';
}else if (transactionDetails?.kind === 'F') {
kind = 'FEE';
}else if (transactionDetails?.kind === 'V') {
kind = 'REVERSAL';
}else if( transactionDetails?.kind === 'C') {
kind = 'CASHBACK CASH';
}else if( transactionDetails?.kind === 'H') {
kind = 'CASHBACK POINT';
}
return kind;
})()}
</p>
@ -363,100 +488,6 @@ const DetailTransaction = () => {
</div>
</div>
<h3 className="font-semibold flex items-center">
Purchase
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Purchase
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.cashback ?? transactionDetails?.transfer?.cashback ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.cashback_point ?? transactionDetails?.transfer?.cashback_point ?? 0}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.fee_amount ?? transactionDetails?.transfer?.fee_amount ?? 0
)}
</p>
</div>
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind == 'P' && transactionDetails?.kind == 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Product Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Product Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Product Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.name ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Cash</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_cash != null
? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
: "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_point ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.type ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.description ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.type === "h2h"
? "HOST TO HOST"
: transactionDetails?.purchase?.product?.provider?.type === "agent"
? "AGENT"
: "-"}
</p>
</div>
</div>
</div>
)}
@ -485,7 +516,7 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p>
<p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
</div>
<div>
<p className="text-sm text-gray-500">Amount</p>
@ -597,7 +628,7 @@ const DetailTransaction = () => {
<div>
<p className="text-sm text-gray-500">Phone Number</p>
<p className="font-medium">{transactionDetails?.origin_msisdn}</p>
<p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p>
<p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
</div>
<div>
<p className="text-sm text-gray-500">Phone Number</p>
@ -748,8 +779,8 @@ const DetailTransaction = () => {
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr>
</thead>
@ -922,14 +953,14 @@ const DetailTransaction = () => {
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr>
</thead>
<tbody>
{transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? (
transactionDetails.p24.map((log: { status: string,request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
transactionDetails.p24.map((log: { status: string, request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">
{(() => {
@ -992,10 +1023,10 @@ const DetailTransaction = () => {
<pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
{(() => {
try {
if (log.request_body === null) {
if (log.response_body === null) {
return '';
}
const parsed = JSON.parse(log.request_body);
const parsed = JSON.parse(log.response_body);
return JSON.stringify(parsed, null, 2) ?? '';
} catch (e) {
return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse

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

@ -170,6 +170,7 @@ const ListToolbar = () => {
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="T">TRANSFER</SelectItem>
<SelectItem value="P">PURCHASE</SelectItem>
<SelectItem value="W">WITHDRAW</SelectItem>
@ -181,6 +182,14 @@ const ListToolbar = () => {
<SelectItem value="B">TOP UP P24</SelectItem>
<SelectItem value="A">TRANSFER AGENT</SelectItem>
<SelectItem value="M">WITHDRAWAL AGENT</SelectItem>
<SelectItem value="O">TOP UP AGENT</SelectItem>
<SelectItem value="S">TRANSFER P24</SelectItem>
<SelectItem value="I">WITHDRAW MERCHANT</SelectItem>
<SelectItem value="D">DONATION</SelectItem>
<SelectItem value="F">FEE</SelectItem>
<SelectItem value="V">REVERSAL</SelectItem>
<SelectItem value="C">CASHBACK CASH</SelectItem>
<SelectItem value="H">CASHBACK POINT</SelectItem>
</SelectContent>
</Select>

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

@ -82,6 +82,14 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
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';
default: return '_';
}
},

9
src/pages/transfer/transfertype/blocks/AddDialog.tsx
View File

@ -568,6 +568,15 @@ const AddDialog = () => {
<SelectItem value="B">Top Up P24</SelectItem>
<SelectItem value="A">Transfer Agent</SelectItem>
<SelectItem value="M">Withdraw Agent</SelectItem>
<SelectItem value="O">Top Up Agent</SelectItem>
<SelectItem value="S">Transfer P24</SelectItem>
<SelectItem value="I">Withdraw Merchant</SelectItem>
<SelectItem value="D">Donation</SelectItem>
<SelectItem value="F">Fee</SelectItem>
<SelectItem value="V">Raversal</SelectItem>
<SelectItem value="C">Cashback Cash</SelectItem>
<SelectItem value="H">Cashback Point</SelectItem>
<SelectItem value="J">Withdraw Admin</SelectItem>
</SelectContent>
</Select>
{errors.status_kind && (

11
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -766,7 +766,16 @@ const EditDialog = () => {
<SelectItem value="B">Top Up P24</SelectItem>
<SelectItem value="A">Transfer Agent</SelectItem>
<SelectItem value="M">Withdraw Agent</SelectItem>
</SelectContent>
<SelectItem value="O">Top Up Agent</SelectItem>
<SelectItem value="S">Transfer P24</SelectItem>
<SelectItem value="I">Withdraw Merchant</SelectItem>
<SelectItem value="D">Donation</SelectItem>
<SelectItem value="F">Fee</SelectItem>
<SelectItem value="V">Raversal</SelectItem>
<SelectItem value="C">Cashback Cash</SelectItem>
<SelectItem value="H">Cashback Point</SelectItem>
<SelectItem value="J">Withdraw Admin</SelectItem>
</SelectContent>{' '}
</Select>
{errors.status_kind && (
<span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>

13
src/pages/transfer/transfertype/blocks/ListToolBar.tsx
View File

@ -62,14 +62,14 @@ const ListToolbar = () => {
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
table.getColumn('name')?.setFilterValue(searchValue);
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
table.setPageIndex(0);
}
};
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(searchValue);
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
@ -210,6 +210,15 @@ const ListToolbar = () => {
<SelectItem value="B">Top Up P24</SelectItem>
<SelectItem value="A">Transfer Agent</SelectItem>
<SelectItem value="M">Withdraw Agent</SelectItem>
<SelectItem value="O">Top Up Agent</SelectItem>
<SelectItem value="S">Transfer P24</SelectItem>
<SelectItem value="I">Withdraw Merchant</SelectItem>
<SelectItem value="D">Donation</SelectItem>
<SelectItem value="F">Fee</SelectItem>
<SelectItem value="V">Raversal</SelectItem>
<SelectItem value="C">Cashback Cash</SelectItem>
<SelectItem value="H">Cashback Point</SelectItem>
<SelectItem value="J">Withdraw Admin</SelectItem>
</SelectContent>
</Select>
</div>

23
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -34,8 +34,8 @@ const formatInteger = (num: number): string => {
return num.toLocaleString('en-US', {
style: 'decimal',
maximumFractionDigits: 0
})
}
});
};
interface AccountProps {
id: string;
@ -224,9 +224,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
TM: 'Top Up Master Agent',
TA: 'Top Up Agent',
PL: 'Purchase Loja',
DE: 'Disbursment Escrow',
DM: 'Disbursment Master Agent',
DA: 'Disbursment Agent',
DE: 'Disbursement Escrow',
DM: 'Disbursement Master Agent',
DA: 'Disbursement Agent',
WI: 'Withdraw Merchant',
IC: 'Income Merchant',
DN: 'Donation'
@ -287,7 +287,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
L: { label: 'Purchase Loja', className: 'bg-rose-100 text-rose-600' },
B: { label: 'Top Up P24', className: 'bg-rose-100 text-rose-600' },
A: { label: 'Transfer Agent', className: 'bg-rose-100 text-rose-600' },
M: { label: 'Withdraw Agent', className: 'bg-rose-100 text-rose-600' }
M: { label: 'Withdraw Agent', className: 'bg-rose-100 text-rose-600' },
O: { label: 'Top Up Agent', className: 'bg-rose-100 text-rose-600' },
S: { label: 'Transfer P24', className: 'bg-rose-100 text-rose-600' },
I: { label: 'Withdraw Merchant', className: 'bg-rose-100 text-rose-600' },
D: { label: 'Donation', className: 'bg-rose-100 text-rose-600' },
F: { label: 'Fee', className: 'bg-rose-100 text-rose-600' },
V: { label: 'Raversal', className: 'bg-rose-100 text-rose-600' },
C: { label: 'Cashback Cash', className: 'bg-rose-100 text-rose-600' },
H: { label: 'Cashback Point', className: 'bg-rose-100 text-rose-600' },
J: { label: 'Withdraw Admin', className: 'bg-rose-100 text-rose-600' },
};
const kindInfo = mapping[kind] || {
@ -366,7 +375,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
let filterObject: Record<string, any> = {};
if (debouncedSearchTerm) {
filterObject['any'] = debouncedSearchTerm.toLowerCase();
filterObject['name'] = `%${debouncedSearchTerm.toLowerCase()}%`;
}
if (columnFilters.length > 0) {

6
src/pages/wallet/wallet-history/WalletHistory.tsx
View File

@ -7,11 +7,11 @@ const WalletHistory = () => {
return (
<>
<Helmet>
<title>TPAY | Wallet History</title>
<title>TPAY | Wallet Statement</title>
</Helmet>
<ManageWalletContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet History</h1>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet Statement</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
@ -22,7 +22,7 @@ const WalletHistory = () => {
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Wallet History</span>
<span className="text-sm">Wallet Statement</span>
</Link>
</Breadcrumbs>

52
src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
View File

@ -38,7 +38,6 @@ const ListToolbar = () => {
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''
);
const [dateRange, setDateRange] = useState({ from: '', to: '' });
const [walletId, setWalletId] = useState<string>(
(table.getColumn('id_wallet')?.getFilterValue() as string) ?? ''
);
@ -48,12 +47,6 @@ const ListToolbar = () => {
const [wallets, setWallets] = useState<WalletProps[]>([]);
const [groups, setGroups] = useState<GroupProps[]>([]);
useEffect(() => {
const today = new Date();
const threeMonthsAgo = getOneMonthsAgo();
setDateRange({ from: formatDate(threeMonthsAgo), to: formatDate(today) });
}, []);
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('msisdn')?.setFilterValue(searchValue);
@ -62,15 +55,6 @@ const ListToolbar = () => {
return () => clearTimeout(timer);
}, [searchValue, table]);
const handleFilterByDate = useCallback(() => {
try {
table.getColumn('CreatedAt')?.setFilterValue(dateRange);
} catch (error) {
toast.error('Error applying date filter');
console.error('Error applying date filter:', error);
}
}, [dateRange, table]);
useEffect(() => {
table.getColumn('id_wallet')?.setFilterValue(walletId);
table.setPageIndex(0);
@ -81,12 +65,6 @@ const ListToolbar = () => {
table.setPageIndex(0);
}, [groupId, table]);
useEffect(() => {
if (dateRange.from && dateRange.to) {
handleFilterByDate();
}
}, [dateRange, handleFilterByDate]);
const fetchWallets = async () => {
try {
const response = await GetData(`${API_URL_WALLET}/dashboard/wallet/`, {
@ -129,23 +107,22 @@ const ListToolbar = () => {
from: formatDate(oneMonthAgo),
to: formatDate(today)
};
setSearchValue('');
setWalletId('');
setGroupId('');
setDateRange(resetDateRange);
table.getColumn('msisdn')?.setFilterValue('');
table.getColumn('id_wallet')?.setFilterValue('');
table.getColumn('id_group')?.setFilterValue('');
table.getColumn('CreatedAt')?.setFilterValue(resetDateRange);
setTimeout(() => {
table.setPageIndex(0);
reload();
}, 0);
};
const handleRefresh = () => {
const today = new Date();
const threeMonthsAgo = getOneMonthsAgo();
@ -157,7 +134,6 @@ const ListToolbar = () => {
setSearchValue('');
setWalletId('');
setGroupId('');
setDateRange(resetDateRange);
table.setColumnFilters([{ id: 'CreatedAt', value: resetDateRange }]);
table.setPageIndex(0);
@ -169,24 +145,6 @@ const ListToolbar = () => {
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<div className="flex flex-wrap items-end gap-3 w-full">
<label className="input input-sm w-[160px]">
From
<input
type="date"
value={dateRange.from}
onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
/>
</label>
<label className="input input-sm w-[160px]">
To
<input
type="date"
value={dateRange.to}
onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
/>
</label>
<label className="input input-sm w-[160px]">
<KeenIcon icon="magnifier" />
<input
@ -252,4 +210,4 @@ const ListToolbar = () => {
);
};
export default ListToolbar;
export default ListToolbar;

363
src/pages/wallet/wallet-history/blocks/ShowDetailDialog.tsx Normal file
View File

@ -0,0 +1,363 @@
import { useEffect, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { useManageWalletContext } from '../hooks/useManageWalletHistoryContext';
import { DefaultTooltip, KeenIcon } from '@/components';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
const formatDate = (date: Date) => date.toLocaleDateString('sv-SE');
const API_URL_WALLET = apiConfig.service_wallet;
const API_URL = apiConfig.service_transaction;
interface TransferType {
id: string;
name: string;
}
interface WalletTransaction {
ID: string;
id_balance: string;
transaction_code: string;
transaction_type: {
id: string;
name: string;
};
type: string;
amount: number;
pre_amount: number;
post_amount: number;
category: string;
notes: string;
date: string;
}
const ShowDialog = () => {
const { showDetailDialog, setShowDetailDialog, selectedWallet } = useManageWalletContext();
const [isLoading, setIsLoading] = useState(false);
const { GetData } = useCallApi();
const [transferType, setTransferType] = useState<TransferType[]>([]);
const [transactions, setTransactions] = useState<WalletTransaction[]>([]);
const [filteredTransactions, setFilteredTransactions] = useState<WalletTransaction[]>([]);
const [category, setCategory] = useState<string[]>([]);
const getDefaultDateRange = () => {
const today = new Date();
const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
return {
from: formatDate(sevenDaysAgo),
to: formatDate(today)
};
};
useEffect(() => {
const uniqueCategories = Array.from(
new Set(transactions.map((transaction) => transaction.category))
);
setCategory(uniqueCategories);
}, [transactions]);
const [dateRange, setDateRange] = useState(getDefaultDateRange());
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
const [searchValue, setSearchValue] = useState('');
const fetchTransferType = async () => {
try {
const response = await GetData(`${API_URL}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'created_at',
order_direction: 'ASC'
});
setTransferType(response?.data?.list || []);
} catch (error) {
console.error('Error fetching transfer type', error);
}
};
useEffect(() => {
fetchTransferType();
}, []);
useEffect(() => {
const fetchWalletTransactions = async () => {
if (!selectedWallet?.ID || !showDetailDialog) return;
setIsLoading(true);
try {
const response = await GetData(
`${API_URL_WALLET}/dashboard/balance/list-balance-detail/${selectedWallet.ID}`,
{
limit: 100,
page: 1,
order_field: 'created_at',
order_direction: 'DESC'
}
);
const transactionData =
response?.data?.list || (Array.isArray(response?.data) ? response.data : []);
// console.log('Loaded Transactions:', transactionData);
setTransactions(transactionData);
setFilteredTransactions(transactionData);
} catch (error) {
console.error('Error fetching balance:', error);
} finally {
setIsLoading(false);
}
};
fetchWalletTransactions();
}, [showDetailDialog, selectedWallet, GetData]);
useEffect(() => {
if (transactions.length === 0) return;
setIsLoading(true);
const timer = setTimeout(() => {
// console.log('Debugging Filter - Selected Transfer Type:', selectedTransferType);
const filtered = transactions.filter((transaction) => {
// console.log('Transaction Type:', {
// id: transaction.transaction_type?.id,
// expected: selectedTransferType,
// match: transaction.transaction_type?.id === selectedTransferType
// });
const transactionDate = new Date(transaction.date);
const fromDate = new Date(dateRange.from);
const toDate = new Date(dateRange.to);
fromDate.setHours(0, 0, 0, 0);
toDate.setHours(23, 59, 59, 999);
const dateMatch = transactionDate >= fromDate && transactionDate <= toDate;
const typeMatch = selectedTransferType
? transaction.transaction_type?.id === selectedTransferType
: true;
const codeMatch = searchValue
? transaction.transaction_code.toLowerCase().includes(searchValue.toLowerCase())
: true;
const categoryMatch = selectedCategory ? transaction.category === selectedCategory : true;
return dateMatch && typeMatch && codeMatch && categoryMatch;
});
// console.log('Filtered Results Count:', filtered.length);
setFilteredTransactions(filtered);
setIsLoading(false);
}, 300);
return () => clearTimeout(timer);
}, [dateRange, transactions, selectedTransferType, searchValue, selectedCategory]);
const handleCategoryChange = (value: string) => {
setSelectedCategory(value);
};
const handleTransferTypeChange = (value: string) => {
// console.log('Transfer Type Changed:', value);
setSelectedTransferType(value === 'all' ? null : value);
};
const handleClearAllFilters = () => {
setDateRange(getDefaultDateRange());
setSelectedTransferType(null);
setSearchValue('');
setSelectedCategory(null);
};
useEffect(() => {
if (!showDetailDialog) return;
const checkNewDay = () => {
const now = new Date();
const currentDate = formatDate(now);
const fromDate = new Date(dateRange.from);
if (
currentDate !== formatDate(new Date(dateRange.to)) &&
now.getTime() - fromDate.getTime() > 7 * 24 * 60 * 60 * 1000
) {
setDateRange(getDefaultDateRange());
toast.info('Date range has been updated to the current period');
}
};
checkNewDay();
const interval = setInterval(checkNewDay, 60 * 60 * 1000);
return () => clearInterval(interval);
}, [showDetailDialog, dateRange]);
return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="max-w-[95vw] sm:max-w-[1200px] p-4 overflow-hidden">
<DialogHeader>
<DialogTitle>Details Wallet Statement</DialogTitle>
</DialogHeader>
<DialogBody>
<div className="flex flex-wrap gap-2 lg:gap-5 w-full mb-4">
<div className="flex flex-wrap gap-3 w-full">
<label className="input input-sm w-full sm:w-[160px]">
From
<input
type="date"
placeholder="From"
value={dateRange.from}
onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
/>
</label>
<label className="input input-sm w-full sm:w-[160px]">
To
<input
type="date"
placeholder="To"
value={dateRange.to}
onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
/>
</label>
<div className="w-full sm:w-[160px]">
<Select
value={selectedTransferType || 'all'}
onValueChange={handleTransferTypeChange}
>
<SelectTrigger className="h-[32px]">
<SelectValue placeholder="Transaction Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Select Transaction</SelectItem>
{transferType.map((transfer) => (
<SelectItem
key={transfer.id}
value={transfer.id} // Pastikan tidak ada .toString() di sini
>
{transfer.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="w-full sm:w-[160px]">
<Select value={selectedCategory ?? ''} onValueChange={handleCategoryChange}>
<SelectTrigger className="h-[32px]">
<SelectValue placeholder="Select Category" />
</SelectTrigger>
<SelectContent>
{category.length === 0 ? (
<div className="text-gray-500 px-4 py-2">No data</div>
) : (
category.map((cat) => (
<SelectItem key={cat} value={cat}>
{cat}
</SelectItem>
))
)}
</SelectContent>
</Select>
</div>
<label className="input input-sm w-full sm:w-[160px]">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Transaction Code"
className="overflow-hidden text-ellipsis w-full"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
</label>
<DefaultTooltip title={'Reset Filter'} placement={'top'}>
<Button
variant="outline"
className="h-8 disabled:bg-gray-400"
onClick={handleClearAllFilters}
>
<KeenIcon icon="arrow-circle-left" />
</Button>
</DefaultTooltip>
</div>
</div>
<div className="py-4 max-h-[70vh] overflow-y-auto">
{isLoading ? (
<div className="text-center text-gray-500">Loading details...</div>
) : filteredTransactions.length > 0 ? (
<div className="w-full">
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-gray-100 text-left">
<th className="p-3 text-sm min-w-[120px]">Transaction Code</th>
<th className="p-3 text-sm min-w-[180px]">Transaction Type</th>
<th className="p-3 text-sm min-w-[80px]">Type</th>
<th className="p-3 text-sm min-w-[100px]">Amount</th>
<th className="p-3 text-sm min-w-[100px]">Pre Amount</th>
<th className="p-3 text-sm min-w-[100px]">Post Amount</th>
<th className="p-3 text-sm min-w-[80px]">Category</th>
<th className="p-3 text-sm min-w-[150px]">Date</th>
<th className="p-3 text-sm min-w-[200px]">Notes</th>
</tr>
</thead>
<tbody>
{filteredTransactions.map((transaction) => (
<tr key={transaction.ID}>
<td className="p-3 text-sm">{transaction.transaction_code}</td>
<td className="p-3 text-sm">
{transaction.transaction_type?.name || 'N/A'}
</td>
<td className="p-3 text-sm">{transaction.type}</td>
<td className="p-3 text-sm">{transaction.amount.toFixed(2)}</td>
<td className="p-3 text-sm">{transaction.pre_amount.toFixed(2)}</td>
<td className="p-3 text-sm">{transaction.post_amount.toFixed(2)}</td>
<td className="p-3 text-sm">{transaction.category}</td>
<td className="p-3 text-sm">
{new Date(transaction.date).toLocaleString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})}
</td>
<td className="p-3 text-sm">{transaction.notes || '-'}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
) : (
<div className="text-center text-gray-500 py-10">No transaction data available</div>
)}
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default ShowDialog;

75
src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
View File

@ -5,6 +5,7 @@ import { useCallApi } from '@/hooks';
import { ColumnDef } from '@tanstack/react-table';
import React, { createContext, useCallback, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar';
import ShowDetailDialog from '../blocks/ShowDetailDialog';
const formatNumber = (num: number): string => {
return num.toLocaleString('en-US', {
@ -14,7 +15,9 @@ const formatNumber = (num: number): string => {
};
interface WalletProps {
ID: string;
id: string;
id_wallet: string;
name: string;
id_currency: string;
status: string;
@ -22,6 +25,8 @@ interface WalletProps {
interface ContextProps {
wallets: WalletProps[];
showDetailDialog: boolean;
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showEditDialog: boolean;
@ -39,6 +44,8 @@ interface ContextProps {
const initialProps: ContextProps = {
wallets: [],
showDetailDialog: false,
setShowDetailDialog: () => {},
showAddDialog: false,
handleAddDialog: (show: boolean) => {},
showEditDialog: false,
@ -54,6 +61,7 @@ const API_URL_WALLET = apiConfig.service_wallet;
const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }) => {
const [wallets, setWallets] = useState<WalletProps[]>([]);
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@ -92,7 +100,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[550px]',
headerClassName: 'w-[300px]',
cellClassName: 'p-[20px]'
}
},
@ -106,6 +114,26 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
headerClassName: 'w-[200px]'
}
},
{
accessorKey: 'total_debit',
header: ({ column }) => <DataGridColumnHeader title="Total Debit" column={column} />,
cell: ({ row }) => formatNumber(row.original.total_debit),
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorKey: 'total_credit',
header: ({ column }) => <DataGridColumnHeader title="Total Credit" column={column} />,
cell: ({ row }) => formatNumber(row.original.total_credit),
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorKey: 'trx_count_today',
header: ({ column }) => (
@ -144,16 +172,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
headerClassName: 'w-[200px]'
}
},
// {
// accessorFn: (row) => row.balance_type?.name,
// id: 'balance_type_name',
// header: ({ column }) => <DataGridColumnHeader title="Balance Type Name" column={column} />,
// enableSorting: false,
// enableHiding: false,
// meta: {
// headerClassName: 'w-[200px]'
// }
// },
{
accessorKey: 'currency_name',
header: ({ column }) => <DataGridColumnHeader title="Currency Name" column={column} />,
@ -182,6 +200,32 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
headerClassName: 'w-[200px]'
}
},
{
accessorKey: 'detail_statemenet',
header: ({ column }) => <DataGridColumnHeader title="Detail Statement" column={column} />,
enableSorting: false,
enableHiding: false,
cell: (data) => {
const row = data.row.original;
return (
<div key={`detail_statement-${row.id}`} className="flex gap-2 justify-center">
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedWallet({
...row,
ID: row.ID || row.id
});
setShowDetailDialog(true);
}}
>
{' '}
<KeenIcon icon="eye" />
</button>
</div>
);
}
}
// {
// accessorFn: (row) => row.group?.is_bank,
// id: 'is_bank',
@ -219,7 +263,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
if (f.id === 'id_wallet' && f.value) {
filterParams.id_wallet = f.value;
}
if (f.id === 'id_group' && f.value) {
filterParams.id_group = f.value;
}
@ -325,6 +369,8 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
<ManageWalletContext.Provider
value={{
wallets,
showDetailDialog,
setShowDetailDialog,
showAddDialog,
handleAddDialog,
showEditDialog,
@ -336,6 +382,9 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<ShowDetailDialog />
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
@ -353,4 +402,4 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
};
export { ManageWalletContext, ManageWalletContextProvider };
export type { WalletProps };
export type { WalletProps };