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

Update tampilan

Browse Source
This commit is contained in:
wayanrivan
2025-04-08 11:53:25 +07:00
parent e012fadab1
commit 13da7fde9c
29 changed files with 1018 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,18 @@
import React, { createContext, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom'; // FIXED HERE
import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios';
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';
import ApprovalDialog from '../blocks/ApprovalDialog';
import { Button } from '@/components/ui/button';
interface ApprovalTransactionProps {
id: number;
@ -17,25 +21,31 @@ interface ApprovalTransactionProps {
interface ContextProps {
getTransactionLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any,
limit: number,
sorting: any,
filter: any
) => Promise<{ data: ApprovalTransactionProps[]; totalCount: number } | undefined>;
showDetailDialog: boolean;
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
showApprovalDialog: boolean;
setShowApprovalDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
selectedTransactionIdForApproval: number | null;
setSelectedTransactionIdForApproval: React.Dispatch<React.SetStateAction<number | null>>;
}
const initialProps: ContextProps = {
getTransactionLists: async () => ({ data: [], totalCount: 0 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
showApprovalDialog: false,
setShowApprovalDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { }
setSelectedTransactionId: () => { },
selectedTransactionIdForApproval: null,
setSelectedTransactionIdForApproval: () => { },
};
const ManageApprovalTransactionContext = createContext<ContextProps>(initialProps);
@ -43,63 +53,54 @@ const API_URL = apiConfig.transaction;
const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showApprovalDialog, setShowApprovalDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
const [selectedTransactionIdForApproval, setSelectedTransactionIdForApproval] = 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]'
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', {
return 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
hour12: false,
});
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]'
}
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);
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(purchaseAmount ?? transferAmount ?? 0);
},
id: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
@ -111,10 +112,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
},
{
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);
const purchaseFee = row?.purchase?.fee_amount;
const transferFee = row?.transfer?.fee_amount;
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(purchaseFee ?? transferFee ?? 0);
},
id: 'feeamount',
header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
@ -126,19 +129,14 @@ const ApprovalTransactionProvider = ({ 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';
switch (row.status) {
case 'C': return 'COMPLETE';
case 'F': return 'FAILED';
case 'O': return 'ON PROCESS';
default: return 'PENDING';
}
return status;
},
accessorKey: 'status',
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
@ -152,8 +150,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
headerClassName: 'w-[250px]',
},
},
{
accessorKey: 'type.name',
@ -161,8 +159,25 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
headerClassName: 'w-[250px]',
},
},
{
accessorFn: (row) => {
switch (row.status_approve) {
case 'W': return 'WAITING APPROVAL';
case 'Y': return 'APPROVED';
case 'N': return 'REJECTED';
default: return 'PENDING';
}
},
id: 'status_approve',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
id: 'actions',
@ -172,7 +187,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
cell: (data) => {
const row = data.row.original;
return (
<div key={`actions-${row.id}`}>
<div key={`actions-${row.id}`} className="flex gap-2 justify-center">
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
@ -182,40 +197,48 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
>
<KeenIcon icon="eye" />
</button>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedTransactionIdForApproval(row.id);
setShowApprovalDialog(true);
}}
>
<KeenIcon icon="notepad-edit" />
</button>
</div>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
}
cellClassName: 'text-center',
},
},
],
[]);
[]
);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
let startdate;
let enddate;
let formattedFilter;
let startdate, enddate;
if (filter == undefined || filter.length == 0) {
if (!filter || 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;
} else {
startdate = filter[0]?.value?.from;
enddate = filter[0]?.value?.to;
}
formattedFilter = {
const formattedFilter = {
"Transactions.transaction_date": {
from: startdate + " 00:00:00",
to: enddate + " 23:59:59"
}
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`,
},
"Transactions.status_approve": { in: ["W", "Y", "N"] },
};
const response = await GetData(`${API_URL}/transaction/history`, {
@ -224,11 +247,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
with_deleted: false,
order_field: "Transactions.created_at",
order_direction: 'DESC',
filter: JSON.stringify(formattedFilter)
filter: JSON.stringify(formattedFilter),
});
setTransaction(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
setTransaction(response?.data?.list || []);
return {
data: response?.data?.list || [],
totalCount: response?.data?.total_count || 0,
};
} catch (error) {
console.error('Error fetching transaction', error);
}
@ -240,12 +266,17 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
getTransactionLists,
showDetailDialog,
setShowDetailDialog,
showApprovalDialog,
setShowApprovalDialog,
selectedTransactionId,
setSelectedTransactionId
setSelectedTransactionId,
selectedTransactionIdForApproval,
setSelectedTransactionIdForApproval,
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DetailApprovalTransaction />
<ApprovalDialog />
<DataGridProvider
columns={columns}