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

Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-05-22 09:07:42 +07:00
parent e0c62d05b3 831627c371
commit 75447ceeb4
17 changed files with 732 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/media/file-templates/upload-batch-template.xlsx
View File

Binary file not shown.

11
src/pages/dashboards/home/DashboardHomePage.tsx
View File

@ -268,13 +268,16 @@ const DashboardHomePage = () => {
) : null}
<div className="flex space-x-4 mt-5">
{bankaccount?.data && bankaccount?.data.length > 0 && getAuth()?.statusbalance=='Y' ? (
bankaccount?.data.map((bankaccountdatas: { amount: string, creditlimit: string, monthlylimit: string; wallet: string; }, index: number) => (
{bankaccount?.data && bankaccount?.data.length > 0
&& getAuth()?.statusbalance=='Y'
? (
bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => (
<BankSaldo
title={bankaccountdatas.wallet}
balance={bankaccountdatas.amount}
creditLimit={bankaccountdatas.creditlimit}
monthlyLimit={bankaccountdatas.monthlylimit}
creditLimit={bankaccountdatas.credit_limit}
monthlyLimit={bankaccountdatas.monthly_limit}
idbalance={bankaccountdatas.id_balance}
/>
))
) : (

96
src/pages/dashboards/home/blocks/BankSaldo.tsx
View File

@ -1,62 +1,72 @@
// BankSaldo.tsx
import { Wallet } from "lucide-react";
import React, { useState } from 'react';
import { Wallet } from 'lucide-react';
import { Button } from '@/components/ui/button';
import ShowDetailWalletDialog from './ShowDetailWalletDialog';
interface AccountCardProps {
title: string;
balance: string;
creditLimit: string;
monthlyLimit: string;
idbalance: string;
}
export const BankSaldo = ({
export const BankSaldo: React.FC<AccountCardProps> = ({
title,
balance,
creditLimit,
monthlyLimit,
}: AccountCardProps) => {
idbalance,
}) => {
const [showDialog, setShowDialog] = useState(false);
return (
<div className="w-full max-w-xs bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
<div className="h-1 bg-red-500" />
<div className="p-4 space-y-4">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">{title}</h2>
<Wallet className="h-5 w-5 text-gray-500" />
</div>
<div className="text-2xl font-bold text-gray-800">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(parseFloat(balance))}
</div>
<div className="text-sm text-gray-600">
<div className="flex justify-between">
<span>Credit Limit:</span>
<span>{creditLimit}</span>
<>
<div className="w-full max-w-xs bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
<div className="h-1 bg-red-500" />
<div className="p-4 space-y-4">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">{title}</h2>
<Wallet className="h-5 w-5 text-gray-500" />
</div>
<div className="flex justify-between">
<span>Monthly Limit:</span>
<span>{monthlyLimit}</span>
<div className="text-2xl font-bold text-gray-800">
{new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(parseFloat(balance))}
</div>
<div className="text-sm text-gray-600">
<div className="flex justify-between">
<span>Credit Limit:</span>
<span>{creditLimit}</span>
</div>
<div className="flex justify-between">
<span>Monthly Limit:</span>
<span>{monthlyLimit}</span>
</div>
<div className="flex justify-between mt-3">
<Button
variant="outline"
className="h-7.5"
onClick={() => setShowDialog(true)}
>
Detail Wallet
</Button>
</div>
</div>
</div>
</div>
</div>
{showDialog && (
<ShowDetailWalletDialog
open={showDialog}
onClose={() => setShowDialog(false)}
idbalance={idbalance}
/>
)}
</>
);
};
interface AccountCardsProps {
accounts: AccountCardProps[];
}
export const AccountCards = ({ accounts }: AccountCardsProps) => {
return (
<div className="flex flex-wrap gap-4 justify-center">
{accounts.map((account, index) => (
<BankSaldo key={index} {...account} />
))}
</div>
);
};
export default BankSaldo
export default BankSaldo;

336
src/pages/dashboards/home/blocks/ShowDetailWalletDialog.tsx Normal file
View File

@ -0,0 +1,336 @@
import React, { useCallback, useEffect, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { DataGridColumnHeader, DataGridProvider } from '@/components';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { DefaultTooltip, KeenIcon } from '@/components';
interface ShowDetailWalletDialogProps {
open: boolean;
onClose: () => void;
idbalance: string;
}
interface TransferType {
id: string;
name: string;
}
const formatDate = (date: Date) => date.toLocaleDateString('sv-SE');
const getDefaultDateRange = () => {
const today = new Date();
const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
return {
from: formatDate(sevenDaysAgo),
to: formatDate(today),
};
};
const ShowDetailWalletDialog: React.FC<ShowDetailWalletDialogProps> = ({
open,
onClose,
idbalance,
}) => {
const { GetData } = useCallApi();
const [dateRange, setDateRange] = useState(getDefaultDateRange());
const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
const [transferType, setTransferType] = useState<TransferType[]>([]);
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [searchValue, setSearchValue] = useState('');
const [category, setCategory] = useState<string[]>([]);
const [transaction, setTransaction] = useState<any[]>([]);
const [filters, setFilters] = useState<any>({});
const fetchTransferType = useCallback(async () => {
try {
const response = await GetData(`${apiConfig.service_transaction}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'created_at',
order_direction: 'ASC',
});
setTransferType(response?.data?.list || []);
} catch (error) {
console.error('Error fetching transfer types', error);
}
}, [GetData]);
useEffect(() => {
fetchTransferType();
}, [fetchTransferType]);
useEffect(() => {
const uniqueCategories = Array.from(
new Set(transaction.map((tx) => tx.category).filter((cat) => !!cat))
);
setCategory(uniqueCategories);
}, [transaction]);
const handleTransferTypeChange = (value: string) => {
setSelectedTransferType(value === 'all' ? null : value);
};
const handleCategoryChange = (value: string) => {
setSelectedCategory(value === '' ? null : value);
};
const handleClearAllFilters = () => {
setDateRange(getDefaultDateRange());
setSelectedTransferType(null);
setSelectedCategory(null);
setSearchValue('');
setFilters({});
};
const handleApplyFilters = () => {
const appliedFilters: any = {};
if (dateRange.from) appliedFilters.date_from = dateRange.from+" 00:00:00";
if (dateRange.to) appliedFilters.date_to = dateRange.to+" 23:59:59";
if (selectedTransferType) appliedFilters.transaction_type_id = selectedTransferType;
if (selectedCategory) appliedFilters.category = selectedCategory;
if (searchValue) appliedFilters.transaction_code = searchValue;
setFilters(appliedFilters);
};
const columns = [
{
accessorKey: 'transaction_code',
header: ({ column }: any) => <DataGridColumnHeader title="Transaction Code" column={column} />,
enableSorting: false,
meta: { headerClassName: 'min-w-[120px]' },
},
{
accessorKey: 'msisdn_reff',
header: ({ column }: any) => <DataGridColumnHeader title="MSISDN Reffer" column={column} />,
enableSorting: false,
meta: { headerClassName: 'min-w-[120px]' },
},
{
accessorKey: 'transaction_type.name',
header: ({ column }: any) => <DataGridColumnHeader title="Transaction Type" column={column} />,
enableSorting: false,
meta: { headerClassName: 'min-w-[180px]' },
},
{
accessorKey: 'type',
header: ({ column }: any) => <DataGridColumnHeader title="Type" column={column} />,
enableSorting: false,
meta: { headerClassName: 'min-w-[80px]' },
},
{
accessorKey: 'amount',
header: ({ column }: any) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false,
cell: (info: any) => info.getValue()?.toFixed(2),
meta: { headerClassName: 'min-w-[100px]' },
},
{
accessorKey: 'pre_amount',
header: ({ column }: any) => <DataGridColumnHeader title="Pre Amount" column={column} />,
enableSorting: false,
cell: (info: any) => info.getValue()?.toFixed(2),
meta: { headerClassName: 'min-w-[100px]' },
},
{
accessorKey: 'post_amount',
header: ({ column }: any) => <DataGridColumnHeader title="Post Amount" column={column} />,
enableSorting: false,
cell: (info: any) => info.getValue()?.toFixed(2),
meta: { headerClassName: 'min-w-[100px]' },
},
{
accessorKey: 'category',
header: ({ column }: any) => <DataGridColumnHeader title="Category" column={column} />,
enableSorting: false,
meta: { headerClassName: 'min-w-[80px]' },
},
{
accessorKey: 'date',
header: ({ column }: any) => <DataGridColumnHeader title="Date" column={column} />,
enableSorting: false,
cell: (info: any) => {
const val = info.getValue();
if (!val) return '-';
return new Date(val).toLocaleString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
},
meta: { headerClassName: 'min-w-[150px]' },
},
{
accessorKey: 'purpose',
header: ({ column }: any) => <DataGridColumnHeader title="Purpose" column={column} />,
enableSorting: false,
cell: (info: any) => info.getValue() || '-',
meta: { headerClassName: 'min-w-[200px]' },
},
{
accessorKey: 'notes',
header: ({ column }: any) => <DataGridColumnHeader title="Notes" column={column} />,
enableSorting: false,
cell: (info: any) => info.getValue() || '-',
meta: { headerClassName: 'min-w-[200px]' },
},
];
const getTransactionLists = useCallback(
async (page: number, limit: number, sorting: any, _columnFilters: any) => {
// console.log(idbalance);
try {
const response = await GetData(`${apiConfig.service_wallet}/dashboard/balance/list-balance-detail/${idbalance}`, {
limit,
page: page + 1,
with_deleted: false,
order_field: "created_at",
order_direction: 'DESC',
filter: filters
});
// console.log(filters);
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 };
}
},
[GetData, idbalance, filters]
);
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-[1200px] p-4 overflow-hidden">
<DialogHeader>
<DialogTitle>Details Wallet Statement</DialogTitle>
</DialogHeader>
<DialogDescription />
<DialogBody>
<div className="flex flex-wrap gap-2 lg:gap-5 w-full mb-4">
<div className="flex flex-wrap gap-3 w-full">
<label className="input input-sm w-full sm:w-[160px]">
From
<input
type="date"
value={dateRange.from}
onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
/>
</label>
<label className="input input-sm w-full sm:w-[160px]">
To
<input
type="date"
value={dateRange.to}
onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
/>
</label>
<div className="w-full sm:w-[160px]">
<Select value={selectedTransferType || 'all'} onValueChange={handleTransferTypeChange}>
<SelectTrigger className="h-[32px]">
<SelectValue placeholder="Transaction Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Select Transaction</SelectItem>
{transferType.map((transfer) => (
<SelectItem key={transfer.id} value={transfer.id}>
{transfer.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="w-full sm:w-[160px]">
<Select value={selectedCategory ?? ''} onValueChange={handleCategoryChange}>
<SelectTrigger className="h-[32px]">
<SelectValue placeholder="Select Category" />
</SelectTrigger>
<SelectContent>
{category.length === 0 ? (
<div className="text-gray-500 px-4 py-2">No data</div>
) : (
category.map((cat) => (
<SelectItem key={cat} value={cat}>
{cat}
</SelectItem>
))
)}
</SelectContent>
</Select>
</div>
<label className="input input-sm w-full sm:w-[160px]">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Transaction Code"
className="overflow-hidden text-ellipsis w-full"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
</label>
<DefaultTooltip title="Reset Filter" placement="top">
<Button variant="outline" className="h-8" onClick={handleClearAllFilters}>
<KeenIcon icon="arrow-circle-left" />
</Button>
</DefaultTooltip>
<Button variant="outline" className="h-8" onClick={handleApplyFilters}>
Filter Data
</Button>
</div>
</div>
<div className="py-4 max-h-[70vh] overflow-y-auto">
<DataGridProvider
key={JSON.stringify(filters)}
columns={columns}
pagination={{ size: 10 }}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
}
/>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default ShowDetailWalletDialog;

8
src/pages/dashboards/home/blocks/TransactionPieChart.tsx
View File

@ -48,6 +48,14 @@ const TransactionPieChart = ({ startdate, enddate }: Props) => {
{ name: 'Top Up P24', value: parseFloat((responseTransactionValue?.data?.B ?? 0).toFixed(2)), color: '#FADA7A' },
{ name: 'Transfer Agent', value: parseFloat((responseTransactionValue?.data?.A ?? 0).toFixed(2)), color: '#B1C29E' },
{ name: 'Withdrawal Agent', value: parseFloat((responseTransactionValue?.data?.M ?? 0).toFixed(2)), color: '#FCE7C8' },
{ name: 'Top Up Agent', value: parseFloat((responseTransactionValue?.data?.O ?? 0).toFixed(2)), color: '#F0A04B' },
{ name: 'Transfer P24', value: parseFloat((responseTransactionValue?.data?.S ?? 0).toFixed(2)), color: '#FADA7A' },
{ name: 'Withdraw Merchant', value: parseFloat((responseTransactionValue?.data?.I ?? 0).toFixed(2)), color: '#B1C29E' },
{ name: 'Donation', value: parseFloat((responseTransactionValue?.data?.D ?? 0).toFixed(2)), color: '#FCE7C8' },
{ name: 'Fee', value: parseFloat((responseTransactionValue?.data?.F ?? 0).toFixed(2)), color: '#F0A04B' },
{ name: 'Reversal', value: parseFloat((responseTransactionValue?.data?.V ?? 0).toFixed(2)), color: '#FADA7A' },
{ name: 'Cashback Cash', value: parseFloat((responseTransactionValue?.data?.C ?? 0).toFixed(2)), color: '#B1C29E' },
{ name: 'Cashback Point', value: parseFloat((responseTransactionValue?.data?.H ?? 0).toFixed(2)), color: '#FCE7C8' },
];
return (

26
src/pages/dashboards/home/blocks/TransactionValue.tsx
View File

@ -71,7 +71,7 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
type = "Purchase Loja"
break;
case "B":
type ="Top Up P24";
type = "Top Up P24";
break;
case "A":
type = " Transfer Agent";
@ -79,6 +79,30 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
case "M":
type = "Withdrawal Agent";
break;
case 'O':
type = 'TOP UP AGENT';
break;
case 'S':
type = 'TRANSFER P24';
break;
case 'I':
type = 'WIJTDRAW MERCHANT';
break;
case 'D':
type = 'DONATION';
break;
case 'F':
type = 'FEE';
break;
case 'V':
type = 'REVERSAL';
break;
case 'C':
type = 'CASHBACK CASH';
break;
case 'H':
type = 'CASHBACK POINT';
break;
default:
type = "Unknown";
break;

2
src/pages/disbursement/history-transaction/HistoryTransaction.tsx
View File

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

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

@ -285,7 +285,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'execution_date', desc: false }]}
sorting={[{ id: 'execution_date', desc: true }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)

155
src/pages/members/manage-members/blocks/ListToolBar.tsx
View File

@ -3,6 +3,7 @@ import { UserPlus } from 'lucide-react';
import { KeenIcon, useDataGrid } from '@/components';
import { DefaultTooltip } from '@/components';
import { useState } from 'react';
import { toast } from 'sonner';
import {
Select,
SelectContent,
@ -10,6 +11,9 @@ import {
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { getAuth } from '@/auth';
import { apiConfig } from '@/config/api.config';
const API_URL = apiConfig.service_customer;
interface ListToolbarProps {
createMember: () => void;
@ -19,62 +23,131 @@ interface ListToolbarProps {
}
const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolbarProps) => {
const [groupFilter, setGroupFilter] = useState('');
const [usernameFilter, setUsernameFilter] = useState('');
const [msisdnFilter, setMsisdnFilter] = useState('');
const {table}=useDataGrid();
const { table, reload } = useDataGrid();
const [searchValue, setSearchValue] = useState<string>();
const [typeSearchValue, setSearchTypeValue] = useState<string>();
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUsernameFilter(e.target.value);
table.getColumn('username')?.setFilterValue(e.target.value);
};
const handleMsisdnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setMsisdnFilter(e.target.value);
table.getColumn('msisdn')?.setFilterValue(e.target.value);
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault()
// setSearchValue(e.target.value)
if (typeSearchValue === 'username') {
table.getColumn('username')?.setFilterValue(searchValue);
table.getColumn('msisdn')?.setFilterValue('');
}
if (typeSearchValue === 'msisdn') {
table.getColumn('msisdn')?.setFilterValue(searchValue);
table.getColumn('username')?.setFilterValue('');
}
table.getColumn('group_name')?.setFilterValue(groupFilter);
};
const handleGroupChange = (e: any) => {
let value = e.target.value;
if (value === '__all__') value = '';
setGroupFilter(value);
table.getColumn('group_name')?.setFilterValue(value);
// if (typeSearchValue === 'username') table.getColumn('username')?.setFilterValue(searchValue);
// if (typeSearchValue === 'msisdn') table.getColumn('msisdn')?.setFilterValue(searchValue);
// table.getColumn('group_name')?.setFilterValue(value);
};
const generateExportFilters = (groupFilter: string, typeSearchValue: any, searchValue: any): { id: string; value: string }[] => {
const filters: { id: string; value: string }[] = [];
if (groupFilter) filters.push({ id: 'group_name', value: groupFilter });
if (typeSearchValue && searchValue) filters.push({ id: typeSearchValue, value: searchValue });
return filters;
};
const exporDataToExcel = async (filters: { id: string; value: string }[]) => {
try {
const filterParam = encodeURIComponent(JSON.stringify(filters));
const response = await fetch(`${API_URL}/customer/export-excel?filter=${filterParam}`, {
method: 'GET',
headers: {
Authorization: `Bearer ${getAuth()?.access_token}`,
}
});
if (!response.ok) throw new Error('Failed to fetch file');
const blob = await response.blob();
const contentDisposition = response.headers.get('content-disposition');
const currentYear = new Date().getFullYear();
const filename = `TPAY_members_${currentYear}.xlsx`;
return { blob, filename };
} catch (error:any) {
console.error('Error exporting data:', error);
toast.error(error)
}
};
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">
<form onSubmit={(e:any) => handleSearch(e)}>
<div className="flex gap-3 items-center">
<Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Group" />
</SelectTrigger>
<SelectContent>
<SelectItem value={"__all__"}>All Group</SelectItem>
{groups.map((el: any, idx: any) => (
<SelectItem key={idx} value={el.name}>
{el.name}
</SelectItem>
))}
</SelectContent>
</Select>
<Select value={typeSearchValue} onValueChange={(value) => {setSearchTypeValue(value)}}>
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Search Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="username">Username</SelectItem>
<SelectItem value="msisdn">Phone Number</SelectItem>
</SelectContent>
</Select>
<label className="input input-sm w-1/3">
{/* <KeenIcon icon="magnifier" /> */}
<input
type="text"
placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string
value={searchValue}
onChange={(e:any) => setSearchValue(e.target.value)}
/>
</label>
<Button variant="outline" className="h-7.5">
<KeenIcon icon="magnifier" />
</Button>
</div>
</form>
<div className="flex gap-3 items-center">
<input
type="text"
placeholder="Search Username"
value={usernameFilter}
onChange={handleUsernameChange}
className="input w-40"
/>
<Select value={groupFilter} onValueChange={(e) => (handleGroupChange({ target : { value: e }}))}>
<SelectTrigger className="input input-sm w-40 text-gray-500">
<SelectValue placeholder="Select Group" />
</SelectTrigger>
<SelectContent>
<SelectItem value={"__all__"}>All Group</SelectItem>
{groups.map((el: any, idx: any) => (
<SelectItem key={idx} value={el.name}>
{el.name}
</SelectItem>
))}
</SelectContent>
</Select>
<input
type="text"
placeholder="Search Phone Number"
value={msisdnFilter}
onChange={handleMsisdnChange}
className="input w-40"
/>
</div>
<div className="flex gap-3 items-center">
<Button
variant="outline"
className="h-7.5"
onClick={async () => {
const filters = generateExportFilters(groupFilter, typeSearchValue, searchValue);
const result = await exporDataToExcel(filters);
if (result) {
const url = window.URL.createObjectURL(result.blob);
const a = document.createElement('a');
a.href = url;
a.download = result.filename;
a.click();
window.URL.revokeObjectURL(url);
} else {
toast.error('Failed to export data');
}
}}
>
Export Data
</Button>
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
Add Data
</Button>

134
src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
View File

@ -14,76 +14,61 @@ import {
const ListToolbar = () => {
const { table, reload } = useDataGrid();
// Set the initial state for trxDate
// State untuk filter
const [trxDate, settrxDate] = useState({ from: '', to: '' });
const [statusApproval, setStatusApproval] = useState<string>(
(table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
);
const [statusApproval, setStatusApproval] = useState<string>('');
const [searchValue, setSearchValue] = useState<string>('');
const [typeSearchValue, setSearchTypeValue] = useState<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>();
const [typeSearchValue, setSearchTypeValue] = useState<string>();
// useEffect to set the default date values
// Set tanggal default saat pertama mount
useEffect(() => {
const today = new Date();
// const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const formatDate = (date: Date) => date.toISOString().split('T')[0];
settrxDate({
from: formatDate(today),
to: formatDate(today),
});
}, []);
// Fungsi untuk apply semua filter sekaligus saat tombol Filter ditekan
const handleFilterData = useCallback(() => {
try {
if (!trxDate.from || !trxDate.to) {
toast.error('Please select From and To dates');
return;
}
// Set filter tanggal
table.getColumn('transaction_date')?.setFilterValue(trxDate);
// Set filter status approval
table.getColumn('status_approve')?.setFilterValue(statusApproval || '');
// Set filter search type sebagai column filter id 'searchtype'
table.setColumnFilters((prevFilters) => {
// Hapus dulu filter dengan id 'searchtype' dan 'code' agar gak duplikat
const filtered = prevFilters.filter(
(f) => f.id !== 'searchtype' && f.id !== 'code'
);
// Tambahkan filter baru jika ada
if (typeSearchValue) {
filtered.push({ id: 'searchtype', value: typeSearchValue });
}
if (searchValue) {
filtered.push({ id: 'code', value: searchValue });
}
return filtered;
});
// Reset ke halaman pertama
table.setPageIndex(0);
} catch (error) {
toast.error('Error applying filter');
console.error('Error applying filter:', error);
console.error(error);
}
}, [trxDate, table]);
useEffect(() => {
const timer = setTimeout(() => {
// Add search type filter to column filters
table.setColumnFilters((prev) => [
...prev.filter((f) => f.id !== 'searchtype'),
{ id: 'searchtype', value: typeSearchValue },
]);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [typeSearchValue, 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();
}
}, [trxDate]);
}, [trxDate, statusApproval, searchValue, typeSearchValue, table]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -93,11 +78,8 @@ const ListToolbar = () => {
From
<input
type="date"
placeholder="From"
value={trxDate.from}
onChange={(event) =>
settrxDate({ ...trxDate, from: event.target.value })
}
onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
name="from"
/>
</label>
@ -106,20 +88,15 @@ const ListToolbar = () => {
To
<input
type="date"
placeholder="To"
value={trxDate.to}
onChange={(event) =>
settrxDate({ ...trxDate, to: event.target.value })
}
onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
name="to"
/>
</label>
<Select
value={statusApproval}
onValueChange={(value) => {
setStatusApproval(value);
}}
onValueChange={setStatusApproval}
>
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
<SelectValue placeholder="Select Status" />
@ -133,9 +110,7 @@ const ListToolbar = () => {
<Select
value={typeSearchValue}
onValueChange={(value) => {
setSearchTypeValue(value);
}}
onValueChange={setSearchTypeValue}
>
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Search Type" />
@ -151,12 +126,16 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder={`Search ${typeSearchValue || ''}`} // Use typeSearchValue if it's set, else fallback to an empty string
placeholder={`Search ${typeSearchValue || ''}`}
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onChange={(e) => setSearchValue(e.target.value)}
/>
</label>
{/* Tombol Filter */}
<Button onClick={handleFilterData}>
Filter
</Button>
</div>
<div className="ml-auto">
@ -166,23 +145,22 @@ const ListToolbar = () => {
className="h-7.5"
onClick={() => {
const today = new Date();
// const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const formatDate = (date: Date) => date.toISOString().split('T')[0];
// Resetting all filters
// Reset semua filter dan tanggal ke hari ini
setSearchValue('');
setStatusApproval('');
settrxDate({
from: formatDate(today),
to: formatDate(today),
});
settrxDate({ from: formatDate(today), to: formatDate(today) });
setSearchTypeValue('');
// Reset filter di tabel
table.getColumn('code')?.setFilterValue('');
table.getColumn('status_approve')?.setFilterValue('');
table.getColumn('transaction_date')?.setFilterValue('');
table.setColumnFilters([]);
table.setPageIndex(0);
reload(); // Reload table data
reload();
}}
>
<KeenIcon icon="arrows-circle" />

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

@ -456,7 +456,24 @@ const DetailTransaction = () => {
kind = 'TRANSFER AGENT';
} else if (transactionDetails?.kind === 'M') {
kind = 'WITHDRAWAL AGENT';
}else if( transactionDetails?.kind === 'O') {
kind = 'TOPUP AGENT';
}else if (transactionDetails?.kind === 'S') {
kind = 'TOPUP P24';
}else if (transactionDetails?.kind === 'I') {
kind = 'WITHDRAW MERCHANT';
}else if (transactionDetails?.kind === 'D') {
kind = 'DONATION';
}else if (transactionDetails?.kind === 'F') {
kind = 'FEE';
}else if (transactionDetails?.kind === 'V') {
kind = 'REVERSAL';
}else if( transactionDetails?.kind === 'C') {
kind = 'CASHBACK CASH';
}else if( transactionDetails?.kind === 'H') {
kind = 'CASHBACK POINT';
}
return kind;
})()}
</p>

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

@ -1,7 +1,7 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useTransactionContext } from '../hooks/useTransactionContext';
import { Button } from '@/components/ui/button';
import { useCallback, useState, useEffect } from 'react';
import { useCallback, useState, useEffect, useRef } from 'react';
import { toast } from 'sonner';
import {
Select,
@ -17,8 +17,8 @@ import { getAuth } from '@/auth';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const [trxDate, settrxDate] = useState({ from: '', to: '' });
const [searchValue, setSearchValue] = useState<string>(''); // default: empty string
const [typeSearchValue, setSearchTypeValue] = useState<string>(''); // default: empty string
const [searchValue, setSearchValue] = useState<string>('');
const [typeSearchValue, setSearchTypeValue] = useState<string>('');
const [typeValue, setTypeValue] = useState<string>(
(table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
);
@ -26,62 +26,44 @@ const ListToolbar = () => {
const { GetData } = useCallApi();
const API_URL = apiConfig.transaction;
const formatDate = (date: Date): string => {
return date.toISOString().split('T')[0];
};
const formatDate = (date: Date): string => date.toISOString().split('T')[0];
// Set tanggal default hari ini saat mount
useEffect(() => {
const today = new Date();
settrxDate({
from: formatDate(today),
to: formatDate(today),
});
const formatted = formatDate(today);
settrxDate({ from: formatted, to: formatted });
}, []);
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 timer = setTimeout(() => {
table.setColumnFilters((prev) => [
...prev.filter((f) => f.id !== 'searchtype'),
{ id: 'searchtype', value: typeSearchValue },
]);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [typeSearchValue, table]);
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('code')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
// **Hilangkan semua useEffect yang auto apply filter saat input berubah**
// Karena kamu mau filter apply hanya lewat tombol Filter
// Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
const handleFilterData = useCallback(() => {
try {
table.getColumn('transaction_date')?.setFilterValue(trxDate);
} catch (error) {
toast.error('Error applying filter');
console.error('Error applying filter:', error);
if (!trxDate.from || !trxDate.to) {
toast.error('Please select both From and To dates');
return;
}
}, [trxDate, table]);
useEffect(() => {
if (trxDate.from && trxDate.to) {
handleFilterData();
}
}, [trxDate]);
// Terapkan filter tanggal
table.getColumn('transaction_date')?.setFilterValue(trxDate);
// Terapkan filter jenis transaksi (kind)
table.setColumnFilters((prev) => {
// Hapus filter 'kind' dan 'searchtype' agar bisa set ulang
const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code');
// Bangun array baru dengan filter yang diinginkan
const filters: any[] = [...others];
if (typeValue) filters.push({ id: 'kind', value: typeValue });
if (typeSearchValue) filters.push({ id: 'searchtype', value: typeSearchValue });
if (searchValue) filters.push({ id: 'code', value: searchValue });
return filters;
});
table.setPageIndex(0);
}, [trxDate, typeValue, typeSearchValue, searchValue, table]);
const exporDataToExcel = async (
typeSearchValue: string,
@ -93,8 +75,8 @@ const ListToolbar = () => {
const formattedFilter: any = {
"Transactions.transaction_date": {
from: `${trxDate.from} 00:00:00`,
to: `${trxDate.to} 23:59:59`
}
to: `${trxDate.to} 23:59:59`,
},
};
if (typeSearchValue === 'msisdn') {
@ -106,17 +88,20 @@ const ListToolbar = () => {
}
if (typeValue) {
formattedFilter["Transactions.kind"] = typeValue;
formattedFilter['Transactions.kind'] = typeValue;
}
const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));
const response = await fetch(`${API_URL}/transaction/export?filter=${filterParam}`, {
method: 'GET',
headers: {
Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
const response = await fetch(
`${API_URL}/transaction/export?filter=${filterParam}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${getAuth()?.access_token}`,
},
}
});
);
if (!response.ok) {
throw new Error('Failed to fetch file');
@ -134,7 +119,6 @@ const ListToolbar = () => {
}
};
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 justify-between items-center">
@ -162,11 +146,7 @@ const ListToolbar = () => {
name="to"
/>
</label>
<Select
value={typeValue}
onValueChange={(value) => setTypeValue(value)}
>
<Select value={typeValue} onValueChange={(value) => setTypeValue(value)}>
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
@ -182,13 +162,18 @@ const ListToolbar = () => {
<SelectItem value="B">TOP UP P24</SelectItem>
<SelectItem value="A">TRANSFER AGENT</SelectItem>
<SelectItem value="M">WITHDRAWAL AGENT</SelectItem>
<SelectItem value="O">TOP UP AGENT</SelectItem>
<SelectItem value="S">TRANSFER P24</SelectItem>
<SelectItem value="I">WITHDRAW MERCHANT</SelectItem>
<SelectItem value="D">DONATION</SelectItem>
<SelectItem value="F">FEE</SelectItem>
<SelectItem value="V">REVERSAL</SelectItem>
<SelectItem value="C">CASHBACK CASH</SelectItem>
<SelectItem value="H">CASHBACK POINT</SelectItem>
</SelectContent>
</Select>
<Select
value={typeSearchValue}
onValueChange={(value) => setSearchTypeValue(value)}
>
<Select value={typeSearchValue} onValueChange={(value) => setSearchTypeValue(value)}>
<SelectTrigger className="input input-sm w-[250px] h-[31px]">
<SelectValue placeholder="Select Search Type" />
</SelectTrigger>
@ -208,6 +193,11 @@ const ListToolbar = () => {
onChange={(event) => setSearchValue(event.target.value)}
/>
</label>
<Button className="h-7.5" onClick={handleFilterData}>
Filter
</Button>
</div>
<div className="ml-auto flex gap-2">
@ -237,28 +227,17 @@ const ListToolbar = () => {
Export Data
</Button>
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button
variant="outline"
className="h-7.5"
onClick={() => {
const today = new Date();
setSearchValue('');
setSearchTypeValue('');
setTypeValue('');
settrxDate({
from: formatDate(today),
to: formatDate(today),
});
table.setColumnFilters([
{ id: 'code', value: '' },
{ id: 'kind', value: '' },
]);
settrxDate({ from: formatDate(today), to: formatDate(today) });
table.setColumnFilters([]);
table.setPageIndex(0);
reload();
}}

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

@ -82,6 +82,14 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
case 'B': return 'TOP UP P24';
case 'A': return 'TRANSFER AGENT';
case 'M': return 'WITHDRAWAL AGENT';
case 'O': return 'TOP UP AGENT';
case 'S': return 'TRANSFER P24';
case 'I': return 'WIJTDRAW MERCHANT';
case 'D': return 'DONATION';
case 'F': return 'FEE';
case 'V': return 'REVERSAL';
case 'C': return 'CASHBACK CASH';
case 'H': return 'CASHBACK POINT';
default: return '_';
}
},

9
src/pages/transfer/transfertype/blocks/AddDialog.tsx
View File

@ -568,6 +568,15 @@ const AddDialog = () => {
<SelectItem value="B">Top Up P24</SelectItem>
<SelectItem value="A">Transfer Agent</SelectItem>
<SelectItem value="M">Withdraw Agent</SelectItem>
<SelectItem value="O">Top Up Agent</SelectItem>
<SelectItem value="S">Transfer P24</SelectItem>
<SelectItem value="I">Withdraw Merchant</SelectItem>
<SelectItem value="D">Donation</SelectItem>
<SelectItem value="F">Fee</SelectItem>
<SelectItem value="V">Raversal</SelectItem>
<SelectItem value="C">Cashback Cash</SelectItem>
<SelectItem value="H">Cashback Point</SelectItem>
<SelectItem value="J">Withdraw Admin</SelectItem>
</SelectContent>
</Select>
{errors.status_kind && (

11
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -766,7 +766,16 @@ const EditDialog = () => {
<SelectItem value="B">Top Up P24</SelectItem>
<SelectItem value="A">Transfer Agent</SelectItem>
<SelectItem value="M">Withdraw Agent</SelectItem>
</SelectContent>
<SelectItem value="O">Top Up Agent</SelectItem>
<SelectItem value="S">Transfer P24</SelectItem>
<SelectItem value="I">Withdraw Merchant</SelectItem>
<SelectItem value="D">Donation</SelectItem>
<SelectItem value="F">Fee</SelectItem>
<SelectItem value="V">Raversal</SelectItem>
<SelectItem value="C">Cashback Cash</SelectItem>
<SelectItem value="H">Cashback Point</SelectItem>
<SelectItem value="J">Withdraw Admin</SelectItem>
</SelectContent>{' '}
</Select>
{errors.status_kind && (
<span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>

13
src/pages/transfer/transfertype/blocks/ListToolBar.tsx
View File

@ -62,14 +62,14 @@ const ListToolbar = () => {
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
table.getColumn('name')?.setFilterValue(searchValue);
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
table.setPageIndex(0);
}
};
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(searchValue);
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
@ -210,6 +210,15 @@ const ListToolbar = () => {
<SelectItem value="B">Top Up P24</SelectItem>
<SelectItem value="A">Transfer Agent</SelectItem>
<SelectItem value="M">Withdraw Agent</SelectItem>
<SelectItem value="O">Top Up Agent</SelectItem>
<SelectItem value="S">Transfer P24</SelectItem>
<SelectItem value="I">Withdraw Merchant</SelectItem>
<SelectItem value="D">Donation</SelectItem>
<SelectItem value="F">Fee</SelectItem>
<SelectItem value="V">Raversal</SelectItem>
<SelectItem value="C">Cashback Cash</SelectItem>
<SelectItem value="H">Cashback Point</SelectItem>
<SelectItem value="J">Withdraw Admin</SelectItem>
</SelectContent>
</Select>
</div>

23
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -34,8 +34,8 @@ const formatInteger = (num: number): string => {
return num.toLocaleString('en-US', {
style: 'decimal',
maximumFractionDigits: 0
})
}
});
};
interface AccountProps {
id: string;
@ -224,9 +224,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
TM: 'Top Up Master Agent',
TA: 'Top Up Agent',
PL: 'Purchase Loja',
DE: 'Disbursment Escrow',
DM: 'Disbursment Master Agent',
DA: 'Disbursment Agent',
DE: 'Disbursement Escrow',
DM: 'Disbursement Master Agent',
DA: 'Disbursement Agent',
WI: 'Withdraw Merchant',
IC: 'Income Merchant',
DN: 'Donation'
@ -287,7 +287,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
L: { label: 'Purchase Loja', className: 'bg-rose-100 text-rose-600' },
B: { label: 'Top Up P24', className: 'bg-rose-100 text-rose-600' },
A: { label: 'Transfer Agent', className: 'bg-rose-100 text-rose-600' },
M: { label: 'Withdraw Agent', className: 'bg-rose-100 text-rose-600' }
M: { label: 'Withdraw Agent', className: 'bg-rose-100 text-rose-600' },
O: { label: 'Top Up Agent', className: 'bg-rose-100 text-rose-600' },
S: { label: 'Transfer P24', className: 'bg-rose-100 text-rose-600' },
I: { label: 'Withdraw Merchant', className: 'bg-rose-100 text-rose-600' },
D: { label: 'Donation', className: 'bg-rose-100 text-rose-600' },
F: { label: 'Fee', className: 'bg-rose-100 text-rose-600' },
V: { label: 'Raversal', className: 'bg-rose-100 text-rose-600' },
C: { label: 'Cashback Cash', className: 'bg-rose-100 text-rose-600' },
H: { label: 'Cashback Point', className: 'bg-rose-100 text-rose-600' },
J: { label: 'Withdraw Admin', className: 'bg-rose-100 text-rose-600' },
};
const kindInfo = mapping[kind] || {
@ -366,7 +375,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
let filterObject: Record<string, any> = {};
if (debouncedSearchTerm) {
filterObject['any'] = debouncedSearchTerm.toLowerCase();
filterObject['name'] = `%${debouncedSearchTerm.toLowerCase()}%`;
}
if (columnFilters.length > 0) {