Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
unknown
@ -1,96 +1,74 @@
|
||||
import { useState, useContext, useEffect, useCallback, MouseEvent } from 'react';
|
||||
import { useState, useContext, useCallback, MouseEvent } from 'react';
|
||||
import { AccountUserProfileContext } from '../hooks';
|
||||
import { toast } from 'sonner';
|
||||
import { useAuthContext } from '@/auth';
|
||||
import { getAuth,useAuthContext } from '@/auth';
|
||||
import { KeenIcon } from '@/components';
|
||||
import clsx from 'clsx';
|
||||
|
||||
type PasswordType = 'password' | 'retype_password' | 'current_password';
|
||||
type PasswordType = 'current' | 'new' | 'retype';
|
||||
|
||||
const PinCode = () => {
|
||||
const { setPassword } = useContext(AccountUserProfileContext);
|
||||
const { getUser } = useAuthContext();
|
||||
const { setPincode } = useContext(AccountUserProfileContext);
|
||||
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [currentPassword, setCurrentPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [currentPincode, setCurrentPincode] = useState('');
|
||||
const [newPincode, setNewPincode] = useState('');
|
||||
const [retypePincode, setRetypePincode] = useState('');
|
||||
const [errorRetype, setErrorRetype] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [messagePassword, setMessagePassword] = useState(true);
|
||||
const [showPassword, setShowPassword] = useState({
|
||||
current_password: false,
|
||||
password: false,
|
||||
retype_password: false
|
||||
current: false,
|
||||
new: 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 user: any = await getUser();
|
||||
|
||||
if (!messagePassword) {
|
||||
toast.error('Passwords do not match!');
|
||||
if (newPincode !== retypePincode) {
|
||||
toast.error('New Pin Code and Retype Pin Code do not match.');
|
||||
setErrorRetype('New Pin Code and Retype Pin Code do not match.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
await setPassword({
|
||||
current_password: currentPassword,
|
||||
password: newPassword,
|
||||
retype_password: confirmPassword,
|
||||
username: user.data.username ?? ''
|
||||
await setPincode({
|
||||
currentpincode: currentPincode,
|
||||
newpincode: newPincode,
|
||||
retypepincode: retypePincode,
|
||||
});
|
||||
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setCurrentPassword('');
|
||||
setCurrentPincode('');
|
||||
setNewPincode('');
|
||||
setRetypePincode('');
|
||||
setErrorRetype(''); // Clear error after success
|
||||
} catch (error: any) {
|
||||
const errorMessage =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
'An error occurred while resetting the password.';
|
||||
'An error occurred while updating the pin code.';
|
||||
toast.error(errorMessage);
|
||||
} finally {
|
||||
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) => {
|
||||
event.preventDefault();
|
||||
setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
|
||||
}, []);
|
||||
const togglePassword = useCallback(
|
||||
(event: MouseEvent<HTMLButtonElement>, key: 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 (
|
||||
<div className="card pb-2.5">
|
||||
@ -98,91 +76,97 @@ const PinCode = () => {
|
||||
<h3 className="card-title">Pin Code</h3>
|
||||
</div>
|
||||
<div className="card-body grid gap-5">
|
||||
{/* Current Pin Code */}
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label max-w-56">Current Pin Code</label>
|
||||
<div className="input">
|
||||
<div className="input relative">
|
||||
<input
|
||||
type={showPassword.current_password ? 'text' : 'password'}
|
||||
className="form-control"
|
||||
className="form-control pr-10"
|
||||
placeholder="Current Pin Code"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
value={currentPincode}
|
||||
onChange={(e) => setCurrentPincode(e.target.value)}
|
||||
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
|
||||
icon="eye"
|
||||
className={clsx('text-gray-500', { hidden: showPassword.current_password })}
|
||||
/>
|
||||
<KeenIcon
|
||||
icon="eye-slash"
|
||||
className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
|
||||
icon={showPassword.current ? 'eye-slash' : 'eye'}
|
||||
className="text-gray-500"
|
||||
/>
|
||||
</button>
|
||||
</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">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
export * from './BasicSettings';
|
||||
export * from './Password';
|
||||
export * from './PinCode';
|
||||
|
||||
@ -2,8 +2,7 @@ import React, { createContext, useState } from 'react';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { toast } from 'sonner';
|
||||
import axios from 'axios';
|
||||
import { useAuthContext } from '@/auth';
|
||||
import { getAuth,useAuthContext } from '@/auth';
|
||||
|
||||
interface Password {
|
||||
password: string;
|
||||
@ -18,9 +17,17 @@ interface Profile {
|
||||
username: string;
|
||||
}
|
||||
|
||||
interface PinCodePayload {
|
||||
currentpincode: string;
|
||||
newpincode: string;
|
||||
retypepincode: string;
|
||||
}
|
||||
|
||||
interface ContextProps {
|
||||
password: Password | null;
|
||||
profile: Profile | null;
|
||||
pincode: PinCodePayload | null;
|
||||
setPincode: (pincode: PinCodePayload) => Promise<void>;
|
||||
setPassword: (password: Password) => Promise<void>;
|
||||
setProfile: (profile: Profile) => Promise<void>;
|
||||
}
|
||||
@ -28,39 +35,39 @@ interface ContextProps {
|
||||
const initialProps: ContextProps = {
|
||||
profile: null,
|
||||
password: null,
|
||||
pincode: null,
|
||||
setPassword: async () => {},
|
||||
setProfile: async () => {}
|
||||
setProfile: async () => {},
|
||||
setPincode: async () => {},
|
||||
};
|
||||
|
||||
const AccountUserProfileContext = createContext<ContextProps>(initialProps);
|
||||
|
||||
const API_URL = apiConfig.service_dashboard;
|
||||
const API_URL2 = apiConfig.service_customer;
|
||||
|
||||
const AccountUserProfileContextProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
/* state */
|
||||
const { login } = useAuthContext();
|
||||
const [profile, setProfile] = useState<Profile | null>(null);
|
||||
const [password, setPassword] = useState<Password | null>(null);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const [profile, setProfileState] = useState<Profile | null>(null);
|
||||
const [password, setPasswordState] = useState<Password | null>(null);
|
||||
const [pinCode, setPincodeState] = useState<PinCodePayload | null>(null);
|
||||
const [alert, setAlert] = useState({ show: false, 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) => {
|
||||
setPassword(newPassword);
|
||||
|
||||
const handleError = (error: any, defaultMessage: string) => {
|
||||
const errorMessage = error?.response?.data?.message || error?.message || defaultMessage;
|
||||
setAlert({ show: true, message: errorMessage });
|
||||
toast.error(errorMessage);
|
||||
};
|
||||
setPasswordState(newPassword);
|
||||
|
||||
try {
|
||||
const validate = await PostData(`${API_URL}/login`, {
|
||||
password: newPassword.current_password,
|
||||
username: newPassword.username
|
||||
username: newPassword.username,
|
||||
});
|
||||
|
||||
if (!validate || !validate.status) {
|
||||
@ -70,7 +77,7 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
|
||||
|
||||
const response = await PutData(`${API_URL}/user/update_password`, {
|
||||
password: newPassword.password,
|
||||
retype_password: newPassword.retype_password
|
||||
retype_password: newPassword.retype_password,
|
||||
});
|
||||
|
||||
if (response && response.status) {
|
||||
@ -85,19 +92,37 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
|
||||
|
||||
const handleSetProfile = async (newProfile: Profile) => {
|
||||
try {
|
||||
setProfile(newProfile);
|
||||
setProfileState(newProfile);
|
||||
|
||||
const response = await PutData(`${API_URL}/user/update_profile/`, {
|
||||
await PutData(`${API_URL}/user/update_profile/`, {
|
||||
name: newProfile.name,
|
||||
email: newProfile.email,
|
||||
username: newProfile.username
|
||||
username: newProfile.username,
|
||||
});
|
||||
|
||||
toast.success('Profile updated successfully.');
|
||||
} catch (error: any) {
|
||||
const errorMessage = error?.message || 'Failed to update Profile. Please try again.';
|
||||
setAlert({ show: true, message: errorMessage });
|
||||
toast.error(errorMessage);
|
||||
handleError(error, 'Failed to update profile. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
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={{
|
||||
password,
|
||||
profile,
|
||||
pincode: pinCode,
|
||||
setPassword: handleSetPassword,
|
||||
setProfile: handleSetProfile
|
||||
setProfile: handleSetProfile,
|
||||
setPincode: handleSetPinCode,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -24,7 +24,7 @@ import CloseIcon from '@mui/icons-material/Close';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { toast } from 'sonner';
|
||||
import { Container, DataGridProvider, LoaderTransparant } from '@/components';
|
||||
import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
|
||||
import { ListToolBar } from './ListToolbar';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { setgroups } from 'process';
|
||||
@ -54,16 +54,15 @@ const ManageGroups = () => {
|
||||
const [isReloading, setIsReloading] = useState(false);
|
||||
// const closeDialog = () => {
|
||||
// setIsDialogOpen(false);
|
||||
// setgroups(initGroup);
|
||||
// setgroups(initGroup);
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetchGroups();
|
||||
setLoading(false);
|
||||
fetchGroups();
|
||||
}, []);
|
||||
|
||||
async function fetchGroups(): Promise<void> {
|
||||
setIsReloading(true);
|
||||
try {
|
||||
let groups = await axios.get(`${BASE_URL}/groups/list`, {
|
||||
params: {
|
||||
@ -88,7 +87,7 @@ const ManageGroups = () => {
|
||||
alert(error.message);
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
// setLoading(false);
|
||||
setIsReloading(false);
|
||||
}
|
||||
}
|
||||
@ -150,6 +149,7 @@ const ManageGroups = () => {
|
||||
};
|
||||
|
||||
const handleYes = async () => {
|
||||
setIsReloading(true);
|
||||
try {
|
||||
if (dialogType === '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">
|
||||
{isReloading && (
|
||||
<div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
|
||||
<div className="bg-card flex items-center border shadow-sm rounded-md">
|
||||
<div className="flex flex-col items-center">
|
||||
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
|
||||
<span className="text-slate-500 font-medium">Refreshing data...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataGridLoader />
|
||||
// <div className="fixed inset-0 bg-white/25 flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
|
||||
// <div className="bg-card flex items-center border shadow-sm rounded-md">
|
||||
// <div className="flex flex-col items-center">
|
||||
// <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
|
||||
// <span className="text-slate-500 font-medium">Refreshing data...</span>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
)}
|
||||
<DataGridProvider
|
||||
data={dataGroup}
|
||||
|
||||
@ -51,13 +51,14 @@ const AddDialog = () => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (
|
||||
formField.module === '' ||
|
||||
formField.name === '' ||
|
||||
formField.link === '' ||
|
||||
formField.module.trim() === '' ||
|
||||
formField.name.trim() === '' ||
|
||||
formField.link.trim() === '' ||
|
||||
formField.order_number === 0 ||
|
||||
formField.status === ''
|
||||
formField.status.trim() === ''
|
||||
) {
|
||||
setAlert({ show: true, message: 'Please fill in all required fields.' });
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -89,16 +90,24 @@ const AddDialog = () => {
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleAddDialogChange = (open: boolean) => {
|
||||
handleAddDialog(open);
|
||||
|
||||
if(!open) {
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
setFormField({
|
||||
...initialState,
|
||||
status: formField.status // Pertahankan nilai status terpilih
|
||||
status: formField.status
|
||||
});
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
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">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Menu - Create</DialogTitle>
|
||||
|
||||
@ -368,7 +368,7 @@ const AddDialog = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button type="reset" variant="outline" onClick={() => setFormField(initialState)}>
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<div className="flex justify-end">
|
||||
|
||||
@ -73,7 +73,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
|
||||
},
|
||||
id: 'send',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Send" column={column} />,
|
||||
enableSorting: false,
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[200px]'
|
||||
@ -86,7 +86,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
headerClassName: 'w-[300px]'
|
||||
headerClassName: 'w-[350px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -22,6 +22,7 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
import { toast } from 'sonner';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import Swal from 'sweetalert2'; // ✅ IMPORT sweetalert2
|
||||
|
||||
const API_URL = apiConfig.transaction;
|
||||
|
||||
@ -63,34 +64,48 @@ const ApprovalDialog = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await PostData(`${API_URL}/transaction/set-approval`, {
|
||||
id_transaction: transactionDetails.id,
|
||||
notes: formField.notes,
|
||||
status: formField.status,
|
||||
pin: formField.pin,
|
||||
// ✅ TUTUP Dialog sebelum munculkan SweetAlert
|
||||
setShowApprovalDialog(false);
|
||||
|
||||
// ✅ TAMPILKAN SWEETALERT
|
||||
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) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: response?.message?.error?.message || 'Approval failed',
|
||||
if (result.isConfirmed) {
|
||||
// ✅ Kalau tekan YES, baru tembak API
|
||||
const response = await PostData(`${API_URL}/transaction/set-approval`, {
|
||||
id_transaction: transactionDetails.id,
|
||||
notes: formField.notes,
|
||||
status: formField.status,
|
||||
pin: formField.pin,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (response?.status) {
|
||||
setAlert({ show: false, message: '' });
|
||||
toast.success('Success Update Approval');
|
||||
const createActivity = {
|
||||
module: 'Approval Transaction',
|
||||
description: `Change status approve for transaction => ${transactionDetails.code}`,
|
||||
action: 'U',
|
||||
};
|
||||
doSaveLogActivity(createActivity);
|
||||
setShowApprovalDialog(false);
|
||||
reload();
|
||||
if (response?.status === false) {
|
||||
toast.error(response?.message?.error?.message || 'Approval failed');
|
||||
return;
|
||||
}
|
||||
|
||||
if (response?.status) {
|
||||
toast.success('Success Update Approval');
|
||||
const createActivity = {
|
||||
module: 'Approval Transaction',
|
||||
description: `Change status approve for transaction => ${transactionDetails.code}`,
|
||||
action: 'U',
|
||||
};
|
||||
doSaveLogActivity(createActivity);
|
||||
reload();
|
||||
}
|
||||
} else {
|
||||
setAlert({ show: true, message: response?.message });
|
||||
// ✅ Kalau tekan Cancel
|
||||
console.log('User cancelled');
|
||||
}
|
||||
},
|
||||
[formField, transactionDetails]
|
||||
@ -102,7 +117,7 @@ const ApprovalDialog = () => {
|
||||
transaction_code: '',
|
||||
notes: '',
|
||||
status: '',
|
||||
pin:''
|
||||
pin: ''
|
||||
});
|
||||
setTransactionDetails(null);
|
||||
setAlert({ show: false, message: '' });
|
||||
@ -171,7 +186,6 @@ const ApprovalDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center flex-wrap gap-2.5 mt-3 mb-3">
|
||||
|
||||
<label className="form-label max-w-56">PIN</label>
|
||||
<div className="grow">
|
||||
<Input
|
||||
|
||||
@ -125,7 +125,17 @@ const DetailApprovalTransaction = () => {
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500">Transaction Date</p>
|
||||
<p className="font-medium">{transactionDetails?.transaction_date}</p>
|
||||
</div>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">
|
||||
@ -485,38 +504,44 @@ const DetailApprovalTransaction = () => {
|
||||
<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">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 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 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>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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">
|
||||
<td className="px-4 py-2 font-medium">
|
||||
{(() => {
|
||||
let status;
|
||||
if (log.status === 'P') {
|
||||
status = 'PENDING';
|
||||
} else if (log.status === 'O') {
|
||||
status = 'ON PROCESS';
|
||||
} else if (log.status === 'F') {
|
||||
status = 'FAILED';
|
||||
} else if (log.status === 'C') {
|
||||
status = 'COMPLETE';
|
||||
}
|
||||
return status;
|
||||
})()}
|
||||
</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.response_date ?? '-'}</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>
|
||||
<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
|
||||
? 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.response_body}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
@ -607,7 +632,7 @@ const DetailApprovalTransaction = () => {
|
||||
<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">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 Code</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) => (
|
||||
<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.request_date}</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.request_date
|
||||
? 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.response_body}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
|
||||
|
||||
@ -45,8 +45,8 @@ const DetailTransaction = () => {
|
||||
id: selectedTransactionId
|
||||
});
|
||||
setTransactionDetails(response?.data);
|
||||
console.log(response?.data);
|
||||
console.log(selectedTransactionId);
|
||||
// console.log(response?.data);
|
||||
// console.log(selectedTransactionId);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
}
|
||||
@ -141,7 +141,20 @@ const DetailTransaction = () => {
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
@ -492,38 +515,44 @@ const DetailTransaction = () => {
|
||||
<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">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 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 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>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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">
|
||||
<td className="px-4 py-2 font-medium">
|
||||
{(() => {
|
||||
let status;
|
||||
if (log.status === 'P') {
|
||||
status = 'PENDING';
|
||||
} else if (log.status === 'O') {
|
||||
status = 'ON PROCESS';
|
||||
} else if (log.status === 'F') {
|
||||
status = 'FAILED';
|
||||
} else if (log.status === 'C') {
|
||||
status = 'COMPLETE';
|
||||
}
|
||||
return status;
|
||||
})()}
|
||||
</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.response_date ?? '-'}</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>
|
||||
<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
|
||||
? 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.response_body}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
@ -614,7 +643,7 @@ const DetailTransaction = () => {
|
||||
<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">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 Code</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) => (
|
||||
<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.request_date}</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.request_date
|
||||
? 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.response_body}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
|
||||
|
||||
@ -22,6 +22,15 @@ function useDebounce<T>(value: T, delay: number): T {
|
||||
return debouncedValue;
|
||||
}
|
||||
|
||||
const formatNumber = (num: number): string => {
|
||||
return num.toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
};
|
||||
|
||||
interface AccountProps {
|
||||
id: string;
|
||||
name: string;
|
||||
@ -147,6 +156,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
accessorFn: (row) => row.maximum_amount,
|
||||
id: 'maximum_amount',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />,
|
||||
cell: ({ row }) => formatNumber(row.original.maximum_amount),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
@ -155,6 +165,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
accessorFn: (row) => row.minimum_amount,
|
||||
id: 'minimum_amount',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />,
|
||||
cell: ({ row }) => formatNumber(row.original.minimum_amount),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
@ -165,6 +176,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader title="Max Transaction Per Day" column={column} />
|
||||
),
|
||||
cell: ({ row }) => formatNumber(row.original.max_transaction_per_day),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
|
||||
@ -1,40 +1,189 @@
|
||||
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 {
|
||||
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 { 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 (
|
||||
<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 w-[50%] gap-3 items-center">
|
||||
{/* <label className="input input-sm w-1/3">
|
||||
<div className="flex gap-3 items-center flex-wrap">
|
||||
<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" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Wallet"
|
||||
value={(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('msisdn')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search MSISDN"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
/>
|
||||
</label> */}
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
</label>
|
||||
|
||||
<div className="w-[220px]">
|
||||
<Select
|
||||
value={walletId}
|
||||
onValueChange={(value) => {
|
||||
setWalletId(value);
|
||||
}}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Wallet" />
|
||||
</SelectTrigger>
|
||||
<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 className="flex gap-3 items-center">
|
||||
<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" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
|
||||
@ -6,6 +6,16 @@ import { ColumnDef } from '@tanstack/react-table';
|
||||
import React, { createContext, useCallback, useMemo, useState } from 'react';
|
||||
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 {
|
||||
id: string;
|
||||
name: string;
|
||||
@ -23,11 +33,10 @@ interface ContextProps {
|
||||
handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
|
||||
selectedWallet: WalletProps | null;
|
||||
getWalletLists: (
|
||||
limit: number,
|
||||
page: number,
|
||||
with_deleted: boolean,
|
||||
order_field: any,
|
||||
order_direction: any
|
||||
limit: number,
|
||||
sorting: any,
|
||||
filter: any
|
||||
) => 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} />,
|
||||
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,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
@ -90,8 +113,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'trx_count_today' ,
|
||||
header: ({ column }) => <DataGridColumnHeader title="Transaction Count Today" column={column} />,
|
||||
accessorKey: 'trx_count_today',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader title="Transaction Count Today" column={column} />
|
||||
),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
@ -99,8 +124,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'amount_this_month' ,
|
||||
header: ({ column }) => <DataGridColumnHeader title="Ammount This Month" column={column} />,
|
||||
accessorKey: 'amount_this_month',
|
||||
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,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
@ -109,16 +139,14 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
},
|
||||
{
|
||||
accessorKey: 'CreatedAt',
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader title="Created At" column={column} />
|
||||
),
|
||||
cell: ({ row }) =>
|
||||
header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
|
||||
cell: ({ row }) =>
|
||||
new Date(row.original.CreatedAt).toLocaleString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
minute: '2-digit'
|
||||
}),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
@ -182,22 +210,54 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
|
||||
const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
|
||||
try {
|
||||
const sortField = 'CreatedAt';
|
||||
const sortDirection = 'ASC';
|
||||
|
||||
filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
|
||||
const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
|
||||
limit,
|
||||
page: page + 1,
|
||||
with_deleted: false,
|
||||
order_field: sortField,
|
||||
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);
|
||||
return { data: response?.data.list, totalCount: response?.data.total_count };
|
||||
} catch (error) {
|
||||
console.error('Error fetching Wallet', error);
|
||||
return { data: [], totalCount: 0 };
|
||||
}
|
||||
};
|
||||
|
||||
@ -221,7 +281,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolbar />}
|
||||
layout={{ card: true }}
|
||||
// sorting={[{ id: 'created_at', desc: true }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
getWalletLists(pageIndex, pageSize, sorting, columnFilters)
|
||||
|
||||
Reference in New Issue
Block a user