Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
unknown
@ -1,9 +1,10 @@
|
||||
import { useRef } from 'react';
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { KeenIcon } from '@/components/keenicons';
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
import { Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { DropdownUser } from '@/partials/dropdowns/user';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { getAuth } from '@/auth';
|
||||
|
||||
const HeaderTopbar = () => {
|
||||
const itemChatRef = useRef<any>(null);
|
||||
@ -14,38 +15,44 @@ const HeaderTopbar = () => {
|
||||
const handleDropdownChatShow = () => {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
};
|
||||
|
||||
console.log(getAuth())
|
||||
return (
|
||||
<div className="flex items-center gap-3.5">
|
||||
<Menu>
|
||||
<MenuItem
|
||||
ref={itemUserRef}
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [20, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-icon rounded-full">
|
||||
<img
|
||||
className="size-9 rounded-full justify-center border border-gray-500 shrink-0"
|
||||
src={toAbsoluteUrl('/media/avatars/blank.png')}
|
||||
alt=""
|
||||
/>
|
||||
</MenuToggle>
|
||||
{DropdownUser({ menuItemRef: itemUserRef })}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden md:flex flex-col items-end mr-2 text-right">
|
||||
<span className="font-semibold text-sm text-white leading-tight">{getAuth()?.user.username}</span>
|
||||
<span className="text-xs text-gray-400">{getAuth()?.role_name}</span>
|
||||
</div>
|
||||
|
||||
<Menu>
|
||||
<MenuItem
|
||||
ref={itemUserRef}
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [20, 10],
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-icon rounded-full">
|
||||
<img
|
||||
className="w-9 h-9 rounded-full border border-gray-500 object-cover"
|
||||
src={toAbsoluteUrl('/media/avatars/blank.png')}
|
||||
alt="User avatar"
|
||||
/>
|
||||
</MenuToggle>
|
||||
{DropdownUser({ menuItemRef: itemUserRef })}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export { HeaderTopbar };
|
||||
export { HeaderTopbar };
|
||||
@ -16,6 +16,10 @@ import { useFetchYear } from './hooks/useFetchYear';
|
||||
import { get5LastYear } from '@/utils/Date';
|
||||
import { staticChartData } from './staticChart';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import BalanceCard from './blocks/BalanceCard';
|
||||
import { getAuth } from '@/auth';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
|
||||
// sum -> nominal, count-> total
|
||||
type CountType = 'sum' | 'count';
|
||||
@ -33,6 +37,9 @@ const DashboardHomePage = () => {
|
||||
from: new Date(),
|
||||
to: new Date()
|
||||
});
|
||||
const currentRole = getAuth()?.role_name;
|
||||
const idCustomer = getAuth()?.user.customer?.id;
|
||||
// console.log(currentRole);
|
||||
|
||||
// Menyusun tanggal awal dan akhir berdasarkan selectedYear
|
||||
useEffect(() => {
|
||||
@ -144,6 +151,13 @@ const DashboardHomePage = () => {
|
||||
<title>TPAY | Dashboard</title>
|
||||
</Helmet>
|
||||
<Container>
|
||||
{/* Account Balance Cards */}
|
||||
{currentRole === 'Escrow' || currentRole === 'Master Agent' ? (
|
||||
<div className="grid gap-5 lg:gap-7.5 mb-14 mt-7">
|
||||
<BalanceCard id={idCustomer} />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex gap-3 items-center mb-6">
|
||||
<YearPicker selectedYear={selectedYear} setSelectedYear={handleYearChange} />
|
||||
<div className="w-auto min-w-[120px]">
|
||||
|
||||
100
src/pages/dashboards/home/blocks/BalanceCard.tsx
Normal file
100
src/pages/dashboards/home/blocks/BalanceCard.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { CreditCard, Wallet } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
type WalletResponse = {
|
||||
amount: number;
|
||||
id_wallet: string;
|
||||
wallet: string;
|
||||
credit_limit: number;
|
||||
monthly_limit: number;
|
||||
};
|
||||
|
||||
interface BalanceCardProps {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const API_URL_WALLET = apiConfig.service_wallet;
|
||||
|
||||
const BalanceCard = ({ id }: BalanceCardProps) => {
|
||||
const { GetData } = useCallApi();
|
||||
const [wallets, setWallets] = useState<WalletResponse[]>([]);
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatNumberWithDots = (value: number) => {
|
||||
return value.toLocaleString('id-ID');
|
||||
};
|
||||
|
||||
const getColorClass = (amount: number, walletType: string) => {
|
||||
if (walletType.toLowerCase().includes('point account')) return 'bg-amber-300';
|
||||
// if (amount > 3125) return 'bg-amber-300';
|
||||
return 'bg-red-500';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchAccountBalances() {
|
||||
try {
|
||||
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${id}`, {
|
||||
id: id
|
||||
});
|
||||
if (response?.status === true) {
|
||||
setWallets(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching account balances', error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchAccountBalances();
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<div className="grid lg:grid-cols-4 md:grid-cols-2 gap-5 items-stretch">
|
||||
{wallets.map((wallet) => {
|
||||
const colorClass = getColorClass(wallet.amount, wallet.wallet);
|
||||
const isNegative = wallet.amount < 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={wallet.id_wallet}
|
||||
className="rounded-lg overflow-hidden shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<div className={`${colorClass} h-2`} />
|
||||
<div className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="font-bold text-lg text-gray-800">{wallet.wallet}</h3>
|
||||
{wallet.wallet.includes('Credit') ? (
|
||||
<CreditCard className="text-gray-600" size={20} />
|
||||
) : (
|
||||
<Wallet className="text-gray-600" size={20} />
|
||||
)}
|
||||
</div>
|
||||
<p className={`text-xl font-bold ${isNegative ? 'text-red-600' : 'text-gray-800'}`}>
|
||||
{formatCurrency(wallet.amount)}
|
||||
</p>
|
||||
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
|
||||
<div className="text-xs text-gray-500">Credit Limit:</div>
|
||||
<div className="text-sm">{formatNumberWithDots(wallet.credit_limit)}</div>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center justify-between">
|
||||
<div className="text-xs text-gray-500">Monthly Limit:</div>
|
||||
<div className="text-sm">{formatNumberWithDots(wallet.monthly_limit)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BalanceCard;
|
||||
@ -1,5 +1,8 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { ArrowUpDown } from 'lucide-react';
|
||||
import moment from 'moment';
|
||||
|
||||
export type Group = {
|
||||
no: number;
|
||||
@ -12,27 +15,81 @@ export type Group = {
|
||||
export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
|
||||
{
|
||||
accessorKey: 'no',
|
||||
header: 'ID'
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
ID
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: 'Created Date',
|
||||
cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString()
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
Created Date
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name'
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
Name
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'status',
|
||||
header: 'Status'
|
||||
header: 'Status',
|
||||
cell: ({ row }) => {
|
||||
const isActive = row.original.status === 'Y';
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`px-2 py-1 text-xs font-semibold rounded-full ${
|
||||
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
|
||||
}`}
|
||||
>
|
||||
{isActive ? 'Active' : 'inactive'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: 'Description'
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
Description
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: 'Actions',
|
||||
cell: ({ row }) => {
|
||||
const dataMembers = row.original;
|
||||
|
||||
|
||||
@ -1,8 +1,20 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
|
||||
const { table, reload } = useDataGrid();
|
||||
interface ListToolBarProps {
|
||||
createGroup: () => void;
|
||||
onReload: () => void;
|
||||
isReloading: boolean;
|
||||
}
|
||||
|
||||
const ListToolBar = ({ createGroup, onReload, isReloading }: ListToolBarProps) => {
|
||||
const { table } = useDataGrid();
|
||||
const [usernameFilter, setUsernameFilter] = useState('');
|
||||
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUsernameFilter(e.target.value);
|
||||
table.getColumn('name')?.setFilterValue(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -14,29 +26,25 @@ const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
value={usernameFilter}
|
||||
onChange={handleUsernameChange}
|
||||
className="input input-sm w-40"
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
|
||||
Add Data
|
||||
</Button>
|
||||
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
<DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
|
||||
{isReloading ? (
|
||||
<div className="animate-spin">
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</div>
|
||||
) : (
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
)}
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
</div>
|
||||
|
||||
@ -24,8 +24,10 @@ import CloseIcon from '@mui/icons-material/Close';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { toast } from 'sonner';
|
||||
import { Container, DataGridProvider } from '@/components';
|
||||
import { Container, DataGridProvider, LoaderTransparant } from '@/components';
|
||||
import { ListToolBar } from './ListToolbar';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { setgroups } from 'process';
|
||||
// import { DialogHeader } from '@/components/ui/dialog';
|
||||
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
const BASE_URL = apiConfig.service_customer;
|
||||
@ -42,37 +44,52 @@ let initGroup = {
|
||||
|
||||
const ManageGroups = () => {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [dataGroup, setDataGroup] = useState([]);
|
||||
const [formData, setFormData] = useState(initGroup);
|
||||
const [pageIndex, setPageIndex] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [dialogType, setDialogType] = useState('');
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [isReloading, setIsReloading] = useState(false);
|
||||
// const closeDialog = () => {
|
||||
// setIsDialogOpen(false);
|
||||
// setgroups(initGroup);
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetchGroups();
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
async function fetchGroups() {
|
||||
async function fetchGroups(): Promise<void> {
|
||||
try {
|
||||
let groups = await axios.get(`${BASE_URL}/groups/list`, {
|
||||
params: {
|
||||
limit: pageSize,
|
||||
page: pageIndex,
|
||||
limit: 20,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: 'name',
|
||||
order_direction: 'ASC'
|
||||
order_field: 'created_at',
|
||||
order_direction: 'DESC'
|
||||
}
|
||||
});
|
||||
let temp = 1;
|
||||
let resGroups = groups.data.data.list.map((el: any) => {
|
||||
el.no = temp++;
|
||||
if (el.date_birth) {
|
||||
const d = new Date(el.date_birth);
|
||||
el.date_birth = d.toLocaleString('sv-SE');
|
||||
}
|
||||
return el;
|
||||
})
|
||||
});
|
||||
setDataGroup(resGroups);
|
||||
} catch (error: any) {
|
||||
alert(error.message);
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setIsReloading(false);
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,6 +144,11 @@ const ManageGroups = () => {
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleReload = () => {
|
||||
setIsReloading(true);
|
||||
fetchGroups();
|
||||
};
|
||||
|
||||
const handleYes = async () => {
|
||||
try {
|
||||
if (dialogType === 'create') {
|
||||
@ -153,12 +175,19 @@ const ManageGroups = () => {
|
||||
console.log(error);
|
||||
toast.error(error.message);
|
||||
} finally {
|
||||
await fetchGroups();
|
||||
setDialogOpen(false);
|
||||
closeDialog();
|
||||
await fetchGroups();
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
function setShowAddDialog(el: any) {
|
||||
setIsDialogOpen(el);
|
||||
}
|
||||
|
||||
if (loading) return <LoaderTransparant />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@ -191,21 +220,28 @@ const ManageGroups = () => {
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
{/* <div className="w-full overflow-x-auto px-4"> */}
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5">
|
||||
{/* <DataTable
|
||||
data={dataGroup}
|
||||
columns={columns}
|
||||
createData={createGroup}
|
||||
onUpdate={handleUpdate}
|
||||
onDelete={null}
|
||||
/> */}
|
||||
|
||||
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
|
||||
{isReloading && (
|
||||
<div className="fixed inset-0 flex items-center justify-center z-50 bg-white/70">
|
||||
<div className="flex flex-col items-center">
|
||||
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
|
||||
<span className="text-slate-500 font-medium">Refreshing data...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DataGridProvider
|
||||
data={dataGroup}
|
||||
columns={getColumns(handleUpdate)}
|
||||
pagination={{ size: 25 }}
|
||||
toolbar={<ListToolBar createGroup={createGroup} />}
|
||||
toolbar={
|
||||
<ListToolBar
|
||||
createGroup={createGroup}
|
||||
onReload={handleReload}
|
||||
isReloading={isReloading}
|
||||
/>
|
||||
}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'created_at', desc: true }]}
|
||||
serverSide={false}
|
||||
onRowSelectionChange={(selected, table: any) => {
|
||||
const selectedRow = table.getSelectedRowModel().rows[0];
|
||||
|
||||
@ -262,7 +262,9 @@ const AddDialog = () => {
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">Type</label>
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex gap-6 items-center">
|
||||
{['info', 'promo'].map((type) => (
|
||||
<label key={type} className="flex items-center space-x-2">
|
||||
|
||||
@ -107,7 +107,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
|
||||
|
||||
const getNotificationList = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
try {
|
||||
sorting = sorting.length == 0 ? [{ id: 'content', desc: false }] : sorting;
|
||||
sorting = sorting.length === 0 ? [{ id: 'created_at', desc: true }] : sorting;
|
||||
filter =
|
||||
filter.length == 0 ? {} : { content: { like: `%${filter[0].value?.toLowerCase()}%` } };
|
||||
const response = await GetData(`${API_URL_NOTIFICATION}/list`, {
|
||||
@ -145,7 +145,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolBar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'content', desc: false }]}
|
||||
sorting={[{ id: 'created_at', desc: true }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
getNotificationList(pageIndex, pageSize, sorting, columnFilters)
|
||||
|
||||
@ -20,11 +20,13 @@ import {
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
import { toast } from 'sonner';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
const ApprovalDialog = () => {
|
||||
const { GetData, PostData } = useCallApi();
|
||||
// const { table, reload } = useDataGrid();
|
||||
|
||||
const {
|
||||
showApprovalDialog,
|
||||
@ -83,6 +85,7 @@ const ApprovalDialog = () => {
|
||||
};
|
||||
doSaveLogActivity(createActivity);
|
||||
setShowApprovalDialog(false);
|
||||
// reload();
|
||||
} else {
|
||||
setAlert({ show: true, message: response?.message });
|
||||
}
|
||||
|
||||
@ -30,7 +30,6 @@ const DetailApprovalTransaction = () => {
|
||||
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);
|
||||
@ -121,11 +120,14 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</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>
|
||||
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase?.amount) ?? 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>
|
||||
@ -292,7 +294,9 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
|
||||
<p className="font-medium">
|
||||
{transactionDetails?.origin_customer?.fullname ?? "-"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Amount</p>
|
||||
@ -347,10 +351,10 @@ const DetailApprovalTransaction = () => {
|
||||
<p className="font-medium">{transactionDetails?.description}</p>
|
||||
</div>
|
||||
<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">Name</p>
|
||||
<p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Reference</p>
|
||||
@ -370,19 +374,21 @@ const DetailApprovalTransaction = () => {
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.username ?? "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -391,24 +397,37 @@ const DetailApprovalTransaction = () => {
|
||||
{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>
|
||||
|
||||
{transactionDetails?.transfer?.destination_customer ? (
|
||||
<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>
|
||||
<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>
|
||||
) : (
|
||||
<p className="text-gray-500">No data available</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@ -3,18 +3,40 @@ import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
// Set the initial state for trxDate
|
||||
const [trxDate, settrxDate] = useState({ from: '', to: '' });
|
||||
const [statusApproval, setStatusApproval] = useState<string>(
|
||||
(table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('status_approve')?.setFilterValue(statusApproval);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
return () => clearTimeout(timer);
|
||||
}, [statusApproval, table]);
|
||||
|
||||
// Function to format date to YYYY-MM-DD
|
||||
const formatDate = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('code')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
// useEffect to set the default date values
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
@ -34,6 +56,15 @@ const ListToolbar = () => {
|
||||
}
|
||||
}, [trxDate, table]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('code')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
useEffect(() => {
|
||||
if (trxDate.from && trxDate.to) {
|
||||
handleFilterData();
|
||||
@ -69,6 +100,33 @@ const ListToolbar = () => {
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<Select
|
||||
value={statusApproval}
|
||||
onValueChange={(value) => {
|
||||
setStatusApproval(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">APPROVED</SelectItem>
|
||||
<SelectItem value="N">REJECT</SelectItem>
|
||||
<SelectItem value="W">WAITING APPROVAL</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<label className="input input-sm w-1/3">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Transaction ID"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ml-auto">
|
||||
@ -79,11 +137,20 @@ const ListToolbar = () => {
|
||||
onClick={() => {
|
||||
const today = new Date();
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
// Resetting all filters
|
||||
setSearchValue('');
|
||||
setStatusApproval('');
|
||||
settrxDate({
|
||||
from: formatDate(firstDayOfMonth),
|
||||
to: formatDate(today),
|
||||
});
|
||||
reload();
|
||||
|
||||
table.getColumn('code')?.setFilterValue('');
|
||||
table.getColumn('status_approve')?.setFilterValue('');
|
||||
table.setPageIndex(0);
|
||||
|
||||
reload(); // Reload table data
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
@ -93,7 +160,6 @@ const ListToolbar = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
|
||||
@ -63,6 +63,15 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorKey: 'code',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'transaction_date',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
|
||||
@ -164,12 +173,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
},
|
||||
{
|
||||
accessorKey: 'status_approve',
|
||||
header: 'Status',
|
||||
header: 'Status Approval',
|
||||
cell: ({ row }) => {
|
||||
const statusCode = row.original.status_approve;
|
||||
let label = '';
|
||||
let badgeClass = '';
|
||||
|
||||
|
||||
switch (statusCode) {
|
||||
case 'Y':
|
||||
label = 'APPROVED';
|
||||
@ -184,14 +193,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
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: 'actions',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
|
||||
@ -234,27 +243,51 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
|
||||
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
try {
|
||||
let startdate, enddate;
|
||||
const today = new Date();
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
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 {
|
||||
startdate = filter[0]?.value?.from;
|
||||
enddate = filter[0]?.value?.to;
|
||||
// Default values
|
||||
let startdate = firstDayOfMonth.toISOString().split('T')[0];
|
||||
let enddate = today.toISOString().split('T')[0];
|
||||
let transactioncode = '';
|
||||
let approvalstatus = '';
|
||||
|
||||
if (Array.isArray(filter)) {
|
||||
filter.forEach((f: any) => {
|
||||
// console.log(f.id);
|
||||
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
|
||||
startdate = f.value.from;
|
||||
enddate = f.value.to;
|
||||
}
|
||||
|
||||
if (f.id === 'code' && f.value) {
|
||||
transactioncode = f.value;
|
||||
}
|
||||
|
||||
if (f.id === 'status_approve' && f.value) {
|
||||
approvalstatus = f.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const formattedFilter = {
|
||||
// Constructing filter object with dynamic properties
|
||||
const formattedFilter: any = {
|
||||
"Transactions.transaction_date": {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`,
|
||||
},
|
||||
"Transactions.status_approve": { in: ["W", "Y", "N"] },
|
||||
};
|
||||
|
||||
if (transactioncode) {
|
||||
formattedFilter["Transactions.code"] = { like: `%${transactioncode}%` };
|
||||
}
|
||||
|
||||
// Handle approval status filter
|
||||
formattedFilter["Transactions.status_approve"] = approvalstatus
|
||||
? approvalstatus
|
||||
: { in: ["W", "Y", "N"] };
|
||||
|
||||
// Fetch data from API
|
||||
const response = await GetData(`${API_URL}/transaction/history`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
@ -264,13 +297,17 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
filter: JSON.stringify(formattedFilter),
|
||||
});
|
||||
|
||||
setTransaction(response?.data?.list || []);
|
||||
return {
|
||||
data: response?.data?.list || [],
|
||||
totalCount: response?.data?.total_count || 0,
|
||||
};
|
||||
if (!response || !response.data) {
|
||||
console.warn('No data received:', response);
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
setTransaction(response.data.list); // Assuming this is a state setter
|
||||
return { data: response.data.list, totalCount: response.data.total_count };
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
return { data: [], totalCount: 0 }; // Fail-safe fallback
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -120,11 +120,11 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</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>
|
||||
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase?.amount) ?? 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>
|
||||
@ -291,7 +291,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer.fullname}</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? "-"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Amount</p>
|
||||
@ -367,19 +367,19 @@ const DetailTransaction = () => {
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.username ?? "-"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -388,24 +388,37 @@ const DetailTransaction = () => {
|
||||
{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>
|
||||
|
||||
{transactionDetails?.transfer?.destination_customer ? (
|
||||
<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>
|
||||
<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>
|
||||
) : (
|
||||
<p className="text-gray-500">No data available</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -430,7 +443,7 @@ const DetailTransaction = () => {
|
||||
<h3 className="font-semibold">Destination Wallet</h3>
|
||||
|
||||
{!transactionDetails?.transfer ? (
|
||||
<div className="text-center text-sm text-gray-500">No Data available</div>
|
||||
<div className="text-sm text-gray-500">No Data available</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
|
||||
@ -3,19 +3,62 @@ import { useTransactionContext } from '../hooks/useTransactionContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
|
||||
// Set the initial state for trxDate
|
||||
const [trxDate, settrxDate] = useState({ from: '', to: '' });
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('code')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
// const [statusValue, setStatusValue] = useState<string>(
|
||||
// (table.getColumn('status')?.getFilterValue() as string) ?? ''
|
||||
// );
|
||||
|
||||
const [typeValue, setTypeValue] = useState<string>(
|
||||
(table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
|
||||
);
|
||||
|
||||
// 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 timer = setTimeout(() => {
|
||||
table.getColumn('code')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
// useEffect(() => {
|
||||
// const timer = setTimeout(() => {
|
||||
// table.getColumn('status')?.setFilterValue(statusValue);
|
||||
// table.setPageIndex(0);
|
||||
// }, 200);
|
||||
// return () => clearTimeout(timer);
|
||||
// }, [statusValue, table]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.setColumnFilters((prev) => [
|
||||
...prev.filter((f) => f.id !== 'kind'),
|
||||
{ id: 'kind', value: typeValue },
|
||||
]);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
return () => clearTimeout(timer);
|
||||
}, [typeValue, table]);
|
||||
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
@ -69,6 +112,50 @@ const ListToolbar = () => {
|
||||
name="to"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* <Select
|
||||
value={statusValue}
|
||||
onValueChange={(value) => {
|
||||
setStatusValue(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="C">COMPLETE</SelectItem>
|
||||
<SelectItem value="F">FAILED</SelectItem>
|
||||
<SelectItem value="O">ON PROCESS</SelectItem>
|
||||
</SelectContent>
|
||||
</Select> */}
|
||||
|
||||
<Select
|
||||
value={typeValue}
|
||||
onValueChange={(value) => {
|
||||
setTypeValue(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
|
||||
<SelectValue placeholder="Select Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="T">TRANSFER</SelectItem>
|
||||
<SelectItem value="P">PURCHASE</SelectItem>
|
||||
<SelectItem value="W">WITHDRAW</SelectItem>
|
||||
<SelectItem value="U">TOP UP</SelectItem>
|
||||
<SelectItem value="R">RETURN</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<label className="input input-sm w-1/3">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Transaction ID"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto">
|
||||
@ -77,12 +164,27 @@ const ListToolbar = () => {
|
||||
variant="outline"
|
||||
className="h-7.5"
|
||||
onClick={() => {
|
||||
// Preserve trxDate values (from, to) and reset others
|
||||
const today = new Date();
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
// Only reset filters excluding from and to
|
||||
setSearchValue('');
|
||||
// setStatusValue('');
|
||||
setTypeValue('');
|
||||
settrxDate({
|
||||
from: formatDate(firstDayOfMonth),
|
||||
to: formatDate(today),
|
||||
});
|
||||
|
||||
// Reset other filters except for date range
|
||||
table.setColumnFilters([
|
||||
{ id: 'code', value: '' },
|
||||
// { id: 'status', value: '' },
|
||||
{ id: 'kind', value: '' },
|
||||
]);
|
||||
|
||||
table.setPageIndex(0);
|
||||
reload();
|
||||
}}
|
||||
>
|
||||
|
||||
@ -70,15 +70,34 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
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: 'code',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Transaction Code" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => {
|
||||
switch (row.kind) {
|
||||
case 'T': return 'TRANSFER';
|
||||
case 'P': return 'PURCHASE';
|
||||
case 'W': return 'WITHDRAW';
|
||||
case 'U': return 'TOP UP';
|
||||
case 'R': return 'RETURN';
|
||||
default: return '_';
|
||||
}
|
||||
},
|
||||
accessorKey: 'kind',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Transaction Kind" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'transaction_date',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
|
||||
@ -242,30 +261,60 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
try {
|
||||
let startdate;
|
||||
let enddate;
|
||||
let formattedFilter;
|
||||
const today = new Date();
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
if (filter == undefined || filter.length == 0) {
|
||||
const today = new Date();
|
||||
// Default values
|
||||
let startdate = firstDayOfMonth.toISOString().split('T')[0];
|
||||
let enddate = today.toISOString().split('T')[0];
|
||||
let transactioncode = '';
|
||||
// let transactionstatus = '';
|
||||
let type = ''
|
||||
|
||||
// Tanggal 1 di bulan sekarang
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
if (Array.isArray(filter)) {
|
||||
// console.log(filter);
|
||||
filter.forEach((f: any) => {
|
||||
if (f.id === 'transaction_date' && f.value?.from && f.value?.to) {
|
||||
startdate = f.value.from;
|
||||
enddate = f.value.to;
|
||||
}
|
||||
|
||||
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;
|
||||
if (f.id === 'code' && f.value) {
|
||||
transactioncode = f.value;
|
||||
}
|
||||
|
||||
// if (f.id === 'status' && f.value) {
|
||||
// transactionstatus = f.value;
|
||||
// }
|
||||
|
||||
if (f.id === 'kind' && f.value) {
|
||||
type = f.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formattedFilter = {
|
||||
// Build filter object dynamically
|
||||
const formattedFilter: any = {
|
||||
"Transactions.transaction_date": {
|
||||
from: startdate + " 00:00:00",
|
||||
to: enddate + " 23:59:59"
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
}
|
||||
};
|
||||
|
||||
if (transactioncode) {
|
||||
formattedFilter["Transactions.code"] = {
|
||||
like: `%${transactioncode}%`
|
||||
};
|
||||
}
|
||||
|
||||
// if (transactionstatus) {
|
||||
// formattedFilter["Transactions.status"] = transactionstatus;
|
||||
// }
|
||||
|
||||
if (type) {
|
||||
formattedFilter["Transactions.kind"] = type;
|
||||
}
|
||||
|
||||
const response = await GetData(`${API_URL}/transaction/history`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
@ -275,13 +324,21 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
filter: JSON.stringify(formattedFilter)
|
||||
});
|
||||
|
||||
setTransaction(response?.data.list);
|
||||
return { data: response?.data.list, totalCount: response?.data.total_count };
|
||||
if (!response || !response.data) {
|
||||
console.warn('No data received:', response);
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
setTransaction(response.data.list);
|
||||
return { data: response.data.list, totalCount: response.data.total_count };
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<ManageTransactionContext.Provider
|
||||
value={{
|
||||
|
||||
@ -471,7 +471,9 @@ const AddDialog = () => {
|
||||
<SelectItem value="TM">Top Up Master Agent </SelectItem>
|
||||
<SelectItem value="TA">Top Up Agent </SelectItem>
|
||||
<SelectItem value="PL">Purchase Loja</SelectItem>
|
||||
|
||||
<SelectItem value="DE">Disbursment Escrow</SelectItem>
|
||||
<SelectItem value="DM">Disbursment Master Agent</SelectItem>
|
||||
<SelectItem value="DA">Disbursment Agent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@ -605,6 +605,9 @@ const EditDialog = () => {
|
||||
<SelectItem value="TM">Top Up Master Agent </SelectItem>
|
||||
<SelectItem value="TA">Top Up Agent </SelectItem>
|
||||
<SelectItem value="PL">Purchase Loja</SelectItem>
|
||||
<SelectItem value="DE">Disbursment Escrow</SelectItem>
|
||||
<SelectItem value="DM">Disbursment Master Agent</SelectItem>
|
||||
<SelectItem value="DA">Disbursment Agent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@ -80,7 +80,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
|
||||
const [transferType, setTransferType] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState<string>('');
|
||||
|
||||
|
||||
const debouncedSearchTerm = useDebounce(searchTerm, 200);
|
||||
|
||||
const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
|
||||
@ -183,10 +183,13 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
AM: 'Return Agent Merchant',
|
||||
AE: 'Return Agent Emoney',
|
||||
R: 'Reward Point',
|
||||
TE:'Top Up Escrow',
|
||||
TM:'Top Up Master Agent',
|
||||
TA:'Top Up Agent',
|
||||
PL:'Purchase Loja'
|
||||
TE: 'Top Up Escrow',
|
||||
TM: 'Top Up Master Agent',
|
||||
TA: 'Top Up Agent',
|
||||
PL: 'Purchase Loja',
|
||||
DE: 'Disbursment Escrow',
|
||||
DM: 'Disbursment Master Agent',
|
||||
DA: 'Disbursment Agent'
|
||||
};
|
||||
|
||||
return mapping[row.type] || 'Unknown';
|
||||
@ -256,7 +259,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
|
||||
|
||||
const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {};
|
||||
|
||||
|
||||
filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() };
|
||||
|
||||
const response = await GetData(`${API_URL}/transactiontype/list`, {
|
||||
@ -310,4 +313,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
};
|
||||
|
||||
export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
|
||||
export type { TransferType };
|
||||
export type { TransferType };
|
||||
|
||||
Reference in New Issue
Block a user