This commit is contained in:
Raja Oktafrianto
2025-05-23 06:30:29 +07:00
4 changed files with 241 additions and 156 deletions

View File

@ -261,15 +261,15 @@ const DashboardHomePage = () => {
</Helmet> </Helmet>
<Container> <Container>
{/* Account Balance Cards */} {/* Account Balance Cards */}
{currentRole === 'Escrow' || currentRole === 'Master Agent' ? ( {/* {currentRole === 'Escrow' || currentRole === 'Master Agent' ? (
<div className="grid gap-5 lg:gap-7.5 mb-14 mt-7"> <div className="grid gap-5 lg:gap-7.5 mb-14 mt-7">
<BalanceCard id={idCustomer} /> <BalanceCard id={idCustomer} />
</div> </div>
) : null} ) : null} */}
<div className="flex space-x-4 mt-5"> <div className="flex space-x-4 mt-5">
{bankaccount?.data && bankaccount?.data.length > 0 {bankaccount?.data && bankaccount?.data.length > 0
&& getAuth()?.statusbalance=='Y' // && getAuth()?.statusbalance=='Y'
? ( ? (
bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => ( bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => (
<BankSaldo <BankSaldo

View File

@ -77,12 +77,40 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
}, [fetchTransferType]); }, [fetchTransferType]);
useEffect(() => { useEffect(() => {
const categoryMap: Record<string, string> = {
T: 'TRANSFER',
P: 'PURCHASE',
W: 'WITHDRAW',
U: 'TOP UP',
R: 'RETURN',
N: 'TOP UP PARTNER',
E: 'REWARD',
L: 'PURCHASE LOJA',
B: 'TOP UP P24',
A: 'TRANSFER AGENT',
M: 'WITHDRAWAL AGENT',
O: 'TOP UP AGENT',
S: 'TRANSFER P24',
I: 'WIJTDRAW MERCHANT',
D: 'DONATION',
F: 'FEE',
V: 'REVERSAL',
C: 'CASHBACK CASH',
H: 'CASHBACK POINT',
};
const uniqueCategories = Array.from( const uniqueCategories = Array.from(
new Set(transaction.map((tx) => tx.category).filter((cat) => !!cat)) new Set(
transaction
.map((tx) => categoryMap[tx.category] || '_') // map code to label or default to '_'
.filter((cat) => !!cat && cat !== '_') // remove undefined/null or underscore
)
); );
setCategory(uniqueCategories); setCategory(uniqueCategories);
}, [transaction]); }, [transaction]);
const handleTransferTypeChange = (value: string) => { const handleTransferTypeChange = (value: string) => {
setSelectedTransferType(value === 'all' ? null : value); setSelectedTransferType(value === 'all' ? null : value);
}; };
@ -102,11 +130,26 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
const handleApplyFilters = () => { const handleApplyFilters = () => {
const appliedFilters: any = {}; const appliedFilters: any = {};
if (dateRange.from) appliedFilters.date_from = dateRange.from+" 00:00:00"; if (dateRange.from && dateRange.to) {
if (dateRange.to) appliedFilters.date_to = dateRange.to+" 23:59:59"; const fromDate = new Date(`${dateRange.from}T00:00:00Z`);
if (selectedTransferType) appliedFilters.transaction_type_id = selectedTransferType; const toDate = new Date(`${dateRange.to}T23:59:59Z`);
if (selectedCategory) appliedFilters.category = selectedCategory; appliedFilters.date = {
if (searchValue) appliedFilters.transaction_code = searchValue; from: fromDate.toISOString(),
to: toDate.toISOString(),
};
}
if (selectedTransferType) {
appliedFilters.transaction_type_id = selectedTransferType;
}
if (selectedCategory) {
appliedFilters.category = selectedCategory;
}
if (searchValue) {
appliedFilters.transaction_code = searchValue;
}
setFilters(appliedFilters); setFilters(appliedFilters);
}; };
@ -159,10 +202,37 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
meta: { headerClassName: 'min-w-[100px]' }, meta: { headerClassName: 'min-w-[100px]' },
}, },
{ {
accessorFn: (row: any) => {
switch (row.category) {
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';
default: return '_';
}
},
accessorKey: 'category', accessorKey: 'category',
header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />, header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />,
enableSorting: false, enableSorting: false,
meta: { headerClassName: 'min-w-[80px]' }, enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
}, },
{ {
accessorKey: 'date', accessorKey: 'date',
@ -207,10 +277,10 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
with_deleted: false, with_deleted: false,
order_field: "created_at", order_field: "created_at",
order_direction: 'DESC', order_direction: 'DESC',
filter: filters filter: JSON.stringify(filters)
}); });
// console.log(filters); // console.log(response);
if (!response || !response.data) { if (!response || !response.data) {
console.warn('No data received:', response); console.warn('No data received:', response);
@ -229,7 +299,7 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[1200px] p-4 overflow-hidden"> <DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Details Wallet Statement</DialogTitle> <DialogTitle>Details Wallet Statement</DialogTitle>
</DialogHeader> </DialogHeader>
@ -318,7 +388,7 @@ const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
<DataGridProvider <DataGridProvider
key={JSON.stringify(filters)} key={JSON.stringify(filters)}
columns={columns} columns={columns}
pagination={{ size: 10 }} pagination={{ size: 5 }}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]} sorting={[{ id: 'id', desc: false }]}
serverSide={true} serverSide={true}

View File

@ -94,7 +94,7 @@ const DetailTransaction = () => {
} }
}, [showDetailDialog]); }, [showDetailDialog]);
const handleExport = async () => { const handleExport = async () => {
if (!selectedTransactionId || !transactionDetails) return; if (!selectedTransactionId || !transactionDetails) return;
setIsExporting(true); setIsExporting(true);
@ -144,8 +144,7 @@ const handleExport = async () => {
} finally { } finally {
setIsExporting(false); setIsExporting(false);
} }
}; };
return ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@ -153,7 +152,7 @@ const handleExport = async () => {
<DialogHeader> <DialogHeader>
<DialogTitle className="text-2xl font-bold">Transaction Details</DialogTitle> <DialogTitle className="text-2xl font-bold">Transaction Details</DialogTitle>
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody className="flex flex-col overflow-hidden h-full">
<div className="py-4 overflow-y-auto max-h-[600px] space-y-6"> <div className="py-4 overflow-y-auto max-h-[600px] space-y-6">
{/* Summary Info */} {/* Summary Info */}
{transactionDetails && ( {transactionDetails && (
@ -213,7 +212,6 @@ const handleExport = async () => {
</div> </div>
)} )}
{/* Log Table */}
<div className="border rounded-lg overflow-x-auto"> <div className="border rounded-lg overflow-x-auto">
{isLoading ? ( {isLoading ? (
<div className="flex flex-col items-center justify-center p-8"> <div className="flex flex-col items-center justify-center p-8">
@ -229,6 +227,32 @@ const handleExport = async () => {
<p className="mt-4 text-gray-500">Loading Logs Details...</p> <p className="mt-4 text-gray-500">Loading Logs Details...</p>
</div> </div>
) : ( ) : (
<>
<div className="flex justify-end m-5">
<button
className={`px-5 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors flex items-center ${isExporting ? 'opacity-50 pointer-events-none' : ''}`}
onClick={() => {
if (!isExporting) {
handleExport();
}
}}
>
{isExporting ? (
<>
<span className="animate-spin ">
<KeenIcon icon="spinner" />
</span>
Exporting...
</>
) : (
<>
<KeenIcon icon="download" />
Export
</>
)}
</button>
</div>
<div className="max-h-[900px] overflow-y-auto border rounded-lg">
<table className="min-w-full table-auto"> <table className="min-w-full table-auto">
<thead> <thead>
<tr className="bg-gray-100"> <tr className="bg-gray-100">
@ -236,8 +260,12 @@ const handleExport = async () => {
<th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Amount</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Amount</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">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">
<th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th> Process Date
</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">
Invoice Number
</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Remark 1</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 1</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Remark 2</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 2</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Remark 3</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 3</th>
@ -254,7 +282,9 @@ const handleExport = async () => {
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
{log.customer?.fullname ?? 'Not Found'} {log.customer?.fullname ?? 'Not Found'}
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td> <td className="px-4 py-2 text-sm text-gray-500">
{log.amount ?? '-'}
</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
{renderStatusBadge(log.status) ?? '-'} {renderStatusBadge(log.status) ?? '-'}
</td> </td>
@ -266,9 +296,15 @@ const handleExport = async () => {
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
{log.reference ?? '-'} {log.reference ?? '-'}
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.remark_1 ?? '-'}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.remark_2 ?? '-'}</td> {log.remark_1 ?? '-'}
<td className="px-4 py-2 text-sm text-gray-500">{log.remark_3 ?? '-'}</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">
{log.remark_2 ?? '-'}
</td>
<td className="px-4 py-2 text-sm text-gray-500">
{log.remark_3 ?? '-'}
</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<button <button
className="btn btn-sm btn-icon btn-clear btn-light" className="btn btn-sm btn-icon btn-clear btn-light"
@ -284,40 +320,19 @@ const handleExport = async () => {
)) ))
) : ( ) : (
<tr> <tr>
<td colSpan={10} className="px-4 py-2 text-center text-sm text-gray-500"> <td
colSpan={10}
className="px-4 py-2 text-center text-sm text-gray-500"
>
No logs available No logs available
</td> </td>
</tr> </tr>
)} )}
</tbody> </tbody>
</table> </table>
)}
</div> </div>
{/* Export Button - Moved to bottom right after table */}
<div className="flex justify-end">
<button
className={`px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center ${isExporting ? 'opacity-50 pointer-events-none' : ''}`}
onClick={() => {
if (!isExporting) {
handleExport();
}
}}
>
{isExporting ? (
<>
<span className="animate-spin mr-2">
<KeenIcon icon="spinner" />
</span>
Exporting...
</>
) : (
<>
<KeenIcon icon="download" className="mr-2" />
Export
</> </>
)} )}
</button>
</div> </div>
</div> </div>
</DialogBody> </DialogBody>

View File

@ -209,16 +209,16 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, groups, 'group_id', 'Group', true, dialogType === "update"||false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, groups, 'group_id', 'Group', true, dialogType === "update"||false): ''}
{/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */} {/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, dialogType==='create'?false:true): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser', previewImg, setPreviewImg): ''} {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser', previewImg, setPreviewImg): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "update"||false): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "create"||false): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
{/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */} {/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, identity_type, 'identity_type', 'Identity Type', false, false): ''} {(formData.id || dialogType === "create") ? generateList(formData, handleChange, identity_type, 'identity_type', 'Identity Type', false, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''} {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
<div className="bg-white space-y-6"> <div className="bg-white space-y-6">