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

Update approval transaction

Browse Source
This commit is contained in:
wayanrivan
2025-04-11 14:22:20 +07:00
parent 9109b9d688
commit f959a477f1
7 changed files with 395 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
View File

@ -1,14 +1,13 @@
import { useTransactionContext } from '../hooks/useApprovalTransactionContext'; import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { import {
Dialog, Dialog,
DialogBody, DialogBody,
DialogContent, DialogContent,
DialogDescription,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
@ -16,9 +15,9 @@ import {
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue SelectValue,
} from '@/components/ui/select'; } from '@/components/ui/select';
import { Alert, KeenIcon, useDataGrid } from '@/components'; import { Alert, useDataGrid } from '@/components';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@ -27,11 +26,11 @@ const API_URL = apiConfig.transaction;
const ApprovalDialog = () => { const ApprovalDialog = () => {
const { GetData, PostData } = useCallApi(); const { GetData, PostData } = useCallApi();
// const { reload } = useDataGrid();
const { const {
showApprovalDialog, showApprovalDialog,
setShowApprovalDialog, setShowApprovalDialog,
selectedTransactionIdForApproval selectedTransactionIdForApproval,
} = useTransactionContext(); } = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null); const [transactionDetails, setTransactionDetails] = useState<any>(null);
@ -39,12 +38,12 @@ const ApprovalDialog = () => {
const [formField, setFormField] = useState({ const [formField, setFormField] = useState({
transaction_code: '', transaction_code: '',
status: '', status: '',
notes: '' notes: '',
}); });
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: '',
}); });
const doApproval = useCallback( const doApproval = useCallback(
@ -60,39 +59,51 @@ const ApprovalDialog = () => {
toast.error('Please select a status.'); toast.error('Please select a status.');
return; return;
} }
const response = await PostData(`${API_URL}/transaction/set-approval`, { const response = await PostData(`${API_URL}/transaction/set-approval`, {
transaction_code: transactionDetails.id, id_transaction: transactionDetails.id,
status: formField.status, status: formField.status,
notes: formField.notes notes: formField.notes,
}); });
if (response?.status) { if (response?.status) {
setAlert((prev) => ({ ...prev, show: false, message: '' })); setAlert({ show: false, message: '' });
toast.success('Success Update Position'); toast.success('Success Update Position');
const createActivity = { const createActivity = {
module: 'Approval Transaction', module: 'Approval Transaction',
description: `Change status approve for transaction => ${transactionDetails.code}`, description: `Change status approve for transaction => ${transactionDetails.code}`,
action: 'U' action: 'U',
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
setShowApprovalDialog(false); // optionally close dialog setShowApprovalDialog(false);
} else { } else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message })); setAlert({ show: true, message: response?.message });
} }
}, },
[formField, transactionDetails] [formField, transactionDetails]
); );
useEffect(() => {
if (showApprovalDialog) {
// Reset form fields when dialog opens
setFormField({
transaction_code: '',
status: '',
notes: '',
});
setTransactionDetails(null); // Optional reset
}
}, [showApprovalDialog]);
useEffect(() => { useEffect(() => {
const fetchTransactionDetails = async () => { const fetchTransactionDetails = async () => {
if (selectedTransactionIdForApproval) { if (selectedTransactionIdForApproval) {
try { try {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, { const response = await GetData(
id: selectedTransactionIdForApproval `${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`,
}); {
// console.log(response?.data.code); id: selectedTransactionIdForApproval,
// console.log(selectedTransactionIdForApproval); }
);
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
@ -105,6 +116,15 @@ const ApprovalDialog = () => {
} }
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]); }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
// Set formField.transaction_code once details are fetched
useEffect(() => {
if (transactionDetails) {
setFormField((prev) => ({
...prev,
transaction_code: transactionDetails.id ?? '',
}));
}
}, [transactionDetails]);
return ( return (
<Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}> <Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
@ -113,7 +133,7 @@ const ApprovalDialog = () => {
<DialogTitle>Approval Transaction</DialogTitle> <DialogTitle>Approval Transaction</DialogTitle>
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody>
<form action="" onSubmit={doApproval}> <form onSubmit={doApproval}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
<div className="w-full"> <div className="w-full">
<div className="flex items-center flex-wrap gap-2.5"> <div className="flex items-center flex-wrap gap-2.5">
@ -122,7 +142,9 @@ const ApprovalDialog = () => {
<div className="grow"> <div className="grow">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))} onValueChange={(status) =>
setFormField((prev) => ({ ...prev, status }))
}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />
@ -138,13 +160,20 @@ const ApprovalDialog = () => {
{formField.status === 'N' && ( {formField.status === 'N' && (
<div className="flex items-center flex-wrap gap-2.5 mt-4"> <div className="flex items-center flex-wrap gap-2.5 mt-4">
<label className="form-label max-w-56">Notes</label> <label className="form-label max-w-56">Notes</label>
<div className="grow"> <div className="grow">
<textarea <Input
type="text"
placeholder="Notes"
name="notes" name="notes"
id="notes" id="notes"
value={formField.notes} value={formField.notes}
></textarea> onChange={(e) =>
setFormField((prev) => ({
...prev,
notes: e.target.value,
}))
}
/>
</div> </div>
</div> </div>
)} )}

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

@ -66,6 +66,24 @@ const DetailApprovalTransaction = () => {
> >
Origin Customer Origin Customer
</button> </button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationcustomer')}
>
Destination Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('originwallet')}
>
Origin Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationwallet')}
>
Destination Wallet
</button>
<button <button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`} className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('log')} onClick={() => setActiveTab('log')}
@ -119,21 +137,32 @@ const DetailApprovalTransaction = () => {
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Status</p> <p className="text-sm text-gray-500">Status</p>
<p className="font-medium"> <div>
{(() => { {(() => {
let status; let status;
let badgeClass;
if (transactionDetails?.status === 'C') { if (transactionDetails?.status === 'C') {
status = 'COMPLETE'; status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') { } else if (transactionDetails?.status === 'F') {
status = 'FAILED'; status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') { } else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS'; status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else { } else {
status = 'PENDING'; status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
} }
return status;
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
})()} })()}
</p> </div>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Transaction Type</p> <p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +201,7 @@ const DetailApprovalTransaction = () => {
</span> </span>
</h3> </h3>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div> </div>
<h3 className="font-semibold flex items-center"> <h3 className="font-semibold flex items-center">
@ -208,8 +230,54 @@ const DetailApprovalTransaction = () => {
</div> </div>
</div> </div>
)} )}
{activeTab === 'detail' && 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>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
</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">
{(() => {
let providertype;
if (transactionDetails?.purchase.product.provider.type === 'h2h') {
providertype = 'HOST TO HOST';
} else if (transactionDetails?.purchase.product.provider.type === 'agent') {
providertype = 'AGENT';
}
return providertype;
})()}
</p>
</div>
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && ( {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold flex items-center"> <h3 className="font-semibold flex items-center">
Transaction Information Transaction Information
@ -291,69 +359,9 @@ const DetailApprovalTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p> <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</div> </div>
</div> </div>
<h3 className="font-semibold flex items-center">
Destination Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Customer
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Destination Customer
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div> </div>
)} )}
{activeTab === 'origincustomer' && ( {activeTab === 'origincustomer' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3> <h3 className="font-semibold">Origin Customer</h3>
@ -378,6 +386,68 @@ const DetailApprovalTransaction = () => {
</div> </div>
)} )}
{activeTab === 'destinationcustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Customer</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">Username</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
</div>
)}
{activeTab === 'originwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Wallet</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'destinationwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3>
{!transactionDetails?.transfer ? (
<div className="text-center text-sm text-gray-500">No Data available</div>
) : (
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
</div>
</div>
)}
</div>
)}
{activeTab === 'log' && ( {activeTab === 'log' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3> <h3 className="font-semibold">Transaction Logs</h3>
@ -443,8 +513,8 @@ const DetailApprovalTransaction = () => {
<thead> <thead>
<tr className="bg-gray-100"> <tr className="bg-gray-100">
<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">Created At</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -466,8 +536,19 @@ const DetailApprovalTransaction = () => {
return status; return status;
})()} })()}
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> {new Date(log.created_at).toLocaleString('sv-SE', {
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(' ', ' ')}
</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
</tr> </tr>
)) ))
) : ( ) : (

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

@ -18,12 +18,10 @@ const ListToolbar = () => {
// useEffect to set the default date values // useEffect to set the default date values
useEffect(() => { useEffect(() => {
const today = new Date(); const today = new Date();
const nextWeek = new Date(today); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
nextWeek.setDate(today.getDate() + 7);
settrxDate({ settrxDate({
from: formatDate(today), // Set 'from' to today from: formatDate(firstDayOfMonth),
to: formatDate(nextWeek), // Set 'to' to 7 days later to: formatDate(today),
}); });
}, []); }, []);

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

@ -155,7 +155,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
}, },
{ {
accessorKey: 'type.name', accessorKey: 'type.name',
header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -163,20 +163,33 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
}, },
}, },
{ {
accessorFn: (row) => { accessorKey: 'status_approve',
switch (row.status_approve) { header: 'Status',
case 'W': return 'WAITING APPROVAL'; cell: ({ row }) => {
case 'Y': return 'APPROVED'; const statusCode = row.original.status_approve;
case 'N': return 'REJECTED'; let label = '';
default: return 'PENDING'; let badgeClass = '';
switch (statusCode) {
case 'Y':
label = 'APPROVED';
badgeClass = 'bg-green-100 text-green-800';
break;
case 'N':
label = 'REJECTED';
badgeClass = 'bg-red-100 text-red-800';
break;
case 'W':
label = 'WAITING APPROVAL';
badgeClass = 'bg-gray-100 text-gray-800';
break;
} }
},
id: 'status_approve', return (
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
enableSorting: false, {label}
enableHiding: false, </span>
meta: { );
headerClassName: 'w-[250px]',
}, },
}, },
{ {

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

@ -30,7 +30,6 @@ const DetailTransaction = () => {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, { const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
id: selectedTransactionId id: selectedTransactionId
}); });
// console.log(response?.data);
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
@ -66,6 +65,24 @@ const DetailTransaction = () => {
> >
Origin Customer Origin Customer
</button> </button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationcustomer')}
>
Destination Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('originwallet')}
>
Origin Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationwallet')}
>
Destination Wallet
</button>
<button <button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`} className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('log')} onClick={() => setActiveTab('log')}
@ -119,21 +136,32 @@ const DetailTransaction = () => {
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Status</p> <p className="text-sm text-gray-500">Status</p>
<p className="font-medium"> <div>
{(() => { {(() => {
let status; let status;
let badgeClass;
if (transactionDetails?.status === 'C') { if (transactionDetails?.status === 'C') {
status = 'COMPLETE'; status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') { } else if (transactionDetails?.status === 'F') {
status = 'FAILED'; status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') { } else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS'; status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else { } else {
status = 'PENDING'; status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
} }
return status;
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
})()} })()}
</p> </div>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Transaction Type</p> <p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +200,7 @@ const DetailTransaction = () => {
</span> </span>
</h3> </h3>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div> </div>
<h3 className="font-semibold flex items-center"> <h3 className="font-semibold flex items-center">
@ -337,69 +358,9 @@ const DetailTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p> <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</div> </div>
</div> </div>
<h3 className="font-semibold flex items-center">
Destination Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Customer
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Destination Customer
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div> </div>
)} )}
{activeTab === 'origincustomer' && ( {activeTab === 'origincustomer' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3> <h3 className="font-semibold">Origin Customer</h3>
@ -424,6 +385,68 @@ const DetailTransaction = () => {
</div> </div>
)} )}
{activeTab === 'destinationcustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Customer</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">Username</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
</div>
)}
{activeTab === 'originwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Wallet</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'destinationwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3>
{!transactionDetails?.transfer ? (
<div className="text-center text-sm text-gray-500">No Data available</div>
) : (
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
</div>
</div>
)}
</div>
)}
{activeTab === 'log' && ( {activeTab === 'log' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3> <h3 className="font-semibold">Transaction Logs</h3>
@ -489,8 +512,8 @@ const DetailTransaction = () => {
<thead> <thead>
<tr className="bg-gray-100"> <tr className="bg-gray-100">
<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">Created At</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -512,8 +535,19 @@ const DetailTransaction = () => {
return status; return status;
})()} })()}
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> {new Date(log.created_at).toLocaleString('sv-SE', {
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(' ', ' ')}
</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
</tr> </tr>
)) ))
) : ( ) : (

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

@ -18,12 +18,10 @@ const ListToolbar = () => {
// useEffect to set the default date values // useEffect to set the default date values
useEffect(() => { useEffect(() => {
const today = new Date(); const today = new Date();
const nextWeek = new Date(today); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
nextWeek.setDate(today.getDate() + 7);
settrxDate({ settrxDate({
from: formatDate(today), // Set 'from' to today from: formatDate(firstDayOfMonth),
to: formatDate(nextWeek), // Set 'to' to 7 days later to: formatDate(today),
}); });
}, []); }, []);

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

@ -125,19 +125,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}, },
}, },
{ {
accessorFn: (row) => {
let status;
if (row.status === 'C') {
status = 'COMPLETE';
} else if (row.status === 'F') {
status = 'FAILED';
} else if (row.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
}
return status;
},
accessorKey: 'status', accessorKey: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false, enableSorting: false,
@ -145,6 +132,36 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
meta: { meta: {
headerClassName: 'w-[250px]', headerClassName: 'w-[250px]',
}, },
cell: ({ row }) => {
const statusCode = row.original.status;
let label = '';
let badgeClass = '';
switch (statusCode) {
case 'C':
label = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
break;
case 'F':
label = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
break;
case 'O':
label = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
break;
default:
label = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
break;
}
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{label}
</span>
);
},
}, },
{ {
accessorKey: 'description', accessorKey: 'description',
@ -201,11 +218,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
if (filter == undefined || filter.length == 0) { if (filter == undefined || filter.length == 0) {
const today = new Date(); const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
startdate = today.toISOString().split('T')[0]; // Tanggal 1 di bulan sekarang
enddate = nextWeek.toISOString().split('T')[0]; const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
startdate = firstDayOfMonth.toISOString().split('T')[0];
enddate = today.toISOString().split('T')[0];
} else if (filter != undefined || filter.length != 0) { } else if (filter != undefined || filter.length != 0) {
startdate = filter[0].value.from; startdate = filter[0].value.from;
enddate = filter[0].value.to; enddate = filter[0].value.to;