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

update transaction detail

Browse Source
This commit is contained in:
wayanrivan
2025-04-07 12:07:59 +07:00
parent 758329ec2e
commit 4a6033d7b4
11 changed files with 972 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/transaction/approval-transaction/ApprovalTransaction.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Container, DataGridInner } from '@/components';
import { ApprovalTransactionProvider } from './hooks/ApprovalTransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
const ApprovalTransaction = () => {
return (
<ApprovalTransactionProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Transaction</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Approval Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</ApprovalTransactionProvider>
);
};
export default ApprovalTransaction;

538
src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx Normal file
View File

@ -0,0 +1,538 @@
import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
const API_URL = apiConfig.transaction;
const DetailApprovalTransaction = () => {
const { GetData } = useCallApi();
const {
showDetailDialog,
setShowDetailDialog,
selectedTransactionId
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
useEffect(() => {
const fetchTransactionDetails = async () => {
if (selectedTransactionId) {
try {
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);
}
}
};
if (showDetailDialog && selectedTransactionId) {
fetchTransactionDetails();
}
}, [showDetailDialog, selectedTransactionId, GetData]);
const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Transaction Details</DialogTitle>
</DialogHeader>
<DialogBody>
{/* Tabs Navigation */}
<div className="flex border-b border-gray-200">
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('detail')}
>
Detail Transaction
</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')}
>
Origin Customer
</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')}
>
Transaction Log
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('approve')}
>
Approval Log
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'p24' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('p24')}
>
Log P24
</button>
</div>
{/* Tab Content */}
<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>
<p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p>
</div>
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
</div>
<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)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee</p>
<p className="font-medium">
{transactionDetails?.kind === 'P'
? transactionDetails?.purchase.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
: transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
{(() => {
let status;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
}
return status;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Transaction Type</p>
<p className="font-medium">
{(() => {
let kind;
if (transactionDetails?.kind === 'T') {
kind = 'TRANSFER';
} else if (transactionDetails?.kind === 'P') {
kind = 'PURCHASE';
} else if (transactionDetails?.kind === 'W') {
kind = 'WITHDRAW';
} else if (transactionDetails?.kind === 'U') {
kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') {
kind = 'RETURN';
}
return kind;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.description}</p>
</div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</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>
<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)}</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)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">{transactionDetails?.purchase.cashback_point}</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)}</p>
</div>
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
<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>
<p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p>
</div>
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
</div>
<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?.transfer.amount)}</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee</p>
<p className="font-medium">
{transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
{(() => {
let status;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
}
return status;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Transaction Type</p>
<p className="font-medium">
{(() => {
let kind;
if (transactionDetails?.kind === 'T') {
kind = 'TRANSFER';
} else if (transactionDetails?.kind === 'P') {
kind = 'PURCHASE';
} else if (transactionDetails?.kind === 'W') {
kind = 'WITHDRAW';
} else if (transactionDetails?.kind === 'U') {
kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') {
kind = 'RETURN';
}
return kind;
})()}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.description}</p>
</div>
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.type.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Reference</p>
<p className="font-medium">{transactionDetails?.transfer.reference}</p>
</div>
<div>
<p className="text-sm text-gray-500">Destination Iban</p>
<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>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">Phone Number</p>
<p className="font-medium">{transactionDetails?.origin_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.origin_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">Username</p>
<p className="font-medium">{transactionDetails?.origin_customer.username}</p>
</div>
</div>
</div>
)}
{activeTab === 'log' && (
<div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3>
<div className="border rounded-lg overflow-x-auto">
<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">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">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 End Point</th>
</tr>
</thead>
<tbody>
{transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { request_endpoint: string, status: 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 font-medium">
{(() => {
let status;
if (log.status === 'P') {
status = 'PENDING';
} else if (log.status === 'O') {
status = 'ON PROCESS';
} else if (log.status === 'F') {
status = 'FAILED';
} else if (log.status === 'C') {
status = 'COMPLETE';
}
return status;
})()}
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
</tr>
))
) : (
<tr>
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
)}
{activeTab === 'approve' && (
<div className="space-y-4">
<h3 className="font-semibold">Approval Logs</h3>
{transactionDetails?.log_approve.length === 0 ? (
<p className="text-sm text-gray-500">No data available</p>
) : (
<div className="border rounded-lg overflow-x-auto">
<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">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>
</tr>
</thead>
<tbody>
{transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 font-medium">
{(() => {
let status;
if (log.status === 'W') {
status = 'WAITING';
} else if (log.status === 'Y') {
status = 'APPROVE';
} else if (log.status === 'N') {
status = 'REJECT';
} else if (log.status === 'T') {
status = 'NO NEED';
}
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>
</tr>
))
) : (
<tr>
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
)}
</div>
)}
{activeTab === 'p24' && (
<div className="space-y-4">
<h3 className="font-semibold">P24 Logs</h3>
{transactionDetails?.p24.length === 0 ? (
<p className="text-sm text-gray-500">No data available</p>
) : (
<div className="border rounded-lg overflow-x-auto">
<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">Type</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">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: { 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">{log.type}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
</tr>
))
) : (
<tr>
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
)}
</div>
)}
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default DetailApprovalTransaction;

82
src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx Normal file
View File

@ -0,0 +1,82 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { Button } from '@/components/ui/button';
import { useCallback, useState, useEffect } from 'react';
import { toast } from 'sonner';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
// Set the initial state for trxDate
const [trxDate, settrxDate] = useState({ from: '', to: '' });
// Function to format date to YYYY-MM-DD
const formatDate = (date: Date): string => {
return date.toISOString().split('T')[0];
};
// useEffect to set the default date values
useEffect(() => {
const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);
settrxDate({
from: formatDate(today), // Set 'from' to today
to: formatDate(nextWeek), // Set 'to' to 7 days later
});
}, []);
const handleFilterData = useCallback(() => {
try {
table.getColumn('transaction_date')?.setFilterValue(trxDate);
} catch (error) {
toast.error('Error applying filter');
console.error('Error applying filter:', error);
}
}, [trxDate, table]);
useEffect(() => {
if (trxDate.from && trxDate.to) {
handleFilterData();
}
}, [trxDate]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<div className="flex w-[50%] gap-3 items-center">
<label className="input input-sm w-1/3">
From
<input
type="date"
placeholder="From"
value={trxDate.from}
onChange={(event) =>
settrxDate({ ...trxDate, from: event.target.value })
}
name="from"
/>
</label>
<label className="input input-sm w-1/3">
To
<input
type="date"
placeholder="To"
value={trxDate.to}
onChange={(event) =>
settrxDate({ ...trxDate, to: event.target.value })
}
name="to"
/>
</label>
</div>
</div>
</div>
</div>
);
};
export default ListToolbar;

268
src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx Normal file
View File

@ -0,0 +1,268 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios';
import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import { useCallApi } from '@/hooks';
import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router';
import DetailApprovalTransaction from '../blocks/DetailApprovalTransaction';
interface ApprovalTransactionProps {
id: number;
name: string;
}
interface ContextProps {
getTransactionLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any,
filter: any
) => Promise<{ data: ApprovalTransactionProps[]; totalCount: number } | undefined>;
showDetailDialog: boolean;
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
}
const initialProps: ContextProps = {
getTransactionLists: async () => ({ data: [], totalCount: 0 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { }
};
const ManageApprovalTransactionContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.transaction;
const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
const { GetData } = useCallApi();
const navigate = useNavigate();
const handleNavigate = (path: string) => {
const url = navigate(`${API_URL}/transaction/history/${path}`);
};
const columns = useMemo<ColumnDef<any>[]>(
() => [
// {
// accessorKey: 'transaction_date',
// header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
// enableSorting: false,
// enableHiding: false,
// meta: {
// headerClassName: 'w-[250px]'
// }
// },
{
accessorKey: 'transaction_date',
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
cell: ({ row }) => {
// Memformat tanggal dan waktu dari ISO ke format biasa (DD-MM-YYYY HH:MM:SS)
const transactionDate = new Date(row.original.transaction_date);
const formattedDateTime = transactionDate.toLocaleString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false // Gunakan format 24 jam
});
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} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => {
const purchaseAmount = row?.purchase?.amount;
const transferAmount = row?.transfer?.amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
},
id: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
accessorFn: (row) => {
const purchaseAmount = row?.purchase?.fee_amount;
const transferAmount = row?.transfer?.fee_amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
},
id: 'feeamount',
header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
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,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
accessorKey: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorKey: 'type.name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
id: 'actions',
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
enableSorting: false,
enableHiding: false,
cell: (data) => {
const row = data.row.original;
return (
<div key={`actions-${row.id}`}>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedTransactionId(row.id);
setShowDetailDialog(true);
}}
>
<KeenIcon icon="eye" />
</button>
</div>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
}
],
[]);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
let startdate;
let enddate;
let formattedFilter;
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];
} else if (filter != undefined || filter.length != 0) {
startdate = filter[0].value.from;
enddate = filter[0].value.to;
}
formattedFilter = {
"Transactions.transaction_date": {
from: startdate + " 00:00:00",
to: enddate + " 23:59:59"
}
};
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,
with_deleted: false,
order_field: "Transactions.created_at",
order_direction: 'DESC',
filter: JSON.stringify(formattedFilter)
});
setTransaction(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching transaction', error);
}
};
return (
<ManageApprovalTransactionContext.Provider
value={{
getTransactionLists,
showDetailDialog,
setShowDetailDialog,
selectedTransactionId,
setSelectedTransactionId
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DetailApprovalTransaction />
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
}
>
{children}
</DataGridProvider>
</ManageApprovalTransactionContext.Provider>
);
};
export { ApprovalTransactionProvider, ManageApprovalTransactionContext };
export type { ApprovalTransactionProps };

12
src/pages/transaction/approval-transaction/hooks/useApprovalTransactionContext.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useContext } from 'react';
import { ManageApprovalTransactionContext } from './ApprovalTransactionContext';
const useTransactionContext = () => {
const context = useContext(ManageApprovalTransactionContext);
if (!context) throw new Error('useTransactionContext must be used within AuthProvider');
return context;
};
export { useTransactionContext };

2
src/pages/transaction/Transaction.tsx → src/pages/transaction/history-transaction/Transaction.tsx
View File

@ -17,7 +17,7 @@ const Transaction = () => {
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Transaction</span>
<span className="text-sm">History Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">

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

@ -208,8 +208,44 @@ const DetailTransaction = () => {
</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>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_point)}
</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}</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

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

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

0
src/pages/transaction/hooks/useTransactionContext.tsx → src/pages/transaction/history-transaction/hooks/useTransactionContext.tsx
View File