Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
ardiola
BIN
public/media/avatars/profile.png
Normal file
BIN
public/media/avatars/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@ -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,9 +15,14 @@ const HeaderTopbar = () => {
|
||||
const handleDropdownChatShow = () => {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
};
|
||||
|
||||
console.log(getAuth())
|
||||
return (
|
||||
<div className="flex items-center gap-3.5">
|
||||
<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}
|
||||
@ -28,23 +34,24 @@ const HeaderTopbar = () => {
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [20, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
offset: [20, 10],
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<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=""
|
||||
className="w-9 h-9 rounded-full border border-gray-500 object-cover"
|
||||
src={toAbsoluteUrl('/media/avatars/profile.png')}
|
||||
alt="User avatar"
|
||||
/>
|
||||
</MenuToggle>
|
||||
{DropdownUser({ menuItemRef: itemUserRef })}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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()}>
|
||||
<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];
|
||||
|
||||
199
src/pages/members/feedback-member/blocks/FeedbackDetail.tsx
Normal file
199
src/pages/members/feedback-member/blocks/FeedbackDetail.tsx
Normal file
@ -0,0 +1,199 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface FeedbackDetailProps {
|
||||
showDialog: boolean;
|
||||
handleDialog: (show: boolean) => void;
|
||||
feedbackId: string | null;
|
||||
}
|
||||
|
||||
interface FeedbackDetailData {
|
||||
Feedback_id: string;
|
||||
Feedback_feedback_notes: string;
|
||||
Feedback_feedback_screenshoot: string;
|
||||
Feedback_review_notes: string;
|
||||
Feedback_emotion: string;
|
||||
Feedback_review_screenshoot: string | null;
|
||||
Feedback_category: string;
|
||||
Feedback_status: string;
|
||||
Feedback_created_at: string;
|
||||
Feedback_review_by: string | null;
|
||||
Feedback_review_at: string;
|
||||
Feedback_deleted_by: string | null;
|
||||
Feedback_deleted_at: string | null;
|
||||
Feedback_createdById: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_feedback;
|
||||
|
||||
const FeedbackDetail: React.FC<FeedbackDetailProps> = ({ showDialog, handleDialog, feedbackId }) => {
|
||||
const [feedbackDetail, setFeedbackDetail] = useState<FeedbackDetailData | null>(null);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const { GetData } = useCallApi();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchFeedbackDetail = async () => {
|
||||
if (!feedbackId) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/feedback/${feedbackId}`,{});
|
||||
if (response?.data) {
|
||||
setFeedbackDetail(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching feedback detail:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (showDialog && feedbackId) {
|
||||
fetchFeedbackDetail();
|
||||
} else {
|
||||
setFeedbackDetail(null);
|
||||
}
|
||||
}, [showDialog, feedbackId, GetData]);
|
||||
|
||||
const formatDate = (dateString: string | null) => {
|
||||
if (!dateString) return '-';
|
||||
try {
|
||||
return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
|
||||
} catch (e) {
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
const getEmotionText = (emotion: string) => {
|
||||
const emotions: Record<string, string> = {
|
||||
'1': 'Very Disappointed',
|
||||
'2': 'Disappointed',
|
||||
'3': 'Happy',
|
||||
'4': 'Very Happy',
|
||||
'5': 'Extremely Happy'
|
||||
};
|
||||
return emotions[emotion] || emotion;
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
const statuses: Record<string, string> = {
|
||||
'W': 'Waiting',
|
||||
'P': 'Processed',
|
||||
'D': 'Done'
|
||||
};
|
||||
return statuses[status] || status;
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showDialog} onOpenChange={handleDialog}>
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Feedback Detail</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center p-8">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : feedbackDetail ? (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Feedback ID</label>
|
||||
<div>{feedbackDetail.Feedback_id}</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Category</label>
|
||||
<div>{feedbackDetail.Feedback_category}</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Emotion</label>
|
||||
<div>{getEmotionText(feedbackDetail.Feedback_emotion)}</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Status</label>
|
||||
<div>{getStatusText(feedbackDetail.Feedback_status)}</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Created At</label>
|
||||
<div>{formatDate(feedbackDetail.Feedback_created_at)}</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Created By</label>
|
||||
<div>{feedbackDetail.Feedback_createdById}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Feedback Notes</label>
|
||||
<div className="p-3 bg-gray-50 rounded">{feedbackDetail.Feedback_feedback_notes}</div>
|
||||
</div>
|
||||
|
||||
{feedbackDetail.Feedback_feedback_screenshoot && (
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Feedback Screenshot</label>
|
||||
<div>
|
||||
<img
|
||||
src={feedbackDetail.Feedback_feedback_screenshoot.replace(/^'|'$/g, '')}
|
||||
alt="Feedback Screenshot"
|
||||
className="max-h-64 rounded"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
(e.target as HTMLImageElement).parentElement?.appendChild(
|
||||
Object.assign(document.createElement('div'), {
|
||||
className: 'text-sm text-gray-500',
|
||||
textContent: 'Image not available or invalid URL'
|
||||
})
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Review Notes</label>
|
||||
<div className="p-3 bg-gray-50 rounded">{feedbackDetail.Feedback_review_notes || '-'}</div>
|
||||
</div>
|
||||
|
||||
{feedbackDetail.Feedback_review_screenshoot && (
|
||||
<div className="form-group">
|
||||
<label className="form-label font-semibold">Review Screenshot</label>
|
||||
<div>
|
||||
<img
|
||||
src={feedbackDetail.Feedback_review_screenshoot}
|
||||
alt="Review Screenshot"
|
||||
className="max-h-64 rounded"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
(e.target as HTMLImageElement).parentElement?.appendChild(
|
||||
Object.assign(document.createElement('div'), {
|
||||
className: 'text-sm text-gray-500',
|
||||
textContent: 'Image not available or invalid URL'
|
||||
})
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 text-center text-gray-500">No feedback details found</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeedbackDetail;
|
||||
@ -4,7 +4,8 @@ import { useCallApi } from '@/hooks';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import React, { createContext, useCallback, useMemo, useState } from 'react';
|
||||
import { Toaster } from 'sonner';
|
||||
// import ListToolbar from '../blocks/ListToolbar';
|
||||
// import FeedbackDetail from './blocks/FeedbackDetail';
|
||||
import FeedbackDetail from '../blocks/FeedbackDetail';
|
||||
|
||||
interface feedbackProps {
|
||||
id: string;
|
||||
@ -24,6 +25,8 @@ interface ContextProps {
|
||||
handleAddDialog: (show: boolean) => void;
|
||||
showDeleteDialog: boolean;
|
||||
handleDeleteDialog: (show: boolean, selected_sucos: string | null) => void;
|
||||
showDetailDialog: boolean;
|
||||
handleDetailDialog: (show: boolean, selected_sucos: string | null) => void;
|
||||
selectedfeedback: string | null;
|
||||
getfeedbackLists: (
|
||||
limit: number,
|
||||
@ -42,6 +45,8 @@ const initialProps: ContextProps = {
|
||||
handleAddDialog: () => {},
|
||||
showDeleteDialog: false,
|
||||
handleDeleteDialog: () => {},
|
||||
showDetailDialog: false,
|
||||
handleDetailDialog: () => {},
|
||||
selectedfeedback: null,
|
||||
getfeedbackLists: async () => undefined
|
||||
};
|
||||
@ -54,6 +59,7 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
|
||||
const [showAddDialog, setShowAddDialog] = useState(false);
|
||||
const [showEditDialog, setShowEditDialog] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [showDetailDialog, setShowDetailDialog] = useState(false);
|
||||
const [selectedfeedback, setSelectedfeedback] = useState<string | null>(null);
|
||||
const { GetData } = useCallApi();
|
||||
|
||||
@ -71,10 +77,35 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
|
||||
setSelectedfeedback(show ? selected_feedback : null);
|
||||
}, []);
|
||||
|
||||
const handleDetailDialog = useCallback((show: boolean, selected_feedback: string | null) => {
|
||||
setShowDetailDialog(show);
|
||||
setSelectedfeedback(show ? selected_feedback : null);
|
||||
}, []);
|
||||
|
||||
const columns = useMemo<ColumnDef<any>[]>(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.feedback_notes,
|
||||
accessorFn: (row) => row.customer,
|
||||
id: 'customer_id',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Customer Name" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.Feedback_emotion,
|
||||
id: 'feedback_emotion',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Emotion" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.Feedback_feedback_notes,
|
||||
id: 'feedback_notes',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Feedback Notes" column={column} />,
|
||||
enableSorting: false,
|
||||
@ -84,67 +115,45 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.feedback_screenshot,
|
||||
id: 'feedback_screenshot',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Feedback Screenshot" column={column} />,
|
||||
id: 'actions',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
}
|
||||
cell: (data) => {
|
||||
const row = data.row.original;
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDetailDialog(true, row.Feedback_id)}
|
||||
title="View Details"
|
||||
>
|
||||
<KeenIcon icon="eye" />
|
||||
</button>
|
||||
{/* <button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleEditDialog(true, row.Feedback_id)}
|
||||
title="Edit"
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDeleteDialog(true, row.Feedback_id)}
|
||||
title="Delete"
|
||||
>
|
||||
<KeenIcon icon="trash" />
|
||||
</button> */}
|
||||
</>
|
||||
);
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.review_notes,
|
||||
id: 'review_notes',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Review Notes" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.review_screenshot,
|
||||
id: 'review_screenshot',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Review Screenshot" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
headerClassName: 'w-[150px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
// ,
|
||||
// {
|
||||
// id: 'actions',
|
||||
// header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
|
||||
// enableSorting: false,
|
||||
// enableHiding: false,
|
||||
// cell: (data) => {
|
||||
// const row = data.row.original;
|
||||
// return (
|
||||
// <>
|
||||
// <button
|
||||
// className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
// onClick={() => handleEditDialog(true, row.feedback_id)}
|
||||
// >
|
||||
// <KeenIcon icon="notepad-edit" />
|
||||
// </button>
|
||||
// <button
|
||||
// className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
// onClick={() => handleDeleteDialog(true, row.feedback_id)}
|
||||
// >
|
||||
// <KeenIcon icon="trash" />
|
||||
// </button>
|
||||
// </>
|
||||
// );
|
||||
// },
|
||||
// meta: {
|
||||
// headerClassName: 'w-[100px] text-center',
|
||||
// cellClassName: 'text-center'
|
||||
// }
|
||||
// }
|
||||
],
|
||||
[handleEditDialog, handleDeleteDialog]
|
||||
[handleEditDialog, handleDeleteDialog, handleDetailDialog]
|
||||
);
|
||||
|
||||
const getfeedbackLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
@ -167,7 +176,6 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<ManageFeedbackMemberContext.Provider
|
||||
value={{
|
||||
@ -178,12 +186,21 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
|
||||
handleAddDialog,
|
||||
showDeleteDialog,
|
||||
handleDeleteDialog,
|
||||
showDetailDialog,
|
||||
handleDetailDialog,
|
||||
selectedfeedback,
|
||||
getfeedbackLists
|
||||
}}
|
||||
>
|
||||
<Toaster expand visibleToasts={9} duration={3000} />
|
||||
|
||||
{/* Feedback Detail Modal Component */}
|
||||
<FeedbackDetail
|
||||
showDialog={showDetailDialog}
|
||||
handleDialog={(show) => handleDetailDialog(show, show ? selectedfeedback : null)}
|
||||
feedbackId={selectedfeedback}
|
||||
/>
|
||||
|
||||
<DataGridProvider
|
||||
columns={columns}
|
||||
pagination={{ size: 10 }}
|
||||
|
||||
@ -158,7 +158,6 @@ const ManageMembers = () => {
|
||||
createMember.pin = 'admin';
|
||||
delete createMember.password;
|
||||
delete createMember.try_pin;
|
||||
delete createMember.license_number;
|
||||
delete createMember.isneedapproval;
|
||||
delete createMember.isapproved;
|
||||
delete createMember.approveddate;
|
||||
|
||||
@ -70,7 +70,8 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
setFormData({ ...formData, [name]: value });
|
||||
} else {
|
||||
if (name === 'municipio_id' || name === 'posto_adms_id' || name === 'suco_id') await getMasterAfter(name, value);
|
||||
setFormData({ ...formData, [name]: value });
|
||||
if (name==='msisdn') setFormData({ ...formData, [name]: value.replace(/\D/g, '') })
|
||||
else setFormData({ ...formData, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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 });
|
||||
}
|
||||
|
||||
@ -3,12 +3,30 @@ 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 => {
|
||||
@ -83,6 +101,22 @@ const ListToolbar = () => {
|
||||
/>
|
||||
</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
|
||||
@ -104,16 +138,19 @@ const ListToolbar = () => {
|
||||
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),
|
||||
});
|
||||
|
||||
table.getColumn('code')?.setFilterValue('');
|
||||
table.getColumn('status_approve')?.setFilterValue('');
|
||||
table.setPageIndex(0);
|
||||
|
||||
reload();
|
||||
reload(); // Reload table data
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
@ -123,7 +160,6 @@ const ListToolbar = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default ListToolbar;
|
||||
|
||||
@ -250,7 +250,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
let startdate = firstDayOfMonth.toISOString().split('T')[0];
|
||||
let enddate = today.toISOString().split('T')[0];
|
||||
let transactioncode = '';
|
||||
// let transactionstatus = '';
|
||||
let approvalstatus = '';
|
||||
|
||||
if (Array.isArray(filter)) {
|
||||
filter.forEach((f: any) => {
|
||||
@ -264,35 +264,37 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
transactioncode = f.value;
|
||||
}
|
||||
|
||||
// if (f.id === 'status' && f.value) {
|
||||
// transactionstatus = 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`
|
||||
to: `${enddate} 23:59:59`,
|
||||
},
|
||||
"Transactions.code": {
|
||||
like: `%${transactioncode}%`
|
||||
},
|
||||
|
||||
"Transactions.status_approve": { in: ["W", "Y", "N"] },
|
||||
// "Transactions.status": {
|
||||
// like: `%${transactionstatus}%`
|
||||
// }
|
||||
};
|
||||
|
||||
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,
|
||||
with_deleted: false,
|
||||
order_field: "Transactions.created_at",
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(formattedFilter)
|
||||
filter: JSON.stringify(formattedFilter),
|
||||
});
|
||||
|
||||
if (!response || !response.data) {
|
||||
@ -300,12 +302,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
setTransaction(response.data.list);
|
||||
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 }; // optional: fail-safe fallback
|
||||
return { data: [], totalCount: 0 }; // Fail-safe fallback
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -3,30 +3,30 @@ 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';
|
||||
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) ?? ''
|
||||
// );
|
||||
|
||||
// Function to format date to YYYY-MM-DD
|
||||
const [typeValue, setTypeValue] = useState<string>(
|
||||
(table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
|
||||
);
|
||||
|
||||
const formatDate = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
@ -48,9 +48,17 @@ const ListToolbar = () => {
|
||||
// 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 to set the default date values
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
@ -111,7 +119,7 @@ const ListToolbar = () => {
|
||||
setStatusValue(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger className="input input-sm w-[160px] h-[31px]">
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -121,6 +129,24 @@ const ListToolbar = () => {
|
||||
</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
|
||||
@ -130,7 +156,6 @@ const ListToolbar = () => {
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ml-auto">
|
||||
@ -139,20 +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),
|
||||
});
|
||||
|
||||
table.getColumn('code')?.setFilterValue('');
|
||||
// table.getColumn('status')?.setFilterValue('');
|
||||
table.setPageIndex(0);
|
||||
// Reset other filters except for date range
|
||||
table.setColumnFilters([
|
||||
{ id: 'code', value: '' },
|
||||
// { id: 'status', value: '' },
|
||||
{ id: 'kind', value: '' },
|
||||
]);
|
||||
|
||||
table.setPageIndex(0);
|
||||
reload();
|
||||
}}
|
||||
>
|
||||
|
||||
@ -61,6 +61,25 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
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} />,
|
||||
@ -220,10 +239,11 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
let enddate = today.toISOString().split('T')[0];
|
||||
let transactioncode = '';
|
||||
// let transactionstatus = '';
|
||||
let type = ''
|
||||
|
||||
if (Array.isArray(filter)) {
|
||||
// console.log(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;
|
||||
@ -236,22 +256,34 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
// if (f.id === 'status' && f.value) {
|
||||
// transactionstatus = f.value;
|
||||
// }
|
||||
|
||||
if (f.id === 'kind' && f.value) {
|
||||
type = f.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const formattedFilter = {
|
||||
// Build filter object dynamically
|
||||
const formattedFilter: any = {
|
||||
"Transactions.transaction_date": {
|
||||
from: `${startdate} 00:00:00`,
|
||||
to: `${enddate} 23:59:59`
|
||||
},
|
||||
"Transactions.code": {
|
||||
like: `%${transactioncode}%`
|
||||
},
|
||||
// "Transactions.status": {
|
||||
// like: `%${transactionstatus}%`
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
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,
|
||||
@ -272,7 +304,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
return { data: [], totalCount: 0 }; // optional: fail-safe fallback
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -186,7 +186,10 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
TE: 'Top Up Escrow',
|
||||
TM: 'Top Up Master Agent',
|
||||
TA: 'Top Up Agent',
|
||||
PL:'Purchase Loja'
|
||||
PL: 'Purchase Loja',
|
||||
DE: 'Disbursment Escrow',
|
||||
DM: 'Disbursment Master Agent',
|
||||
DA: 'Disbursment Agent'
|
||||
};
|
||||
|
||||
return mapping[row.type] || 'Unknown';
|
||||
|
||||
Reference in New Issue
Block a user