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:
unknown
2025-04-29 14:11:54 +07:00
parent 834f79f56d 56c07596a6
commit 5a4c0d1b74
14 changed files with 667 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ interface apiConfigProps {
service_dashboard: string; service_dashboard: string;
service_customer: string; service_customer: string;
service_master_data: string; service_master_data: string;
// service_master_data2: string;
service_transaction: string; service_transaction: string;
service_wallet: string; service_wallet: string;
transaction: string; transaction: string;
@ -18,7 +19,7 @@ const apiConfig: apiConfigProps = {
// service_dashboard: `${API_URL}${import.meta.env.VITE_ENV != 'development' ? '/d' : ''}`, // service_dashboard: `${API_URL}${import.meta.env.VITE_ENV != 'development' ? '/d' : ''}`,
service_dashboard: `${API_URL}/d`, service_dashboard: `${API_URL}/d`,
service_customer: `${API_URL}/c`, service_customer: `${API_URL}/c`,
// service_master_data: `${API_URL}/m` // service_master_data2: `${API_URL}/m`,
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`,

258
src/pages/account/home/user-profile/blocks/PinCode.tsx
View File

@ -1,96 +1,74 @@
import { useState, useContext, useEffect, useCallback, MouseEvent } from 'react'; import { useState, useContext, useCallback, MouseEvent } from 'react';
import { AccountUserProfileContext } from '../hooks'; import { AccountUserProfileContext } from '../hooks';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useAuthContext } from '@/auth'; import { getAuth,useAuthContext } from '@/auth';
import { KeenIcon } from '@/components'; import { KeenIcon } from '@/components';
import clsx from 'clsx';
type PasswordType = 'password' | 'retype_password' | 'current_password'; type PasswordType = 'current' | 'new' | 'retype';
const PinCode = () => { const PinCode = () => {
const { setPassword } = useContext(AccountUserProfileContext); const { setPincode } = useContext(AccountUserProfileContext);
const { getUser } = useAuthContext();
const [newPassword, setNewPassword] = useState(''); const [currentPincode, setCurrentPincode] = useState('');
const [currentPassword, setCurrentPassword] = useState(''); const [newPincode, setNewPincode] = useState('');
const [confirmPassword, setConfirmPassword] = useState(''); const [retypePincode, setRetypePincode] = useState('');
const [errorRetype, setErrorRetype] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [messagePassword, setMessagePassword] = useState(true);
const [showPassword, setShowPassword] = useState({ const [showPassword, setShowPassword] = useState({
current_password: false, current: false,
password: false, new: false,
retype_password: false retype: false,
}); });
const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
const validatePassword = (password: string) => {
const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
const hasCapitalLetter = /[A-Z]/.test(password);
const hasNumber = /[0-9]/.test(password);
return hasSpecialChar && hasCapitalLetter && hasNumber;
};
useEffect(() => {
const passwordsMatch = newPassword === confirmPassword;
const isPasswordValid = validatePassword(newPassword);
setMessagePassword(passwordsMatch && isPasswordValid);
const errors: string[] = [];
if (newPassword) {
if (!/[A-Z]/.test(newPassword)) {
errors.push('Password must contain at least one capital letter');
}
if (!/[0-9]/.test(newPassword)) {
errors.push('Password must contain at least one number');
}
if (!/[!@#$%^&*(),.?":{}|<>]/.test(newPassword)) {
errors.push('Password must contain at least one special character');
}
if (newPassword !== confirmPassword) {
errors.push('Passwords do not match');
}
}
setPasswordErrors(errors);
}, [newPassword, confirmPassword]);
const handleResetPassword = useCallback(async () => { const handleResetPassword = useCallback(async () => {
const user: any = await getUser(); if (newPincode !== retypePincode) {
toast.error('New Pin Code and Retype Pin Code do not match.');
if (!messagePassword) { setErrorRetype('New Pin Code and Retype Pin Code do not match.');
toast.error('Passwords do not match!');
return; return;
} }
setIsSubmitting(true); setIsSubmitting(true);
try { try {
await setPassword({ await setPincode({
current_password: currentPassword, currentpincode: currentPincode,
password: newPassword, newpincode: newPincode,
retype_password: confirmPassword, retypepincode: retypePincode,
username: user.data.username ?? ''
}); });
setNewPassword(''); setCurrentPincode('');
setConfirmPassword(''); setNewPincode('');
setCurrentPassword(''); setRetypePincode('');
setErrorRetype(''); // Clear error after success
} catch (error: any) { } catch (error: any) {
const errorMessage = const errorMessage =
error?.response?.data?.message || error?.response?.data?.message ||
error?.message || error?.message ||
'An error occurred while resetting the password.'; 'An error occurred while updating the pin code.';
toast.error(errorMessage); toast.error(errorMessage);
} finally { } finally {
setIsSubmitting(false); setIsSubmitting(false);
} }
}, [currentPassword, newPassword, newPassword, messagePassword, getUser]); }, [currentPincode, newPincode, retypePincode, setPincode]);
const isButtonDisabled = isSubmitting || !newPassword || !confirmPassword || !messagePassword; const isButtonDisabled = isSubmitting || !currentPincode || !newPincode || !retypePincode;
const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => { const togglePassword = useCallback(
event.preventDefault(); (event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] })); event.preventDefault();
}, []); setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
},
[]
);
const handleRetypeChange = (value: string) => {
setRetypePincode(value);
if (newPincode && value && newPincode !== value) {
setErrorRetype('New Pin Code and Retype Pin Code do not match.');
} else {
setErrorRetype('');
}
};
return ( return (
<div className="card pb-2.5"> <div className="card pb-2.5">
@ -98,91 +76,97 @@ const PinCode = () => {
<h3 className="card-title">Pin Code</h3> <h3 className="card-title">Pin Code</h3>
</div> </div>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
{/* Current Pin Code */}
<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 max-w-56">Current Pin Code</label> <label className="form-label max-w-56">Current Pin Code</label>
<div className="input"> <div className="input relative">
<input <input
type={showPassword.current_password ? 'text' : 'password'} className="form-control pr-10"
className="form-control"
placeholder="Current Pin Code" placeholder="Current Pin Code"
value={currentPassword} value={currentPincode}
onChange={(e) => setCurrentPassword(e.target.value)} onChange={(e) => setCurrentPincode(e.target.value)}
disabled={isSubmitting} disabled={isSubmitting}
type={showPassword.current ? 'text' : 'password'}
/> />
<button className="btn btn-icon" onClick={(e) => togglePassword(e, 'current_password')}> <button
className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
onClick={(e) => togglePassword(e, 'current')}
type="button"
>
<KeenIcon <KeenIcon
icon="eye" icon={showPassword.current ? 'eye-slash' : 'eye'}
className={clsx('text-gray-500', { hidden: showPassword.current_password })} className="text-gray-500"
/>
<KeenIcon
icon="eye-slash"
className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label max-w-56">Pin Code</label>
<div className="input">
<input
className="form-control"
placeholder="New Pin Code"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
disabled={isSubmitting}
type={showPassword.password ? 'text' : 'password'}
/>
<button className="btn btn-icon" onClick={(e) => togglePassword(e, 'password')}>
<KeenIcon
icon="eye"
className={clsx('text-gray-500', { hidden: showPassword.password })}
/>
<KeenIcon
icon="eye-slash"
className={clsx('text-gray-500', { hidden: !showPassword.password })}
/>
</button>
</div>
</div>
<div className="mb-2.5">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label max-w-56">Confirm New Pin Code</label>
<div className="input">
<input
type={showPassword.retype_password ? 'text' : 'password'}
className="form-control"
placeholder="Confirm New Pin Code"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
disabled={isSubmitting}
/>
<button
className="btn btn-icon"
onClick={(e) => togglePassword(e, 'retype_password')}
>
<KeenIcon
icon="eye"
className={clsx('text-gray-500', { hidden: showPassword.retype_password })}
/>
<KeenIcon
icon="eye-slash"
className={clsx('text-gray-500', { hidden: !showPassword.retype_password })}
/>
</button>
</div>
</div>
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label max-w-56 text-white">Confirm New Pin Code</label>
{passwordErrors.length > 0 && (
<div className="text-xs text-red-500 mt-1 ms-3">
{passwordErrors.map((error, index) => (
<p key={index}>{error}</p>
))}
</div>
)}
</div>
</div>
{/* New Pin Code */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label max-w-56">New Pin Code</label>
<div className="input relative">
<input
className="form-control pr-10"
placeholder="New Pin Code"
value={newPincode}
onChange={(e) => {
setNewPincode(e.target.value);
// Kalau retype sudah diisi, cek lagi error
if (retypePincode) {
if (e.target.value !== retypePincode) {
setErrorRetype('New Pin Code and Retype Pin Code do not match.');
} else {
setErrorRetype('');
}
}
}}
disabled={isSubmitting}
type={showPassword.new ? 'text' : 'password'}
/>
<button
className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
onClick={(e) => togglePassword(e, 'new')}
type="button"
>
<KeenIcon
icon={showPassword.new ? 'eye-slash' : 'eye'}
className="text-gray-500"
/>
</button>
</div>
</div>
{/* Retype Pin Code */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label max-w-56">Retype Pin Code</label>
<div className="input relative w-full">
<input
className={`form-control pr-10 ${errorRetype ? 'border-red-500' : ''}`}
placeholder="Retype Pin Code"
value={retypePincode}
onChange={(e) => handleRetypeChange(e.target.value)}
disabled={isSubmitting}
type={showPassword.retype ? 'text' : 'password'}
/>
<button
className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
onClick={(e) => togglePassword(e, 'retype')}
type="button"
>
<KeenIcon
icon={showPassword.retype ? 'eye-slash' : 'eye'}
className="text-gray-500"
/>
</button>
</div>
</div>
{/* Error message under Retype */}
{errorRetype && (
<div className="text-red-500 text-sm -mt-4 ml-[calc(14rem+10px)]">{errorRetype}</div>
)}
{/* Submit button */}
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
className="btn btn-primary" className="btn btn-primary"

1
src/pages/account/home/user-profile/blocks/index.ts
View File

@ -1,2 +1,3 @@
export * from './BasicSettings'; export * from './BasicSettings';
export * from './Password'; export * from './Password';
export * from './PinCode';

83
src/pages/account/home/user-profile/hooks/AccountUserProfileContext.tsx
View File

@ -2,8 +2,7 @@ import React, { createContext, useState } from 'react';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { toast } from 'sonner'; import { toast } from 'sonner';
import axios from 'axios'; import { getAuth,useAuthContext } from '@/auth';
import { useAuthContext } from '@/auth';
interface Password { interface Password {
password: string; password: string;
@ -18,9 +17,17 @@ interface Profile {
username: string; username: string;
} }
interface PinCodePayload {
currentpincode: string;
newpincode: string;
retypepincode: string;
}
interface ContextProps { interface ContextProps {
password: Password | null; password: Password | null;
profile: Profile | null; profile: Profile | null;
pincode: PinCodePayload | null;
setPincode: (pincode: PinCodePayload) => Promise<void>;
setPassword: (password: Password) => Promise<void>; setPassword: (password: Password) => Promise<void>;
setProfile: (profile: Profile) => Promise<void>; setProfile: (profile: Profile) => Promise<void>;
} }
@ -28,39 +35,39 @@ interface ContextProps {
const initialProps: ContextProps = { const initialProps: ContextProps = {
profile: null, profile: null,
password: null, password: null,
pincode: null,
setPassword: async () => {}, setPassword: async () => {},
setProfile: async () => {} setProfile: async () => {},
setPincode: async () => {},
}; };
const AccountUserProfileContext = createContext<ContextProps>(initialProps); const AccountUserProfileContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_dashboard;
const API_URL2 = apiConfig.service_customer;
const AccountUserProfileContextProvider = ({ children }: { children: React.ReactNode }) => { const AccountUserProfileContextProvider = ({ children }: { children: React.ReactNode }) => {
/* state */
const { login } = useAuthContext(); const { login } = useAuthContext();
const [profile, setProfile] = useState<Profile | null>(null); const [profile, setProfileState] = useState<Profile | null>(null);
const [password, setPassword] = useState<Password | null>(null); const [password, setPasswordState] = useState<Password | null>(null);
const [alert, setAlert] = useState({ const [pinCode, setPincodeState] = useState<PinCodePayload | null>(null);
show: false, const [alert, setAlert] = useState({ show: false, message: '' });
message: ''
}); const { PutData, PostData } = useCallApi();
const handleError = (error: any, defaultMessage: string) => {
const errorMessage = error?.response?.data?.message || error?.message || defaultMessage;
setAlert({ show: true, message: errorMessage });
toast.error(errorMessage);
};
const { PutData } = useCallApi();
const { PostData } = useCallApi();
const handleSetPassword = async (newPassword: Password) => { const handleSetPassword = async (newPassword: Password) => {
setPassword(newPassword); setPasswordState(newPassword);
const handleError = (error: any, defaultMessage: string) => {
const errorMessage = error?.response?.data?.message || error?.message || defaultMessage;
setAlert({ show: true, message: errorMessage });
toast.error(errorMessage);
};
try { try {
const validate = await PostData(`${API_URL}/login`, { const validate = await PostData(`${API_URL}/login`, {
password: newPassword.current_password, password: newPassword.current_password,
username: newPassword.username username: newPassword.username,
}); });
if (!validate || !validate.status) { if (!validate || !validate.status) {
@ -70,7 +77,7 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
const response = await PutData(`${API_URL}/user/update_password`, { const response = await PutData(`${API_URL}/user/update_password`, {
password: newPassword.password, password: newPassword.password,
retype_password: newPassword.retype_password retype_password: newPassword.retype_password,
}); });
if (response && response.status) { if (response && response.status) {
@ -85,19 +92,37 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
const handleSetProfile = async (newProfile: Profile) => { const handleSetProfile = async (newProfile: Profile) => {
try { try {
setProfile(newProfile); setProfileState(newProfile);
const response = await PutData(`${API_URL}/user/update_profile/`, { await PutData(`${API_URL}/user/update_profile/`, {
name: newProfile.name, name: newProfile.name,
email: newProfile.email, email: newProfile.email,
username: newProfile.username username: newProfile.username,
}); });
toast.success('Profile updated successfully.'); toast.success('Profile updated successfully.');
} catch (error: any) { } catch (error: any) {
const errorMessage = error?.message || 'Failed to update Profile. Please try again.'; handleError(error, 'Failed to update profile. Please try again.');
setAlert({ show: true, message: errorMessage }); }
toast.error(errorMessage); };
const handleSetPinCode = async (newPinCode: PinCodePayload) => {
try {
setPincodeState(newPinCode);
const customerid = getAuth()?.user?.customer?.id;
const response = await PutData(`${API_URL2}/customer/pin/${customerid}`, {
old_pin: newPinCode.currentpincode,
new_pin: newPinCode.newpincode,
retype_new_pin: newPinCode.retypepincode,
});
if (response && response.status) {
toast.success('Pin code updated successfully.');
} else {
toast.error(response?.message || 'Failed to update pin code.');
}
} catch (error: any) {
handleError(error, 'Failed to update Pin Code. Please try again.');
} }
}; };
@ -106,8 +131,10 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
value={{ value={{
password, password,
profile, profile,
pincode: pinCode,
setPassword: handleSetPassword, setPassword: handleSetPassword,
setProfile: handleSetProfile setProfile: handleSetProfile,
setPincode: handleSetPinCode,
}} }}
> >
{children} {children}

27
src/pages/groups/ManageGroups.tsx
View File

@ -24,7 +24,7 @@ import CloseIcon from '@mui/icons-material/Close';
import Divider from '@mui/material/Divider'; import Divider from '@mui/material/Divider';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Container, DataGridProvider, LoaderTransparant } from '@/components'; import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
import { ListToolBar } from './ListToolbar'; import { ListToolBar } from './ListToolbar';
import { RefreshCw } from 'lucide-react'; import { RefreshCw } from 'lucide-react';
import { setgroups } from 'process'; import { setgroups } from 'process';
@ -58,12 +58,11 @@ const ManageGroups = () => {
// }; // };
useEffect(() => { useEffect(() => {
setLoading(true); fetchGroups();
fetchGroups();
setLoading(false);
}, []); }, []);
async function fetchGroups(): Promise<void> { async function fetchGroups(): Promise<void> {
setIsReloading(true);
try { try {
let groups = await axios.get(`${BASE_URL}/groups/list`, { let groups = await axios.get(`${BASE_URL}/groups/list`, {
params: { params: {
@ -88,7 +87,7 @@ const ManageGroups = () => {
alert(error.message); alert(error.message);
console.log(error); console.log(error);
} finally { } finally {
setLoading(false); // setLoading(false);
setIsReloading(false); setIsReloading(false);
} }
} }
@ -150,6 +149,7 @@ const ManageGroups = () => {
}; };
const handleYes = async () => { const handleYes = async () => {
setIsReloading(true);
try { try {
if (dialogType === 'create') { if (dialogType === 'create') {
await axios.post(`${BASE_URL}/groups/create`, { await axios.post(`${BASE_URL}/groups/create`, {
@ -223,14 +223,15 @@ const ManageGroups = () => {
<div className="grid gap-5 lg:gap-7.5 mt-5 relative"> <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && ( {isReloading && (
<div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2"> <DataGridLoader />
<div className="bg-card flex items-center border shadow-sm rounded-md"> // <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
<div className="flex flex-col items-center"> // <div className="bg-card flex items-center border shadow-sm rounded-md">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" /> // <div className="flex flex-col items-center">
<span className="text-slate-500 font-medium">Refreshing data...</span> // <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
</div> // <span className="text-slate-500 font-medium">Refreshing data...</span>
</div> // </div>
</div> // </div>
// </div>
)} )}
<DataGridProvider <DataGridProvider
data={dataGroup} data={dataGroup}

21
src/pages/menu/manage-menu/blocks/AddDIalog.tsx
View File

@ -51,13 +51,14 @@ const AddDialog = () => {
setIsSubmitting(true); setIsSubmitting(true);
if ( if (
formField.module === '' || formField.module.trim() === '' ||
formField.name === '' || formField.name.trim() === '' ||
formField.link === '' || formField.link.trim() === '' ||
formField.order_number === 0 || formField.order_number === 0 ||
formField.status === '' formField.status.trim() === ''
) { ) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setAlert({ show: true, message: 'Please fill in all required fields.' });
setIsSubmitting(false);
return; return;
} }
@ -89,16 +90,24 @@ const AddDialog = () => {
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const handleAddDialogChange = (open: boolean) => {
handleAddDialog(open);
if(!open) {
resetForm();
}
}
const resetForm = () => { const resetForm = () => {
setFormField({ setFormField({
...initialState, ...initialState,
status: formField.status // Pertahankan nilai status terpilih status: formField.status
}); });
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
return ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={handleAddDialogChange}>
<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>Menu - Create</DialogTitle> <DialogTitle>Menu - Create</DialogTitle>

2
src/pages/notification/blocks/AddDialog.tsx
View File

@ -368,7 +368,7 @@ const AddDialog = () => {
</div> </div>
<div className="flex justify-end gap-4"> <div className="flex justify-end gap-4">
<Button type="reset" variant="outline" onClick={() => setFormField(initialState)}> <Button type="button" variant="outline" onClick={resetForm}>
Reset Reset
</Button> </Button>
<div className="flex justify-end"> <div className="flex justify-end">

4
src/pages/notification/hooks/ManageNotificationContext.tsx
View File

@ -73,7 +73,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
}, },
id: 'send', id: 'send',
header: ({ column }) => <DataGridColumnHeader title="Send" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Send" column={column} />,
enableSorting: false, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[200px]' headerClassName: 'w-[200px]'
@ -86,7 +86,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
enableSorting: true, enableSorting: true,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[300px]' headerClassName: 'w-[350px]'
} }
}, },
{ {

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

@ -22,6 +22,7 @@ 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';
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import Swal from 'sweetalert2'; // ✅ IMPORT sweetalert2
const API_URL = apiConfig.transaction; const API_URL = apiConfig.transaction;
@ -63,34 +64,48 @@ const ApprovalDialog = () => {
return; return;
} }
const response = await PostData(`${API_URL}/transaction/set-approval`, { // ✅ TUTUP Dialog sebelum munculkan SweetAlert
id_transaction: transactionDetails.id, setShowApprovalDialog(false);
notes: formField.notes,
status: formField.status, // ✅ TAMPILKAN SWEETALERT
pin: formField.pin, const result = await Swal.fire({
title: 'Are you sure?',
text: "You want to save changes?",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, save it!',
cancelButtonText: 'Cancel'
}); });
if (response?.status === false) { if (result.isConfirmed) {
setAlert({ // ✅ Kalau tekan YES, baru tembak API
show: true, const response = await PostData(`${API_URL}/transaction/set-approval`, {
message: response?.message?.error?.message || 'Approval failed', id_transaction: transactionDetails.id,
notes: formField.notes,
status: formField.status,
pin: formField.pin,
}); });
return;
}
if (response?.status) { if (response?.status === false) {
setAlert({ show: false, message: '' }); toast.error(response?.message?.error?.message || 'Approval failed');
toast.success('Success Update Approval'); return;
const createActivity = { }
module: 'Approval Transaction',
description: `Change status approve for transaction => ${transactionDetails.code}`, if (response?.status) {
action: 'U', toast.success('Success Update Approval');
}; const createActivity = {
doSaveLogActivity(createActivity); module: 'Approval Transaction',
setShowApprovalDialog(false); description: `Change status approve for transaction => ${transactionDetails.code}`,
reload(); action: 'U',
};
doSaveLogActivity(createActivity);
reload();
}
} else { } else {
setAlert({ show: true, message: response?.message }); // ✅ Kalau tekan Cancel
console.log('User cancelled');
} }
}, },
[formField, transactionDetails] [formField, transactionDetails]
@ -102,7 +117,7 @@ const ApprovalDialog = () => {
transaction_code: '', transaction_code: '',
notes: '', notes: '',
status: '', status: '',
pin:'' pin: ''
}); });
setTransactionDetails(null); setTransactionDetails(null);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
@ -171,7 +186,6 @@ const ApprovalDialog = () => {
</div> </div>
</div> </div>
<div className="flex items-center flex-wrap gap-2.5 mt-3 mb-3"> <div className="flex items-center flex-wrap gap-2.5 mt-3 mb-3">
<label className="form-label max-w-56">PIN</label> <label className="form-label max-w-56">PIN</label>
<div className="grow"> <div className="grow">
<Input <Input

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

@ -125,7 +125,17 @@ const DetailApprovalTransaction = () => {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<p className="text-sm text-gray-500">Transaction Date</p> <p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p> <p className="font-medium">{transactionDetails?.transaction_date
? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}</p>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Full Name</p> <p className="text-sm text-gray-500">Full Name</p>
@ -299,8 +309,17 @@ const DetailApprovalTransaction = () => {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<p className="text-sm text-gray-500">Transaction Date</p> <p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p> <p className="font-medium">{transactionDetails?.transaction_date
</div> ? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}</p> </div>
<div> <div>
<p className="text-sm text-gray-500">Full Name</p> <p className="text-sm text-gray-500">Full Name</p>
<p className="font-medium"> <p className="font-medium">
@ -485,38 +504,44 @@ const DetailApprovalTransaction = () => {
<table className="min-w-full table-auto"> <table className="min-w-full table-auto">
<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">Type</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request End Point</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{transactionDetails?.log && transactionDetails?.log.length > 0 ? ( {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 font-medium"> <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
{(() => { <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
let status; ? new Date(log.request_date).toLocaleDateString('en-GB', {
if (log.status === 'P') { day: '2-digit',
status = 'PENDING'; month: '2-digit',
} else if (log.status === 'O') { year: 'numeric',
status = 'ON PROCESS'; hour: '2-digit',
} else if (log.status === 'F') { minute: '2-digit',
status = 'FAILED'; second: '2-digit',
} else if (log.status === 'C') { hour12: false
status = 'COMPLETE'; })
} : ''}</td>
return status; <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
})()} ? new Date(log.response_date).toLocaleDateString('en-GB', {
</td> day: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td> month: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td> year: 'numeric',
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body ?? '-'}</td> hour: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body ?? '-'}</td> minute: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td> second: '2-digit',
hour12: false
})
: ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
</tr> </tr>
)) ))
) : ( ) : (
@ -607,7 +632,7 @@ const DetailApprovalTransaction = () => {
<tr className="bg-gray-100"> <tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Type</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
@ -618,8 +643,29 @@ const DetailApprovalTransaction = () => {
transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.type}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td> ? new Date(log.request_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date
? new Date(log.response_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>

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

@ -45,8 +45,8 @@ const DetailTransaction = () => {
id: selectedTransactionId id: selectedTransactionId
}); });
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
console.log(response?.data); // console.log(response?.data);
console.log(selectedTransactionId); // console.log(selectedTransactionId);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
} }
@ -141,7 +141,20 @@ const DetailTransaction = () => {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<p className="text-sm text-gray-500">Transaction Date</p> <p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p> <p className="font-medium">
{transactionDetails?.transaction_date
? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}
</p>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Full Name</p> <p className="text-sm text-gray-500">Full Name</p>
@ -312,7 +325,17 @@ const DetailTransaction = () => {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<p className="text-sm text-gray-500">Transaction Date</p> <p className="text-sm text-gray-500">Transaction Date</p>
<p className="font-medium">{transactionDetails?.transaction_date}</p> <p className="font-medium">{transactionDetails?.transaction_date
? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}</p>
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Full Name</p> <p className="text-sm text-gray-500">Full Name</p>
@ -492,38 +515,44 @@ const DetailTransaction = () => {
<table className="min-w-full table-auto"> <table className="min-w-full table-auto">
<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">Type</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request End Point</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{transactionDetails?.log && transactionDetails?.log.length > 0 ? ( {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 font-medium"> <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
{(() => { <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
let status; ? new Date(log.request_date).toLocaleDateString('en-GB', {
if (log.status === 'P') { day: '2-digit',
status = 'PENDING'; month: '2-digit',
} else if (log.status === 'O') { year: 'numeric',
status = 'ON PROCESS'; hour: '2-digit',
} else if (log.status === 'F') { minute: '2-digit',
status = 'FAILED'; second: '2-digit',
} else if (log.status === 'C') { hour12: false
status = 'COMPLETE'; })
} : ''}</td>
return status; <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
})()} ? new Date(log.response_date).toLocaleDateString('en-GB', {
</td> day: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td> month: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td> year: 'numeric',
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body ?? '-'}</td> hour: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body ?? '-'}</td> minute: '2-digit',
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td> second: '2-digit',
hour12: false
})
: ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
</tr> </tr>
)) ))
) : ( ) : (
@ -614,7 +643,7 @@ const DetailTransaction = () => {
<tr className="bg-gray-100"> <tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Type</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
@ -625,8 +654,29 @@ const DetailTransaction = () => {
transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.type}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td> ? new Date(log.request_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date
? new Date(log.response_date).toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
: ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>

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

@ -22,6 +22,15 @@ function useDebounce<T>(value: T, delay: number): T {
return debouncedValue; return debouncedValue;
} }
const formatNumber = (num: number): string => {
return num.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
};
interface AccountProps { interface AccountProps {
id: string; id: string;
name: string; name: string;
@ -147,6 +156,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} />,
cell: ({ row }) => formatNumber(row.original.maximum_amount),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
@ -155,6 +165,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} />,
cell: ({ row }) => formatNumber(row.original.minimum_amount),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
@ -165,6 +176,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} />
), ),
cell: ({ row }) => formatNumber(row.original.max_transaction_per_day),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }

187
src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
View File

@ -1,40 +1,189 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageWalletContext } from '../hooks/useManageWalletHistoryContext'; import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { useCallback, useEffect, useState } from 'react';
import { toast } from 'sonner';
const API_URL_WALLET = apiConfig.service_wallet;
interface WalletProps {
ID: string;
name: string;
}
const ListToolbar = () => { const ListToolbar = () => {
const { table, reload } = useDataGrid(); const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageWalletContext(); const { GetData } = useCallApi();
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''
);
const [dateRange, setDateRange] = useState({ from: '', to: '' });
const [walletId, setWalletId] = useState<string>(
(table.getColumn('id_wallet')?.getFilterValue() as string) ?? ''
);
const [wallets, setWallets] = useState<WalletProps[]>([]);
const formatDate = (date: Date): string => date.toISOString().split('T')[0];
useEffect(() => {
const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
setDateRange({ from: formatDate(firstDayOfMonth), to: formatDate(today) });
}, []);
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('msisdn')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
const handleFilterByDate = useCallback(() => {
try {
table.getColumn('CreatedAt')?.setFilterValue(dateRange);
} catch (error) {
toast.error('Error applying date filter');
console.error('Error applying date filter:', error);
}
}, [dateRange, table]);
useEffect(() => {
table.getColumn('id_wallet')?.setFilterValue(walletId);
table.setPageIndex(0);
}, [walletId, table]);
useEffect(() => {
if (dateRange.from && dateRange.to) {
handleFilterByDate();
}
}, [dateRange, handleFilterByDate]);
const fetchWallets = async () => {
try {
const response = await GetData(`${API_URL_WALLET}/dashboard/wallet/`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'created_at',
order_direction: 'ASC'
});
setWallets(response?.data.list || []);
} catch (error) {
console.error('Error fetching wallets', error);
}
};
useEffect(() => {
fetchWallets();
}, []);
const handleClearAllFilters = () => {
setSearchValue('');
setWalletId('');
const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
setDateRange({
from: formatDate(firstDayOfMonth),
to: formatDate(today)
});
table.getAllColumns().forEach((column) => {
if (column.id !== 'CreatedAt') {
column.setFilterValue(undefined);
}
});
table.setPageIndex(0);
table.getColumn('CreatedAt')?.setFilterValue({
from: formatDate(firstDayOfMonth),
to: formatDate(today)
});
};
return ( return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5"> <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 flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center"> <div className="flex justify-between w-full items-center">
<div className="flex w-[50%] gap-3 items-center"> <div className="flex gap-3 items-center flex-wrap">
{/* <label className="input input-sm w-1/3"> <label className="input input-sm w-[160px]">
From
<input
type="date"
value={dateRange.from}
onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
/>
</label>
<label className="input input-sm w-[160px]">
To
<input
type="date"
value={dateRange.to}
onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
/>
</label>
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" /> <KeenIcon icon="magnifier" />
<input <input
type="text" type="text"
placeholder="Search Wallet" placeholder="Search MSISDN"
value={(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''} value={searchValue}
onChange={(event) => table.getColumn('msisdn')?.setFilterValue(event.target.value)} onChange={(e) => setSearchValue(e.target.value)}
/> />
</label> */} </label>
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
<Button <div className="w-[220px]">
variant="outline" <Select
className="h-7.5 disabled:bg-gray-400" value={walletId}
// disabled={isLoading} onValueChange={(value) => {
// onClick={handleFilterData} setWalletId(value);
}}
> >
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} <SelectTrigger>
<KeenIcon icon="filter" /> <SelectValue placeholder="Select Wallet" />
</Button> </SelectTrigger>
</DefaultTooltip> */} <SelectContent>
{wallets.map((wallet) => (
<SelectItem key={wallet.ID} value={wallet.ID}>
{wallet.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<Button variant="outline" size="sm" onClick={handleClearAllFilters}>
Clear Filter
</Button>
</div> </div>
<div className="flex gap-3 items-center"> <div className="flex gap-3 items-center">
<DefaultTooltip title={'Refresh'} placement={'top'}> <DefaultTooltip title={'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={() => reload()}> <Button
variant="outline"
className="h-7.5"
onClick={() => {
setSearchValue('');
setWalletId('');
table.setColumnFilters((prev) => prev.filter((f) => f.id === 'CreatedAt'));
table.setPageIndex(0);
reload();
}}
>
<KeenIcon icon="arrows-circle" /> <KeenIcon icon="arrows-circle" />
</Button> </Button>
</DefaultTooltip> </DefaultTooltip>

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

@ -6,6 +6,16 @@ import { ColumnDef } from '@tanstack/react-table';
import React, { createContext, useCallback, useMemo, useState } from 'react'; import React, { createContext, useCallback, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar'; import ListToolbar from '../blocks/ListToolbar';
// Helper function for number formatting with currency format
const formatNumber = (num: number, currencyCode: string = 'USD'): string => {
return num.toLocaleString('en-US', {
style: 'currency',
currency: currencyCode,
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
};
interface WalletProps { interface WalletProps {
id: string; id: string;
name: string; name: string;
@ -23,11 +33,10 @@ interface ContextProps {
handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void; handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
selectedWallet: WalletProps | null; selectedWallet: WalletProps | null;
getWalletLists: ( getWalletLists: (
limit: number,
page: number, page: number,
with_deleted: boolean, limit: number,
order_field: any, sorting: any,
order_direction: any filter: any
) => Promise<{ data: WalletProps[]; totalCount: number } | undefined>; ) => Promise<{ data: WalletProps[]; totalCount: number } | undefined>;
} }
@ -81,8 +90,22 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorKey: 'amount' , accessorKey: 'id_wallet',
header: ({ column }) => <DataGridColumnHeader title="Wallet ID" column={column} />,
enableSorting: false,
enableHiding: true, // Hide this column from view but use it for filtering
meta: {
headerClassName: 'w-[200px]'
}
},
{
accessorKey: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
cell: ({ row }) => {
// Get currency code from the nested data structure if available
const currencyCode = row.original.balance_type?.currency?.code || 'USD';
return formatNumber(row.original.amount, currencyCode);
},
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -90,8 +113,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorKey: 'trx_count_today' , accessorKey: 'trx_count_today',
header: ({ column }) => <DataGridColumnHeader title="Transaction Count Today" column={column} />, header: ({ column }) => (
<DataGridColumnHeader title="Transaction Count Today" column={column} />
),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -99,8 +124,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
} }
}, },
{ {
accessorKey: 'amount_this_month' , accessorKey: 'amount_this_month',
header: ({ column }) => <DataGridColumnHeader title="Ammount This Month" column={column} />, header: ({ column }) => <DataGridColumnHeader title="Amount This Month" column={column} />,
cell: ({ row }) => {
// Get currency code from the nested data structure if available
const currencyCode = row.original.balance_type?.currency?.code || 'USD';
return formatNumber(row.original.amount_this_month, currencyCode);
},
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -109,16 +139,14 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}, },
{ {
accessorKey: 'CreatedAt', accessorKey: 'CreatedAt',
header: ({ column }) => ( header: ({ column }) => <DataGridColumnHeader title="Created At" column={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',
month: 'short', month: 'short',
year: 'numeric', year: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit'
}), }),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
@ -182,22 +210,54 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => { const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
try { try {
const sortField = 'CreatedAt'; const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
const sortDirection = 'ASC'; const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'ASC' : 'DESC') : 'DESC';
// Initialize filter object
let filterParams: any = {};
// Process filter array
if (Array.isArray(filter)) {
filter.forEach((f: any) => {
// Handle MSISDN search
if (f.id === 'msisdn' && f.value) {
filterParams.msisdn = { like: `%${f.value.toLowerCase()}%` };
}
// Handle date range filter
if (f.id === 'CreatedAt' && f.value?.from && f.value?.to) {
filterParams.created_at = {
from: `${f.value.from} 00:00:00`,
to: `${f.value.to} 23:59:59`
};
}
// Handle wallet ID filter
if (f.id === 'id_wallet' && f.value) {
filterParams.id_wallet = f.value;
}
});
}
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: sortField, order_field: sortField,
order_direction: sortDirection, order_direction: sortDirection,
// filter: JSON.stringify(filter) filter: JSON.stringify(filterParams)
}); });
if (!response || !response.data) {
console.warn('No data received:', response);
return { data: [], totalCount: 0 };
}
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) {
console.error('Error fetching Wallet', error); console.error('Error fetching Wallet', error);
return { data: [], totalCount: 0 };
} }
}; };
@ -221,7 +281,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
pagination={{ size: 10 }} pagination={{ size: 10 }}
toolbar={<ListToolbar />} toolbar={<ListToolbar />}
layout={{ card: true }} layout={{ card: true }}
// 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)