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

44
src/pages/transaction/approval-transaction/ApprovalTransaction.tsx
View File

@ -1,30 +1,36 @@
import { Container, DataGridInner } from '@/components';
import { ApprovalTransactionProvider } from './hooks/ApprovalTransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
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>
<>
<Helmet>
<title>TPAY | Approval Transaction</title>
</Helmet>
<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">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>
<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>
</>
);
};

152
src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx Normal file
View File

@ -0,0 +1,152 @@
import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useRef, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { Alert, KeenIcon, useDataGrid } from '@/components';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
const API_URL = apiConfig.transaction;
const ApprovalDialog = () => {
const { GetData, PostData } = useCallApi();
// const { reload } = useDataGrid();
const {
showApprovalDialog,
setShowApprovalDialog,
selectedTransactionIdForApproval
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [formField, setFormField] = useState({
transaction_code: '',
status: ''
});
const [alert, setAlert] = useState({
show: false,
message: ''
});
const doApproval = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!transactionDetails || !transactionDetails.code) {
toast.error('Transaction data not loaded yet.');
return;
}
if (!formField.status) {
toast.error('Please select a status.');
return;
}
const response = await PostData(`${API_URL}/transaction/set-approval`, {
transaction_code: transactionDetails.code,
status: formField.status,
});
if (response?.status) {
setAlert((prev) => ({ ...prev, show: false, message: '' }));
toast.success('Success Update Position');
const createActivity = {
module: 'Approval Transaction',
description: `Change status approve for transaction => ${transactionDetails.code}`,
action: 'U'
};
doSaveLogActivity(createActivity);
setShowApprovalDialog(false); // optionally close dialog
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
}
},
[formField, transactionDetails]
);
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);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
}
}
};
if (showApprovalDialog && selectedTransactionIdForApproval) {
fetchTransactionDetails();
}
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
return (
<Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Approval Transaction</DialogTitle>
</DialogHeader>
<DialogBody>
<form action="" 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">
<label className="form-label max-w-56">Status</label>
<div className="grow">
<Select
value={formField.status}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">APPROVE</SelectItem>
<SelectItem value="N">REJECTED</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
<hr />
<div className="flex justify-end">
<Button className="btn btn-primary" type="submit">
Save Changes
</Button>
</div>
</div>
</form>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default ApprovalDialog;

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}

44
src/pages/transaction/history-transaction/Transaction.tsx
View File

@ -1,30 +1,36 @@
import { Container, DataGridInner } from '@/components';
import { TransactionProvider } from './hooks/TransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const Transaction = () => {
return (
<TransactionProvider>
<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>
<>
<Helmet>
<title>TPAY | History Transaction</title>
</Helmet>
<TransactionProvider>
<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">Transaction</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">History Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</TransactionProvider>
<Link underline="none" color="inherit">
<span className="text-sm">History Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</TransactionProvider>
</>
);
};

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

@ -227,7 +227,7 @@ const DetailTransaction = () => {
</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)}
<p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
@ -239,7 +239,17 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">{transactionDetails?.purchase.product.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>