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:
ardiola
2025-04-11 22:28:26 +07:00
parent 2e795ece53 cdc86a90aa
commit d6843713f3
82 changed files with 3682 additions and 1501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/auth/pages/jwt/Login.tsx
View File

@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth';
import { useLayout } from '@/providers'; import { useLayout } from '@/providers';
import { Alert } from '@/components'; import { Alert } from '@/components';
import moment from 'moment'; import moment from 'moment';
import { Helmet } from 'react-helmet';
const loginSchema = Yup.object().shape({ const loginSchema = Yup.object().shape({
username: Yup.string().required('Username is required'), username: Yup.string().required('Username is required'),
@ -76,101 +77,106 @@ const Login = () => {
}; };
return ( return (
<div className="card max-w-[390px] w-full"> <>
<form <Helmet>
className="card-body flex flex-col gap-5 p-10" <title>TPAY | Sign In</title>
onSubmit={formik.handleSubmit} </Helmet>
noValidate <div className="card max-w-[390px] w-full">
> <form
<div className="text-center"> className="card-body flex flex-col gap-5 p-10"
<h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3> onSubmit={formik.handleSubmit}
</div> noValidate
{formik.status && <Alert variant="danger">{formik.status}</Alert>}
<div className="flex flex-col gap-1">
<label className="form-label text-gray-900 ps-2.5">Login</label>
<label className="input">
<input
placeholder="Enter username"
autoComplete="off"
{...formik.getFieldProps('username')}
className={clsx('form-control', {
'is-invalid': formik.touched.username && formik.errors.username
})}
onKeyPress={handleKeyPress}
/>
</label>
{formik.touched.username && formik.errors.username && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.username}
</span>
)}
</div>
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between gap-1">
<label className="form-label text-gray-900 ps-2.5">Password</label>
</div>
<label className="input">
<input
type={showPassword ? 'text' : 'password'}
placeholder="Enter Password"
autoComplete="off"
{...formik.getFieldProps('password')}
className={clsx('form-control', {
'is-invalid': formik.touched.password && formik.errors.password
})}
onKeyPress={handleKeyPress}
/>
<button className="btn btn-icon" onClick={togglePassword} type="button">
<KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />
<KeenIcon
icon="eye-slash"
className={clsx('text-gray-500', { hidden: !showPassword })}
/>
</button>
</label>
{formik.touched.password && formik.errors.password && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.password}
</span>
)}
</div>
<div className="flex items-center justify-between gap-1">
<label className="checkbox-group">
<input
className="checkbox checkbox-sm"
type="checkbox"
{...formik.getFieldProps('remember')}
/>
<span className="checkbox-label">Remember me</span>
</label>
<Link
to={
currentLayout?.name === 'auth-branded'
? '/auth/reset-password'
: '/auth/classic/reset-password'
}
className="text-2sm link shrink-0"
>
Forgot Password?
</Link>
</div>
<button
type="submit"
className="btn btn-primary flex justify-center grow"
disabled={loading || formik.isSubmitting}
> >
{loading ? 'Please wait...' : 'Sign In'} <div className="text-center">
</button> <h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
<div> </div>
<p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}> {formik.status && <Alert variant="danger">{formik.status}</Alert>}
Copyright {moment().year()} &copy; Telkomcel All rights reserved. <div className="flex flex-col gap-1">
</p> <label className="form-label text-gray-900 ps-2.5">Login</label>
</div> <label className="input">
</form> <input
</div> placeholder="Enter username"
autoComplete="off"
{...formik.getFieldProps('username')}
className={clsx('form-control', {
'is-invalid': formik.touched.username && formik.errors.username
})}
onKeyPress={handleKeyPress}
/>
</label>
{formik.touched.username && formik.errors.username && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.username}
</span>
)}
</div>
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between gap-1">
<label className="form-label text-gray-900 ps-2.5">Password</label>
</div>
<label className="input">
<input
type={showPassword ? 'text' : 'password'}
placeholder="Enter Password"
autoComplete="off"
{...formik.getFieldProps('password')}
className={clsx('form-control', {
'is-invalid': formik.touched.password && formik.errors.password
})}
onKeyPress={handleKeyPress}
/>
<button className="btn btn-icon" onClick={togglePassword} type="button">
<KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />
<KeenIcon
icon="eye-slash"
className={clsx('text-gray-500', { hidden: !showPassword })}
/>
</button>
</label>
{formik.touched.password && formik.errors.password && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.password}
</span>
)}
</div>
<div className="flex items-center justify-between gap-1">
<label className="checkbox-group">
<input
className="checkbox checkbox-sm"
type="checkbox"
{...formik.getFieldProps('remember')}
/>
<span className="checkbox-label">Remember me</span>
</label>
<Link
to={
currentLayout?.name === 'auth-branded'
? '/auth/reset-password'
: '/auth/classic/reset-password'
}
className="text-2sm link shrink-0"
>
Forgot Password?
</Link>
</div>
<button
type="submit"
className="btn btn-primary flex justify-center grow"
disabled={loading || formik.isSubmitting}
>
{loading ? 'Please wait...' : 'Sign In'}
</button>
<div>
<p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}>
Copyright {moment().year()} &copy; Telkomcel All rights reserved.
</p>
</div>
</form>
</div>
</>
); );
}; };

126
src/auth/pages/jwt/reset-password/ResetPassword.tsx
View File

@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth/useAuthContext';
import { Alert, KeenIcon } from '@/components'; import { Alert, KeenIcon } from '@/components';
import { useLayout } from '@/providers'; import { useLayout } from '@/providers';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import { Helmet } from 'react-helmet';
const initialValues = { const initialValues = {
email: '' email: ''
@ -64,70 +65,75 @@ const ResetPassword = () => {
} }
}); });
return ( return (
<div className="card max-w-[370px] w-full"> <>
<form <Helmet>
className="card-body flex flex-col gap-5 p-10" <title>TPAY | Reset Password</title>
noValidate </Helmet>
onSubmit={formik.handleSubmit} <div className="card max-w-[370px] w-full">
> <form
<div className="text-center"> className="card-body flex flex-col gap-5 p-10"
<h3 className="text-lg font-semibold text-gray-900">Your Email</h3> noValidate
<span className="text-2sm text-gray-600 font-medium"> onSubmit={formik.handleSubmit}
Enter your email to reset password >
</span> <div className="text-center">
</div> <h3 className="text-lg font-semibold text-gray-900">Your Email</h3>
<span className="text-2sm text-gray-600 font-medium">
{hasErrors && <Alert variant="danger">{formik.status}</Alert>} Enter your email to reset password
{hasErrors === false && (
<Alert variant="success">
Password reset link sent. Please check your email to proceed
</Alert>
)}
<div className="flex flex-col gap-1">
<label className="form-label text-gray-900">Email</label>
<label className="input">
<input
type="email"
placeholder="email@email.com"
autoComplete="off"
{...formik.getFieldProps('email')}
className={clsx(
'form-control bg-transparent',
{ 'is-invalid': formik.touched.email && formik.errors.email },
{
'is-valid': formik.touched.email && !formik.errors.email
}
)}
/>
</label>
{formik.touched.email && formik.errors.email && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.email}
</span> </span>
</div>
{hasErrors && <Alert variant="danger">{formik.status}</Alert>}
{hasErrors === false && (
<Alert variant="success">
Password reset link sent. Please check your email to proceed
</Alert>
)} )}
</div>
<div className="flex flex-col gap-5 items-stretch"> <div className="flex flex-col gap-1">
<button <label className="form-label text-gray-900">Email</label>
type="submit" <label className="input">
className="btn btn-primary flex justify-center grow" <input
disabled={loading || formik.isSubmitting} type="email"
> placeholder="email@email.com"
{loading ? 'Please wait...' : 'Continue'} autoComplete="off"
</button> {...formik.getFieldProps('email')}
className={clsx(
'form-control bg-transparent',
{ 'is-invalid': formik.touched.email && formik.errors.email },
{
'is-valid': formik.touched.email && !formik.errors.email
}
)}
/>
</label>
{formik.touched.email && formik.errors.email && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.email}
</span>
)}
</div>
<Link <div className="flex flex-col gap-5 items-stretch">
to={currentLayout?.name === 'auth-branded' ? '/auth/login' : '/auth/classic/login'} <button
className="flex items-center justify-center text-sm gap-2 text-gray-700 hover:text-primary" type="submit"
> className="btn btn-primary flex justify-center grow"
<KeenIcon icon="black-left" /> disabled={loading || formik.isSubmitting}
Back to Login >
</Link> {loading ? 'Please wait...' : 'Continue'}
</div> </button>
</form>
</div> <Link
to={currentLayout?.name === 'auth-branded' ? '/auth/login' : '/auth/classic/login'}
className="flex items-center justify-center text-sm gap-2 text-gray-700 hover:text-primary"
>
<KeenIcon icon="black-left" />
Back to Login
</Link>
</div>
</form>
</div>
</>
); );
}; };

32
src/components/confirm.tsx
View File

@ -1,23 +1,21 @@
import React from "react";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogDescription, DialogBody } from '@/components/ui/dialog';
const ConfirmDialog = ({ open, onClose, title, content, onYes, onNo }: any) => { const ConfirmDialog = ({ open, onClose, title, content, onYes, onNo, onOpenChange }: any) => {
return ( return (
<Dialog open={open} onClose={onClose}> <Dialog open={open} onOpenChange={onOpenChange}>
{title && <DialogTitle>{title}</DialogTitle>} <DialogContent>
{content && <DialogContent>{content}</DialogContent>} <DialogHeader>
<DialogActions> {title && <DialogTitle className="">{title}</DialogTitle>}
<Button onClick={onNo} color="secondary"> <DialogBody>
No {content && <DialogDescription className="">{content}</DialogDescription>}
</Button> </DialogBody>
<Button onClick={onYes} color="primary"> </DialogHeader>
Yes <DialogFooter className="flex justify-end gap-2 pt-4">
</Button> <Button color="secondary" onClick={onNo}>No</Button>
</DialogActions> <Button color="primary" onClick={onYes}>Yes</Button>
</DialogFooter>
</DialogContent>
</Dialog> </Dialog>
); );
}; };

16
src/components/loaders/LoaderTransparant.tsx Normal file
View File

@ -0,0 +1,16 @@
import { toAbsoluteUrl } from '@/utils';
const LoaderTransparant = () => {
return (
<div className="flex flex-col items-center gap-2 justify-center fixed inset-0 z-50 bg-white bg-opacity-20 transition-opacity duration-700 ease-in-out">
<img
className="h-[30px] max-w-none"
src={toAbsoluteUrl('/media/app/app-logo.png')}
alt="logo"
/>
<div className="text-gray-500 font-medium text-sm">Loading...</div>
</div>
);
};
export { LoaderTransparant };

1
src/components/loaders/index.ts
View File

@ -1,3 +1,4 @@
export * from './ContentLoader'; export * from './ContentLoader';
export * from './ProgressBarLoader'; export * from './ProgressBarLoader';
export * from './ScreenLoader'; export * from './ScreenLoader';
export * from './LoaderTransparant';

9
src/config/api.config.ts
View File

@ -4,7 +4,9 @@ interface apiConfigProps {
service_master_data: string; service_master_data: string;
service_transaction: string; service_transaction: string;
service_wallet: string; service_wallet: string;
transaction: string transaction: string;
nationality: string;
service_disbursement: string;
} }
const API_URL = import.meta.env.VITE_APP_API_URL; const API_URL = import.meta.env.VITE_APP_API_URL;
@ -16,7 +18,10 @@ const apiConfig: apiConfigProps = {
service_master_data: `${API_URL}/t`, service_master_data: `${API_URL}/t`,
service_transaction: `${API_URL}/tt`, service_transaction: `${API_URL}/tt`,
service_wallet: `${API_URL}/w`, service_wallet: `${API_URL}/w`,
transaction: `${API_URL}/x` transaction: `${API_URL}/x`,
service_disbursement: `${API_URL}/s`,
nationality: `https://tpay.shiblysolution.id/cms/api/mobile/list-country/
`
}; };
export { apiConfig }; export { apiConfig };

20
src/hooks/useCallApi.ts
View File

@ -57,6 +57,24 @@ const useCallApi = () => {
} }
}, []); }, []);
const PostDataFile = useCallback(async (url: string, field: any, config = {}) => {
try {
const response = await axios.post(url, field, config);
const result = response.data;
if (result.status) {
return { status: true, message: result.data };
}
return { status: false, message: result.message };
} catch (error: any) {
const { response } = error;
return {
status: false,
message: response?.data?.error ?? response?.data?.message ?? 'Something went wrong'
};
}
}, []);
const PutData = useCallback(async (url: string, field: any) => { const PutData = useCallback(async (url: string, field: any) => {
try { try {
const response = await axios.put(url, field); const response = await axios.put(url, field);
@ -85,7 +103,7 @@ const useCallApi = () => {
} }
}, []); }, []);
return { GetData, PostData, PutData, DeleteData, GetExportData }; return { GetData, PostData, PutData, DeleteData, GetExportData, PostDataFile };
}; };
export { useCallApi }; export { useCallApi };

39
src/pages/disbursement/history-transaction/HistoryTransaction.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Container, DataGridInner } from '@/components';
import { TransactionProvider } from './hooks/TransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
import { UploadBatchDialog } from './blocks/UploadBatchDialog';
const HistoryTransactionDisbursement = () => {
return (
<>
<Helmet>
<title>TPAY | History Disbursement</title>
</Helmet>
<TransactionProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">DISBURSEMENT</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Disbursement</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">History Disbursement</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<UploadBatchDialog />
</Container>
</TransactionProvider>
</>
);
};
export default HistoryTransactionDisbursement;

137
src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx Normal file
View File

@ -0,0 +1,137 @@
import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
const API_URL = apiConfig.service_disbursement;
type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
interface StatusInfo {
label: string;
bg: string;
text: string;
}
const statusMap: Record<StatusCode, StatusInfo> = {
W: { label: 'Waiting', bg: 'bg-yellow-100', text: 'text-yellow-600' },
P: { label: 'Pending', bg: 'bg-blue-100', text: 'text-blue-600' },
F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' },
};
export const renderStatusBadge = (statusRaw: string | null | undefined) => {
const status = statusRaw as StatusCode;
const { label, bg, text } = statusMap[status] ?? {
label: 'Unknown',
bg: 'bg-gray-100',
text: 'text-gray-600',
};
return (
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
{label}
</span>
);
};
const DetailTransaction = () => {
const { GetData } = useCallApi();
const {
showDetailDialog,
setShowDetailDialog,
selectedTransactionId
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
useEffect(() => {
const fetchTransactionDetails = async () => {
console.log(selectedTransactionId)
if (selectedTransactionId) {
try {
const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, {
id: selectedTransactionId
});
// console.log(response?.data);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
}
}
};
if (showDetailDialog && selectedTransactionId) {
fetchTransactionDetails();
}
}, [showDetailDialog, selectedTransactionId, GetData]);
const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Transaction Details</DialogTitle>
</DialogHeader>
<DialogBody>
{/* Tab Content */}
<div className="py-4 overflow-y-auto max-h-[400px]">
<div className="space-y-4">
<div className="border rounded-lg overflow-x-auto">
<table className="min-w-full table-auto">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Username</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Name</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Transfer Amount</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Description</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
</tr>
</thead>
<tbody>
{transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { customer: any, amount: number, remark: string, reference: string, response_date: string, payment_response: string, status: string}, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.customer.username ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.remark ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.payment_response ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(log.status) ?? '-'}</td>
</tr>
))
) : (
<tr>
<td colSpan={8} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default DetailTransaction;

70
src/pages/disbursement/history-transaction/blocks/ListToolbar.tsx Normal file
View File

@ -0,0 +1,70 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useTransactionContext } from '../hooks/useTransactionContext';
import { Button } from '@/components/ui/button';
import { useCallback, useState, useEffect } from 'react';
import { toast } from 'sonner';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleUploadBatchDialog } = useTransactionContext();
// Set the initial state for trxDate
const [trxDate, settrxDate] = useState({ from: '', to: '' });
// 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 today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);
settrxDate({
from: formatDate(today), // Set 'from' to today
to: formatDate(nextWeek), // Set 'to' to 7 days later
});
}, []);
const handleFilterData = useCallback(() => {
try {
table.getColumn('transaction_date')?.setFilterValue(trxDate);
} catch (error) {
toast.error('Error applying filter');
console.error('Error applying filter:', error);
}
}, [trxDate, table]);
useEffect(() => {
if (trxDate.from && trxDate.to) {
handleFilterData();
}
}, [trxDate]);
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">
<div className="flex gap-3 items-center ml-auto">
<Button
variant="outline"
className="h-7.5 text-[0.8rem]"
onClick={() => handleUploadBatchDialog(true)}
>
Upload Batch
</Button>
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
<KeenIcon icon="arrows-circle" />
</Button>
</DefaultTooltip>
</div>
</div>
</div>
</div>
);
};
export default ListToolbar;

194
src/pages/disbursement/history-transaction/blocks/UploadBatchDialog.tsx Normal file
View File

@ -0,0 +1,194 @@
import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { useTransactionContext } from '../hooks';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { apiConfig } from '@/config/api.config';
import { Alert, KeenIcon, useDataGrid } from '@/components';
import { toast } from 'sonner';
import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import clsx from 'clsx';
const API_URL = apiConfig.service_disbursement;
const UploadBatchDialog = () => {
const parentRef = useRef<any | null>(null);
const { showUploadBatchDialog, handleUploadBatchDialog } = useTransactionContext();
const { reload } = useDataGrid();
const { PostData, PostDataFile, GetData } = useCallApi();
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState: {
execution_date: string,
file: File | null;
} = {
execution_date: '',
file: null
}
const [formField, setFormField] = useState(initialState);
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
/* actions */
const doUploadBatch = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData();
formData.append('execution_date', formField.execution_date);
if (formField.file) {
formData.append('file', formField.file);
}
try {
const response = await PostDataFile(`${API_URL}/upload-excel`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
if (response?.status) {
handleUploadBatchDialog(false);
resetForm();
reload();
const createActivity = {
module: 'Disbursement',
description: `Create New Disbursement => ${formField.file?.name}`,
action: 'C'
};
doSaveLogActivity(createActivity);
toast.success('Success Create Disbursement');
} else {
toast.error('Failed to create disbursement');
setAlert({ show: true, message: response?.message ?? 'Failed to create disbursement.' });
}
} catch (error) {
toast.error('Error uploading batch');
setAlert({ show: true, message: 'Something went wrong. Please try again.' });
}
},
[formField]
);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log('Form data before submit:', formField);
if (
formField.execution_date.trim() === '' ||
formField.file === null
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
doUploadBatch(e);
// console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => {
if (showUploadBatchDialog === false) {
resetForm();
}
}, [showUploadBatchDialog]);
return (
<Dialog open={showUploadBatchDialog} onOpenChange={(open) => handleUploadBatchDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900">Upload Batch</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div>
<div
className="cursor-pointer hover:opacity-100 opacity-50"
onClick={() => {
handleUploadBatchDialog(false);
resetForm();
}}
>
<KeenIcon icon="cross" className="text-1.5xl" />
</div>
</div>
</DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0">
{alert.show && (
<Alert variant="danger" className="mb-3">
<h3>{alert.message}</h3>
</Alert>
)}
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<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">Execution Date</label>
<Input
className="input"
type="datetime-local"
autoComplete="off"
value={formField.execution_date}
required
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, execution_date: target.value }))
}
/>
</div>
</div>
<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">File</label>
<Input
className="input"
type="file"
autoComplete="off"
required
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, file: target.files?.[0] ?? null }))
}
/>
</div>
</div>
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary" type="submit">
Save Changes
</Button>
</div>
</div>
</form>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export { UploadBatchDialog };

289
src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx Normal file
View File

@ -0,0 +1,289 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios';
import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import { useCallApi } from '@/hooks';
import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router';
import moment from 'moment';
import DetailTransaction from '../blocks/DetailTransaction';
interface TransactionProps {
id: number;
name: string;
}
interface ContextProps {
getTransactionLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any,
filter: any
) => Promise<{ data: TransactionProps[]; totalCount: number } | undefined>;
showDetailDialog: boolean;
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
showUploadBatchDialog: boolean;
handleUploadBatchDialog: (show: boolean) => void;
}
const initialProps: ContextProps = {
getTransactionLists: async () => ({ data: [], totalCount: 0 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { },
showUploadBatchDialog: false,
handleUploadBatchDialog: (show: boolean) => {},
};
type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
interface StatusInfo {
label: string;
bg: string;
text: string;
}
const statusMap: Record<StatusCode, StatusInfo> = {
W: { label: 'Waiting', bg: 'bg-yellow-100', text: 'text-yellow-600' },
P: { label: 'Pending', bg: 'bg-blue-100', text: 'text-blue-600' },
F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' },
};
const ManageTransactionContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_disbursement;
const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
const [showUploadBatchDialog, setShowUploadBatchDialog] = useState(false);
const [transaction, setTransaction] = useState<TransactionProps[]>([]);
const { GetData } = useCallApi();
const navigate = useNavigate();
const handleUploadBatchDialog = useCallback((show: boolean) => {
setShowUploadBatchDialog(show);
}, []);
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: 'file_name',
header: ({ column }) => <DataGridColumnHeader title="File Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
},
{
accessorFn: (row) => {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(row.amount);
},
id: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
accessorKey: 'total_record',
header: ({ column }) => <DataGridColumnHeader title="Total Record" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
},
{
accessorKey: 'total_success',
header: ({ column }) => <DataGridColumnHeader title="Success Record" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
},
{
accessorKey: 'total_fail',
header: ({ column }) => <DataGridColumnHeader title="Fail Record" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
},
{
accessorKey: 'total_pending',
header: ({ column }) => <DataGridColumnHeader title="Pending Record" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
},
{
accessorFn: (row) => row.status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
cell: ({ row }) => {
const status = row.original.status as StatusCode;
const { label, bg, text } = statusMap[status] ?? {
label: 'Unknown',
bg: 'bg-gray-100',
text: 'text-gray-600',
};
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}
>
{label}
</span>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center',
},
},
{
accessorFn: (row) => row.execution_date,
id: 'execution_date',
header: ({ column }) => <DataGridColumnHeader title="Execution Date" column={column} />,
enableSorting: true,
enableHiding: false,
cell: ({ row }) => moment(row.original.execution_date).format('YYYY-MM-DD HH:mm:ss')
},
{
accessorFn: (row) => row.done_date,
id: 'done_date',
header: ({ column }) => <DataGridColumnHeader title="Done Date" column={column} />,
enableSorting: true,
enableHiding: false,
cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('YYYY-MM-DD HH:mm:ss') : ''
},
{
id: 'actions',
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
enableSorting: false,
enableHiding: false,
cell: (data) => {
const row = data.row.original;
return (
<div key={`actions-${row.id}`}>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedTransactionId(row.id);
setShowDetailDialog(true);
}}
>
<KeenIcon icon="eye" />
</button>
</div>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
}
],
[]);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
let startdate;
let enddate;
let formattedFilter;
if (filter == undefined || filter.length == 0) {
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
startdate = today.toISOString().split('T')[0];
enddate = nextWeek.toISOString().split('T')[0];
} else if (filter != undefined || filter.length != 0) {
startdate = filter[0].value.from;
enddate = filter[0].value.to;
}
formattedFilter = {
};
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,
with_deleted: false,
order_field: "id",
order_direction: 'DESC',
filter: JSON.stringify(formattedFilter)
});
setTransaction(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching transaction', error);
}
};
return (
<ManageTransactionContext.Provider
value={{
getTransactionLists,
showDetailDialog,
setShowDetailDialog,
selectedTransactionId,
setSelectedTransactionId,
handleUploadBatchDialog,
showUploadBatchDialog
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DetailTransaction />
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
}
>
{children}
</DataGridProvider>
</ManageTransactionContext.Provider>
);
};
export { TransactionProvider, ManageTransactionContext };
export type { TransactionProps };

2
src/pages/disbursement/history-transaction/hooks/index.tsx Normal file
View File

@ -0,0 +1,2 @@
export * from './TransactionContext';
export * from './useTransactionContext';

12
src/pages/disbursement/history-transaction/hooks/useTransactionContext.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useContext } from 'react';
import { ManageTransactionContext } from './TransactionContext';
const useTransactionContext = () => {
const context = useContext(ManageTransactionContext);
if (!context) throw new Error('useTransactionContext must be used within AuthProvider');
return context;
};
export { useTransactionContext };

6
src/pages/master/aldeias/AldeiasMaster.tsx
View File

@ -9,11 +9,11 @@ const AldeiasMaster = () => {
return ( return (
<> <>
<Helmet> <Helmet>
<title>TPAY | Manage Aldeias</title> <title>TPAY | Manage Aldeia</title>
</Helmet> </Helmet>
<ManageAldeiasContextProvider> <ManageAldeiasContextProvider>
<Container> <Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</h1> <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeia</h1>
<Breadcrumbs sx={{ mb: 2 }}> <Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/"> <Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span> <span className="text-sm hover:underline">Dashboard</span>
@ -24,7 +24,7 @@ const AldeiasMaster = () => {
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Manage Aldeias</span> <span className="text-sm">Manage Aldeia</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>

23
src/pages/master/aldeias/blocks/AddDialog.tsx
View File

@ -69,18 +69,18 @@ const AddDialog = () => {
if (response?.status) { if (response?.status) {
resetForm(); resetForm();
handleAddDialog(false); handleAddDialog(false);
toast.success('Success Create Aldeias'); toast.success('Success Create Aldeia');
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Aldeias', module: 'Manage Aldeia',
description: `Create Aldeia => ${formField.name}`, description: `Create Aldeia => ${formField.name}`,
action: 'C' action: 'C'
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
toast.error('Error Create Aldeias'); toast.error('Error Create Aldeia');
setAlert({ show: true, message: 'Failed to create Aldeias. Please try again.' }); setAlert({ show: true, message: 'Failed to create Aldeia. Please try again.' });
} }
}, },
[formField] [formField]
@ -100,7 +100,8 @@ const AddDialog = () => {
// console.log('SUCOS', response?.data); // console.log('SUCOS', response?.data);
setSucos(response?.data.list); setSucos(response?.data.list);
} catch (error) { } catch (error) {
console.error('Error fetching municipios', error); // console.error('Error fetching Municipio', error);
setAlert({ show: true, message: 'Failed to fetch Municipio. Please try again.' });
} }
}; };
@ -141,7 +142,7 @@ const AddDialog = () => {
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Aldeias - Create</DialogTitle> <DialogTitle>Aldeia - Create</DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
</DialogHeader> </DialogHeader>
<DialogBody ref={parentRef}> <DialogBody ref={parentRef}>
@ -157,7 +158,7 @@ const AddDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Aldeia Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input"
@ -175,7 +176,11 @@ const AddDialog = () => {
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left"> <button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name || {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
'Select Sucos'} 'Select Sucos'}
</button> </button>
@ -192,7 +197,7 @@ const AddDialog = () => {
{sucos.map((suco) => ( {sucos.map((suco) => (
<CommandItem <CommandItem
key={suco.sucos_id} key={suco.sucos_id}
value={suco.sucos_id.toString()} value={suco.sucos_name}
onSelect={() => { onSelect={() => {
setFormField({ setFormField({
...formField, ...formField,

6
src/pages/master/aldeias/blocks/DeleteDialog.tsx
View File

@ -32,11 +32,11 @@ const DeleteDialog = () => {
if (response?.status) { if (response?.status) {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
handleDeleteDialog(false, null); handleDeleteDialog(false, null);
toast.success('Success Delete Aldeias'); toast.success('Success Delete Aldeia');
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Aldeias', module: 'Manage Aldeia',
description: `Delete Aldeia => ${selectedAldeias}`, description: `Delete Aldeia => ${selectedAldeias}`,
action: 'D' action: 'D'
}; };
@ -44,7 +44,7 @@ const DeleteDialog = () => {
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
setAlert({ show: true, message: response?.message }); setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Aldeias'); toast.error('Failed Delete Aldeia');
} }
}, [selectedAldeias, DeleteData, handleDeleteDialog, reload]); }, [selectedAldeias, DeleteData, handleDeleteDialog, reload]);

21
src/pages/master/aldeias/blocks/EditDialog.tsx
View File

@ -68,18 +68,18 @@ const EditDialog = () => {
if (response?.status) { if (response?.status) {
resetForm(); resetForm();
handleEditDialog(false, null); handleEditDialog(false, null);
toast.success('Success Update Aldeias'); toast.success('Success Update Aldeia');
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Aldeias', module: 'Manage Aldeia',
description: `Edit Aldeia => ${selectedAldeias}`, description: `Edit Aldeia => ${selectedAldeias}`,
action: 'U' action: 'U'
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
toast.error('Error Update Aldeias'); toast.error('Error Update Aldeia');
setAlert({ show: true, message: 'Error Update Aldeias' }); setAlert({ show: true, message: 'Error Update Aldeia' });
} }
}, },
[selectedAldeias, formField] [selectedAldeias, formField]
@ -99,7 +99,8 @@ const EditDialog = () => {
// console.log('SUCOS', response?.data); // console.log('SUCOS', response?.data);
setSucos(response?.data.list); setSucos(response?.data.list);
} catch (error) { } catch (error) {
console.error('Error fetching municipios', error); console.error('Error fetching Sucos', error);
setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
} }
}; };
@ -164,7 +165,7 @@ const EditDialog = () => {
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Aldeias - Update</DialogTitle> <DialogTitle>Aldeia - Update</DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody>
@ -180,7 +181,7 @@ const EditDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Aldeia Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input"
@ -198,7 +199,11 @@ const EditDialog = () => {
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left"> <button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name || {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
'Select Sucos'} 'Select Sucos'}
</button> </button>

2
src/pages/master/aldeias/blocks/ListToolbar.tsx
View File

@ -15,7 +15,7 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" /> <KeenIcon icon="magnifier" />
<input <input
type="text" type="text"
placeholder="Search Aldeias" placeholder="Search Aldeia"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''} value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)} onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/> />

4
src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx
View File

@ -80,7 +80,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
{ {
accessorFn: (row) => row.name, accessorFn: (row) => row.name,
id: 'name', id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Aldeia Name" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -90,7 +90,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
{ {
accessorFn: (row) => row.sucos.name, accessorFn: (row) => row.sucos.name,
id: 'sucos_name', id: 'sucos_name',
header: ({ column }) => <DataGridColumnHeader title="Sucos" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Sucos Name" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {

54
src/pages/master/currency/CurrencyMaster.tsx
View File

@ -5,39 +5,43 @@ import { Delete } from 'lucide-react';
import AddDialog from './blocks/AddDialog'; import AddDialog from './blocks/AddDialog';
import DeleteDialog from './blocks/DeleteDialog'; import DeleteDialog from './blocks/DeleteDialog';
import EditDialog from './blocks/EditDialog'; import EditDialog from './blocks/EditDialog';
import { Helmet } from 'react-helmet';
// import EditDialog from './blocks/EditDialog';
const CurrencyMaster = () => { const CurrencyMaster = () => {
return ( return (
<ManageCurrencyContextProvider> <>
<Container> <Helmet>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Currency</h1> <title>TPAY | Manage Currency</title>
<Breadcrumbs sx={{ mb: 2 }}> </Helmet>
<Link underline="none" color="inherit" href="/"> <ManageCurrencyContextProvider>
<span className="text-sm hover:underline">Dashboard</span> <Container>
</Link> <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Currency</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Master Data</span> <span className="text-sm">Master Data</span>
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Manage Currency</span> <span className="text-sm">Manage Currency</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5"> <div className="grid gap-5 lg:gap-7.5">
<DataGridInner /> <DataGridInner />
</div> </div>
<AddDialog /> <AddDialog />
<DeleteDialog /> <DeleteDialog />
<EditDialog /> <EditDialog />
{/* <EditDialog/> {/* <EditDialog/>
<DeleteDialog/> */} <DeleteDialog/> */}
</Container> </Container>
</ManageCurrencyContextProvider> </ManageCurrencyContextProvider>
</>
); );
}; };

6
src/pages/master/municipios/Municipios.tsx
View File

@ -11,11 +11,11 @@ const Municipios = () => {
return ( return (
<> <>
<Helmet> <Helmet>
<title>TPAY | Municipios</title> <title>TPAY | Municipio</title>
</Helmet> </Helmet>
<ManageMunicipiosProvider> <ManageMunicipiosProvider>
<Container className="mb-7"> <Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIOS</h1> <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIO</h1>
<Breadcrumbs sx={{ mb: 2 }}> <Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/"> <Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span> <span className="text-sm hover:underline">Dashboard</span>
@ -26,7 +26,7 @@ const Municipios = () => {
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Manage Municipios</span> <span className="text-sm">Manage Municipio</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5"> <div className="grid gap-5 lg:gap-7.5">

64
src/pages/master/municipios/blocks/AddDialog.tsx
View File

@ -56,7 +56,7 @@ const AddDialog = () => {
reload(); reload();
toast.success('Municipio created successfully!'); toast.success('Municipio created successfully!');
const createActivity = { const createActivity = {
module: 'Manage Municipios', module: 'Manage Municipio',
description: `Create Municipio => ${formField.name}`, description: `Create Municipio => ${formField.name}`,
action: 'C' action: 'C'
}; };
@ -107,52 +107,36 @@ const AddDialog = () => {
return ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-96 flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogTitle></DialogTitle> <DialogHeader>
<DialogDescription></DialogDescription> <DialogTitle>Municipio - Create</DialogTitle>
<DialogHeader className="p-2 border-0"> <DialogDescription></DialogDescription>
<div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900">Add Municipios</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div>
<div
className="cursor-pointer hover:opacity-100 opacity-50"
onClick={() => {
handleAddDialog(false);
resetForm();
}}
>
<KeenIcon icon="cross" className="text-1.5xl" />
</div>
</div>
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody>
<div className="flex flex-col px-0"> <div className="flex flex-col">
{alert.show && ( {alert.show && (
<Alert variant="danger" className="mb-5"> <Alert variant="danger">
{alert.message} <h3>{alert.message}</h3>
</Alert> </Alert>
)} )}
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid-cols-6 gap-5 p-0">
<div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">
Name<span className="text-red-500">*</span>
</label>
<Input <form onSubmit={handleSubmit}>
className="input col-span-6" <div className="card-body grid gap-5">
type="text" <div className="w-full">
autoComplete="off" <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
value={formField.name} <label className="form-label flex items-center gap-1 max-w-56">
onChange={({ target }) => Municipio Name<span className="text-red-500">*</span>
setFormField((prev) => ({ ...prev, name: target.value })) </label>
} <Input
/> className="input"
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</div>
</div> </div>
<div className="flex justify-end pt-2.5 gap-5 col-span-6"> <div className="flex justify-end pt-2.5 gap-5">
<Button variant={'outline'} type="reset" onClick={handleReset}> <Button variant={'outline'} type="reset" onClick={handleReset}>
Reset Reset
</Button> </Button>

2
src/pages/master/municipios/blocks/DeleteDialog.tsx
View File

@ -43,7 +43,7 @@ const DeleteDialog = () => {
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Municipios', module: 'Manage Municipio',
description: `Delete Municipio => ${selectedMunicipios}`, description: `Delete Municipio => ${selectedMunicipios}`,
action: 'D' action: 'D'
}; };

7
src/pages/master/municipios/blocks/EditDialog.tsx
View File

@ -21,7 +21,6 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
const API_URL = apiConfig.service_master_data; const API_URL = apiConfig.service_master_data;
const EditDialog = () => { const EditDialog = () => {
const parentRef = useRef<any | null>(null);
const { showEditDialog, handleEditDialog, selectedMunicipios, municipios } = const { showEditDialog, handleEditDialog, selectedMunicipios, municipios } =
useManageMunicipiosContext(); useManageMunicipiosContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
@ -131,7 +130,7 @@ const EditDialog = () => {
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Municipios - Update</DialogTitle> <DialogTitle>Municipio - Update</DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody>
@ -147,7 +146,7 @@ const EditDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Municipio Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input"
@ -158,7 +157,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end pt-2.5">
<Button className="btn btn-primary">Save Changes</Button> <Button className="btn btn-primary">Save Changes</Button>
</div> </div>
</div> </div>

2
src/pages/master/municipios/blocks/ListToolbar.tsx
View File

@ -28,7 +28,7 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" /> <KeenIcon icon="magnifier" />
<input <input
type="text" type="text"
placeholder="Search Municipios" placeholder="Search Municipio"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''} value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)} onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/> />

14
src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx
View File

@ -75,7 +75,6 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
const [selectedMunicipios, setSelectedMunicipios] = useState<string | null>(null); const [selectedMunicipios, setSelectedMunicipios] = useState<string | null>(null);
const [municipios, setMunicipios] = useState<MunicipiosProps[]>([]); const [municipios, setMunicipios] = useState<MunicipiosProps[]>([]);
const { GetData } = useCallApi(); const { GetData } = useCallApi();
const navigate = useNavigate();
const handleSearchDialog = useCallback((show: boolean) => { const handleSearchDialog = useCallback((show: boolean) => {
setShowSearchDialog(show); setShowSearchDialog(show);
@ -95,18 +94,13 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
setShowDeleteDialog(show); setShowDeleteDialog(show);
}, []); }, []);
const handleNavigate = (path: string) => {
const url = navigate(`${API_URL}/municipios/postoadms/${path}`);
console.log(url);
};
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{ {
// accessorFn: (row) => row.name, // accessorFn: (row) => row.name,
// id: 'name', // id: 'name',
accessorKey: 'name', accessorKey: 'name',
header: ({ column }) => <DataGridColumnHeader title="Municipios Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -158,12 +152,6 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter) filter: JSON.stringify(filter)
}); });
// console.log(response?.data);
// const sortedList = response.data.data.list.sort((a: MunicipiosProps, b: MunicipiosProps) => {
// if (a.name < b.name) return -1;
// if (a.name > b.name) return 1;
// return 0;
// });
setMunicipios(response?.data.list); setMunicipios(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) { } catch (error) {

20
src/pages/master/postoadms/blocks/AddDialog.tsx
View File

@ -72,17 +72,20 @@ const AddDialog = () => {
handleAddDialog(false); handleAddDialog(false);
resetForm(); resetForm();
reload(); reload();
toast.success('Posto Adm created successfully!'); toast.success('Postu Administrativo created successfully!');
const createActivity = { const createActivity = {
module: 'Manage Posto Administrativo', module: 'Manage Posto Administrativo',
description: `Create PostoAdms => ${formField.name}`, description: `Create Postu Administrativo => ${formField.name}`,
action: 'C' action: 'C'
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
toast.error('Failed to create Posto Adm. Please try again.'); toast.error('Failed to create Postu Administrativo. Please try again.');
setAlert({ show: true, message: 'Failed to create Posto Adm. Please try again.' }); setAlert({
show: true,
message: 'Failed to create Postu Administrativo. Please try again.'
});
} }
}, },
[formField] [formField]
@ -102,7 +105,8 @@ const AddDialog = () => {
// console.log(response?.data); // console.log(response?.data);
setMunicipios(response?.data.list); setMunicipios(response?.data.list);
} catch (error) { } catch (error) {
console.error('Error fetching municipios', error); console.error('Error fetching Municipio', error);
setAlert({ show: true, message: 'Failed to get Municipio. Please try again.' });
} }
}; };
@ -159,7 +163,7 @@ const AddDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Postu Administrativo Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input"
@ -179,7 +183,7 @@ const AddDialog = () => {
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left"> <button type="button" className="input col-span-5 text-left">
{municipios.find((municipio) => municipio.id === formField.municipio_id) {municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipios'} ?.name || 'Select Municipio'}
</button> </button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
@ -187,7 +191,7 @@ const AddDialog = () => {
onWheel={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}
> >
<Command> <Command>
<CommandInput placeholder="Search Municipios..." /> <CommandInput placeholder="Search Municipio..." />
<CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto"> <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
<CommandEmpty>No Municipio found.</CommandEmpty> <CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup> <CommandGroup>

10
src/pages/master/postoadms/blocks/DeleteDialog.tsx
View File

@ -28,7 +28,7 @@ const DeleteDialog = () => {
const doDeletePostoAdm = useCallback(async () => { const doDeletePostoAdm = useCallback(async () => {
if (!selectedPostoAdms) { if (!selectedPostoAdms) {
toast.error('No Posto Adm selected'); toast.error('No Postu Administrativo selected');
return; return;
} }
@ -39,18 +39,18 @@ const DeleteDialog = () => {
if (response?.status) { if (response?.status) {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
handleDeleteDialog(false, null); handleDeleteDialog(false, null);
toast.success('Success Delete Posto Adm'); toast.success('Success Delete Postu Administrativo');
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Posto Administrativo', module: 'Manage Postu Administrativo',
description: `Delete PostoAdms => ${selectedPostoAdms}`, description: `Delete Postu Administrativo => ${selectedPostoAdms}`,
action: 'D' action: 'D'
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
setAlert({ show: true, message: response?.message }); setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Posto Adm'); toast.error('Failed Delete Postu Administrativo');
} }
}, [selectedPostoAdms, DeleteData, handleDeleteDialog, reload]); }, [selectedPostoAdms, DeleteData, handleDeleteDialog, reload]);

24
src/pages/master/postoadms/blocks/EditDialog.tsx
View File

@ -71,19 +71,22 @@ const EditDialog = () => {
if (response?.status) { if (response?.status) {
handleEditDialog(false, null); handleEditDialog(false, null);
resetForm(); resetForm();
toast.success('Success Update Posto Adm'); toast.success('Success Update Postu Administrativo');
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Posto Administrativo', module: 'Manage Postu Administrativo',
description: `Edit PostoAdms => ${selectedPostoAdms}`, description: `Edit Postu Administrativo => ${selectedPostoAdms}`,
action: 'U' action: 'U'
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
toast.error('Error Update Posto Adm'); toast.error('Error Update Postu Administrativo');
setAlert({ show: true, message: 'Failed to update posto adm. Please try again.' }); setAlert({
show: true,
message: 'Failed to update Postu Administrativo Please try again.'
});
} }
}, },
[selectedPostoAdms, formField] [selectedPostoAdms, formField]
@ -103,7 +106,8 @@ const EditDialog = () => {
// console.log('MUNICIPIOS: ', response?.data); // console.log('MUNICIPIOS: ', response?.data);
setMunicipios(response?.data.list); setMunicipios(response?.data.list);
} catch (error) { } catch (error) {
console.error('Error fetching municipios', error); console.error('Error fetching Municipio', error);
setAlert({ show: true, message: 'Failed to get Municipio. Please try again.' });
} }
}, []); }, []);
@ -169,7 +173,7 @@ const EditDialog = () => {
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Posto Adm - Update</DialogTitle> <DialogTitle>Postu Administrativo - Update</DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody>
@ -185,7 +189,7 @@ const EditDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Postu Administrativo Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input"
@ -205,12 +209,12 @@ const EditDialog = () => {
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left"> <button type="button" className="input col-span-5 text-left">
{municipios.find((municipio) => municipio.id === formField.municipio_id) {municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipios'} ?.name || 'Select Municipio'}
</button> </button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[400px] p-0"> <PopoverContent className="w-[400px] p-0">
<Command> <Command>
<CommandInput placeholder="Search Municipios..." /> <CommandInput placeholder="Search Municipio..." />
<CommandList> <CommandList>
<CommandEmpty>No Municipio found.</CommandEmpty> <CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup> <CommandGroup>

2
src/pages/master/postoadms/blocks/ListToolbar.tsx
View File

@ -16,7 +16,7 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" /> <KeenIcon icon="magnifier" />
<input <input
type="text" type="text"
placeholder="Search Postu" placeholder="Search Postu Administrativo"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''} value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)} onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/> />

4
src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx
View File

@ -88,7 +88,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
id: 'name', id: 'name',
// accessorKey: 'PostoAdms_name', // accessorKey: 'PostoAdms_name',
header: ({ column }) => ( header: ({ column }) => (
<DataGridColumnHeader title="Posto Administrativo Name" column={column} /> <DataGridColumnHeader title="Postu Administrativo Name" column={column} />
), ),
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
@ -99,7 +99,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
{ {
accessorFn: (row) => row.municipios_name, accessorFn: (row) => row.municipios_name,
id: 'municipios_name', id: 'municipios_name',
header: ({ column }) => <DataGridColumnHeader title="Municipios Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Municipio Name" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {

125
src/pages/master/products/blocks/AddDialog.tsx
View File

@ -23,6 +23,7 @@ import {
SelectValue SelectValue
} from '@/components/ui/select'; } from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { NumericFormat } from 'react-number-format';
interface ProviderProps { interface ProviderProps {
provider_id: number; provider_id: number;
@ -40,15 +41,29 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState: {
name: string;
code: string;
type: string;
description: string;
price_point: string | number | null;
price_cash: string | number | null;
cashback_point: string | number | null;
cashback_cash: string | number | null;
status: string;
provider: string;
process_on_third_party: string;
created_by: string;
created_at: string;
} = {
name: '', name: '',
code: '', code: '',
type: '', type: '',
description: '', description: '',
price_point: 0, price_point: null,
price_cash: 0, price_cash: null,
cashback_point: 0, cashback_point: null,
cashback_cash: 0, cashback_cash: null,
status: '', status: '',
provider: '', provider: '',
process_on_third_party: '', process_on_third_party: '',
@ -117,11 +132,13 @@ const AddDialog = () => {
formField.type.trim() === '' || formField.type.trim() === '' ||
formField.code.trim() === '' || formField.code.trim() === '' ||
formField.description.trim() === '' || formField.description.trim() === '' ||
formField.price_point === 0 || formField.price_point === null ||
formField.price_cash === 0 || formField.price_cash === null ||
formField.cashback_point === 0 || formField.cashback_point === null ||
formField.cashback_cash === 0 || formField.cashback_cash === null ||
formField.status.trim() === '' || formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.created_by.trim() === '' || formField.created_by.trim() === '' ||
formField.created_at.trim() === '' formField.created_at.trim() === ''
) { ) {
@ -130,7 +147,7 @@ const AddDialog = () => {
} }
doCreateProduct(e); doCreateProduct(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
@ -234,19 +251,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span> Price Point<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.price_point ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.price_point} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...prev,
...formField, price_point: values.floatValue !== undefined ? values.floatValue : ''
price_point: isNaN(value) ? 0 : value }));
});
}} }}
placeholder="Enter Price Point"
/> />
</div> </div>
</div> </div>
@ -256,19 +273,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span> Price Cash<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.price_cash ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.price_cash} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...prev,
...formField, price_cash: values.floatValue !== undefined ? values.floatValue : ''
price_cash: isNaN(value) ? 0 : value }));
});
}} }}
placeholder="Enter Price Cash"
/> />
</div> </div>
</div> </div>
@ -278,19 +295,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span> Cashback Point<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.cashback_point ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.cashback_point} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...prev,
...formField, cashback_point: values.floatValue !== undefined ? values.floatValue : ''
cashback_point: isNaN(value) ? 0 : value }));
});
}} }}
placeholder="Enter Cashback Point"
/> />
</div> </div>
</div> </div>
@ -300,19 +317,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span> Cashback Cash<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.cashback_cash ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.cashback_cash} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...prev,
...formField, cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
cashback_cash: isNaN(value) ? 0 : value }));
});
}} }}
placeholder="Enter Cashback Cash"
/> />
</div> </div>
</div> </div>

139
src/pages/master/products/blocks/EditDialog.tsx
View File

@ -23,6 +23,7 @@ import {
SelectValue SelectValue
} from '@/components/ui/select'; } from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { NumericFormat } from 'react-number-format';
interface ProviderProps { interface ProviderProps {
provider_id: string; provider_id: string;
@ -41,15 +42,29 @@ const EditDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState: {
name: string;
code: string;
type: string;
description: string;
price_point: string | number | null;
price_cash: string | number | null;
cashback_point: string | number | null;
cashback_cash: string | number | null;
status: string;
provider: string;
process_on_third_party: string;
updated_by: string;
updated_at: string;
} = {
name: '', name: '',
code: '', code: '',
type: '', type: '',
description: '', description: '',
price_point: 0, price_point: null,
price_cash: 0, price_cash: null,
cashback_point: 0, cashback_point: null,
cashback_cash: 0, cashback_cash: null,
status: '', status: '',
provider: '', provider: '',
process_on_third_party: '', process_on_third_party: '',
@ -109,22 +124,22 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/product/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
console.log(response); // console.log(response);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
name: response.data.name, name: response.data?.name,
type: response.data.type, type: response.data?.type,
code: response.data.code, code: response.data?.code,
description: response.data.description, description: response.data?.description,
price_point: response.data.price_point, price_point: response.data?.price_point,
price_cash: response.data.price_cash, price_cash: response.data?.price_cash,
cashback_point: response.data.cashback_point, cashback_point: response.data?.cashback_point,
cashback_cash: response.data.cashback_cash, cashback_cash: response.data?.cashback_cash,
status: response.data.status, status: response.data?.status,
provider: response.data.provider.id, provider: response.data?.provider?.id,
process_on_third_party: response.data.process_on_third_party process_on_third_party: response.data?.process_on_third_party
})); }));
} else { } else {
setFormField(initialState); setFormField(initialState);
@ -139,11 +154,13 @@ const EditDialog = () => {
formField.type.trim() === '' || formField.type.trim() === '' ||
formField.code.trim() === '' || formField.code.trim() === '' ||
formField.description.trim() === '' || formField.description.trim() === '' ||
formField.price_point === 0 || formField.price_point === null ||
formField.price_cash === 0 || formField.price_cash === null ||
formField.cashback_point === 0 || formField.cashback_point === null ||
formField.cashback_cash === 0 || formField.cashback_cash === null ||
formField.status === '' || formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.updated_by.trim() === '' || formField.updated_by.trim() === '' ||
formField.updated_at.trim() === '' formField.updated_at.trim() === ''
) { ) {
@ -152,7 +169,7 @@ const EditDialog = () => {
} }
doUpdateProduct(e); doUpdateProduct(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
@ -260,16 +277,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span> Price Point<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.price_point ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.price_point} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...formField, price_point: isNaN(value) ? 0 : value }); ...prev,
price_point: values.floatValue !== undefined ? values.floatValue : ''
}));
}} }}
placeholder="Enter Price Point"
/> />
</div> </div>
</div> </div>
@ -279,16 +299,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span> Price Cash<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.price_cash ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.price_cash} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...formField, price_cash: isNaN(value) ? 0 : value }); ...prev,
price_cash: values.floatValue !== undefined ? values.floatValue : ''
}));
}} }}
placeholder="Enter Price Cash"
/> />
</div> </div>
</div> </div>
@ -298,16 +321,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span> Cashback Point<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.cashback_point ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.cashback_point} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...formField, cashback_point: isNaN(value) ? 0 : value }); ...prev,
cashback_point: values.floatValue !== undefined ? values.floatValue : ''
}));
}} }}
placeholder="Enter Cashback Point"
/> />
</div> </div>
</div> </div>
@ -317,16 +343,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span> Cashback Cash<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number" value={formField.cashback_cash ?? ''}
min={0} thousandSeparator="."
step={0.01} decimalSeparator=","
value={formField.cashback_cash} allowNegative={false}
onChange={(e) => { onValueChange={(values) => {
const value = parseFloat(e.target.value); setFormField((prev) => ({
setFormField({ ...formField, cashback_cash: isNaN(value) ? 0 : value }); ...prev,
cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
}));
}} }}
placeholder="Enter Cashback Cash"
/> />
</div> </div>
</div> </div>

97
src/pages/master/products/hooks/ManageProductsContext.tsx
View File

@ -72,6 +72,19 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{
accessorFn: (row) => row.code,
id: 'code',
header: ({ column }) => <DataGridColumnHeader title="Code" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
},
filterFn: (row, id, value) => {
return row.original.products_name.toLowerCase().includes(value.toLowerCase());
}
},
{ {
accessorFn: (row) => row.name, accessorFn: (row) => row.name,
id: 'name', id: 'name',
@ -89,12 +102,32 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
accessorFn: (row) => row.description, accessorFn: (row) => row.description,
id: 'description', id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[250px]' headerClassName: 'w-[250px]'
} }
}, },
{
accessorFn: (row) => row.provider?.name,
id: 'provider_name',
header: ({ column }) => <DataGridColumnHeader title="Provider Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.type,
id: 'type',
header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[150px]'
}
},
{ {
accessorFn: (row) => row.price_point, accessorFn: (row) => row.price_point,
id: 'price_point', id: 'price_point',
@ -115,6 +148,64 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
headerClassName: 'w-[100px]' headerClassName: 'w-[100px]'
} }
}, },
{
accessorFn: (row) => row.cashback_point,
id: 'cashback_point',
header: ({ column }) => <DataGridColumnHeader title="Cashback Point" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.cashback_cash,
id: 'cashback_cash',
header: ({ column }) => <DataGridColumnHeader title="Cashback Cash" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.process_on_third_party,
id: 'process_on_third_party',
header: ({ column }) => <DataGridColumnHeader title="Third Party" column={column} />,
cell: ({ row }) => {
const isActive = row.original.process_on_third_party === 'Y';
return <span>{isActive ? 'Yes' : 'No'}</span>;
},
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
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>
);
},
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{ {
id: 'actions', id: 'actions',
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@ -160,7 +251,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter) filter: JSON.stringify(filter)
}); });
// console.log(response?.data); console.log(response?.data);
setProducts(response?.data.list); setProducts(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) { } catch (error) {
@ -189,7 +280,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
pagination={{ size: 10 }} pagination={{ size: 10 }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'Product.id', desc: false }]} sorting={[{ id: 'Product.created_at', desc: true }]}
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getProductsLists(pageIndex, pageSize, sorting, columnFilters) getProductsLists(pageIndex, pageSize, sorting, columnFilters)

129
src/pages/master/provider/blocks/AddDialog.tsx
View File

@ -61,16 +61,27 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = {
const initialState: {
name: string;
description: string;
type: string;
status: string;
transaction_type: string;
agent: string | null;
created_by: string;
created_at: string;
} = {
name: '', name: '',
description: '', description: '',
type: '', type: '',
status: '', status: '',
transaction_type: '', transaction_type: '',
agent: '', agent: null,
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [transactions, setTransactions] = useState<TransactionProps[]>([]); const [transactions, setTransactions] = useState<TransactionProps[]>([]);
@ -116,14 +127,13 @@ const AddDialog = () => {
formField.description.trim() === '' || formField.description.trim() === '' ||
formField.type.trim() === '' || formField.type.trim() === '' ||
formField.status.trim() === '' || formField.status.trim() === '' ||
formField.transaction_type === '' || formField.transaction_type === ''
formField.agent.trim() === ''
) { ) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
console.log(formField); // console.log(formField);
doCreateProvider(e); doCreateProvider(e);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
@ -242,7 +252,7 @@ const AddDialog = () => {
<SelectValue placeholder="Select Type" /> <SelectValue placeholder="Select Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="h2h">H2H</SelectItem> <SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem> <SelectItem value="agent">Agent</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@ -294,56 +304,67 @@ const AddDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> {formField.type === 'agent' ? (
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Agent Name<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Agent Name<span className="text-red-500">*</span>
<Popover open={open} onOpenChange={setOpen}> </label>
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button <PopoverTrigger asChild>
type="button" <button
className="input col-span-5 text-left" type="button"
style={{ color: 'inherit' }} className="input col-span-5 text-left"
> style={{ color: 'inherit' }}
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
> >
<CommandEmpty>No Agent found.</CommandEmpty> {customers.find((customer) => customer.id === formField.agent)
<CommandGroup> ?.username || 'Select Agent'}
{customers.map((customer) => ( </button>
<CommandItem </PopoverTrigger>
key={customer.id} <PopoverContent className="w-[400px] p-0">
value={customer.username} <Command>
onSelect={() => { <CommandInput placeholder="Search Agent..." />
setFormField({ <CommandList
...formField, className="max-h-[300px] overflow-y-auto"
agent: customer.id style={{ touchAction: 'pan-y' }}
}); onWheel={(e) => {
setOpen(false); e.currentTarget.scrollTop += e.deltaY;
}} }}
> >
{customer.username} <CommandEmpty>No Agent found.</CommandEmpty>
</CommandItem> <CommandGroup>
))} {customers.map((customer) => (
</CommandGroup> <CommandItem
</CommandList> key={customer.id}
</Command> value={customer.username}
</PopoverContent> onSelect={() => {
</Popover> setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div> </div>
</div> ) : (
<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">
Agent Name
</label>
<Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
</div>
</div>
)}
<div className="flex justify-end gap-5"> <div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}> <Button type="button" variant="outline" onClick={resetForm}>

2
src/pages/master/provider/blocks/DeleteDialog.tsx
View File

@ -37,6 +37,7 @@ const DeleteDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
handleDeleteDialog(false, null); handleDeleteDialog(false, null);
toast.success('Success Delete Provider'); toast.success('Success Delete Provider');
reload();
const createActivity = { const createActivity = {
module: 'Manage Provider', module: 'Manage Provider',
description: `Delete Provider => ${selectedProvider}`, description: `Delete Provider => ${selectedProvider}`,
@ -44,7 +45,6 @@ const DeleteDialog = () => {
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
reload();
} else { } else {
setAlert({ show: true, message: response?.message }); setAlert({ show: true, message: response?.message });
toast.error('Failed Delete Provider'); toast.error('Failed Delete Provider');

131
src/pages/master/provider/blocks/EditDialog.tsx
View File

@ -51,16 +51,27 @@ const EditDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = {
const initialState: {
name: string;
description: string;
type: string;
status: string;
transaction_type: string;
agent: string | null;
updated_by: string;
updated_at: string;
} = {
name: '', name: '',
description: '', description: '',
type: '', type: '',
status: '', status: '',
transaction_type: '', transaction_type: '',
agent: '', agent: null,
updated_by: '', updated_by: '',
updated_at: '' updated_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [transactions, setTransactions] = useState<TransactionProps[]>([]); const [transactions, setTransactions] = useState<TransactionProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
@ -136,7 +147,7 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id }); const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
console.log(response); // console.log(response);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
@ -145,7 +156,7 @@ const EditDialog = () => {
type: response?.data.type, type: response?.data.type,
status: response?.data.status, status: response?.data.status,
transaction_type: response?.data.transaction_type.id, transaction_type: response?.data.transaction_type.id,
agent: response?.data.agent.id agent: response?.data.agent?.id || null
})); }));
} }
}, []); }, []);
@ -158,8 +169,7 @@ const EditDialog = () => {
formField.description.trim() === '' || formField.description.trim() === '' ||
formField.type.trim() === '' || formField.type.trim() === '' ||
formField.status.trim() === '' || formField.status.trim() === '' ||
formField.transaction_type.trim() === '' || formField.transaction_type.trim() === ''
formField.agent.trim() === ''
) { ) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
@ -257,7 +267,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select Type" /> <SelectValue placeholder="Select Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="h2h">H2H</SelectItem> <SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem> <SelectItem value="agent">Agent</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@ -309,56 +319,67 @@ const EditDialog = () => {
</div> </div>
</div> </div>
<div className="w-full"> {formField.type === 'agent' ? (
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Agent Name<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Agent Name<span className="text-red-500">*</span>
<Popover open={open} onOpenChange={setOpen}> </label>
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button <PopoverTrigger asChild>
type="button" <button
className="input col-span-5 text-left" type="button"
style={{ color: 'inherit' }} className="input col-span-5 text-left"
> style={{ color: 'inherit' }}
{customers.find((customer) => customer.id === formField.agent)
?.fullname || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
> >
<CommandEmpty>No Agent found.</CommandEmpty> {customers.find((customer) => customer.id === formField.agent)
<CommandGroup> ?.username || 'Select Agent'}
{customers.map((customer) => ( </button>
<CommandItem </PopoverTrigger>
key={customer.id} <PopoverContent className="w-[400px] p-0">
value={customer.username} <Command>
onSelect={() => { <CommandInput placeholder="Search Agent..." />
setFormField({ <CommandList
...formField, className="max-h-[300px] overflow-y-auto"
agent: customer.id style={{ touchAction: 'pan-y' }}
}); onWheel={(e) => {
setOpen(false); e.currentTarget.scrollTop += e.deltaY;
}} }}
> >
{customer.fullname} <CommandEmpty>No Agent found.</CommandEmpty>
</CommandItem> <CommandGroup>
))} {customers.map((customer) => (
</CommandGroup> <CommandItem
</CommandList> key={customer.id}
</Command> value={customer.username}
</PopoverContent> onSelect={() => {
</Popover> setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div> </div>
</div> ) : (
<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">
Agent Name
</label>
<Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
</div>
</div>
)}
<div className="flex justify-end"> <div className="flex justify-end">
<Button variant="default">Save Changes</Button> <Button variant="default">Save Changes</Button>

4
src/pages/master/provider/blocks/ListToolbar.tsx
View File

@ -16,9 +16,9 @@ const ListToolbar = () => {
<input <input
type="text" type="text"
placeholder="Search Provider" placeholder="Search Provider"
value={(table.getColumn('provider_name')?.getFilterValue() as string) ?? ''} value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => onChange={(event) =>
table.getColumn('provider_name')?.setFilterValue(event.target.value) table.getColumn('name')?.setFilterValue(event.target.value)
} }
/> />
</label> </label>

14
src/pages/master/provider/hooks/ManageProviderContext.tsx
View File

@ -75,7 +75,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
() => [ () => [
{ {
accessorFn: (row) => row.provider_name, accessorFn: (row) => row.provider_name,
id: 'provider_name', id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
@ -94,7 +94,13 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
} }
}, },
{ {
accessorFn: (row) => row.provider_type, accessorFn: (row) => {
const typeMapping: Record<string, string> = {
h2h: 'Host To Host',
agent: 'Agent'
};
return typeMapping[row.provider_type] || row.provider_type;
},
id: 'type', id: 'type',
header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
enableSorting: false, enableSorting: false,
@ -107,7 +113,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
accessorFn: (row) => row.provider_status, accessorFn: (row) => row.provider_status,
id: 'status', id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false, enableSorting: true,
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const isActive = row.original.provider_status === 'Y'; const isActive = row.original.provider_status === 'Y';
@ -203,7 +209,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
pagination={{ size: 10 }} pagination={{ size: 10 }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]} sorting={[{ id: 'created_at', desc: true }]}
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getProviderLists(pageIndex, pageSize, sorting, columnFilters) getProviderLists(pageIndex, pageSize, sorting, columnFilters)

37
src/pages/master/reward/Reward.tsx
View File

@ -1,37 +0,0 @@
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
import { Container, DataGridInner } from '@/components';
import { Breadcrumbs, Link } from '@mui/material';
const RewardMaster = () => {
return (
<ManageRewardContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Reward</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Reward</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageRewardContextProvider>
);
};
export default RewardMaster;

43
src/pages/master/reward/RewardMaster.tsx Normal file
View File

@ -0,0 +1,43 @@
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
import { Container, DataGridInner } from '@/components';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const RewardMaster = () => {
return (
<>
<Helmet>
<title>TPAY | Manage Reward</title>
</Helmet>
<ManageRewardContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Reward</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Reward</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageRewardContextProvider>
</>
);
};
export default RewardMaster;

73
src/pages/master/reward/blocks/AddDialog.tsx
View File

@ -14,6 +14,7 @@ import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { getAuth } from '@/auth'; import { getAuth } from '@/auth';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { NumericFormat } from 'react-number-format';
import { useManageRewardContext } from '../hooks/useManageRewardContext'; import { useManageRewardContext } from '../hooks/useManageRewardContext';
import { import {
Select, Select,
@ -54,10 +55,19 @@ const AddDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const RewardType = {
'Daily Check in': 'D',
Referal: 'R',
'Level Pro': 'P',
'Level Prioritas': 'L'
} as const;
type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
const doCreateReward = useCallback( const doCreateReward = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
console.log('Data yang akan dikirim:', formField); // console.log('Data yang akan dikirim:', formField);
const response = await PostData(`${API_URL}/reward/create`, formField); const response = await PostData(`${API_URL}/reward/create`, formField);
if (response?.status) { if (response?.status) {
@ -91,20 +101,15 @@ const AddDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const handleReset = () => {
resetForm();
setAlert({ show: false, message: '' });
};
useEffect(() => { useEffect(() => {
if (showAddDialog) { if (showAddDialog) {
setFormField({ setFormField((prev) => ({
...formField, ...prev,
created_by: parsedUser?.username, created_by: parsedUser?.username,
created_at: formattedTime created_at: formattedTime
}); }));
} }
}, [formattedTime]); }, [showAddDialog, parsedUser?.username, formattedTime]);
useEffect(() => { useEffect(() => {
if (showAddDialog === false) { if (showAddDialog === false) {
@ -144,34 +149,44 @@ const AddDialog = () => {
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Input <div className="col-span-6">
className="input col-span-6" <Select
type="text" value={formField.type}
autoComplete="off" onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
value={formField.type} >
onChange={({ target }) => <SelectTrigger className="w-full">
setFormField((prev) => ({ ...prev, type: target.value })) <SelectValue placeholder="Select Type" />
} </SelectTrigger>
/> <SelectContent>
{Object.entries(RewardType).map(
([label, value]: [string, RewardTypeValue]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
)
)}
</SelectContent>
</Select>
</div>
</div> </div>
<div className="grid grid-cols-8 gap-2 w-full items-center"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2"> <label className="form-label flex items-center gap-1 col-span-2">
Amount<span className="text-red-500">*</span> Amount<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input col-span-6" className="input col-span-6"
type="number"
min={0}
step={0.01}
value={formField.amount} value={formField.amount}
onChange={(e) => { thousandSeparator="."
const value = parseFloat(e.target.value); decimalSeparator=","
setFormField({ allowNegative={false}
...formField, onValueChange={(values) => {
amount: isNaN(value) ? 0 : value setFormField((prev) => ({
}); ...prev,
amount: values.floatValue || 0
}));
}} }}
placeholder="Enter Amount"
/> />
</div> </div>
<div className="grid grid-cols-8 gap-2 w-full items-center"> <div className="grid grid-cols-8 gap-2 w-full items-center">

7
src/pages/master/reward/blocks/DeleteDialog.tsx
View File

@ -25,13 +25,16 @@ const DeleteDialog = () => {
message: '' message: ''
}); });
// console.log('ini data :', selectedReward);
const doDeleteReward = useCallback(async () => { const doDeleteReward = useCallback(async () => {
if (!selectedReward) { if (!selectedReward) {
toast.error('No Reward selected'); toast.error('No Reward selected');
return; return;
} }
const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward}`, { // console.log('Ini datanya:', selectedReward);
id: selectedReward const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward?.id}/true`, {
id: selectedReward.id
}); });
if (response?.status) { if (response?.status) {

128
src/pages/master/reward/blocks/EditDialog.tsx
View File

@ -14,6 +14,7 @@ import {
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { NumericFormat } from 'react-number-format';
import { import {
Select, Select,
SelectContent, SelectContent,
@ -54,11 +55,19 @@ const EditDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const RewardType = {
'Daily Check in': 'D',
Referal: 'R'
} as const;
type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
const doUpdateReward = useCallback( const doUpdateReward = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField); // console.log('Ini datanya:', selectedReward);
const response = await PutData(`${API_URL}/reward/update/${selectedReward?.id}`, formField);
if (response?.status) { if (response?.status) {
resetForm(); resetForm();
@ -74,16 +83,17 @@ const EditDialog = () => {
); );
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
// console.log('Ini datanya:', id);
const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
console.log('API Response:', response); // console.log('API Response:', response);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
name: response?.data.name, name: response.data.name,
type: response?.data.type, type: response.data.type,
amount: response?.data.amount, amount: response.data.amount,
status: response?.data.status status: response.data.status
})); }));
} }
}, []); }, []);
@ -107,21 +117,20 @@ const EditDialog = () => {
// }; // };
useEffect(() => { useEffect(() => {
// console.log('Selected Reward:', selectedReward);
if (selectedReward) { if (selectedReward) {
doFetchData(selectedReward); doFetchData(selectedReward.id.toString());
} }
}, [selectedReward]); }, [selectedReward]);
useEffect(() => { useEffect(() => {
if (showEditDialog) { if (showEditDialog && selectedReward) {
setFormField({ setFormField((prev) => ({
...formField, ...prev,
updated_by: parsedUser.username, updated_by: parsedUser.username,
updated_at: formattedTime updated_at: formattedTime
}); }));
} }
}, [formattedTime]); }, [showEditDialog, selectedReward]);
useEffect(() => { useEffect(() => {
if (showEditDialog === false) { if (showEditDialog === false) {
@ -142,67 +151,84 @@ const EditDialog = () => {
<form onSubmit={doUpdateReward}> <form onSubmit={doUpdateReward}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input col-span-6"
type="text" type="text"
value={formField.name} value={formField.name}
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))} onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
/> />
</div> </div>
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Input <div className="col-span-6">
className="input" <Select
type="text" value={formField.type}
value={formField.type} onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
onChange={(e) => setFormField({ ...formField, type: e.target.value })} >
/> <SelectTrigger className="w-full">
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
{Object.entries(RewardType).map(
([label, value]: [string, RewardTypeValue]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
)
)}
</SelectContent>
</Select>
</div>
</div> </div>
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Amount<span className="text-red-500">*</span> Amount<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input col-span-6"
type="number"
min={0}
step={0.01}
value={formField.amount} value={formField.amount}
onChange={(e) => { thousandSeparator="."
const value = parseFloat(e.target.value); decimalSeparator=","
setFormField({ allowNegative={false}
...formField, onValueChange={(values) => {
amount: isNaN(value) ? 0 : value setFormField((prev) => ({
}); ...prev,
amount: values.floatValue || 0
}));
}} }}
placeholder="Enter Amount"
/> />
</div> </div>
<div className="w-full"> <div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label"> <label className="form-label flex items-center gap-1 col-span-2">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="col-span-6">
value={formField.status} <Select
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))} value={formField.status}
> onValueChange={(value) =>
<SelectTrigger className="w-full"> setFormField((prev) => ({ ...prev, status: value }))
<SelectValue placeholder="Select" defaultValue={formField.status} /> }
</SelectTrigger> >
<SelectContent> <SelectTrigger className="w-full">
<SelectItem value="Y">Active</SelectItem> <SelectValue placeholder="Select" defaultValue={formField.status} />
<SelectItem value="N">InActive</SelectItem> </SelectTrigger>
</SelectContent> <SelectContent>
</Select> <SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">InActive</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
<div className="flex justify-end gap-5"> <div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}> <Button type="button" variant="outline" onClick={resetForm}>

14
src/pages/master/reward/hooks/ManageRewardContext.tsx
View File

@ -26,10 +26,10 @@ interface ContextProps {
showAddDialog: boolean; showAddDialog: boolean;
handleAddDialog: (show: boolean) => void; handleAddDialog: (show: boolean) => void;
showEditDialog: boolean; showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_reward: string | null) => void; handleEditDialog: (show: boolean, selected_reward: Reward | null) => void;
showDeleteDialog: boolean; showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_rewad: string | null) => void; handleDeleteDialog: (show: boolean, selected_rewad: Reward | null) => void;
selectedReward: string | null; selectedReward: Reward | null;
reward: string | null; reward: string | null;
} }
@ -52,19 +52,19 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
const [showAddDialog, setShowAddDialog] = useState(false); const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false); const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedReward, setSelectedReward] = useState<string | null>(null); const [selectedReward, setSelectedReward] = useState<Reward | null>(null);
const { GetData } = useCallApi(); const { GetData } = useCallApi();
const handleAddDialog = useCallback((show: boolean) => { const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show); setShowAddDialog(show);
}, []); }, []);
const handleEditDialog = useCallback((show: boolean, selected_reward: string | null) => { const handleEditDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
setShowEditDialog(show); setShowEditDialog(show);
setSelectedReward(show ? selected_reward : null); setSelectedReward(show ? selected_reward : null);
}, []); }, []);
const handleDeleteDialog = useCallback((show: boolean, selected_reward: string | null) => { const handleDeleteDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
setShowDeleteDialog(show); setShowDeleteDialog(show);
setSelectedReward(show ? selected_reward : null); setSelectedReward(show ? selected_reward : null);
}, []); }, []);
@ -169,7 +169,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter) filter: JSON.stringify(filter)
}); });
// console.log('API Response:', response?.data.list); // Cek data dari API // console.log('API Response:', response?.data.list);
// console.log('reward list :', response); // console.log('reward list :', response);
setRewards(response?.data.list); setRewards(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };

15
src/pages/master/sucos/blocks/AddDialog.tsx
View File

@ -72,7 +72,7 @@ const AddDialog = () => {
toast.success('Sucos created successfully!'); toast.success('Sucos created successfully!');
const createActivity = { const createActivity = {
module: 'Manage Sucos', module: 'Manage Sucos',
description: `Create Suco => ${formField.name}`, description: `Create Sucos => ${formField.name}`,
action: 'C' action: 'C'
}; };
@ -128,7 +128,8 @@ const AddDialog = () => {
// console.log('ini data posto :', response?.data); // console.log('ini data posto :', response?.data);
setPostoadms(response?.data.list || []); setPostoadms(response?.data.list || []);
} catch (error) { } catch (error) {
console.log('Error fetching posto', error); console.log('Error fetching Postu Administrativo', error);
setAlert({ show: true, message: 'Failed to get Posto Administrativo. Please try again.' });
} }
}; };
@ -155,7 +156,7 @@ const AddDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Sucos Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input"
@ -169,13 +170,13 @@ const AddDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Posto Adm ID<span className="text-red-500">*</span> Postu Administrativo ID<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left"> <button type="button" className="input col-span-5 text-left">
{posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId) {posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId)
?.PostoAdms_name || 'Select Posto Administrativo'} ?.PostoAdms_name || 'Select Postu Administrativo'}
</button> </button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
@ -183,9 +184,9 @@ const AddDialog = () => {
onWheel={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}
> >
<Command> <Command>
<CommandInput placeholder="Search Posto Adms..." /> <CommandInput placeholder="Search Postu Administrativo..." />
<CommandList> <CommandList>
<CommandEmpty>No Posto Adms Found.</CommandEmpty> <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
<CommandGroup> <CommandGroup>
{posto_adms.map((posto) => ( {posto_adms.map((posto) => (
<CommandItem <CommandItem

4
src/pages/master/sucos/blocks/DeleteDialog.tsx
View File

@ -25,7 +25,7 @@ const DeleteDialog = () => {
const doDeleteSucos = useCallback(async () => { const doDeleteSucos = useCallback(async () => {
if (!selectedSucos) { if (!selectedSucos) {
toast.error('No sucos selected'); toast.error('No Sucos selected');
return; return;
} }
@ -41,7 +41,7 @@ const DeleteDialog = () => {
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Sucos', module: 'Manage Sucos',
description: `Delete Suco => ${selectedSucos}`, description: `Delete Sucos => ${selectedSucos}`,
action: 'D' action: 'D'
}; };

29
src/pages/master/sucos/blocks/EditDialog.tsx
View File

@ -79,7 +79,7 @@ const EditDialog = () => {
reload(); reload();
const createActivity = { const createActivity = {
module: 'Manage Sucos', module: 'Manage Sucos',
description: `Edit Suco => ${selectedSucos}`, description: `Edit Sucos => ${selectedSucos}`,
action: 'U' action: 'U'
}; };
@ -103,10 +103,11 @@ const EditDialog = () => {
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
}); });
setPostoadms(response?.data.list);
// console.log('Data Posto Adms:', response?.data.list); // console.log('Data Posto Adms:', response?.data.list);
setPostoadms(response?.data.list);
} catch (error) { } catch (error) {
console.log('Error fetching postoadms', error); console.log('Error fetching Postu Administrativo', error);
setAlert({ show: true, message: 'Failed to get Posto Administrativo. Please try again.' });
} }
}, []); }, []);
@ -118,7 +119,7 @@ const EditDialog = () => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
name: response.data.name, name: response.data.name,
postoId: response.data.posto.id // Pastikan ini sesuai dengan PostoAdms_id postoId: response.data.posto.id
})); }));
} else { } else {
setFormField((prev) => ({ setFormField((prev) => ({
@ -126,8 +127,6 @@ const EditDialog = () => {
name: '' name: ''
})); }));
} }
console.log('Responnya nih:', response);
console.log('Data Posto nya nih:', response?.data?.posto);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -138,7 +137,7 @@ const EditDialog = () => {
return; return;
} }
console.log('Form Field before update:', formField); // Log formField sebelum update // console.log('Form Field before update:', formField);
doUpdateSucos(e); doUpdateSucos(e);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
@ -146,14 +145,12 @@ const EditDialog = () => {
useEffect(() => { useEffect(() => {
if (showEditDialog) { if (showEditDialog) {
resetForm(); resetForm();
console.log('Edit Dialog Opened'); // Log ketika dialog dibuka
} }
}, [showEditDialog]); }, [showEditDialog]);
useEffect(() => { useEffect(() => {
if (selectedSucos) { if (selectedSucos) {
doFetchData(selectedSucos); doFetchData(selectedSucos);
console.log('Selected Sucos ID:', selectedSucos); // Log selectedSucos ID
} }
}, [selectedSucos]); }, [selectedSucos]);
@ -164,7 +161,6 @@ const EditDialog = () => {
updated_by: parsedUser?.username, updated_by: parsedUser?.username,
updated_at: formattedTime updated_at: formattedTime
}); });
console.log('Form Field after update:', formField); // Log formField setelah update
} }
}, [formattedTime]); }, [formattedTime]);
@ -172,7 +168,6 @@ const EditDialog = () => {
doFetchPostoAdms([{ id: 'name', desc: false }]); doFetchPostoAdms([{ id: 'name', desc: false }]);
}, []); }, []);
// console.log(selectedSucos);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@ -193,7 +188,7 @@ const EditDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Sucos Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className="input"
@ -207,21 +202,21 @@ const EditDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Posto Administrativo Name Postu Administrativo Name
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left"> <button type="button" className="input col-span-5 text-left">
{postoadms.find((posto) => posto.PostoAdms_id === formField.postoId) {postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
?.PostoAdms_name || 'Select Posto Adms'} ?.PostoAdms_name || 'Select Postu Administrativo'}
</button> </button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[400px] p-0"> <PopoverContent className="w-[400px] p-0">
<Command> <Command>
<CommandInput placeholder="Search Posto Adms..." /> <CommandInput placeholder="Search Postu Administrativo..." />
<CommandList> <CommandList>
<CommandEmpty>No Posto Adms Found.</CommandEmpty> <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
<CommandGroup> <CommandGroup>
{postoadms.map((posto) => ( {postoadms.map((posto) => (
<CommandItem <CommandItem
@ -230,7 +225,7 @@ const EditDialog = () => {
onSelect={() => { onSelect={() => {
setFormField({ setFormField({
...formField, ...formField,
postoId: posto.PostoAdms_id // Gunakan PostoAdms_id postoId: posto.PostoAdms_id
}); });
setOpen(false); setOpen(false);
}} }}

2
src/pages/master/sucos/hooks/ManageSucosContext.tsx
View File

@ -106,7 +106,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
const value = row.getValue<string>(columnId); const value = row.getValue<string>(columnId);
return String(value).includes(String(filterValue)); return String(value).includes(String(filterValue));
}, },
header: ({ column }) => <DataGridColumnHeader title="Posto Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Postu Administrativo Name" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {

12
src/pages/master/wallet/blocks/AddDialog.tsx
View File

@ -55,13 +55,13 @@ const AddDialog = () => {
description: string; description: string;
status: string; status: string;
group: string[]; group: string[];
currency_id: string; id_currency: string;
} = { } = {
name: '', name: '',
description: '', description: '',
status: '', status: '',
group: [], group: [],
currency_id: '' id_currency: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]); const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
@ -126,13 +126,13 @@ const AddDialog = () => {
formField.description.trim() === '' || formField.description.trim() === '' ||
formField.status.trim() === '' || formField.status.trim() === '' ||
formField.group.length === 0 || formField.group.length === 0 ||
formField.currency_id.trim() === '' formField.id_currency.trim() === ''
) { ) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
console.log(formField); // console.log(formField);
doCreateWallet(e); doCreateWallet(e);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
@ -251,8 +251,8 @@ const AddDialog = () => {
Currency<span className="text-red-500">*</span> Currency<span className="text-red-500">*</span>
</label> </label>
<Select <Select
value={formField.currency_id} value={formField.id_currency}
onValueChange={(value) => setFormField({ ...formField, currency_id: value })} onValueChange={(value) => setFormField({ ...formField, id_currency: value })}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select Currency Type" /> <SelectValue placeholder="Select Currency Type" />

25
src/pages/master/wallet/blocks/EditDialog.tsx
View File

@ -53,11 +53,13 @@ const EditDialog = () => {
name: string; name: string;
description: string; description: string;
status: string; status: string;
currency_id: string;
group: string[]; group: string[];
} = { } = {
name: '', name: '',
description: '', description: '',
status: '', status: '',
currency_id: '',
group: [] group: []
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
@ -74,7 +76,7 @@ const EditDialog = () => {
// e.preventDefault(); // e.preventDefault();
const response = await PutData( const response = await PutData(
`${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`, `${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.id}`,
payload payload
); );
@ -85,7 +87,7 @@ const EditDialog = () => {
const createActivity = { const createActivity = {
module: 'Manage Wallet', module: 'Manage Wallet',
description: `Edit Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`, description: `Edit Wallet => ${selectedWallet?.id} - ${selectedWallet?.name}`,
action: 'U' action: 'U'
}; };
@ -164,6 +166,8 @@ const EditDialog = () => {
} }
}; };
const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id);
const selectedGroupNames = groups const selectedGroupNames = groups
.filter((g) => formField.group.includes(g.id)) .filter((g) => formField.group.includes(g.id))
.map((g) => g.name) .map((g) => g.name)
@ -184,7 +188,7 @@ const EditDialog = () => {
// currency_id: selectedWallet?.Wallet_currency_id, // currency_id: selectedWallet?.Wallet_currency_id,
// group: selectedWallet?.Wallet_group // group: selectedWallet?.Wallet_group
// })); // }));
doFetchData(selectedWallet?.Wallet_id); doFetchData(selectedWallet?.id);
} }
}, [selectedWallet]); }, [selectedWallet]);
@ -257,6 +261,21 @@ const EditDialog = () => {
</div> </div>
</div> </div>
<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">Currency</label>
<div className="relative w-full">
<Input
type="text"
placeholder="Empty"
value={selectedCurrency?.name}
readOnly
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
/>
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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">Groups</label> <label className="form-label flex items-center gap-1 max-w-56">Groups</label>

22
src/pages/master/wallet/hooks/ManageWalletContext.tsx
View File

@ -7,12 +7,12 @@ import { Toaster } from 'sonner';
import ListToolbar from '../blocks/ListToolbar'; import ListToolbar from '../blocks/ListToolbar';
interface WalletProps { interface WalletProps {
Wallet_id: string; id: string;
Wallet_name: string; name: string;
Wallet_status: string; status: string;
Wallet_description: string; description: string;
Wallet_group: string[]; group: string[];
Wallet_currency_id: string; currency_id: string;
} }
interface ContextProps { interface ContextProps {
@ -73,7 +73,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{ {
accessorFn: (row) => row.Wallet_name, accessorFn: (row) => row.name,
id: 'name', id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true, enableSorting: true,
@ -83,7 +83,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorFn: (row) => row.Wallet_description, accessorFn: (row) => row.description,
id: 'description', id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true, enableSorting: true,
@ -93,13 +93,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorFn: (row) => row.Wallet_status, accessorFn: (row) => row.status,
id: 'status', id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const isActive = row.original.Wallet_status === 'Y'; const isActive = row.original.status === 'Y';
return ( return (
<span <span
@ -183,7 +183,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
pagination={{ size: 25 }} pagination={{ size: 25 }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'created_at', desc: true }]} sorting={[{ id: 'wallets.created_at', desc: true }]}
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters) getWalletLists(pageIndex, pageSize, sorting, columnFilters)

74
src/pages/master/walletRule/blocks/AddDialog.tsx
View File

@ -40,14 +40,24 @@ interface GroupProps {
status: string; status: string;
} }
interface WalletProps { interface WalletGroupProps {
ID: string; id: string;
name: string; name: string;
id_currency: string; description: string;
status: string; status: string;
} }
interface WalletProps {
id: string;
name: string;
id_currency: string;
status: string;
group: WalletGroupProps[];
}
const API_URL_WALLET = apiConfig.service_wallet; const API_URL_WALLET = apiConfig.service_wallet;
const API_URL_MASTERDATA = apiConfig.service_master_data;
const AddDialog = () => { const AddDialog = () => {
const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext(); const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
@ -77,7 +87,6 @@ const AddDialog = () => {
status: '' status: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [groups, setGroups] = useState<GroupProps[]>([]);
const [wallets, setWallets] = useState<WalletProps[]>([]); const [wallets, setWallets] = useState<WalletProps[]>([]);
const resetForm = () => { const resetForm = () => {
@ -114,7 +123,16 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (formField.id_group.trim() === '' || formField.status.trim() === '') { if (
formField.id_group.trim() === '' ||
formField.status.trim() === '' ||
formField.id_wallet.trim() === '' ||
formField.max_transaction_per_day === null ||
formField.balance_minimum === null ||
formField.balance_maximum === null ||
formField.credit_limit === null ||
formField.monthly_limit === null
) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
@ -124,26 +142,9 @@ const AddDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const getGroupLists = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_WALLET}/dashboard/group`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('GROUPS: ', response?.data);
setGroups(response?.data.list);
} catch (error) {
console.error('Error fetching groups', error);
}
};
const getWalletLists = async (sorting: any) => { const getWalletLists = async (sorting: any) => {
try { try {
const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, { const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, {
limit: 100, limit: 100,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
@ -158,9 +159,11 @@ const AddDialog = () => {
} }
}; };
const selectedWallet = wallets.find((wallet) => wallet.id === formField.id_wallet);
const filteredGroups = selectedWallet ? selectedWallet.group : [];
useEffect(() => { useEffect(() => {
getWalletLists([{ id: 'name', desc: false }]); getWalletLists([{ id: 'wallets.name', desc: false }]);
getGroupLists([{ id: 'name', desc: false }]);
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -193,14 +196,16 @@ const AddDialog = () => {
</label> </label>
<Select <Select
value={formField.id_wallet} value={formField.id_wallet}
onValueChange={(value) => setFormField({ ...formField, id_wallet: value })} onValueChange={(value) =>
setFormField({ ...formField, id_wallet: value, id_group: '' })
}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select Wallet Type" /> <SelectValue placeholder="Select Wallet Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet) => ( {wallets.map((wallet) => (
<SelectItem key={wallet.ID} value={wallet.ID}> <SelectItem key={wallet.id} value={wallet.id}>
{wallet.name} {wallet.name}
</SelectItem> </SelectItem>
))} ))}
@ -217,16 +222,21 @@ const AddDialog = () => {
<Select <Select
value={formField.id_group} value={formField.id_group}
onValueChange={(value) => setFormField({ ...formField, id_group: value })} onValueChange={(value) => setFormField({ ...formField, id_group: value })}
disabled={filteredGroups.length === 0}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select Group Type" /> <SelectValue placeholder="Select Group Type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{groups.map((group) => ( {filteredGroups.length > 0 ? (
<SelectItem key={group.ID} value={group.ID}> filteredGroups.map((group) => (
{group.name} <SelectItem key={group.id} value={group.id}>
</SelectItem> {group.name}
))} </SelectItem>
))
) : (
<SelectItem value="empty">No groups available</SelectItem>
)}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>

22
src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
View File

@ -81,6 +81,26 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{
accessorFn: (row) => row.wallet.name,
id: 'wallet_name',
header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.group.name,
id: 'group_name',
header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{ {
accessorFn: (row) => row.balance_minimum, accessorFn: (row) => row.balance_minimum,
id: 'balance_minimum', id: 'balance_minimum',
@ -227,7 +247,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
<Toaster expand visibleToasts={9} duration={3000} /> <Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider <DataGridProvider
columns={columns} columns={columns}
pagination={{ size: 5 }} pagination={{ size: 10 }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]} sorting={[{ id: 'id', desc: false }]}

88
src/pages/members/kyc/Kyc.tsx
View File

@ -5,12 +5,15 @@ import React, { createContext, useContext, useState, useEffect } from 'react';
import { ManageKycContextProvider } from './hooks'; import { ManageKycContextProvider } from './hooks';
import { columns, initialMember } from './Columns'; import { columns, initialMember } from './Columns';
import { useAuthContext } from '@/auth'; import { useAuthContext } from '@/auth';
import { LoaderTransparant } from '@/components';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import axios from 'axios'; import axios from 'axios';
import { toast } from 'sonner'; import { toast } from 'sonner';
const BASE_URL = apiConfig.service_customer; const BASE_URL = apiConfig.service_customer;
import CustomerDialog from '../manage-members/CustomerDetailModal'; const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
// import CustomerDialog from '../manage-members/CustomerDetailModal';
import DetailMember from '../manage-members/blocks/DetailMember';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
@ -37,6 +40,7 @@ const Kyc = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [members, setMembers] = useState([]); const [members, setMembers] = useState([]);
const [member, setMember] = useState(initialMember); const [member, setMember] = useState(initialMember);
const [profession, setProfession] = useState([]);
const [isDialogOpen, setIsDialogOpen] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState(''); const [dialogType, setDialogType] = useState('');
@ -44,12 +48,12 @@ const Kyc = () => {
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
useEffect(() => { useEffect(() => {
fetchGroups(); fetchCustomers();
}, []); }, []);
async function fetchGroups() { async function fetchCustomers() {
try { try {
let groups = await axios.get(`${BASE_URL}/customer/list`, { let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: { params: {
limit: 10, limit: 10,
page: 1, page: 1,
@ -60,14 +64,24 @@ const Kyc = () => {
} }
}); });
let temp = 1; let temp = 1;
let resMembers = groups.data.data.list.map((el: any) => { let resMembers = customers.data.data.list.map((el: any) => {
el.no = temp++; el.no = temp++;
el.name = el.fullname; el.name = el.fullname;
return el; return el;
}); });
setMembers(resMembers); setMembers(resMembers);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setProfession(getProfession.data.data.list)
} catch (error: any) { } catch (error: any) {
alert(error.message); toast.error(error.message);
console.log(error); console.log(error);
} }
} }
@ -90,6 +104,7 @@ const Kyc = () => {
} }
const handleYes = async () => { const handleYes = async () => {
setLoading(true)
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
const customerId = member.id; const customerId = member.id;
@ -97,6 +112,10 @@ const Kyc = () => {
updateData.updated_by = userLogin.data ? userLogin.data.id : ''; updateData.updated_by = userLogin.data ? userLogin.data.id : '';
let today = new Date(); let today = new Date();
updateData.updated_at = today.toString(); updateData.updated_at = today.toString();
updateData.municipio = updateData.municipio_id;
updateData.posto_adms = updateData.posto_adms_id;
updateData.suco = updateData.suco_id;
updateData.aldeia = updateData.aldeia_id;
delete updateData.id; delete updateData.id;
delete updateData.pin; delete updateData.pin;
delete updateData.name; delete updateData.name;
@ -107,6 +126,14 @@ const Kyc = () => {
delete updateData.destinationGroup; delete updateData.destinationGroup;
delete updateData.statusApproval; delete updateData.statusApproval;
delete updateData.description; delete updateData.description;
delete updateData.municipio_id;
delete updateData.municipio_name;
delete updateData.posto_adms_id;
delete updateData.posto_adms_name;
delete updateData.suco_id;
delete updateData.suco_name;
delete updateData.aldeia_id;
delete updateData.aldeia_name;
delete updateData.group_id; delete updateData.group_id;
delete updateData.group_name; delete updateData.group_name;
delete updateData.group_description; delete updateData.group_description;
@ -117,30 +144,41 @@ const Kyc = () => {
delete updateData.group_updated_at; delete updateData.group_updated_at;
delete updateData.group_deleted_by; delete updateData.group_deleted_by;
delete updateData.group_deleted_at; delete updateData.group_deleted_at;
delete updateData.updated_at;
try { try {
const form = new FormData();
for (const property in updateData) {
if (updateData[property]) form.append(property, updateData[property]);
}
if (dialogType === 'reject') { if (dialogType === 'reject') {
await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId }); await axios.post(`${BASE_URL}/customer/reject`, { customerid: customerId });
} }
if (dialogType === 'update') { if (dialogType === 'update') {
await axios.put(`${BASE_URL}/customer/update/${customerId}`, updateData); await axios.put(`${BASE_URL}/customer/update/${customerId}`, form);
if (updateData.isneedapproval == 1) if (updateData.isneedapproval == 1)
await axios.post(`${BASE_URL}/customer/approve`, { await axios.post(`${BASE_URL}/customer/approve`, {
customerid: customerId, customerid: customerId,
description: description description: description
}); });
} }
await fetchGroups(); await fetchCustomers();
setDialogOpen(false); setDialogOpen(false);
setIsDialogOpen(false); setIsDialogOpen(false);
toast.success('Success Update Kyc Member'); toast.success(`Success Update & ${dialogType} Kyc Member`);
} catch (error: any) { } catch (error: any) {
alert(error.message);
setDialogOpen(false); setDialogOpen(false);
setIsDialogOpen(false); setIsDialogOpen(false);
toast.error(error.message); toast.error(error.message);
setLoading(false)
} }
}; };
function setShowAddDialog(el: any) {
setIsDialogOpen(el)
}
if (loading) return <LoaderTransparant />;
return ( return (
<> <>
<Helmet> <Helmet>
@ -156,15 +194,27 @@ const Kyc = () => {
onYes={handleYes} onYes={handleYes}
onNo={() => setDialogOpen(false)} onNo={() => setDialogOpen(false)}
/> />
<CustomerDialog { member.id ? (
open={isDialogOpen} // <CustomerDialog
handleClose={closeDialog} // open={isDialogOpen}
handleReject={handleReject} // handleClose={closeDialog}
handleSubmit={handleSubmit} // handleSubmit={handleSubmit}
initialData={member} // initialData={member}
viewStats={true} // viewStats={true}
page={'kyc'} // page={'kyc'}
/> // />
<DetailMember
showAddDialog={isDialogOpen}
setShowAddDialog={setShowAddDialog}
handleClose={closeDialog}
handleReject={handleReject}
handleSubmit={handleSubmit}
initialData={member}
fetchCustomers={fetchCustomers}
profession={profession}
page={'kyc'}
/>
): ""}
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Member KYC</h1> <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Member KYC</h1>
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'> <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
<Breadcrumbs> <Breadcrumbs>

4
src/pages/members/manage-members/Columns.tsx
View File

@ -178,5 +178,7 @@ export const initialMember = {
posto_adms: '', posto_adms: '',
suco: '', suco: '',
aldeia: '', aldeia: '',
profession: '' profession: '',
approval_description_premium: '',
approval_description_agent: ''
}; };

121
src/pages/members/manage-members/CustomerDetailModal.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import axios from 'axios'; import axios from 'axios';
import { Dialog,DialogActions,DialogContent,DialogTitle,TextField,Button,MenuItem,Select,InputLabel,FormControl,Typography, import { Dialog,DialogActions,DialogContent,DialogTitle,TextField,Button,MenuItem,Select,InputLabel,FormControl,Typography,
InputAdornment,Grid,Box InputAdornment,Grid,Box,List,ListItem,
} from "@mui/material"; } from "@mui/material";
import UploadFileIcon from "@mui/icons-material/UploadFile"; import UploadFileIcon from "@mui/icons-material/UploadFile";
import Divider from '@mui/material/Divider'; import Divider from '@mui/material/Divider';
@ -11,7 +11,7 @@ import ConfirmDialog from '@/components/confirm';
import { toast } from 'sonner'; import { toast } from 'sonner';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data; const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const BASE_URL_CUSTOMER = apiConfig.service_customer; const BASE_URL_CUSTOMER = apiConfig.service_customer;
// MAIN PAGE
const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page, fetchCustomers }: any) => { const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page, fetchCustomers }: any) => {
const [formData, setFormData] = useState(initialData || initialMember); const [formData, setFormData] = useState(initialData || initialMember);
const [viewOnly, setViewOnly] = useState(viewStats || false); const [viewOnly, setViewOnly] = useState(viewStats || false);
@ -19,6 +19,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
const [aldeias, setAldeias] = useState([]); const [aldeias, setAldeias] = useState([]);
const [postoAdm, setPostoAdm] = useState([]); const [postoAdm, setPostoAdm] = useState([]);
const [sucos, setSucos] = useState([]); const [sucos, setSucos] = useState([]);
const [profession, setProfession] = useState([]);
const [groupData] = useState({ const [groupData] = useState({
reguler: `This fill can not be empty!`, reguler: `This fill can not be empty!`,
premium: `This field required only for Premium or Agent`, premium: `This field required only for Premium or Agent`,
@ -32,6 +33,16 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
async function fetchMasterData() { async function fetchMasterData() {
try { try {
let getProfession = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setProfession(getProfession.data.data.list)
let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, { let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
params: { params: {
limit: 50, limit: 50,
@ -80,7 +91,8 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
const handleChange = async (e: any) => { const handleChange = async (e: any) => {
const { name, value } = e.target; const { name, value } = e.target;
if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value); if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
if (name === "file_selfie" || name === "photouser") { // FOR FILE ONLY if (name === "file_selfie" || name === "photouser" || name === 'file_document_id' || name === "file_document_id_selfie" ||
name === "file_commercial_license") { // FOR FILE ONLY
setFormData({ ...formData, [name]: e.target.files[0] }); setFormData({ ...formData, [name]: e.target.files[0] });
} else { } else {
setFormData({ ...formData, [name]: value }); setFormData({ ...formData, [name]: value });
@ -127,8 +139,9 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
} }
const onSubmit = () => { const onSubmit = () => {
if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`)
handleSubmit(formData); handleSubmit(formData);
handleClose(); // handleClose();
}; };
const onReject = () => { const onReject = () => {
@ -190,6 +203,8 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
<TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} /> <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} /> <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Merchant Address" name="merchantaddress" value={formData.merchantaddress} onChange={handleChange} /> <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Merchant Address" name="merchantaddress" value={formData.merchantaddress} onChange={handleChange} />
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Longitude Merchant" name="longitudemerchant" value={formData.longitudemerchant} onChange={handleChange} />
<TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Latitude Merchant" name="latitudemerchant" value={formData.latitudemerchant} onChange={handleChange} />
{fileTextFile("File Selfie", formData.file_selfie, "file_selfie", handleChange)} {fileTextFile("File Selfie", formData.file_selfie, "file_selfie", handleChange)}
<img width={300} height={250} srcSet={formData.file_selfie} src={formData.file_selfie} alt={"file_selfie"} style={{borderRadius: 10}}/> <img width={300} height={250} srcSet={formData.file_selfie} src={formData.file_selfie} alt={"file_selfie"} style={{borderRadius: 10}}/>
{fileTextFile("File Document", formData.file_document_id, "file_document_id", handleChange)} {fileTextFile("File Document", formData.file_document_id, "file_document_id", handleChange)}
@ -200,7 +215,17 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
<img width={300} height={250} srcSet={formData.file_commercial_license} src={formData.file_commercial_license} alt={"file_commercial_license"} style={{borderRadius: 10}}/> <img width={300} height={250} srcSet={formData.file_commercial_license} src={formData.file_commercial_license} alt={"file_commercial_license"} style={{borderRadius: 10}}/>
{/* AGENT & PREMIUM DATA */} {/* AGENT & PREMIUM DATA */}
<TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} /> {/* <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} /> */}
<FormControl fullWidth margin="dense">
<InputLabel>Profession</InputLabel>
<Select disabled={viewOnly} name="profession" value={formData.profession} onChange={handleChange}>
{
profession ? profession.map((el: any) => (
<MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
)) : ""
}
</Select>
</FormControl>
{/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */} {/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */}
{/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */} {/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */}
<FormControl fullWidth margin="dense"> <FormControl fullWidth margin="dense">
@ -270,13 +295,16 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
<TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} /> <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
<Divider className="pt-7"/> <Divider className="pt-7"/>
{/* {getAdmAccess(page, formData, handleClose, fetchCustomers)} */} {/* {getAdmAccess(page, formData, handleClose, fetchCustomers)} */}
{ { page === 'kyc' ? (
page === 'kyc' ? (
<> <>
<Typography sx={{color:'grey'}}>Approval</Typography> <Typography sx={{color:'grey'}}>Approval</Typography>
<TextField fullWidth margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} /> <TextField fullWidth required={page === 'kyc'?true:false} margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
</> </>
) : (<>{getAdmAccess(page, formData, handleClose, fetchCustomers, viewOnly, setViewOnly)}</>) ) : (<>
{getAdmAccess(page, formData, handleClose, fetchCustomers, viewOnly, setViewOnly)}
<Divider className="pt-7"/>
{formData.id ? showCustomerWallet(formData.id) : ""}
</>)
} }
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
@ -317,11 +345,11 @@ function fileTextFile(label: string, value: any, name: string, handleChange: any
<input <input
type="file" type="file"
id="file-upload" id="file-upload"
style={{ display: "none" }} // style={{ display: "none" }}
onChange={handleChange} onChange={handleChange}
name={name} name={name}
/> />
<label htmlFor="file-upload"> {/* <label htmlFor="file-upload">
<Button <Button
component="span" component="span"
variant="contained" variant="contained"
@ -330,14 +358,14 @@ function fileTextFile(label: string, value: any, name: string, handleChange: any
> >
Browse Browse
</Button> </Button>
</label> </label> */}
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
) )
} }
// ACCESS ADM
function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers: any, viewOnly: any, setViewOnly: any) { function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers: any, viewOnly: any, setViewOnly: any) {
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState(''); const [dialogType, setDialogType] = useState('');
@ -411,8 +439,10 @@ function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers:
await fetchCustomers() await fetchCustomers()
toast.success('Success Change group') toast.success('Success Change group')
} catch (error: any) { } catch (error: any) {
console.log(error);
toast.error(error.message) toast.error(error.message)
} finally { } finally {
await fetchCustomers()
setChangeGroupD(false) setChangeGroupD(false)
handleClose() handleClose()
} }
@ -517,7 +547,70 @@ function getPinStatus(status: string) {
res: null res: null
} }
} }
// CUSTOMER WALLET
function showCustomerWallet(customerid: any) {
const [customerWallet, setCustomerWallet] = useState([]);
if (!customerid) return ''
function showCustomerWallet() { useEffect(() => {
fetchCustomerWallet()
}, []);
async function fetchCustomerWallet() {
try {
let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, { params: { customerid: customerid }});
setCustomerWallet(getCustWallet.data.data.wallets)
} catch (error: any) {
toast.error(error.message)
}
}
return (
<Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
<Typography variant="h6" gutterBottom>Wallet Member</Typography>
<Grid>
<List>
{customerWallet.length ? (customerWallet.map((item:any, index:any) => (
<React.Fragment key={item.id}>
<ListItem
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
px: 2,
py: 1.5,
bgcolor: index % 2 === 0 ? 'grey.50' : 'background.paper',
borderRadius: 2,
'&:hover': {
bgcolor: 'grey.100',
},
}}
>
<Box>
<Typography variant="subtitle2" color="text.secondary">Name</Typography>
<Typography variant="body1" fontWeight={500}>
{item.wallet.name}
</Typography>
</Box>
<Box>
<Typography variant="subtitle2" color="text.secondary">Description</Typography>
<Typography variant="body1">{item.wallet.description}</Typography>
</Box>
<Box>
<Typography variant="subtitle2" color="text.secondary">Balance</Typography>
<Typography variant="body1">{item.amount}</Typography>
</Box>
<Box>
<Typography variant="subtitle2" color="text.secondary">Transaction Today</Typography>
<Typography variant="body1">{item.transaction_number_today}</Typography>
</Box>
</ListItem>
{index < customerWallet.length - 1 && <Divider sx={{ my: 1 }} />}
</React.Fragment>
))): "No wallet"}
</List>
</Grid>
</Box>
)
} }

91
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -3,24 +3,29 @@ import { apiConfig } from '@/config/api.config';
import { columns, Members, initialMember } from './Columns'; import { columns, Members, initialMember } from './Columns';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import CustomerDialog from './CustomerDetailModal'; // import CustomerDialog from './CustomerDetailModal';
import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth'; import { useAuthContext } from '@/auth';
import { ScreenLoader } from '@/components'; import { LoaderTransparant } from '@/components';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const BASE_URL = apiConfig.service_customer; const BASE_URL = apiConfig.service_customer;
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
const ManageMembers = () => { const ManageMembers = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [members, setMembers] = useState([]); const [members, setMembers] = useState([]);
const [selectedMember, setSelectedMember] = useState(''); const [selectedMember, setSelectedMember] = useState('');
const [member, setMember] = useState(initialMember); const [member, setMember] = useState(initialMember);
const [profession, setProfession] = useState([]);
const [isDialogOpen, setIsDialogOpen] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState(''); const [dialogType, setDialogType] = useState('');
const closeDialog = () => setIsDialogOpen(false); const closeDialog = () => {
setIsDialogOpen(false)
setMember(initialMember)
};
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
useEffect(() => { useEffect(() => {
@ -31,24 +36,34 @@ const ManageMembers = () => {
async function fetchCustomers() { async function fetchCustomers() {
try { try {
let groups = await axios.get(`${BASE_URL}/customer/list`, { let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: { params: {
limit: 20, limit: 20,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'fullname', order_field: 'created_at',
order_direction: 'ASC' order_direction: 'DESC'
} }
}); });
let temp = 1; let temp = 1;
let resMembers = groups.data.data.list.map((el: any) => { let resMembers = customers.data.data.list.map((el: any) => {
el.no = temp++; el.no = temp++;
el.name = el.fullname; el.name = el.fullname;
return el; return el;
}); });
setMembers(resMembers); setMembers(resMembers);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setProfession(getProfession.data.data.list)
} catch (error: any) { } catch (error: any) {
alert(error.message); toast.error(error.message);
console.log(error); console.log(error);
} }
} }
@ -72,11 +87,16 @@ const ManageMembers = () => {
} }
const handleYes = async () => { const handleYes = async () => {
setLoading(true)
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
updateData.updated_by = userLogin.data ? userLogin.data.id : ''; updateData.updated_by = userLogin.data ? userLogin.data.id : '';
let today = new Date(); let today = new Date();
updateData.updated_at = today.toString(); updateData.updated_at = today.toString();
updateData.municipio = updateData.municipio_id;
updateData.posto_adms = updateData.posto_adms_id;
updateData.suco = updateData.suco_id;
updateData.aldeia = updateData.aldeia_id;
delete updateData.id; delete updateData.id;
delete updateData.pin; delete updateData.pin;
delete updateData.name; delete updateData.name;
@ -87,6 +107,14 @@ const ManageMembers = () => {
delete updateData.destinationGroup; delete updateData.destinationGroup;
delete updateData.statusApproval; delete updateData.statusApproval;
delete updateData.description; delete updateData.description;
delete updateData.municipio_id;
delete updateData.municipio_name;
delete updateData.posto_adms_id;
delete updateData.posto_adms_name;
delete updateData.suco_id;
delete updateData.suco_name;
delete updateData.aldeia_id;
delete updateData.aldeia_name;
delete updateData.group_id; delete updateData.group_id;
delete updateData.group_name; delete updateData.group_name;
delete updateData.group_description; delete updateData.group_description;
@ -99,21 +127,33 @@ const ManageMembers = () => {
delete updateData.group_deleted_at; delete updateData.group_deleted_at;
delete updateData.updated_at; delete updateData.updated_at;
try { try {
if (dialogType === 'update') const form = new FormData();
await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, updateData); for (const property in updateData) {
if (updateData[property]) form.append(property, updateData[property]);
}
if (dialogType === 'update') await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, form, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
// if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member) // if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member)
await fetchCustomers();
setDialogOpen(false);
setIsDialogOpen(false);
toast.success('Success Update Member'); toast.success('Success Update Member');
} catch (error: any) { } catch (error: any) {
setDialogOpen(false);
setIsDialogOpen(false);
toast.error(error.message); toast.error(error.message);
} finally {
setDialogOpen(false);
closeDialog();
await fetchCustomers();
setLoading(false)
} }
}; };
if (loading) return <ScreenLoader />; function setShowAddDialog(el: any) {
setIsDialogOpen(el)
}
if (loading) return <LoaderTransparant />;
return ( return (
<> <>
@ -130,12 +170,17 @@ const ManageMembers = () => {
onYes={handleYes} onYes={handleYes}
onNo={() => setDialogOpen(false)} onNo={() => setDialogOpen(false)}
/> />
<CustomerDialog { member.id !== '' ? (
open={isDialogOpen} <DetailMember
handleClose={closeDialog} showAddDialog={isDialogOpen}
handleSubmit={handleSubmit} setShowAddDialog={setShowAddDialog}
initialData={member} handleClose={closeDialog}
/> handleSubmit={handleSubmit}
initialData={member}
fetchCustomers={fetchCustomers}
profession={profession}
/>
): ""}
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1> <h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1>
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'> <div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
<Breadcrumbs> <Breadcrumbs>

248
src/pages/members/manage-members/blocks/AdmAccess.tsx Normal file
View File

@ -0,0 +1,248 @@
import { useState, useEffect } from 'react';
import axios from 'axios';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import {
Select,
SelectTrigger,
SelectContent,
SelectItem,
SelectValue
} from '@/components/ui/select';
import { apiConfig } from '@/config/api.config';
import ConfirmDialog from '@/components/confirm';
const BASE_URL_CUSTOMER = apiConfig.service_customer;
// ACCESS ADM
export default function AdmAccess(
page: string,
data: any,
handleClose: any,
fetchCustomers: any,
viewOnly: any,
setViewOnly: any
) {
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState('');
const [changeGroup, setChangeGroup] = useState('');
const [changeGroupD, setChangeGroupD] = useState(false);
const [groups, setGroups] = useState([]);
useEffect(() => {
fetchGroups();
}, []);
const fetchGroups = async () => {
try {
let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC'
}
});
setGroups(getGroups.data.data.list);
} catch (error: any) {
toast.error(error.message);
}
};
const handleYes = async () => {
try {
if (dialogType === 'update status') {
let statusNext = getPinStatus(data.status).res;
if (statusNext)
await axios.put(`${BASE_URL_CUSTOMER}/customer/statuspin`, {
customerid: data.id,
status: statusNext
});
else toast.error('Handle Active/Suspend only');
await fetchCustomers();
toast.success('Success Update Status');
}
if (dialogType === 'reset pin') {
if (data.id)
await axios.post(`${BASE_URL_CUSTOMER}/customer/resetpin`, { customerid: data.id });
else throw { message: 'data.id not found' };
await fetchCustomers();
toast.success('Pin will send to customer MSISDN');
}
} catch (error: any) {
toast.error(error.message);
} finally {
setDialogOpen(false);
handleClose();
}
};
function buttonStatus(e: any) {
e.preventDefault();
setDialogType('update status');
setDialogOpen(true);
}
function buttonResetPin(e: any) {
e.preventDefault();
setDialogType('reset pin');
setDialogOpen(true);
}
async function buttonChangeGroup() {
try {
let dataObj = {
customerid: data.id,
destination_group: changeGroup
};
if (data.group_id === changeGroup)
throw { message: `You update same group as the exist customer group` };
if (dataObj.customerid && dataObj.destination_group) {
await axios.post(`${BASE_URL_CUSTOMER}/customer/change-group`, dataObj);
}
toast.success('Success Change group');
await fetchCustomers();
setChangeGroupD(false);
handleClose();
} catch (error: any) {
console.log(error);
toast.error(error.message);
}
}
function openChangeGroupDialog(e: any) {
e.preventDefault();
setChangeGroup(data.group_id);
setChangeGroupD(true);
}
function btnConfirmDialog(status: boolean) {
setDialogOpen(status);
}
if (page !== 'kyc') {
return (
<div className="bg-white p-6 rounded-md shadow-md space-y-6">
<h2 className="text-lg font-semibold">Access Administration</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Left Side */}
<div className="space-y-4">
<div className="space-y-2">
<p className="text-sm">Pin Status: {getPinStatus(data.status).msg}</p>
<Button variant="default" onClick={(e) => buttonStatus(e)}>
{getPinStatus(data.status).btn}
</Button>
</div>
<div className="space-y-2">
<p className="text-sm">Reset PIN</p>
<Button variant="default" onClick={(e) => buttonResetPin(e)}>
Reset PIN
</Button>
</div>
</div>
{/* Right Side */}
<div className="space-y-4">
<div className="space-y-2">
<p className="text-sm">Change Group</p>
<Button variant="default" onClick={(e) => openChangeGroupDialog(e)}>
Change Group
</Button>
</div>
<div className="space-y-2">
<p className="text-sm">Edit Member</p>
<Button variant="default" onClick={() => setViewOnly(!viewOnly)}>
{viewOnly ? 'Open Edit' : 'Close Edit'}
</Button>
</div>
</div>
</div>
{/* Change Group Dialog */}
<Dialog open={changeGroupD} onOpenChange={setChangeGroupD}>
<DialogContent>
<DialogHeader>
<DialogTitle className="text-orange-500">
Are you sure to change customer Group?
</DialogTitle>
</DialogHeader>
<div className="space-y-3 p-5">
<p className="text-sm font-medium">Destination Group</p>
<Select value={changeGroup} onValueChange={setChangeGroup}>
<SelectTrigger>
<SelectValue placeholder="Select group" />
</SelectTrigger>
<SelectContent>
{groups?.map((el: any) => (
<SelectItem key={el.id} value={el.id}>
{el.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setChangeGroupD(false)}>
No
</Button>
<Button onClick={buttonChangeGroup}>Yes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<ConfirmDialog
open={dialogOpen}
// onClose={() => btnConfirmDialog(false)}
onOpenChange={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => btnConfirmDialog(false)}
/>
</div>
);
} else {
return '';
}
}
function getPinStatus(status: string) {
if (status === 'Y')
return {
msg: 'Active',
btn: 'Block PIN',
res: 'Block'
};
if (status === 'N')
return {
msg: 'Not Active',
btn: 'Activate PIN',
res: null
};
if (status === 'P')
return {
msg: 'Suspend PIN',
btn: 'Unblock PIN',
res: 'UnBlock'
};
if (status === 'O')
return {
msg: 'Suspend OTP',
btn: 'Unblock OTP',
res: null
};
return {
msg: 'None',
btn: 'No status found',
res: null
};
}

69
src/pages/members/manage-members/blocks/CustomerWallet.tsx Normal file
View File

@ -0,0 +1,69 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { apiConfig } from '@/config/api.config';
import { toast } from 'sonner';
const BASE_URL_CUSTOMER = apiConfig.service_customer;
export default function CustomerWallet(customerid: any) {
const [customerWallet, setCustomerWallet] = useState([]);
if (!customerid) return '';
useEffect(() => {
fetchCustomerWallet();
}, []);
async function fetchCustomerWallet() {
try {
let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, {
params: { customerid: customerid }
});
setCustomerWallet(getCustWallet.data.data.data);
} catch (error: any) {
// toast.error(error.message);
toast.error(`Wallet Not Found`);
}
}
return (
<div className="bg-white p-6 rounded-md shadow-md space-y-4">
<h2 className="text-lg font-semibold">Wallet Member</h2>
<Card className="p-4">
{customerWallet.length ? (
<div className="overflow-x-auto">
<table className="min-w-full text-sm text-left">
<thead className="text-xs text-gray-500 border-b">
<tr>
<th className="p-2">No</th>
<th className="p-2">Name</th>
<th className="p-2">Balance</th>
<th className="p-2">Month Limit</th>
<th className="p-2">Credit Limit</th>
</tr>
</thead>
<tbody>
{customerWallet.map((item:any, index) => (
<tr
key={item.id}
className={`${
index % 2 === 0 ? "bg-gray-50" : "bg-white"
} hover:bg-gray-100`}
>
<td className="p-2 font-medium">{index+1}</td>
<td className="p-2">{item.wallet}</td>
<td className="p-2">{item.amount}</td>
<td className="p-2">{item.monthly_limit}</td>
<td className="p-2">{item.credit_limit}</td>
</tr>
))}
</tbody>
</table>
</div>
) : (
<p className="text-sm text-muted-foreground">No wallet</p>
)}
</Card>
</div>
);
}

367
src/pages/members/manage-members/blocks/DetailMember.tsx Normal file
View File

@ -0,0 +1,367 @@
import { apiConfig } from '@/config/api.config';
import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { getAuth } from '@/auth';
import axios from 'axios';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'sonner';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const URL_NATIONALITY = apiConfig.nationality;
import { initialMember } from "../Columns";
import AdmAccess from './AdmAccess';
import CustomerWallet from './CustomerWallet';
const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialData, handleReject, page, fetchCustomers,
handleClose, profession
}: any) => {
const [formData, setFormData] = useState(initialData || initialMember);
const [viewOnly, setViewOnly] = useState(false);
const [nationality, setNationality] = useState([]);
const [municipios, setMunicipios] = useState([]);
const [aldeias, setAldeias] = useState([]);
const [postoAdm, setPostoAdm] = useState([]);
const [sucos, setSucos] = useState<any>([]);
const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
const [status] = useState([
{ name: 'Active',id: 'Y' }, { name: 'Inactive',id: 'N' }, { name: 'Suspend PIN',id: 'P' }, { name: 'Suspend OTP',id: 'O' }
])
const [banks] = useState([
{ name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
])
const parentRef = useRef<any | null>(null);
const [alert, setAlert] = useState({
show: false,
message: ''
});
useEffect(() => {
setFormData(initialData || {});
// fetchMasterData()
}, [initialData]);
const handleChange = async (e: any) => {
const { name, value } = e.target;
if (name === "file_selfie" || name === "photouser" || name === 'file_document_id' || name === "file_document_id_selfie" ||
name === "file_commercial_license") { // FOR FILE ONLY
setFormData({ ...formData, [name]: e.target.files[0] });
} else if(name === "nationality") {
let getNationality = await axios.get(`${URL_NATIONALITY}/${value}`);
setNationality(getNationality.data.data)
setFormData({ ...formData, [name]: value });
} else {
setFormData({ ...formData, [name]: value });
if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
}
};
async function getMasterAfter(name: string, id: any) {
if (name === 'municipio') {
let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setPostoAdm(getMunicipiosPosto.data.data)
}
if (name === 'posto_adms') {
let getPostoSuco = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/sucos/${id}`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setSucos(getPostoSuco.data.data)
}
if (name === 'suco') {
let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setAldeias(getSucoAldeias.data.data)
}
}
const handleAddDialog = (show:boolean) => {
if (show) {
setShowAddDialog(show)
} else {
handleClose()
setShowAddDialog(show)
}
}
async function fetchMasterData() {
try {
let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setMunicipios(getMunicipios.data.data.list)
let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setPostoAdm(getPostoAdms.data.data.list)
let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setSucos(getSucos.data.data.list)
let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
params: {
limit: 50,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
}
});
setAldeias(getAldeias.data.data.list)
} catch (error) {
console.log(error);
}
}
function buttonOnSubmit(e:any) {
e.preventDefault();
if (page === 'kyc' && formData.destinationGroup === "Premium" && !formData.approval_description_premium) return toast.warning(`Approval Premium Description needed!`)
if (page === 'kyc' && formData.destinationGroup === "Agent" && !formData.approval_description_premium) return toast.warning(`Approval Agent Description needed!`)
if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`)
handleSubmit(formData);
}
function btnPrevDef(e:any) {
e.preventDefault();
viewOnly ? setViewOnly(false) : setViewOnly(true)
}
const onReject = () => {
handleReject(formData);
handleClose();
}
return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5">
<DialogHeader>
<DialogTitle>Member - View/Edit</DialogTitle>
<DialogDescription></DialogDescription>
</DialogHeader>
<DialogBody ref={parentRef}>
<div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</Alert>
)}
{/* <form> */}
{/* onSubmit={(e) => buttonOnSubmit(e, formData)} */}
<div className="card-body grid gap-5">
{formData.id ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''}
{formData.id ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, true): ''}
{formData.id ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
{formData.id ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''}
{formData.id ? generateList(formData, handleChange, genders, 'gender', 'Gender', null, true): ''}
{formData.id ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
{/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
{formData.id ? generateList(formData, handleChange, profession, 'profession', 'Profession', null, false): ''}
{formData.id ? generateList(formData, handleChange, municipios, 'municipio', 'Municipio', null, false): ''}
{formData.id ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', 'posto_adms_id', false): ''}
{formData.id ? generateList(formData, handleChange, sucos, 'suco', 'Suco', 'sucos_id', false): ''}
{formData.id ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', null, false): ''}
{formData.id ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
<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"></label>
<ul className="">
{nationality.map((item: any, index) => (
<li key={index} value={item.name}
onClick={() => handleChange({target:{name: 'nationality', value: item.name }})}
className="bg-gray-100 px-4 py-2 rounded hover:bg-gray-200 cursor-default transition">
{item.name}
</li>
))}
{formData.nationality && nationality.length === 0 && (
<li className="text-gray-500">No results found.</li>
)}
</ul>
</div>
{formData.id ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'License Number', 'license_number', 'text', false, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Merchant Name', 'agent_name', 'text', false, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Merchant Address', 'merchantaddress', 'text', false, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Longitude Merchant', 'longitudemerchant', 'text', false, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'Latitude Merchant', 'latitudemerchant', 'text', false, viewOnly): ''}
{formData.id ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie'): ''}
{formData.id ? generateImage(formData, handleChange, 'File Document', 'file_document_id'): ''}
{formData.id ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''}
{formData.id ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''}
{formData.id ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', null, false): ''}
{formData.id ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
{formData.id ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
{(formData.id&&(!page||formData.destinationGroup === "Premium")) ? generateInput(formData, handleChange, 'Approval Premium Description', 'approval_description_premium', 'text', false, viewOnly): ''}
{(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
{(formData.id && page!=='kyc') ? AdmAccess(page, formData, handleClose,fetchCustomers, viewOnly, setViewOnly): ""}
{(formData.id && page!=='kyc') ? CustomerWallet(formData.id) : ""}
<div className="flex justify-end gap-5">
<Button onClick={(e:any) => btnPrevDef(e)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
<Button type="button" variant="outline" onClick={() => handleAddDialog(false)}>Cancel</Button>
{/* <Button onClick={(e) => buttonOnSubmit(e, formData)} variant="default">Save Changes</Button> */}
{
formData.isneedapproval == 1 && page === 'kyc' ? (
<Button onClick={onReject} variant="destructive" color="warning">Reject</Button>
) : ('')
}
<Button onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default">
{ formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
</Button>
</div>
</div>
{/* </form> */}
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default DetailMember;
{/* <span className="text-red-500 text-[10px] lowercase align-middle ml-1">(agent)</span> */}
function generateInput(formData:any, handleChange:any, label:string, name:string, type: string, required: boolean, disabled: boolean) {
function generateDate(isoString: string) {
const date = new Date(isoString);
return date.toISOString().slice(0, 10); // "2000-01-18"
}
return (
<>
<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">
{label}<span className="text-red-500">{required?"*":""}</span>
</label>
<Input
className="input"
readOnly={disabled}
required={required}
type={type}
name={name}
value={formData[name]?(type === 'date' ? generateDate(formData[name]) : formData[name]):""}
onChange={handleChange}
/>
</div>
</div>
</>
)
}
// ON DEV (DI SELECT MASI HILANG)
function generateList(formData:any, handleChange: any, list:any, name:string, label: string, difId: any, required: boolean) {
return (
<>
<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">{label}
<span className="text-red-600">{required?"*":""}</span></label>
<Select required={required} value={formData[name]} onValueChange={(e) => (handleChange({ target : { name, value: e }}))}>
<SelectTrigger>
<SelectValue placeholder={`Select ${label}`} />
</SelectTrigger>
<SelectContent>
{list.map((el: any, idx: any) => (
<SelectItem key={idx} value={el.id}>{el.name}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</>
)
}
// ON DEV (UPDATENYA)
function generateImage(formData:any, handleChange:any, label:string, name:string) {
const imagePreview = (file:any) => {
if (file && file.type && file.type.startsWith('image/')) {
const previewURL = URL.createObjectURL(file);
return previewURL
}
return file
};
return (
<>
<div className="flex items-center justify-between w-full max-w-xl">
<label className="form-label flex items-center gap-1 max-w-56">
{label}<span className="text-red-500"></span>
</label>
<div className="flex items-center space-x-4 w-3/4 justify-end">
{ formData[name] ? (
<div className="border-2 border-dashed border-red-300 rounded-md p-2">
<img width={300} height={250} srcSet={imagePreview(formData[name])} src={imagePreview(formData[name])} alt={name} style={{borderRadius: 10}}/>
{/* <img width={300} height={250} srcSet={formData[name]} src={formData[name]} alt={name} style={{borderRadius: 10}}/> */}
</div>
) : (<span>No Data</span>)}
<label className="bg-red-600 text-white px-2 py-1 rounded-full flex items-center cursor-pointer hover:bg-red-800">
<span style={{fontSize: 13}}>Upload</span>
<input type="file" className="hidden" name={name} onChange={handleChange} accept="image/*" />
</label>
</div>
</div>
</>
)
}

50
src/pages/settings/user/log-activity/LogActivityPage.tsx
View File

@ -1,33 +1,39 @@
import { Container, DataGridInner } from '@/components'; import { Container, DataGridInner } from '@/components';
import { LogActivityContextProvider } from './hooks'; import { LogActivityContextProvider } from './hooks';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
export default function LogActivityPage() { export default function LogActivityPage() {
return ( return (
<LogActivityContextProvider> <>
<Container> <Helmet>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Log Activity</h1> <title>TPAY | Log Activity</title>
<Breadcrumbs sx={{ mb: 2 }}> </Helmet>
<Link underline="none" color="inherit" href="/"> <LogActivityContextProvider>
<span className="text-sm hover:underline">Dashboard</span> <Container>
</Link> <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Log Activity</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Settings</span> <span className="text-sm">Settings</span>
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">User Management</span> <span className="text-sm">User Management</span>
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Log Activity</span> <span className="text-sm">Log Activity</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5"> <div className="grid gap-5 lg:gap-7.5">
<DataGridInner /> <DataGridInner />
</div> </div>
</Container> </Container>
</LogActivityContextProvider> </LogActivityContextProvider>
</>
); );
} }

56
src/pages/settings/user/manage-user/ManageUserPage.tsx
View File

@ -4,36 +4,42 @@ import { ManageUserContextProvider } from './hooks';
import { AddDialog } from './blocks/AddDialog'; import { AddDialog } from './blocks/AddDialog';
import { DeleteDialog } from './blocks/DeleteDialog'; import { DeleteDialog } from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
export default function ManageUserPage() { export default function ManageUserPage() {
return ( return (
<ManageUserContextProvider> <>
<Container> <Helmet>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</h1> <title>TPAY | Manage User</title>
<Breadcrumbs sx={{ mb: 2 }}> </Helmet>
<Link underline="none" color="inherit" href="/"> <ManageUserContextProvider>
<span className="text-sm hover:underline">Dashboard</span> <Container>
</Link> <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Settings</span> <span className="text-sm">Settings</span>
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">User Management</span> <span className="text-sm">User Management</span>
</Link> </Link>
<Link underline="none" color="inherit"> <Link underline="none" color="inherit">
<span className="text-sm">Manage User</span> <span className="text-sm">Manage User</span>
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5"> <div className="grid gap-5 lg:gap-7.5">
<DataGridInner /> <DataGridInner />
</div> </div>
<EditDialog /> <EditDialog />
<AddDialog /> <AddDialog />
<DeleteDialog /> <DeleteDialog />
</Container> </Container>
</ManageUserContextProvider> </ManageUserContextProvider>
</>
); );
} }

144
src/pages/settings/user/manage-user/blocks/AddDialog.tsx
View File

@ -25,6 +25,13 @@ import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import clsx from 'clsx'; import clsx from 'clsx';
interface RoleListProps {
id: string;
name: string;
roles: string;
status: string;
}
interface CreateUserParams { interface CreateUserParams {
email: string; email: string;
username: string; username: string;
@ -40,9 +47,10 @@ type PasswordType = 'password' | 'retype_password';
const AddDialog = () => { const AddDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog, roles } = useUserContext(); const { showAddDialog, handleAddDialog } = useUserContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PostData, PutData } = useCallApi(); const { PostData, GetData } = useCallApi();
const [roles, setRoles] = useState<RoleListProps[]>([]);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -57,10 +65,6 @@ const AddDialog = () => {
status: '' status: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
const [showPassword, setShowPassword] = useState({ const [showPassword, setShowPassword] = useState({
password: false, password: false,
retype_password: false retype_password: false
@ -97,6 +101,87 @@ const AddDialog = () => {
}; };
}; };
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
/* actions */
const doCreateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL}/user/create`, formField);
if (response?.status) {
handleAddDialog(false);
resetForm();
reload();
const createActivity = {
module: 'Manage User',
description: `Create New User => ${formField.username}`,
action: 'C'
};
doSaveLogActivity(createActivity);
toast.success('Success Create User');
} else {
toast.error('Failed to create user');
setAlert({ show: true, message: 'Failed to create user. Please try again.' });
}
},
[formField]
);
const fetchRoles = useCallback(async () => {
const params = {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
filter: JSON.stringify({
status: 'Y'
})
};
const response = await GetData(`${API_URL}/user_role/list`, params);
// console.log('ini data:', response);
if (response?.status) {
const roleList = response.data?.list || [];
setRoles(roleList);
} else {
setRoles(() => []);
}
// console.log('ini data user_role:', response?.data);
}, []);
useEffect(() => {
fetchRoles();
}, [fetchRoles]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log('Form data before submit:', formField);
if (
formField.email.trim() === '' ||
formField.username.trim() === '' ||
formField.password.trim() === '' ||
formField.retype_password.trim() === '' ||
formField.name.trim() === '' ||
formField.id_role.trim() === '' ||
formField.status.trim() === ''
) {
setAlert({ show: true, message: 'Please fill name field.' });
return;
}
doCreateUser(e);
// console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => { useEffect(() => {
const validation = validatePassword(formField.password, formField.retype_password); const validation = validatePassword(formField.password, formField.retype_password);
setMessagePassword(validation.isValid); setMessagePassword(validation.isValid);
@ -111,38 +196,6 @@ const AddDialog = () => {
} }
}, [showAddDialog]); }, [showAddDialog]);
/* actions */
const doCreateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL}/user/create`, {
...formField,
id_role: undefined
});
if (response?.status) {
const responseUserAddRole = await PutData(
`${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
{}
);
resetForm();
handleAddDialog(false);
toast.success('Success Create User');
reload();
const createActivity = {
module: 'Manage User',
description: `Create New User => ${formField.username}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
}
},
[formField]
);
const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => { const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
event.preventDefault(); event.preventDefault();
setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] })); setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
@ -177,7 +230,7 @@ const AddDialog = () => {
<h3>{alert.message}</h3> <h3>{alert.message}</h3>
</Alert> </Alert>
)} )}
<form action="" onSubmit={doCreateUser}> <form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -231,7 +284,12 @@ const AddDialog = () => {
<div className="grow"> <div className="grow">
<Select <Select
value={formField.id_role} value={formField.id_role}
onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))} onValueChange={(id_role) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, id_role }));
}, 0);
// console.log('Role selected:', value);`
}}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />
@ -254,7 +312,11 @@ const AddDialog = () => {
<div className="grow"> <div className="grow">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))} onValueChange={(status) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, status }));
}, 0);
}}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />

13
src/pages/settings/user/manage-user/blocks/DeleteDialog.tsx
View File

@ -1,4 +1,11 @@
import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog'; import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogDescription
} from '@/components/ui/dialog';
import { useUserContext } from '../hooks'; import { useUserContext } from '../hooks';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Alert, useDataGrid } from '@/components'; import { Alert, useDataGrid } from '@/components';
@ -42,12 +49,14 @@ const DeleteDialog = () => {
} else { } else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message })); setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
} }
}, [selectedUser, enforce]); }, [selectedUser, DeleteData, handleDeleteDialog, reload, enforce]);
return ( return (
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}> <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0 block"> <DialogHeader className="p-0 border-0 block">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<Alert variant="warning"> <Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3> <h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">you will delete this data!</span> <span className="text-sm">you will delete this data!</span>

68
src/pages/settings/user/manage-user/blocks/EditDialog.tsx
View File

@ -24,6 +24,12 @@ import { toast } from 'sonner';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
interface RoleListProps {
id: string;
name: string;
status: string;
}
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_dashboard;
const initialState = { const initialState = {
@ -31,15 +37,15 @@ const initialState = {
username: '', username: '',
email: '', email: '',
id_role: '', id_role: '',
id_role_old: '',
status: '' status: ''
}; };
const EditDialog = () => { const EditDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext(); const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { GetData, PutData } = useCallApi(); const { GetData, PutData } = useCallApi();
const [roles, setRoles] = useState<RoleListProps[]>([]);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -53,17 +59,11 @@ const EditDialog = () => {
}; };
/* actions */ /* actions */
const doResetForm = () => {
setAlert({ show: false, message: '' });
setFormField(initialState);
};
const doUpdateUser = useCallback( const doUpdateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const response = await PutData(`${API_URL}/user/update/${selectedUser}`, { const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
...formField, ...formField
id_role_old: undefined
}); });
if (formField.name.trim() === '') { if (formField.name.trim() === '') {
@ -90,18 +90,36 @@ const EditDialog = () => {
[selectedUser, formField] [selectedUser, formField]
); );
const doFetchUserRole = useCallback(async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/user_role/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('User ID_ROLE:', response?.data.id_role);
// console.log('Role: ', response?.data.list);
setRoles(response?.data.list);
} catch (error) {
console.error('Error fetching role', error);
}
}, []);
const doFetchUserData = useCallback(async (id: string) => { const doFetchUserData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/user/detail/${id}`, { id }); const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
if (response?.status) { // console.log('User detail response:', response);
let id_role = response.data.role.id || '';
if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
name: response.data.name, name: response.data.name,
username: response.data.username, username: response.data.username,
email: response.data.email, email: response.data.email,
id_role: id_role, id_role: response.data.idRole,
id_role_old: id_role,
status: response.data.status status: response.data.status
})); }));
} else { } else {
@ -111,10 +129,10 @@ const EditDialog = () => {
username: '', username: '',
email: '', email: '',
id_role: '0', id_role: '0',
id_role_old: '',
status: '' status: ''
})); }));
} }
// console.log('Fetched ID Role:', response?.data.id_role);
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -129,6 +147,23 @@ const EditDialog = () => {
} }
}, [showEditDialog]); }, [showEditDialog]);
useEffect(() => {
const fetchAllData = async () => {
await doFetchUserRole([{ id: 'name', desc: false }]);
if (selectedUser) {
await doFetchUserData(selectedUser);
}
};
fetchAllData();
}, [selectedUser]);
// console.log('ini role: ', roles);
// useEffect(() => {
// console.log('Selected User ID Role:', formField.id_role);
// // console.log('Available Roles:', roles);
// }, [formField.id_role, roles]);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -206,7 +241,10 @@ const EditDialog = () => {
<div className="grow"> <div className="grow">
<Select <Select
value={formField.id_role} value={formField.id_role}
onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))} onValueChange={(id_role) => {
// console.log('Role changed to:', id_role);
setFormField((prev) => ({ ...prev, id_role }));
}}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />

37
src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
View File

@ -17,7 +17,6 @@ interface ContextProps {
showDeleteDialog: boolean; showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_user: string | null) => void; handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
selectedUser: string | null; selectedUser: string | null;
roles: RoleListProps[];
} }
interface SelectedUser { interface SelectedUser {
@ -30,12 +29,6 @@ interface SelectedUser {
check_new_password: string; check_new_password: string;
} }
interface RoleListProps {
id: string;
name: string;
status: string;
}
const initialProps: ContextProps = { const initialProps: ContextProps = {
showSearchDialog: false, showSearchDialog: false,
handleSearchDialog: (show: boolean) => {}, handleSearchDialog: (show: boolean) => {},
@ -45,8 +38,7 @@ const initialProps: ContextProps = {
handleAddDialog: () => {}, handleAddDialog: () => {},
showDeleteDialog: false, showDeleteDialog: false,
handleDeleteDialog: () => {}, handleDeleteDialog: () => {},
selectedUser: null, selectedUser: null
roles: []
}; };
const ManageUserContext = createContext<ContextProps>(initialProps); const ManageUserContext = createContext<ContextProps>(initialProps);
@ -60,7 +52,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
const [showAddDialog, setShowAddDialog] = useState(false); const [showAddDialog, setShowAddDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedUser, setSelectedUser] = useState<string | null>(null); const [selectedUser, setSelectedUser] = useState<string | null>(null);
const [roles, setRoles] = useState<RoleListProps[]>([]);
const { GetData } = useCallApi(); const { GetData } = useCallApi();
/* action */ /* action */
@ -193,7 +184,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
const response = await GetData(`${API_URL}/user/list`, { const response = await GetData(`${API_URL}/user/list`, {
limit: limit, limit: limit,
page: page + 1, page: page + 1,
with_deleted: true, with_deleted: false,
order_field: sorting[0].id, order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter) filter: JSON.stringify(filter)
@ -203,29 +194,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
}; };
const fetchRoles = useCallback(async () => {
const params = {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
filter: JSON.stringify({
status: 'Y'
})
};
const response = await GetData(`${API_URL}/user_role/list`, params);
if (response?.status) {
setRoles(() => [...response.data.list]);
} else {
setRoles(() => []);
}
}, []);
useEffect(() => {
fetchRoles();
}, [fetchRoles]);
return ( return (
<ManageUserContext.Provider <ManageUserContext.Provider
value={{ value={{
@ -236,7 +204,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
selectedUser, selectedUser,
showAddDialog, showAddDialog,
handleAddDialog, handleAddDialog,
roles,
showDeleteDialog, showDeleteDialog,
handleDeleteDialog handleDeleteDialog
}} }}

92
src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
View File

@ -1,14 +1,13 @@
import { useTransactionContext } from '../hooks/useApprovalTransactionContext'; import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { import {
Dialog, Dialog,
DialogBody, DialogBody,
DialogContent, DialogContent,
DialogDescription,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
@ -16,9 +15,9 @@ import {
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue SelectValue,
} from '@/components/ui/select'; } from '@/components/ui/select';
import { Alert, KeenIcon, useDataGrid } from '@/components'; import { Alert, useDataGrid } from '@/components';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@ -27,23 +26,24 @@ const API_URL = apiConfig.transaction;
const ApprovalDialog = () => { const ApprovalDialog = () => {
const { GetData, PostData } = useCallApi(); const { GetData, PostData } = useCallApi();
// const { reload } = useDataGrid();
const { const {
showApprovalDialog, showApprovalDialog,
setShowApprovalDialog, setShowApprovalDialog,
selectedTransactionIdForApproval selectedTransactionIdForApproval,
} = useTransactionContext(); } = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null); const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [formField, setFormField] = useState({ const [formField, setFormField] = useState({
transaction_code: '', transaction_code: '',
status: '' status: '',
notes: '',
}); });
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: '',
}); });
const doApproval = useCallback( const doApproval = useCallback(
@ -59,38 +59,51 @@ const ApprovalDialog = () => {
toast.error('Please select a status.'); toast.error('Please select a status.');
return; return;
} }
const response = await PostData(`${API_URL}/transaction/set-approval`, { const response = await PostData(`${API_URL}/transaction/set-approval`, {
transaction_code: transactionDetails.code, id_transaction: transactionDetails.id,
status: formField.status, status: formField.status,
notes: formField.notes,
}); });
if (response?.status) { if (response?.status) {
setAlert((prev) => ({ ...prev, show: false, message: '' })); setAlert({ show: false, message: '' });
toast.success('Success Update Position'); toast.success('Success Update Position');
const createActivity = { const createActivity = {
module: 'Approval Transaction', module: 'Approval Transaction',
description: `Change status approve for transaction => ${transactionDetails.code}`, description: `Change status approve for transaction => ${transactionDetails.code}`,
action: 'U' action: 'U',
}; };
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
setShowApprovalDialog(false); // optionally close dialog setShowApprovalDialog(false);
} else { } else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message })); setAlert({ show: true, message: response?.message });
} }
}, },
[formField, transactionDetails] [formField, transactionDetails]
); );
useEffect(() => {
if (showApprovalDialog) {
// Reset form fields when dialog opens
setFormField({
transaction_code: '',
status: '',
notes: '',
});
setTransactionDetails(null); // Optional reset
}
}, [showApprovalDialog]);
useEffect(() => { useEffect(() => {
const fetchTransactionDetails = async () => { const fetchTransactionDetails = async () => {
if (selectedTransactionIdForApproval) { if (selectedTransactionIdForApproval) {
try { try {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, { const response = await GetData(
id: selectedTransactionIdForApproval `${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`,
}); {
// console.log(response?.data.code); id: selectedTransactionIdForApproval,
// console.log(selectedTransactionIdForApproval); }
);
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
@ -103,6 +116,15 @@ const ApprovalDialog = () => {
} }
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]); }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
// Set formField.transaction_code once details are fetched
useEffect(() => {
if (transactionDetails) {
setFormField((prev) => ({
...prev,
transaction_code: transactionDetails.id ?? '',
}));
}
}, [transactionDetails]);
return ( return (
<Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}> <Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
@ -111,7 +133,7 @@ const ApprovalDialog = () => {
<DialogTitle>Approval Transaction</DialogTitle> <DialogTitle>Approval Transaction</DialogTitle>
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody>
<form action="" onSubmit={doApproval}> <form onSubmit={doApproval}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
<div className="w-full"> <div className="w-full">
<div className="flex items-center flex-wrap gap-2.5"> <div className="flex items-center flex-wrap gap-2.5">
@ -119,8 +141,10 @@ const ApprovalDialog = () => {
<div className="grow"> <div className="grow">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))} onValueChange={(status) =>
setFormField((prev) => ({ ...prev, status }))
}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />
@ -132,8 +156,28 @@ const ApprovalDialog = () => {
</Select> </Select>
</div> </div>
</div> </div>
</div>
{formField.status === 'N' && (
<div className="flex items-center flex-wrap gap-2.5 mt-4">
<label className="form-label max-w-56">Notes</label>
<div className="grow">
<Input
type="text"
placeholder="Notes"
name="notes"
id="notes"
value={formField.notes}
onChange={(e) =>
setFormField((prev) => ({
...prev,
notes: e.target.value,
}))
}
/>
</div>
</div>
)}
</div>
<hr /> <hr />
<div className="flex justify-end"> <div className="flex justify-end">

233
src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
View File

@ -66,6 +66,24 @@ const DetailApprovalTransaction = () => {
> >
Origin Customer Origin Customer
</button> </button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationcustomer')}
>
Destination Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('originwallet')}
>
Origin Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationwallet')}
>
Destination Wallet
</button>
<button <button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`} className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('log')} onClick={() => setActiveTab('log')}
@ -119,21 +137,32 @@ const DetailApprovalTransaction = () => {
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Status</p> <p className="text-sm text-gray-500">Status</p>
<p className="font-medium"> <div>
{(() => { {(() => {
let status; let status;
let badgeClass;
if (transactionDetails?.status === 'C') { if (transactionDetails?.status === 'C') {
status = 'COMPLETE'; status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') { } else if (transactionDetails?.status === 'F') {
status = 'FAILED'; status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') { } else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS'; status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else { } else {
status = 'PENDING'; status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
} }
return status;
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
})()} })()}
</p> </div>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Transaction Type</p> <p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +201,7 @@ const DetailApprovalTransaction = () => {
</span> </span>
</h3> </h3>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div> </div>
<h3 className="font-semibold flex items-center"> <h3 className="font-semibold flex items-center">
@ -208,8 +230,54 @@ const DetailApprovalTransaction = () => {
</div> </div>
</div> </div>
)} )}
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Product Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Product Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Product Name</p>
<p className="font-medium">{transactionDetails?.purchase.product.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Cash</p>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
<p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
<p className="font-medium">{transactionDetails?.purchase.product.type}</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Name</p>
<p className="font-medium">{transactionDetails?.purchase.product.provider.description}</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">
{(() => {
let providertype;
if (transactionDetails?.purchase.product.provider.type === 'h2h') {
providertype = 'HOST TO HOST';
} else if (transactionDetails?.purchase.product.provider.type === 'agent') {
providertype = 'AGENT';
}
return providertype;
})()}
</p>
</div>
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && ( {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold flex items-center"> <h3 className="font-semibold flex items-center">
Transaction Information Transaction Information
@ -291,69 +359,9 @@ const DetailApprovalTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p> <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</div> </div>
</div> </div>
<h3 className="font-semibold flex items-center">
Destination Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</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_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Customer
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Destination Customer
</span>
</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>
</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">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div> </div>
)} )}
{activeTab === 'origincustomer' && ( {activeTab === 'origincustomer' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3> <h3 className="font-semibold">Origin Customer</h3>
@ -378,6 +386,68 @@ const DetailApprovalTransaction = () => {
</div> </div>
)} )}
{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>
</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>
)}
{activeTab === 'originwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Wallet</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'destinationwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3>
{!transactionDetails?.transfer ? (
<div className="text-center text-sm text-gray-500">No Data available</div>
) : (
<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_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
</div>
</div>
)}
</div>
)}
{activeTab === 'log' && ( {activeTab === 'log' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3> <h3 className="font-semibold">Transaction Logs</h3>
@ -443,8 +513,8 @@ const DetailApprovalTransaction = () => {
<thead> <thead>
<tr className="bg-gray-100"> <tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -466,8 +536,19 @@ const DetailApprovalTransaction = () => {
return status; return status;
})()} })()}
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> {new Date(log.created_at).toLocaleString('sv-SE', {
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(' ', ' ')}
</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
</tr> </tr>
)) ))
) : ( ) : (

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

@ -18,12 +18,10 @@ const ListToolbar = () => {
// useEffect to set the default date values // useEffect to set the default date values
useEffect(() => { useEffect(() => {
const today = new Date(); const today = new Date();
const nextWeek = new Date(today); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
nextWeek.setDate(today.getDate() + 7);
settrxDate({ settrxDate({
from: formatDate(today), // Set 'from' to today from: formatDate(firstDayOfMonth),
to: formatDate(nextWeek), // Set 'to' to 7 days later to: formatDate(today),
}); });
}, []); }, []);

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

@ -155,7 +155,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
}, },
{ {
accessorKey: 'type.name', accessorKey: 'type.name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -163,20 +163,33 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
}, },
}, },
{ {
accessorFn: (row) => { accessorKey: 'status_approve',
switch (row.status_approve) { header: 'Status',
case 'W': return 'WAITING APPROVAL'; cell: ({ row }) => {
case 'Y': return 'APPROVED'; const statusCode = row.original.status_approve;
case 'N': return 'REJECTED'; let label = '';
default: return 'PENDING'; let badgeClass = '';
switch (statusCode) {
case 'Y':
label = 'APPROVED';
badgeClass = 'bg-green-100 text-green-800';
break;
case 'N':
label = 'REJECTED';
badgeClass = 'bg-red-100 text-red-800';
break;
case 'W':
label = 'WAITING APPROVAL';
badgeClass = 'bg-gray-100 text-gray-800';
break;
} }
},
id: 'status_approve', return (
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
enableSorting: false, {label}
enableHiding: false, </span>
meta: { );
headerClassName: 'w-[250px]',
}, },
}, },
{ {
@ -203,6 +216,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
setSelectedTransactionIdForApproval(row.id); setSelectedTransactionIdForApproval(row.id);
setShowApprovalDialog(true); setShowApprovalDialog(true);
}} }}
disabled={row.status_approve === 'Y' || row.status_approve === 'N'}
> >
<KeenIcon icon="notepad-edit" /> <KeenIcon icon="notepad-edit" />
</button> </button>

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

@ -30,7 +30,6 @@ const DetailTransaction = () => {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, { const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
id: selectedTransactionId id: selectedTransactionId
}); });
// console.log(response?.data);
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
@ -66,6 +65,24 @@ const DetailTransaction = () => {
> >
Origin Customer Origin Customer
</button> </button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationcustomer')}
>
Destination Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('originwallet')}
>
Origin Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationwallet')}
>
Destination Wallet
</button>
<button <button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`} className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('log')} onClick={() => setActiveTab('log')}
@ -119,21 +136,32 @@ const DetailTransaction = () => {
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Status</p> <p className="text-sm text-gray-500">Status</p>
<p className="font-medium"> <div>
{(() => { {(() => {
let status; let status;
let badgeClass;
if (transactionDetails?.status === 'C') { if (transactionDetails?.status === 'C') {
status = 'COMPLETE'; status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') { } else if (transactionDetails?.status === 'F') {
status = 'FAILED'; status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') { } else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS'; status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else { } else {
status = 'PENDING'; status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
} }
return status;
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
})()} })()}
</p> </div>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Transaction Type</p> <p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +200,7 @@ const DetailTransaction = () => {
</span> </span>
</h3> </h3>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div> </div>
<h3 className="font-semibold flex items-center"> <h3 className="font-semibold flex items-center">
@ -337,69 +358,9 @@ const DetailTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p> <p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</div> </div>
</div> </div>
<h3 className="font-semibold flex items-center">
Destination Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</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_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Customer
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Destination Customer
</span>
</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>
</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">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div> </div>
)} )}
{activeTab === 'origincustomer' && ( {activeTab === 'origincustomer' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3> <h3 className="font-semibold">Origin Customer</h3>
@ -424,6 +385,68 @@ const DetailTransaction = () => {
</div> </div>
)} )}
{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>
</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>
)}
{activeTab === 'originwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Wallet</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'destinationwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3>
{!transactionDetails?.transfer ? (
<div className="text-center text-sm text-gray-500">No Data available</div>
) : (
<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_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
</div>
</div>
)}
</div>
)}
{activeTab === 'log' && ( {activeTab === 'log' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3> <h3 className="font-semibold">Transaction Logs</h3>
@ -489,8 +512,8 @@ const DetailTransaction = () => {
<thead> <thead>
<tr className="bg-gray-100"> <tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -512,8 +535,19 @@ const DetailTransaction = () => {
return status; return status;
})()} })()}
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> {new Date(log.created_at).toLocaleString('sv-SE', {
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(' ', ' ')}
</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
</tr> </tr>
)) ))
) : ( ) : (

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

@ -18,12 +18,10 @@ const ListToolbar = () => {
// useEffect to set the default date values // useEffect to set the default date values
useEffect(() => { useEffect(() => {
const today = new Date(); const today = new Date();
const nextWeek = new Date(today); const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
nextWeek.setDate(today.getDate() + 7);
settrxDate({ settrxDate({
from: formatDate(today), // Set 'from' to today from: formatDate(firstDayOfMonth),
to: formatDate(nextWeek), // Set 'to' to 7 days later to: formatDate(today),
}); });
}, []); }, []);

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

@ -137,19 +137,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}, },
}, },
{ {
accessorFn: (row) => {
let status;
if (row.status === 'C') {
status = 'COMPLETE';
} else if (row.status === 'F') {
status = 'FAILED';
} else if (row.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
}
return status;
},
accessorKey: 'status', accessorKey: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false, enableSorting: false,
@ -157,6 +144,36 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
meta: { meta: {
headerClassName: 'w-[250px]', headerClassName: 'w-[250px]',
}, },
cell: ({ row }) => {
const statusCode = row.original.status;
let label = '';
let badgeClass = '';
switch (statusCode) {
case 'C':
label = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
break;
case 'F':
label = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
break;
case 'O':
label = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
break;
default:
label = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
break;
}
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{label}
</span>
);
},
}, },
{ {
accessorKey: 'description', accessorKey: 'description',
@ -169,7 +186,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}, },
{ {
accessorKey: 'type.name', accessorKey: 'type.name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -227,11 +244,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
if (filter == undefined || filter.length == 0) { if (filter == undefined || filter.length == 0) {
const today = new Date(); const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
startdate = today.toISOString().split('T')[0]; // Tanggal 1 di bulan sekarang
enddate = nextWeek.toISOString().split('T')[0]; const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
startdate = firstDayOfMonth.toISOString().split('T')[0];
enddate = today.toISOString().split('T')[0];
} else if (filter != undefined || filter.length != 0) { } else if (filter != undefined || filter.length != 0) {
startdate = filter[0].value.from; startdate = filter[0].value.from;
enddate = filter[0].value.to; enddate = filter[0].value.to;

4
src/pages/transfer/transfertype/TransferType.tsx
View File

@ -5,7 +5,7 @@ import {
} from './hooks/ManageTransferTypeContext'; } from './hooks/ManageTransferTypeContext';
import AddDialog from './blocks/AddDialog'; import AddDialog from './blocks/AddDialog';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
import { DeleteDialog } from './blocks/DeleteDialog'; import DeleteDialog from './blocks/DeleteDialog';
import { EditDialog } from './blocks/EditDialog'; import { EditDialog } from './blocks/EditDialog';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
@ -37,7 +37,7 @@ const TransferType = () => {
</div> </div>
<AddDialog /> <AddDialog />
<DeleteDialog /> <DeleteDialog />
<EditDialog /> {/* <EditDialog /> */}
</Container> </Container>
</ManageTransferTypeContextProvider> </ManageTransferTypeContextProvider>

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

@ -41,8 +41,8 @@ import {
} from '@/components/ui/command'; } from '@/components/ui/command';
interface WalletProps { interface WalletProps {
Wallet_id: string; id: string;
Wallet_name: string; name: string;
} }
interface CustomerProps { interface CustomerProps {
@ -74,8 +74,8 @@ const AddDialog = () => {
description: '', description: '',
wallet_origin: '', wallet_origin: '',
wallet_destination: '', wallet_destination: '',
wallet_fee_destination: '',
customer_fee_destination: '',
minimum_amount: 0, minimum_amount: 0,
maximum_amount: 0, maximum_amount: 0,
max_transaction_per_day: 0, max_transaction_per_day: 0,
@ -102,8 +102,6 @@ const AddDialog = () => {
'description', 'description',
'wallet_origin', 'wallet_origin',
'wallet_destination', 'wallet_destination',
'wallet_fee_destination',
'customer_fee_destination',
'status', 'status',
'status_approval' 'status_approval'
]; ];
@ -216,13 +214,11 @@ const AddDialog = () => {
limit: 100, limit: 100,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'name', order_field: 'wallets.name',
order_direction: 'ASC', order_direction: 'ASC',
filter: JSON.stringify({
status: 'Y'
})
}; };
const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params); const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
console.log(response)
if (response?.status && response?.data) { if (response?.status && response?.data) {
setWallets(response.data.list); setWallets(response.data.list);
} else { } else {
@ -234,7 +230,7 @@ const AddDialog = () => {
if (!showAddDialog) return; if (!showAddDialog) return;
fetchWallets(); fetchWallets();
}, [showAddDialog]); }, [showAddDialog]);
console.log(formField)
return ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -262,9 +258,11 @@ const AddDialog = () => {
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0"> <div className="flex flex-col px-0">
{alert.show && ( {alert.show && (
<Alert variant="danger" className="mb-3"> <div className="sticky top-0 z-10 bg-white p-3">
<h3>{alert.message}</h3> <Alert variant="danger" className="mb-3">
</Alert> <h3>{alert.message}</h3>
</Alert>
</div>
)} )}
<form action="" onSubmit={handleSubmit}> <form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
@ -396,8 +394,8 @@ const AddDialog = () => {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet, idx) => ( {wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}> <SelectItem value={wallet.id} key={wallet.name}>
{wallet.Wallet_name} {wallet.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
@ -424,8 +422,8 @@ const AddDialog = () => {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet, idx) => ( {wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}> <SelectItem value={wallet.id} key={wallet.id}>
{wallet.Wallet_name} {wallet.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
@ -433,86 +431,8 @@ const AddDialog = () => {
</div> </div>
</div> </div>
</div> </div>
<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">
Wallet Destination Fee
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.wallet_fee_destination}
onValueChange={(wallet_fee_destination) =>
setFormField((prev) => ({ ...prev, wallet_fee_destination }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
<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">
Customer Fee Destination<span className="text-red-500">*</span>
</label>
<div className="grow">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find(
(customer) => customer.id === formField.customer_fee_destination
)?.username || 'Select Customer'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Customer..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customer_fee_destination: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">

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

@ -25,7 +25,6 @@ const DeleteDialog = () => {
return; return;
} }
// Kirim enforce=false untuk memastikan soft delete
const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, { const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, {
id: selectedTransferType id: selectedTransferType
}); });
@ -34,13 +33,12 @@ const DeleteDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
handleDeleteDialog(false, null); handleDeleteDialog(false, null);
reload(); reload();
setTimeout(() => toast.success('Success Delete Transaction Type'), 0); // setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
} else { } else {
setAlert({ show: true, message: response?.message }); setAlert({ show: true, message: response?.message });
setTimeout(() => toast.error('Failed Delete Product'), 0); // setTimeout(() => toast.error('Failed Delete Product'), 0);
} }
}, [selectedTransferType, DeleteData, handleDeleteDialog, reload]); }, [selectedTransferType]);
return ( return (
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}> <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -71,4 +69,3 @@ const DeleteDialog = () => {
}; };
export default DeleteDialog; export default DeleteDialog;
export { DeleteDialog };

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

@ -25,23 +25,16 @@ import { useCallApi } from '@/hooks';
import { getAuth } from '@/auth'; import { getAuth } from '@/auth';
import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext'; import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
import AddFeeDialog from '../../transferfee/blocks/AddDialog'; import AddFeeDialog from '../../transferfee/blocks/AddDialog';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { Checkbox } from '@/components/ui/checkbox';
import { import { doSaveLogActivity } from '@/actions/GlobalActions';
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@/components/ui/command';
const API_URL = apiConfig.service_transaction; const API_URL = apiConfig.service_transaction;
const API_URL_MASTERDATA = apiConfig.service_master_data; const API_URL_MASTERDATA = apiConfig.service_master_data;
const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_CUSTOMER = apiConfig.service_customer;
interface WalletProps { interface WalletProps {
Wallet_id: string; id: string;
Wallet_name: string; name: string;
} }
interface CustomerProps { interface CustomerProps {
@ -50,19 +43,11 @@ interface CustomerProps {
msisdn: string; msisdn: string;
} }
interface TranssactionTypeProps { interface GroupProps {
id: string;
name: string; name: string;
description: string; description: string;
minimum_amount: number;
maximum_amount: number;
max_transaction_per_day: number;
status_approval: string;
status: string; status: string;
type: string;
wallet_origin: WalletProps;
wallet_destination: WalletProps;
wallet_fee_destination: WalletProps;
customer_fee_destination: CustomerProps;
} }
const EditDialog = () => { const EditDialog = () => {
@ -71,29 +56,43 @@ const EditDialog = () => {
useManageTransferTypeContext(); useManageTransferTypeContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const [wallets, setWallets] = useState<WalletProps[]>([]); const [wallets, setWallets] = useState<WalletProps[]>([]);
const [groups, setGroups] = useState<GroupProps[]>([]);
const { GetData, PutData } = useCallApi(); const { GetData, PutData } = useCallApi();
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [open, setOpen] = useState(false); const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState: {
name: string;
description: string;
wallet_origin: string;
wallet_destination: string;
minimum_amount: number;
maximum_amount: number;
max_transaction_per_day: number;
status: string;
type: string;
status_approval: string;
updated_by: string;
updated_at: string;
permission: string[];
} = {
name: '', name: '',
description: '', description: '',
wallet_origin: '', wallet_origin: '',
wallet_destination: '', wallet_destination: '',
wallet_fee_destination: '',
customer_fee_destination: '',
minimum_amount: 0, minimum_amount: 0,
maximum_amount: 0, maximum_amount: 0,
max_transaction_per_day: 0, max_transaction_per_day: 0,
status_approval: '', status_approval: '',
type: '', type: '',
status: '', status: '',
permission: [],
updated_by: '', updated_by: '',
updated_at: '' updated_at: ''
}; };
@ -102,27 +101,47 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setSelectedGroups([]);
setAlert({ show: false, message: '' });
};
const handleGroupChange = (groupId: string) => {
setFormField((prevState) => {
const isSelected = prevState.permission.includes(groupId);
if (isSelected) {
// Remove the permission if already selected
return {
...prevState,
permission: prevState.permission.filter((id) => id !== groupId)
};
} else {
// Add the permission if not selected
return {
...prevState,
permission: [...prevState.permission, groupId]
};
}
});
}; };
// Validation function to make certain fields required
const validateForm = () => { const validateForm = () => {
const requiredFields = [ const requiredFields = [
'name', 'name',
'description', 'description',
'wallet_origin', 'wallet_origin',
'wallet_destination', 'wallet_destination',
'wallet_fee_destination',
'customer_fee_destination',
'status', 'status',
'status_approval', 'status_approval',
'type' 'type'
]; ];
const missingFields = requiredFields.filter( const missingFields = requiredFields.filter(
(field) => (field) => {
formField[field as keyof typeof formField] === '' || return formField[field as keyof typeof formField] === '' ||
formField[field as keyof typeof formField] === null || formField[field as keyof typeof formField] === null ||
formField[field as keyof typeof formField] === undefined formField[field as keyof typeof formField] === undefined;
}
); );
if (missingFields.length > 0) { if (missingFields.length > 0) {
@ -133,6 +152,15 @@ const EditDialog = () => {
return false; return false;
} }
// Validate that at least one permission is selected
if (formField.permission.length === 0) {
setAlert({
show: true,
message: 'Please select at least one group permission'
});
return false;
}
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
return true; return true;
}; };
@ -148,7 +176,12 @@ const EditDialog = () => {
updated_at: formattedTime updated_at: formattedTime
})); }));
} }
}, [showEditDialog]); }, [showEditDialog, parsedUser]);
const selectedPermissionNames = groups
.filter((g) => formField.permission.includes(g.id))
.map((g) => g.name)
.join(', ');
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -165,6 +198,14 @@ const EditDialog = () => {
handleEditDialog(false, null); handleEditDialog(false, null);
toast.success('Success Update Transfer Type'); toast.success('Success Update Transfer Type');
reload(); reload();
const createActivity = {
module: 'Manage Transfer Type',
description: `Edit Transfer Type => ${selectedTransferType}`,
action: 'U'
};
doSaveLogActivity(createActivity);
} }
}) })
.finally(() => { .finally(() => {
@ -197,11 +238,13 @@ const EditDialog = () => {
} }
}, [formField, selectedTransferType, PutData]); }, [formField, selectedTransferType, PutData]);
// Fetch customers
useEffect(() => { useEffect(() => {
if (!showEditDialog) return; if (!showEditDialog) return;
const getCustomerList = async (sorting: any) => {
const getCustomerList = async () => {
try { try {
sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; const sorting = [{ id: 'id', desc: false }];
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, { const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
limit: 100, limit: 100,
page: 1, page: 1,
@ -209,74 +252,113 @@ const EditDialog = () => {
order_field: sorting[0].id, order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC' order_direction: sorting[0].desc ? 'DESC' : 'ASC'
}); });
setCustomers(response?.data.list);
if (response?.status && response?.data) {
setCustomers(response.data.list);
}
} catch (error) { } catch (error) {
console.error('Error fetching customer', error); console.error('Error fetching customer', error);
} }
}; };
getCustomerList([{ id: 'id', desc: false }]); getCustomerList();
}, [showEditDialog, GetData]); }, [showEditDialog, GetData]);
const fetchWallets = useCallback(async () => { // Fetch groups
const params = {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
filter: JSON.stringify({
status: 'Y'
})
};
const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
if (response?.status && response?.data) {
setWallets(response.data.list);
} else {
setWallets([]);
}
}, [GetData]);
useEffect(() => { useEffect(() => {
if (!showEditDialog) return; if (!showEditDialog) return;
fetchWallets();
}, [showEditDialog, fetchWallets]);
const fetchTransactionType = useCallback(async (id: string) => { const getGroupList = async () => {
try { try {
const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id }); const response = await GetData(`${API_URL_MASTERDATA}/groups/list`, {
if (response?.status) { limit: 100,
setFormField((prev) => ({ page: 1,
...prev, with_deleted: false,
name: response.data.name, order_field: 'name',
description: response.data.description, order_direction: 'ASC'
wallet_origin: response.data.wallet_origin.id, });
wallet_destination: response.data.wallet_destination.id,
wallet_fee_destination: response.data.wallet_fee_destination.id, if (response?.status && response?.data) {
customer_fee_destination: response.data.customer_fee_destination.id, setGroups(response.data.list);
minimum_amount: response.data.minimum_amount, }
maximum_amount: response.data.maximum_amount, } catch (error) {
max_transaction_per_day: response.data.max_transaction_per_day, console.error('Error fetching groups', error);
status_approval: response.data.status_approval,
type: response.data.type || '',
status: response.data.status
}));
} }
// console.log(response); };
} catch (error) {
console.error('Error fetching transaction type', error); getGroupList();
setAlert({ }, [showEditDialog, GetData]);
show: true,
message: 'Failed to load transaction type data' // Fetch wallets
}); useEffect(() => {
} if (!showEditDialog) return;
}, [GetData]);
const getWalletList = async () => {
try {
const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'wallets.name',
order_direction: 'ASC',
});
if (response?.status && response?.data) {
setWallets(response.data.list);
}
} catch (error) {
console.error('Error fetching wallets', error);
}
};
getWalletList();
}, [showEditDialog, GetData]);
// Fetch transaction type data
useEffect(() => {
if (!showEditDialog || !selectedTransferType) return;
const fetchTransactionType = async () => {
try {
const response = await GetData(`${API_URL}/transactiontype/getdata/${selectedTransferType}`, {});
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response.data.name,
description: response.data.description,
wallet_origin: response.data.wallet_origin?.id || '',
wallet_destination: response.data.wallet_destination?.id || '',
minimum_amount: response.data.minimum_amount,
maximum_amount: response.data.maximum_amount,
max_transaction_per_day: response.data.max_transaction_per_day,
status_approval: response.data.status_approval,
type: response.data.type || '',
status: response.data.status,
permission: response.data.permission || []
}));
}
} catch (error) {
console.error('Error fetching transaction type', error);
setAlert({
show: true,
message: 'Failed to load transaction type data'
});
}
};
const timer = setTimeout(() => {
fetchTransactionType();
}, 150);
return () => clearTimeout(timer);
}, [showEditDialog, selectedTransferType, GetData]);
useEffect(() => { useEffect(() => {
if (selectedTransferType) { if (showEditDialog === false) {
fetchTransactionType(selectedTransferType); resetForm();
} }
}, [selectedTransferType, fetchTransactionType]); }, [showEditDialog]);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@ -305,9 +387,11 @@ const EditDialog = () => {
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0"> <div className="flex flex-col px-0">
{alert.show && ( {alert.show && (
<Alert variant="danger" className="mb-3"> <div className="sticky top-0 z-10 bg-white p-3">
<h3>{alert.message}</h3> <Alert variant="danger" className="mb-3">
</Alert> <h3>{alert.message}</h3>
</Alert>
</div>
)} )}
<form action="" onSubmit={handleSubmit}> <form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
@ -439,8 +523,8 @@ const EditDialog = () => {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet) => ( {wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}> <SelectItem value={wallet.id} key={wallet.id}>
{wallet.Wallet_name} {wallet.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
@ -467,8 +551,8 @@ const EditDialog = () => {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{wallets.map((wallet) => ( {wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}> <SelectItem value={wallet.id} key={wallet.id}>
{wallet.Wallet_name} {wallet.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
@ -476,86 +560,6 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</div> </div>
<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">
Wallet Destination Fee
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.wallet_fee_destination}
onValueChange={(wallet_fee_destination) =>
setFormField((prev) => ({ ...prev, wallet_fee_destination }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
<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">
Customer Fee Destination<span className="text-red-500">*</span>
</label>
<div className="grow">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find(
(customer) => customer.id === formField.customer_fee_destination
)?.username || 'Select Customer'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Customer..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customer_fee_destination: customer.id
});
setOpen(false);
}}
>
{customer.username} - {customer.msisdn}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -638,6 +642,46 @@ const EditDialog = () => {
</div> </div>
</div> </div>
{/* Group Permission Section - Read Only Display */}
<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">
Groups
<span className="text-red-500">*</span>
</label>
<div className="relative w-full">
<Input
type="text"
placeholder="No groups selected"
value={selectedPermissionNames || ""}
readOnly
className="bg-gray-100 mb-2"
/>
{/* Groups Selection Area */}
<div className="border rounded-md p-3 max-h-48 overflow-y-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
{groups.map((group) => (
<div key={group.id} className="flex items-center space-x-2">
<Checkbox
id={`group-${group.id}`}
checked={formField.permission.includes(group.id)}
onCheckedChange={() => handleGroupChange(group.id)}
/>
<label
htmlFor={`group-${group.id}`}
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{group.name}
</label>
</div>
))}
</div>
</div>
</div>
</div>
</div>
<div className="flex justify-end pt-2.5 gap-5"> <div className="flex justify-end pt-2.5 gap-5">
<Button <Button
variant={'outline'} variant={'outline'}
@ -654,7 +698,6 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
{/* Transaction Fee Section */} {/* Transaction Fee Section */}
<ManageTransferFeeContextProvider> <ManageTransferFeeContextProvider>
<Container> <Container>

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

@ -70,19 +70,29 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
}, []); }, []);
const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => { const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
setShowDeleteDialog(show);
setSelectedTransferType(show ? selected_transfertype : null); setSelectedTransferType(show ? selected_transfertype : null);
setShowDeleteDialog(show);
}, []); }, []);
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
{
accessorFn: (row) => row.id,
id: 'id',
header: ({ column }) => (
<DataGridColumnHeader title="Transaction Type ID" column={column} />
),
enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{ {
accessorFn: (row) => row.name, accessorFn: (row) => row.name,
id: 'name', id: 'name',
header: ({ column }) => ( header: ({ column }) => (
<DataGridColumnHeader title="Transaction Type Name" column={column} /> <DataGridColumnHeader title="Transaction Type Name" column={column} />
), ),
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -90,7 +100,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
accessorFn: (row) => row.description, accessorFn: (row) => row.description,
id: 'description', id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -98,7 +108,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
accessorFn: (row) => row.wallet_origin?.name || 'N/A', accessorFn: (row) => row.wallet_origin?.name || 'N/A',
id: 'wallet_origin', id: 'wallet_origin',
header: ({ column }) => <DataGridColumnHeader title="From Account" column={column} />, header: ({ column }) => <DataGridColumnHeader title="From Account" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -106,7 +116,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
accessorFn: (row) => row.wallet_destination.name || 'N/A', accessorFn: (row) => row.wallet_destination.name || 'N/A',
id: 'wallet_destination', id: 'wallet_destination',
header: ({ column }) => <DataGridColumnHeader title="To Account" column={column} />, header: ({ column }) => <DataGridColumnHeader title="To Account" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -114,7 +124,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
accessorFn: (row) => row.maximum_amount, accessorFn: (row) => row.maximum_amount,
id: 'maximum_amount', id: 'maximum_amount',
header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -122,7 +132,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
accessorFn: (row) => row.minimum_amount, accessorFn: (row) => row.minimum_amount,
id: 'minimum_amount', id: 'minimum_amount',
header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -132,27 +142,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
header: ({ column }) => ( header: ({ column }) => (
<DataGridColumnHeader title="Max Transaction Per Day" column={column} /> <DataGridColumnHeader title="Max Transaction Per Day" column={column} />
), ),
enableSorting: true, enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.wallet_fee_destination.name,
id: 'wallet_fee_destination',
header: ({ column }) => (
<DataGridColumnHeader title="Wallet Fee Destination" column={column} />
),
enableSorting: true,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.customer_fee_destination?.username || 'N/A',
id: 'customer_fee_destination',
header: ({ column }) => (
<DataGridColumnHeader title="Customer Fee Destination" column={column} />
),
enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -162,7 +152,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
header: ({ column }) => ( header: ({ column }) => (
<DataGridColumnHeader title="TransactionType Status" column={column} /> <DataGridColumnHeader title="TransactionType Status" column={column} />
), ),
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
}, },
@ -170,7 +160,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'), accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
id: 'status', id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[150px]' } meta: { headerClassName: 'w-[150px]' }
}, },
@ -178,7 +168,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'), accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
id: 'status_approval', id: 'status_approval',
header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
enableSorting: true, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[150px]' } meta: { headerClassName: 'w-[150px]' }
}, },
@ -211,22 +201,29 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
], ],
[handleEditDialog, handleDeleteDialog] [handleEditDialog, handleDeleteDialog]
); );
const doGetTransferTypeListData = async ( const doGetTransferTypeListData = async (
page: number, page: number,
limit: number, limit: number,
sorting: any, sorting: any,
filter: any filter: any
) => { ) => {
sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
const orderField = 'created_at';
const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() }; filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL}/transactiontype/list`, { const response = await GetData(`${API_URL}/transactiontype/list`, {
limit: limit, limit: limit,
page: page + 1, page: page + 1,
with_deleted: false, with_deleted: false,
order_field: sorting[0].id, order_field: orderField,
order_direction: sorting[0].desc ? 'ASC' : 'DESC', order_direction: orderDirection,
filter: JSON.stringify(filter) filter: JSON.stringify(filter)
}); });
console.log(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
}; };
@ -253,7 +250,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
pagination={{ size: 10 }} pagination={{ size: 10 }}
layout={{ card: true }} layout={{ card: true }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
sorting={[{ id: 'id', desc: true }]} sorting={[{ id: 'created_at', desc: true }]} // Default sorting
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
doGetTransferTypeListData(pageIndex, pageSize, sorting, columnFilters) doGetTransferTypeListData(pageIndex, pageSize, sorting, columnFilters)

24
src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
View File

@ -82,7 +82,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}, },
{ {
accessorKey: 'amount' , accessorKey: 'amount' ,
header: ({ column }) => <DataGridColumnHeader title="Ammount" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -108,8 +108,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorKey: 'CreatedAt' , accessorKey: 'CreatedAt',
header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />, header: ({ column }) => (
<DataGridColumnHeader title="Created At" column={column} />
),
cell: ({ row }) => cell: ({ row }) =>
new Date(row.original.CreatedAt).toLocaleString('id-ID', { new Date(row.original.CreatedAt).toLocaleString('id-ID', {
day: '2-digit', day: '2-digit',
@ -118,7 +120,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
}), }),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[200px]' headerClassName: 'w-[200px]'
@ -174,26 +176,24 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
headerClassName: 'w-[200px]' headerClassName: 'w-[200px]'
} }
} }
], ],
[] []
); );
const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => { const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
try { try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; const sortField = 'CreatedAt';
const sortDirection = 'ASC';
filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() }; filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, { const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
limit, limit,
page: page + 1, page: page + 1,
with_deleted: false, with_deleted: false,
order_field: sorting[0].id, order_field: sortField,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', order_direction: sortDirection,
// filter: JSON.stringify(filter) // filter: JSON.stringify(filter)
}); });
// console.log(response?.data);
setWallets(response?.data.list); setWallets(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) { } catch (error) {
@ -221,7 +221,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
pagination={{ size: 10 }} pagination={{ size: 10 }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
layout={{ card: true }} layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]} // sorting={[{ id: 'created_at', desc: true }]}
serverSide={true} serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters) getWalletLists(pageIndex, pageSize, sorting, columnFilters)

11
src/routing/AppRoutingSetup.tsx
View File

@ -34,12 +34,16 @@ import ProfessionMaster from '@/pages/master/profession/ProfessionMaster';
import ProductsMaster from '@/pages/master/products/ProductsMaster'; import ProductsMaster from '@/pages/master/products/ProductsMaster';
import ProviderMaster from '@/pages/master/provider/ProviderMaster'; import ProviderMaster from '@/pages/master/provider/ProviderMaster';
import ConversionMaster from '@/pages/master/conversion/ConversionMaster'; import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
import RewardMaster from '@/pages/master/reward/Reward'; import RewardMaster from '@/pages/master/reward/RewardMaster';
import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster'; import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory'; import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory';
import WalletMaster from '@/pages/master/wallet/WalletMaster'; import WalletMaster from '@/pages/master/wallet/WalletMaster';
import CurrencyMaster from '@/pages/master/currency/CurrencyMaster'; import CurrencyMaster from '@/pages/master/currency/CurrencyMaster';
// DISBURSEMENT
import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction'
// DISBURSEMENT
const AppRoutingSetup = (): ReactElement => { const AppRoutingSetup = (): ReactElement => {
return ( return (
<Routes> <Routes>
@ -100,6 +104,11 @@ const AppRoutingSetup = (): ReactElement => {
path="/settings/user-management/manage-position" path="/settings/user-management/manage-position"
element={<ManagePositionPage />} element={<ManagePositionPage />}
/> />
{/* DISBURSEMENT */}
<Route path="/disbursement/transaction-history" element={<HistoryTransactionDisbursement />} />
{/* DISBURSEMENT */}
</Route> </Route>
</Route> </Route>
<Route path="error/*" element={<ErrorsRouting />} /> <Route path="error/*" element={<ErrorsRouting />} />