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

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

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

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

@ -66,6 +66,24 @@ const DetailApprovalTransaction = () => {
>
Origin Customer
</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
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')}
@ -119,21 +137,32 @@ const DetailApprovalTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
<div>
{(() => {
let status;
let badgeClass;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else {
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>
<p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +201,7 @@ const DetailApprovalTransaction = () => {
</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>
<h3 className="font-semibold flex items-center">
@ -208,8 +230,54 @@ const DetailApprovalTransaction = () => {
</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">
<h3 className="font-semibold flex items-center">
Transaction Information
@ -291,69 +359,9 @@ const DetailApprovalTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</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>
)}
{activeTab === 'origincustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3>
@ -378,6 +386,68 @@ const DetailApprovalTransaction = () => {
</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' && (
<div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3>
@ -443,8 +513,8 @@ const DetailApprovalTransaction = () => {
<thead>
<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">Created At</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">Date</th>
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr>
</thead>
<tbody>
@ -466,8 +536,19 @@ const DetailApprovalTransaction = () => {
return status;
})()}
</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">{log.updated_at}</td>
<td className="px-4 py-2 text-sm text-gray-500">
{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>
))
) : (

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(() => {
const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
settrxDate({
from: formatDate(today), // Set 'from' to today
to: formatDate(nextWeek), // Set 'to' to 7 days later
from: formatDate(firstDayOfMonth),
to: formatDate(today),
});
}, []);

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

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

188
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}`, {
id: selectedTransactionId
});
// console.log(response?.data);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
@ -66,6 +65,24 @@ const DetailTransaction = () => {
>
Origin Customer
</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
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')}
@ -119,21 +136,32 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
<div>
{(() => {
let status;
let badgeClass;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else {
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>
<p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +200,7 @@ const DetailTransaction = () => {
</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>
<h3 className="font-semibold flex items-center">
@ -246,7 +267,7 @@ const DetailTransaction = () => {
providertype = 'HOST TO HOST';
} else if (transactionDetails?.purchase.product.provider.type === 'agent') {
providertype = 'AGENT';
}
}
return providertype;
})()}
</p>
@ -337,69 +358,9 @@ const DetailTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</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>
)}
{activeTab === 'origincustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3>
@ -424,6 +385,68 @@ const DetailTransaction = () => {
</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' && (
<div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3>
@ -489,8 +512,8 @@ const DetailTransaction = () => {
<thead>
<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">Created At</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">Date</th>
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr>
</thead>
<tbody>
@ -512,8 +535,19 @@ const DetailTransaction = () => {
return status;
})()}
</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">{log.updated_at}</td>
<td className="px-4 py-2 text-sm text-gray-500">
{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>
))
) : (

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(() => {
const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
settrxDate({
from: formatDate(today), // Set 'from' to today
to: formatDate(nextWeek), // Set 'to' to 7 days later
from: formatDate(firstDayOfMonth),
to: formatDate(today),
});
}, []);

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

@ -84,7 +84,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
});
return formattedDateTime; // Format DD-MM-YYYY HH:MM:SS (menggunakan waktu yang sudah ada)
}
},
},
{
accessorKey: 'origin_customer.fullname',
header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
@ -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',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
@ -145,7 +132,37 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
meta: {
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',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
@ -201,11 +218,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
if (filter == undefined || filter.length == 0) {
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
startdate = today.toISOString().split('T')[0];
enddate = nextWeek.toISOString().split('T')[0];
// Tanggal 1 di bulan sekarang
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) {
startdate = filter[0].value.from;
enddate = filter[0].value.to;