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

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

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-05-09 18:42:03 +07:00
parent 1944728c05 e783c9a00c
commit 1a08a8fd44
29 changed files with 2637 additions and 1689 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,12 +46,18 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState: {
name: string;
sucosId: number | null;
created_by: string;
created_at: string;
} = {
name: '', name: '',
sucosId: 0, sucosId: null,
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [errors, setErrors] = useState<Record<string, string>>({});
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -59,9 +65,32 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Aldeia Name' },
{ key: 'sucosId', label: 'Sucos ID' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const doCreateAldeias = useCallback( const doCreateAldeias = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -117,14 +146,12 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (formField.name === '' || formField.sucosId === 0) { setIsSubmitting(true);
setAlert({ show: true, message: 'Please fill in all required fields.' }); if (!validateForm()) {
setIsSubmitting(false);
return; return;
} }
doCreateAldeias(e); doCreateAldeias(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -169,12 +196,20 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Aldeia Name<span className="text-red-500">*</span> Aldeia Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col text-sm">
className="input" <Input
type="text" className="input"
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} value={formField.name}
/> onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
</div>
</div> </div>
</div> </div>
@ -183,46 +218,50 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos ID<span className="text-red-500">*</span> Sucos ID<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col text-sm">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button <PopoverTrigger asChild>
type="button" <button
className="input col-span-5 text-left" type="button"
style={{ color: 'inherit' }} className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{sucos.find((suco) => suco.id === formField.sucosId)?.name ||
'Select Sucos'}
</button>
</PopoverTrigger>
<PopoverContent
className="w-[400px] p-0"
onWheel={(e) => e.stopPropagation()}
> >
{sucos.find((suco) => suco.id === formField.sucosId)?.name || <Command>
'Select Sucos'} <CommandInput placeholder="Search Sucos..." />
</button> <CommandList>
</PopoverTrigger> <CommandEmpty>No Sucos found.</CommandEmpty>
<PopoverContent <CommandGroup>
className="w-[400px] p-0" {sucos.map((suco) => (
onWheel={(e) => e.stopPropagation()} <CommandItem
> key={suco.id}
<Command> value={suco.name}
<CommandInput placeholder="Search Sucos..." /> onSelect={() => {
<CommandList> setFormField({
<CommandEmpty>No Sucos found.</CommandEmpty> ...formField,
<CommandGroup> sucosId: suco.id
{sucos.map((suco) => ( });
<CommandItem setOpen(false);
key={suco.id} setErrors((prev) => ({ ...prev, sucosId: '' }));
value={suco.name} }}
onSelect={() => { >
setFormField({ {suco.name}
...formField, </CommandItem>
sucosId: suco.id ))}
}); </CommandGroup>
setOpen(false); </CommandList>
}} </Command>
> </PopoverContent>
{suco.name} </Popover>
</CommandItem> {errors.sucosId && <span className="text-red-500 text-sm">{errors.sucosId}</span>}
))} </div>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div> </div>
</div> </div>

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

@ -56,12 +56,35 @@ const EditDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Aldeia Name' },
{ key: 'sucosId', label: 'Sucos ID' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const doUpdateAldeias = useCallback( const doUpdateAldeias = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -139,15 +162,13 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name === '' || formField.sucosId === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doUpdateAldeias(e); doUpdateAldeias(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -212,12 +233,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Aldeia Name<span className="text-red-500">*</span> Aldeia Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className="input"
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} value={formField.name}
/> onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}} />
{errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
</div>
</div> </div>
</div> </div>
@ -226,6 +254,7 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos ID<span className="text-red-500">*</span> Sucos ID<span className="text-red-500">*</span>
</label> </label>
<div className='grow flex flex-col'>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
@ -253,6 +282,7 @@ const EditDialog = () => {
sucosId: suco.id sucosId: suco.id
}); });
setOpen(false); setOpen(false);
setErrors((prev) => ({ ...prev, sucosId: '' }));
}} }}
> >
{suco.name} {suco.name}
@ -262,7 +292,10 @@ const EditDialog = () => {
</CommandList> </CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
{errors.sucosId && <span className="text-red-500 text-sm">{errors.sucosId}</span>}
</div>
</div> </div>
</div> </div>

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

@ -41,10 +41,30 @@ const AddDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Municipio Name' }];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
}; };
const doCreateMunicipio = useCallback( const doCreateMunicipio = useCallback(
@ -82,16 +102,17 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '') { if(!validateForm()) {
setAlert({ show: true, message: 'Please fill name field.' }); setIsSubmitting(false);
return; return;
} }
doCreateMunicipio(e); doCreateMunicipio(e);
console.log(parsedUser.email); // console.log(parsedUser.email);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
const handleReset = () => { const handleReset = () => {
@ -133,21 +154,29 @@ const AddDialog = () => {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-wrap gap-2.5 text-sm">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Municipio Name<span className="text-red-500">*</span> Municipio Name<span className="text-red-500">*</span>
</label> </label>
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete='off'
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={({target})=>{
setFormField((prev) => ({...prev,name:target.value}))
if (target.value){
setErrors((prev)=> ({...prev,name: ''}))
}
}
}
/> />
{errors.name && <span className="text-red-500">{errors.name}</span>}
</div> </div>
</div> </div>
<div className="flex justify-end pt-2.5 gap-5"> <div className="flex justify-end pt-2.5 gap-5">
<Button variant={'outline'} type="reset" onClick={handleReset}> <Button variant={'outline'} type="reset" onClick={resetForm}>
Reset Reset
</Button> </Button>
<Button variant="default" type="submit" disabled={isSubmitting}> <Button variant="default" type="submit" disabled={isSubmitting}>

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

@ -44,9 +44,32 @@ const EditDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Municipio Name' }];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
}; };
const doUpdateMunicipios = useCallback( const doUpdateMunicipios = useCallback(
@ -73,7 +96,7 @@ const EditDialog = () => {
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
toast.error('Failed update user'); toast.error('Failed update municipios');
setAlert({ show: true, message: response?.message }); setAlert({ show: true, message: response?.message });
} }
} catch (error) { } catch (error) {
@ -85,6 +108,21 @@ const EditDialog = () => {
[selectedMunicipios, formField] [selectedMunicipios, formField]
); );
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
if(!validateForm()) {
setIsSubmitting(false);
return;
}
doUpdateMunicipios(e);
// console.log(parsedUser.email);
// console.log(formField);
// setAlert({ show: false, message: '' });
};
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); setIsLoading(true);
const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
@ -105,18 +143,18 @@ const EditDialog = () => {
setIsLoading(false); setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); // e.preventDefault();
if (formField.name.trim() === '') { // if (formField.name.trim() === '') {
setAlert({ show: true, message: 'Please fill name field.' }); // setAlert({ show: true, message: 'Please fill name field.' });
return; // return;
} // }
doUpdateMunicipios(e); // doUpdateMunicipios(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; // };
useEffect(() => { useEffect(() => {
if (selectedMunicipios) { if (selectedMunicipios) {
@ -170,21 +208,33 @@ const EditDialog = () => {
<p className="mt-4 text-gray-500">Loading Municipio Details...</p> <p className="mt-4 text-gray-500">Loading Municipio Details...</p>
</div> </div>
) : ( ) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Municipio Name<span className="text-red-500">*</span> Municipios Name
</label> <span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete="off"
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/> />
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="flex justify-end pt-2.5"> <div className="flex justify-end pt-2.5">
<Button variant="default" type="submit" disabled={isSubmitting}> <Button variant="default" type="submit" disabled={isSubmitting}>

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

@ -47,7 +47,7 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = { const initialState = {
name: '', name: '',
municipio_id: 0, municipio_id: 0,
@ -61,9 +61,32 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Postu Administrativo Name' },
{ key: 'municipio_id', label: 'Municipio Name' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
const value = formField[key as keyof typeof formField];
const isEmpty = value === '' || value === null || value === undefined || value === 0;
if (isEmpty) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const doCreatePostoAdm = useCallback( const doCreatePostoAdm = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -121,15 +144,12 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.municipio_id === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doCreatePostoAdm(e); doCreatePostoAdm(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -169,61 +189,78 @@ const AddDialog = () => {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Postu Administrativo Name<span className="text-red-500">*</span> Posto Administrativo Name
<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} autoComplete="off"
/> value={formField.name}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Municipio Name<span className="text-red-500">*</span> Municipio Name
<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button type="button" className="input col-span-5 text-left"> <PopoverTrigger asChild>
{municipios.find((municipio) => municipio.id === formField.municipio_id) <button
?.name || 'Select Municipio'} type="button"
</button> className={`input text-left ${errors.municipio_id ? 'border-red-500' : ''}`}
</PopoverTrigger> >
<PopoverContent {municipios.find((municipio) => municipio.id === formField.municipio_id)
className="w-[400px] p-0" ?.name || 'Select Municipio'}
onWheel={(e) => e.stopPropagation()} </button>
> </PopoverTrigger>
<Command> <PopoverContent
<CommandInput placeholder="Search Municipio..." /> className="w-[400px] p-0"
<CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto"> onWheel={(e) => e.stopPropagation()}
<CommandEmpty>No Municipio found.</CommandEmpty> >
<CommandGroup> <Command>
{municipios.map((municipio) => ( <CommandInput placeholder="Search Municipio..." />
<CommandItem <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
key={municipio.id} <CommandEmpty>No Municipio found.</CommandEmpty>
value={municipio.name} <CommandGroup>
onSelect={() => { {municipios.map((municipio) => (
setFormField({ <CommandItem
...formField, key={municipio.id}
municipio_id: municipio.id value={municipio.name}
}); onSelect={() => {
setOpen(false); setFormField({ ...formField, municipio_id: municipio.id });
}} setErrors((prev) => ({ ...prev, municipio_id: '' }));
> setOpen(false);
{municipio.name} }}
</CommandItem> >
))} {municipio.name}
</CommandGroup> </CommandItem>
</CommandList> ))}
</Command> </CommandGroup>
</PopoverContent> </CommandList>
</Popover> </Command>
</PopoverContent>
</Popover>
{errors.municipio_id && (
<span className="text-red-500 text-xs mt-1">{errors.municipio_id}</span>
)}
</div>
</div> </div>
</div> </div>

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

@ -45,7 +45,7 @@ const EditDialog = () => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [municipios, setMunicipios] = useState<MunicipioProps[]>([]); const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -62,7 +62,28 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Postu Administrativo Name' },
{ key: 'municipio_id', label: 'Municipio Name' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
const value = formField[key as keyof typeof formField];
const isEmpty = value === '' || value === null || value === undefined || value === 0;
if (isEmpty) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
}; };
const doUpdatePostoAdm = useCallback( const doUpdatePostoAdm = useCallback(
@ -147,15 +168,12 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.municipio_id === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doUpdatePostoAdm(e); doUpdatePostoAdm(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -218,57 +236,80 @@ const EditDialog = () => {
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 text-sm">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Postu Administrativo Name<span className="text-red-500">*</span> Postu Administrativo Name
<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} autoComplete="off"
/> value={formField.name}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Municipio Name<span className="text-red-500">*</span> Municipio Name
<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button type="button" className="input col-span-5 text-left"> <PopoverTrigger asChild>
{municipios.find((municipio) => municipio.id === formField.municipio_id) <button
?.name || 'Select Municipio'} type="button"
</button> className={`input text-left ${errors.municipio_id ? 'border-red-500' : ''}`}
</PopoverTrigger> >
<PopoverContent className="w-[400px] p-0"> {municipios.find(
<Command> (municipio) => municipio.id === formField.municipio_id
<CommandInput placeholder="Search Municipio..." /> )?.name || 'Select Municipio'}
<CommandList> </button>
<CommandEmpty>No Municipio found.</CommandEmpty> </PopoverTrigger>
<CommandGroup> <PopoverContent
{municipios.map((municipio) => ( className="w-[400px] p-0"
<CommandItem onWheel={(e) => e.stopPropagation()}
key={municipio.id} >
value={municipio.name} <Command>
onSelect={() => { <CommandInput placeholder="Search Municipio..." />
setFormField({ <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
...formField, <CommandEmpty>No Municipio found.</CommandEmpty>
municipio_id: municipio.id <CommandGroup>
}); {municipios.map((municipio) => (
setOpen(false); <CommandItem
}} key={municipio.id}
> value={municipio.name}
{municipio.name} onSelect={() => {
</CommandItem> setFormField({ ...formField, municipio_id: municipio.id });
))} setErrors((prev) => ({ ...prev, municipio_id: '' })); // Clear error
</CommandGroup> setOpen(false);
</CommandList> }}
</Command> >
</PopoverContent> {municipio.name}
</Popover> </CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{errors.municipio_id && (
<span className="text-red-500 text-xs mt-1">{errors.municipio_id}</span>
)}
</div>
</div> </div>
</div> </div>

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

@ -76,10 +76,40 @@ const AddDialog = () => {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Name' },
{ key: 'type', label: 'Type' },
{ key: 'code', label: 'Code' },
{ key: 'description', label: 'Description' },
{ key: 'price_point', label: 'Price Point' },
{ key: 'price_cash', label: 'Price Cash' },
{ key: 'cashback_point', label: 'Cashback Point' },
{ key: 'cashback_cash', label: 'Cashback Cash' },
{ key: 'status', label: 'Status' },
{ key: 'provider', label: 'Provider' },
{ key: 'process_on_third_party', label: 'Process On Third Party' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
}; };
const doCreateProduct = useCallback( const doCreateProduct = useCallback(
@ -136,28 +166,15 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if ( setIsSubmitting(true);
formField.name.trim() === '' || if (!validateForm()) {
formField.type.trim() === '' || setIsSubmitting(false);
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === null ||
formField.price_cash === null ||
formField.cashback_point === null ||
formField.cashback_cash === null ||
formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.created_by.trim() === '' ||
formField.created_at.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
doCreateProduct(e); doCreateProduct(e);
// console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -204,12 +221,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} value={formField.name}
/> onChange={(e) => {
setFormField({ ...formField, name: e.target.value });
if (e.target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
@ -218,12 +245,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.type ? 'border-red-500' : ''}`}
value={formField.type} type="text"
onChange={(e) => setFormField({ ...formField, type: e.target.value })} value={formField.type}
/> onChange={(e) => {
setFormField({ ...formField, type: e.target.value });
if (e.target.value) {
setErrors((prev) => ({ ...prev, type: '' }));
}
}}
/>
{errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span>
)}
</div>
</div> </div>
</div> </div>
@ -232,12 +269,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Code<span className="text-red-500">*</span> Code<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.code ? 'border-red-500' : ''}`}
value={formField.code} type="text"
onChange={(e) => setFormField({ ...formField, code: e.target.value })} value={formField.code}
/> onChange={(e) => {
setFormField({ ...formField, code: e.target.value });
if (e.target.value) {
setErrors((prev) => ({ ...prev, code: '' }));
}
}}
/>
{errors.code && (
<span className="text-red-500 text-xs mt-1">{errors.code}</span>
)}
</div>
</div> </div>
</div> </div>
@ -246,12 +293,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.description ? 'border-red-500' : ''}`}
value={formField.description} type="text"
onChange={(e) => setFormField({ ...formField, description: e.target.value })} value={formField.description}
/> onChange={(e) => {
setFormField({ ...formField, description: e.target.value });
if (e.target.value) {
setErrors((prev) => ({ ...prev, description: '' }));
}
}}
/>
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div>
</div> </div>
</div> </div>
@ -260,20 +317,28 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span> Price Point<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.price_point ?? ''} className={`input ${errors.price_point ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.price_point ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
price_point: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); price_point: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Price Point" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, price_point: '' }));
}
}}
placeholder="Enter Price Point"
/>
{errors.price_point && (
<span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
)}
</div>
</div> </div>
</div> </div>
@ -282,20 +347,28 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span> Price Cash<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.price_cash ?? ''} className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.price_cash ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
price_cash: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); price_cash: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Price Cash" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, price_cash: '' }));
}
}}
placeholder="Enter Price Cash"
/>
{errors.price_cash && (
<span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
)}
</div>
</div> </div>
</div> </div>
@ -304,20 +377,28 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span> Cashback Point<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.cashback_point ?? ''} className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.cashback_point ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
cashback_point: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); cashback_point: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Cashback Point" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, cashback_point: '' }));
}
}}
placeholder="Enter Cashback Point"
/>
{errors.cashback_point && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
)}
</div>
</div> </div>
</div> </div>
@ -326,20 +407,28 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span> Cashback Cash<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.cashback_cash ?? ''} className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.cashback_cash ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
cashback_cash: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Cashback Cash" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, cashback_cash: '' }));
}
}}
placeholder="Enter Cashback Cash"
/>
{errors.cashback_cash && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
)}
</div>
</div> </div>
</div> </div>
@ -348,44 +437,62 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.status} <Select
onValueChange={(value) => setFormField({ ...formField, status: value })} value={formField.status}
> onValueChange={(value) => {
<SelectTrigger> setFormField({ ...formField, status: value });
<SelectValue placeholder="Select Status" /> setErrors((prev) => ({ ...prev, status: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="Y">Yes</SelectItem> <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectItem value="N">No</SelectItem> <SelectValue placeholder="Select Status" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Provider</label> <label className="form-label flex items-center gap-1 max-w-56">
<Select Provider<span className="text-red-500">*</span>
value={formField.provider} </label>
onValueChange={(value) => <div className="grow flex flex-col">
setFormField({ ...formField, provider: value.toString() }) <Select
} value={formField.provider}
> onValueChange={(value) => {
<SelectTrigger> setFormField({ ...formField, provider: value.toString() });
<SelectValue placeholder="Select Provider" /> setErrors((prev) => ({ ...prev, provider: '' }));
</SelectTrigger> }}
<SelectContent> >
{providers.map((provider) => ( <SelectTrigger
<SelectItem className={`input ${errors.provider ? 'border-red-500' : ''}`}
key={provider.provider_id} >
value={provider.provider_id.toString()} <SelectValue placeholder="Select Provider" />
> </SelectTrigger>
{provider.provider_name} <SelectContent>
</SelectItem> {providers.map((provider) => (
))} <SelectItem
</SelectContent> key={provider.provider_id}
</Select> value={provider.provider_id.toString()}
>
{provider.provider_name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.provider && (
<span className="text-red-500 text-xs mt-1">{errors.provider}</span>
)}
</div>
</div> </div>
</div> </div>
@ -394,20 +501,30 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Process on Third Party<span className="text-red-500">*</span> Process on Third Party<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.process_on_third_party} <Select
onValueChange={(value) => value={formField.process_on_third_party}
setFormField({ ...formField, process_on_third_party: value }) onValueChange={(value) => {
} setFormField({ ...formField, process_on_third_party: value });
> setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
<SelectTrigger> }}
<SelectValue placeholder="Select Status" /> >
</SelectTrigger> <SelectTrigger
<SelectContent> className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}
<SelectItem value="Y">Yes</SelectItem> >
<SelectItem value="N">No</SelectItem> <SelectValue placeholder="Select Status" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
{errors.process_on_third_party && (
<span className="text-red-500 text-xs mt-1">
{errors.process_on_third_party}
</span>
)}
</div>
</div> </div>
</div> </div>

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

@ -81,7 +81,37 @@ const EditDialog = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const[errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [
{key:'name', label: 'Name'},
{key:'type', label: 'Type'},
{key:'code', label: 'Code'},
{key:'description', label: 'Description'},
{key:'price_point', label: 'Price Point'},
{key:'price_cash', label: 'Price Cash'},
{key:'cashback_point', label: 'Cashback Point'},
{key:'cashback_cash', label: 'Cashback Cash'},
{key:'status', label: 'Status'},
{key:'provider', label: 'Provider'},
{key:'process_on_third_party', label: 'Process On Third Party'}
]
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
}
const doUpdateProduct = useCallback( const doUpdateProduct = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -164,29 +194,14 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if ( if (!validateForm()) {
formField.name.trim() === '' || setIsSubmitting(false);
formField.type.trim() === '' ||
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === null ||
formField.price_cash === null ||
formField.cashback_point === null ||
formField.cashback_cash === null ||
formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.updated_by.trim() === '' ||
formField.updated_at.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
doUpdateProduct(e); doUpdateProduct(e);
// console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -245,72 +260,102 @@ const EditDialog = () => {
</div> </div>
) : ( ) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> {/* Name */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Name<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Name<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={(e) => {
setFormField({ ...formField, name: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
}}
/> />
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Type */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Type<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.type ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.type} value={formField.type}
onChange={(e) => setFormField({ ...formField, type: e.target.value })} onChange={(e) => {
setFormField({ ...formField, type: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, type: '' }));
}}
/> />
{errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Code */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Code<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Code<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.code ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.code} value={formField.code}
onChange={(e) => setFormField({ ...formField, code: e.target.value })} onChange={(e) => {
setFormField({ ...formField, code: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, code: '' }));
}}
/> />
{errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Description */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Description<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.description ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.description} value={formField.description}
onChange={(e) => onChange={(e) => {
setFormField({ ...formField, description: e.target.value }) setFormField({ ...formField, description: e.target.value });
} if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
}}
/> />
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Price Point */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Price Point<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.price_point ? 'border-red-500' : ''}`}
value={formField.price_point ?? ''} value={formField.price_point ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -318,21 +363,29 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
price_point: values.floatValue !== undefined ? values.floatValue : '' price_point: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_point: '' }));
}} }}
placeholder="Enter Price Point" placeholder="Enter Price Point"
/> />
{errors.price_point && (
<span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Price Cash */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Price Cash<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
value={formField.price_cash ?? ''} value={formField.price_cash ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -340,21 +393,29 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
price_cash: values.floatValue !== undefined ? values.floatValue : '' price_cash: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_cash: '' }));
}} }}
placeholder="Enter Price Cash" placeholder="Enter Price Cash"
/> />
{errors.price_cash && (
<span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Cashback Point */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Cashback Point<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
value={formField.cashback_point ?? ''} value={formField.cashback_point ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -362,21 +423,29 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
cashback_point: values.floatValue !== undefined ? values.floatValue : '' cashback_point: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_point: '' }));
}} }}
placeholder="Enter Cashback Point" placeholder="Enter Cashback Point"
/> />
{errors.cashback_point && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Cashback Cash */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Cashback Cash<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
value={formField.cashback_cash ?? ''} value={formField.cashback_cash ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -384,24 +453,35 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
cashback_cash: values.floatValue !== undefined ? values.floatValue : '' cashback_cash: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_cash: '' }));
}} }}
placeholder="Enter Cashback Cash" placeholder="Enter Cashback Cash"
/> />
{errors.cashback_cash && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Status */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Status<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(e) => setFormField({ ...formField, status: e })} onValueChange={(e) => {
setFormField({ ...formField, status: e });
setErrors((prev) => ({ ...prev, status: '' }));
}}
> >
<SelectTrigger> <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select a Status" /> <SelectValue placeholder="Select a Status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -409,44 +489,63 @@ const EditDialog = () => {
<SelectItem value="N">Inactive</SelectItem> <SelectItem value="N">Inactive</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Provider */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Provider <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Provider
</label>
<div className="grow flex flex-col">
<Select <Select
value={formField.provider} value={formField.provider}
onValueChange={(e) => setFormField({ ...formField, provider: e })} onValueChange={(e) => {
setFormField({ ...formField, provider: e });
setErrors((prev) => ({ ...prev, provider: '' }));
}}
> >
<SelectTrigger> <SelectTrigger className={`input ${errors.provider ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select a Provider" /> <SelectValue placeholder="Select a Provider" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{providers.map((provider) => ( {providers.map((provider) => (
<SelectItem key={provider.provider_id} value={provider.provider_id}> <SelectItem
key={provider.provider_id}
value={provider.provider_id.toString()}
>
{provider.provider_name} {provider.provider_name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
{errors.provider && (
<span className="text-red-500 text-xs mt-1">{errors.provider}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {/* Process on Third Party */}
<label className="form-label flex items-center gap-1 max-w-56"> <div className="w-full">
Process on Third Party<span className="text-red-500">*</span> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
</label> <label className="form-label flex items-center gap-1 max-w-56">
Process on Third Party<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select <Select
value={formField.process_on_third_party} value={formField.process_on_third_party}
onValueChange={(value) => onValueChange={(value) => {
setFormField({ ...formField, process_on_third_party: value }) setFormField({ ...formField, process_on_third_party: value });
} setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
}}
> >
<SelectTrigger> <SelectTrigger className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select Status" /> <SelectValue placeholder="Select Status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -454,20 +553,25 @@ const EditDialog = () => {
<SelectItem value="N">No</SelectItem> <SelectItem value="N">No</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.process_on_third_party && (
<span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span>
)}
</div> </div>
</div> </div>
<div className="flex justify-end gap-5">
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Save Changes'
)}
</Button>
</div>
</div> </div>
</form>
<div className="flex justify-end gap-5">
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Save Changes'
)}
</Button>
</div>
</div>
</form>
)} )}
</div> </div>
</DialogBody> </DialogBody>

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

@ -273,8 +273,6 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
getProductsLists getProductsLists
}} }}
> >
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider <DataGridProvider
columns={columns} columns={columns}
pagination={{ size: 10 }} pagination={{ size: 10 }}

51
src/pages/master/profession/blocks/AddDialog.tsx
View File

@ -29,7 +29,7 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = { const initialState = {
name: '', name: '',
created_by: '', created_by: '',
@ -40,9 +40,31 @@ const AddDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Profession Name' }];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const doCreateProfession = useCallback( const doCreateProfession = useCallback(
@ -81,15 +103,13 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (!formField.name.trim()) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill name field.' }); setIsSubmitting(false);
return; return;
} }
doCreateProfession(e); doCreateProfession(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -130,12 +150,21 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<div className='grow flex flex-col'>
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete='off'
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={({ target }) => {
/> setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}} />
{errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
</div>
</div> </div>
</div> </div>

42
src/pages/master/profession/blocks/EditDialog.tsx
View File

@ -38,12 +38,29 @@ const EditDialog = () => {
updated_at: '' updated_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Profession Name' }];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const doUpdateProfession = useCallback( const doUpdateProfession = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -101,14 +118,13 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (formField.name.trim() === '') { setIsSubmitting(true);
setAlert({ show: true, message: 'Please fill name field.' }); if (!validateForm()) {
setIsSubmitting(false);
return; return;
} }
doUpdateProfession(e); doUpdateProfession(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -169,12 +185,22 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete="off"
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/> />
{errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
</div>
</div> </div>
</div> </div>

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

@ -63,7 +63,31 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' },
{ key: 'type', label: 'Type' },
{ key: 'status', label: 'Status' },
{ key: 'transaction_type', label: 'Transaction Type' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const initialState: { const initialState: {
name: string; name: string;
description: string; description: string;
@ -92,7 +116,7 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const doCreateProvider = useCallback( const doCreateProvider = useCallback(
@ -130,21 +154,13 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if ( if (!validateForm()) {
formField.name.trim() === '' || setIsSubmitting(false);
formField.description.trim() === '' ||
formField.type.trim() === '' ||
formField.status.trim() === '' ||
formField.transaction_type === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
// console.log(formField);
doCreateProvider(e); doCreateProvider(e);
setAlert({ show: false, message: '' });
}; };
const getTransactionTypeList = async (sorting: any) => { const getTransactionTypeList = async (sorting: any) => {
@ -225,12 +241,20 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} value={formField.name}
/> onChange={(e) => {
setFormField({ ...formField, name: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
@ -239,12 +263,20 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.description ? 'border-red-500' : ''}`}
value={formField.description} type="text"
onChange={(e) => setFormField({ ...formField, description: e.target.value })} value={formField.description}
/> onChange={(e) => {
setFormField({ ...formField, description: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
}}
/>
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div>
</div> </div>
</div> </div>
@ -253,38 +285,53 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.type} <Select
onValueChange={(value) => setFormField({ ...formField, type: value })} value={formField.type}
> onValueChange={(e) => {
<SelectTrigger> setFormField({ ...formField, type: e });
<SelectValue placeholder="Select Type" /> setErrors((prev) => ({ ...prev, type: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="h2h">Host to Host</SelectItem> <SelectTrigger className={`input ${errors.type ? 'border-red-500' : ''}`}>
<SelectItem value="agent">Agent</SelectItem> <SelectValue placeholder="Select Type" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="user">User</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
{errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span>
)}
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.status} <Select
onValueChange={(value) => setFormField({ ...formField, status: value })} value={formField.status}
> onValueChange={(e) => {
<SelectTrigger> setFormField({ ...formField, status: e });
<SelectValue placeholder="Select Status" /> setErrors((prev) => ({ ...prev, status: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="Y">Active</SelectItem> <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectItem value="N">Inactive</SelectItem> <SelectValue placeholder="Select Status" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div> </div>
</div> </div>
@ -293,23 +340,31 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Transaction Type<span className="text-red-500">*</span> Transaction Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.transaction_type} <Select
onValueChange={(value) => value={formField.transaction_type}
setFormField({ ...formField, transaction_type: value }) onValueChange={(e) => {
} setFormField({ ...formField, transaction_type: e });
> setErrors((prev) => ({ ...prev, transaction_type: '' }));
<SelectTrigger> }}
<SelectValue placeholder="Select Transaction Type" /> >
</SelectTrigger> <SelectTrigger
<SelectContent> className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
{transactions.map((transaction) => ( >
<SelectItem key={transaction.id} value={transaction.id}> <SelectValue placeholder="Select Transaction Type" />
{transaction.name} </SelectTrigger>
</SelectItem> <SelectContent>
))} {transactions.map((transaction) => (
</SelectContent> <SelectItem key={transaction.id} value={transaction.id}>
</Select> {transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="text-red-500 text-xs mt-1">{errors.transaction_type}</span>
)}
</div>
</div> </div>
</div> </div>

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

@ -53,7 +53,31 @@ const EditDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' },
{ key: 'type', label: 'Type' },
{ key: 'status', label: 'Status' },
{ key: 'transaction_type', label: 'Transaction Type' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const initialState: { const initialState: {
name: string; name: string;
description: string; description: string;
@ -81,7 +105,7 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const doUpdateProvider = useCallback( const doUpdateProvider = useCallback(
@ -177,22 +201,14 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if ( if (!validateForm()) {
formField.name.trim() === '' || setIsSubmitting(false);
formField.description.trim() === '' ||
formField.type.trim() === '' ||
formField.status.trim() === '' ||
formField.transaction_type.trim() === '' ||
formField.agent === null
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
doUpdateProvider(e); doUpdateProvider(e);
// console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -258,30 +274,43 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={({ target }) => value={formField.name}
setFormField((prev) => ({ ...prev, name: target.value })) onChange={({ target }) => {
} setFormField((prev) => ({ ...prev, name: target.value }));
/> if (target.value) setErrors((prev) => ({ ...prev, name: '' }));
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
{/* Description */}
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.description ? 'border-red-500' : ''}`}
value={formField.description} type="text"
onChange={(e) => value={formField.description}
setFormField({ ...formField, description: e.target.value }) onChange={(e) => {
} setFormField({ ...formField, description: e.target.value });
/> if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
}}
/>
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div>
</div> </div>
</div> </div>
@ -290,18 +319,26 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.type} <Select
onValueChange={(value) => setFormField({ ...formField, type: value })} value={formField.type}
> onValueChange={(value) => {
<SelectTrigger> setFormField({ ...formField, type: value });
<SelectValue placeholder="Select Type" /> setErrors((prev) => ({ ...prev, type: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="h2h">Host to Host</SelectItem> <SelectTrigger className={`input ${errors.type ? 'border-red-500' : ''}`}>
<SelectItem value="agent">Agent</SelectItem> <SelectValue placeholder="Select Type" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
{errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span>
)}
</div>
</div> </div>
</div> </div>
@ -310,18 +347,28 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.status} <Select
onValueChange={(value) => setFormField({ ...formField, status: value })} value={formField.status}
> onValueChange={(value) => {
<SelectTrigger> setFormField({ ...formField, status: value });
<SelectValue placeholder="Select Status" /> setErrors((prev) => ({ ...prev, status: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="Y">Active</SelectItem> <SelectTrigger
<SelectItem value="N">Inactive</SelectItem> className={`input ${errors.status ? 'border-red-500' : ''}`}
</SelectContent> >
</Select> <SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div> </div>
</div> </div>
@ -330,23 +377,33 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Transaction Type<span className="text-red-500">*</span> Transaction Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.transaction_type} <Select
onValueChange={(value) => value={formField.transaction_type}
setFormField({ ...formField, transaction_type: value }) onValueChange={(value) => {
} setFormField({ ...formField, status: value });
> setErrors((prev) => ({ ...prev, status: '' }));
<SelectTrigger className="min-h-[40px] items-center"> }}
<SelectValue placeholder="Select Transaction Type" /> >
</SelectTrigger> <SelectTrigger
<SelectContent> className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
{transactions.map((transaction) => ( >
<SelectItem key={transaction.id} value={transaction.id}> <SelectValue placeholder="Select Transaction Type" />
{transaction.name} </SelectTrigger>
</SelectItem> <SelectContent>
))} {transactions.map((transaction) => (
</SelectContent> <SelectItem key={transaction.id} value={transaction.id}>
</Select> {transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="text-red-500 text-xs mt-1">
{errors.transaction_type}
</span>
)}
</div>
</div> </div>
</div> </div>

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

@ -46,12 +46,18 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState: {
name: string;
postoId: number | null;
created_by: string;
created_at: string;
} = {
name: '', name: '',
postoId: 0, postoId: null,
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [errors, setErrors] = useState<Record<string, string>>({});
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const created_time = new Date(); const created_time = new Date();
@ -59,7 +65,31 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Sucos Name' },
{ key: 'postoId', label: 'Posto Administrativo Name' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
}; };
const doCreateSucos = useCallback( const doCreateSucos = useCallback(
@ -97,15 +127,14 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.postoId === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doCreateSucos(e); doCreateSucos(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -168,12 +197,23 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos Name<span className="text-red-500">*</span> Sucos Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} autoComplete="off"
/> value={formField.name}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
@ -182,42 +222,48 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Postu Administrativo ID<span className="text-red-500">*</span> Postu Administrativo ID<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button type="button" className="input col-span-5 text-left"> <PopoverTrigger asChild>
{posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId) <button type="button" className="input col-span-5 text-left">
?.PostoAdms_name || 'Select Postu Administrativo'} {posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId)
</button> ?.PostoAdms_name || 'Select Postu Administrativo'}
</PopoverTrigger> </button>
<PopoverContent </PopoverTrigger>
className="w-[400px] p-0" <PopoverContent
onWheel={(e) => e.stopPropagation()} className="w-[400px] p-0"
> onWheel={(e) => e.stopPropagation()}
<Command> >
<CommandInput placeholder="Search Postu Administrativo..." /> <Command>
<CommandList> <CommandInput placeholder="Search Postu Administrativo..." />
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty> <CommandList>
<CommandGroup> <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
{posto_adms.map((posto) => ( <CommandGroup>
<CommandItem {posto_adms.map((posto) => (
key={posto.PostoAdms_id} <CommandItem
value={posto.PostoAdms_name} key={posto.PostoAdms_id}
onSelect={() => { value={posto.PostoAdms_name}
setFormField({ onSelect={() => {
...formField, setFormField({
postoId: posto.PostoAdms_id ...formField,
}); postoId: posto.PostoAdms_id
setOpen(false); });
}} setOpen(false);
> setErrors((prev) => ({ ...prev, postoId: '' }));
{posto.PostoAdms_name} }}
</CommandItem> >
))} {posto.PostoAdms_name}
</CommandGroup> </CommandItem>
</CommandList> ))}
</Command> </CommandGroup>
</PopoverContent> </CommandList>
</Popover> </Command>
</PopoverContent>
</Popover>
{errors.postoId && (
<span className="text-red-500 text-xs mt-1">{errors.postoId}</span>
)}
</div>
{/* <Input {/* <Input
className="input" className="input"
type="number" type="number"

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

@ -43,12 +43,12 @@ const EditDialog = () => {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]); const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
const [errors, setErrors] = useState<Record<string, string>>({});
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState = {
name: '', name: '',
postoId: 0, postoId: 0,
@ -62,12 +62,31 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ setErrors({});
show: false,
message: ''
});
}; };
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Sucos Name' },
{ key: 'postoId', label: 'Posto Administrativo Name' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
}
const doUpdateSucos = useCallback( const doUpdateSucos = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -144,15 +163,15 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.postoId === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
// console.log('Form Field before update:', formField); // console.log('Form Field before update:', formField);
doUpdateSucos(e); doUpdateSucos(e);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -217,12 +236,24 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos Name<span className="text-red-500">*</span> Sucos Name<span className="text-red-500">*</span>
</label> </label>
<div className='grow flex flex-col'>
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete='off'
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={({ target }) => {
/> setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>

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

@ -17,6 +17,7 @@ import { toast } from 'sonner';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { set } from 'date-fns';
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_dashboard;
@ -74,7 +75,7 @@ const AddDialog = () => {
}); });
const [selectMenus, setSelectMenus] = useState<string[]>([]); const [selectMenus, setSelectMenus] = useState<string[]>([]);
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [errors, setErrors] = useState<Record<string, string>>({});
/* actions */ /* actions */
const handleCheckboxChange = useCallback((key: string) => { const handleCheckboxChange = useCallback((key: string) => {
setSelectMenus((prev) => setSelectMenus((prev) =>
@ -82,21 +83,48 @@ const AddDialog = () => {
); );
}, []); }, []);
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => { const resetForm = () => {
setFormField(() => ({ name: '' })); setFormField(() => ({ name: '' }));
setAlert({ show: false, message: '' }); setErrors(() => ({}));
setSelectMenus([]); setSelectMenus([]);
}; };
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Position Name' }];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
if (!validateForm()) {
setIsSubmitting(false);
return;
}
doCreatePosition(e);
};
const doCreatePosition = useCallback( const doCreatePosition = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (formField.name.trim() === '') {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
const response = await PostData(`${API_URL}/user_role/create`, { const response = await PostData(`${API_URL}/user_role/create`, {
name: formField.name, name: formField.name,
roles: selectMenus, roles: selectMenus,
@ -150,29 +178,29 @@ const AddDialog = () => {
Close Close
</Button> </Button>
</div> </div>
{alert.show && (
<div className="absolute top-5 left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]">
<Alert variant="danger">
<h3>{alert.message}</h3>
</Alert>
</div>
)}
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable-y py-0 mb-5 ps-0 pe-3 -me-7" ref={parentRef}> <DialogBody className="scrollable-y py-0 mb-5 ps-0 pe-3 -me-7" ref={parentRef}>
<div className="flex flex-col items-stretch grow gap-5 lg:gap-7.5"> <div className="flex flex-col items-stretch grow gap-5 lg:gap-7.5">
<form action="" onSubmit={doCreatePosition}> <form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Name</label> <label className="form-label flex items-center gap-1 max-w-56">
<Input Name <span className="text-danger">*</span>
className="input" </label>
type="text" <div className="grow flex flex-col">
value={formField.name} <Input
onChange={({ target }) => className={`input ${errors.name ? 'border-danger' : ''}`}
setFormField((prev) => ({ ...prev, name: target.value })) type="text"
} value={formField.name}
/> onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
{errors.name && (
<span className="text-red-500 text-sm mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>

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

@ -35,7 +35,7 @@ const DeleteDialog = () => {
return; return;
} }
const response = await DeleteData( const response = await DeleteData(
`${API_URL}/user_role/delete/${selectedPosition.id}/${enforce}`, `${API_URL}/user_role/delete/${selectedPosition.id}/false`,
{ {
id: selectedPosition.id id: selectedPosition.id
} }
@ -65,7 +65,7 @@ const DeleteDialog = () => {
<Alert variant="warning"> <Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3> <h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">you will delete this data!</span> <span className="text-sm">you will delete this data!</span>
<div className="mt-2 flex items-center gap-x-2"> {/* <div className="mt-2 flex items-center gap-x-2">
<label className="form-label max-w-56">Hard Delete</label> <label className="form-label max-w-56">Hard Delete</label>
<EnforceSwitch <EnforceSwitch
enforce={enforce} enforce={enforce}
@ -73,7 +73,7 @@ const DeleteDialog = () => {
setEnforce(e.target.checked); setEnforce(e.target.checked);
}} }}
/> />
</div> </div> */}
</Alert> </Alert>
{alert.show && ( {alert.show && (
<Alert variant="danger"> <Alert variant="danger">

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

@ -81,7 +81,35 @@ const EditDialog = () => {
name: '', name: '',
status: '' status: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Position Name' }];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
if (!validateForm()) {
setIsSubmitting(false);
return;
}
doEditPosition(e);
};
/* actions */ /* actions */
const handleCheckboxChange = useCallback((key: string) => { const handleCheckboxChange = useCallback((key: string) => {
setSelectMenus((prev) => setSelectMenus((prev) =>
@ -94,11 +122,6 @@ const EditDialog = () => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true); setIsSubmitting(true);
if (formField.name.trim() === '') {
setAlert((prev) => ({ ...prev, show: true, message: 'Please fill name field.' }));
return;
}
if (!selectedPosition) { if (!selectedPosition) {
toast.success('Please Select Position'); toast.success('Please Select Position');
return; return;
@ -164,29 +187,32 @@ const EditDialog = () => {
<KeenIcon icon="cross" className="text-1.5xl" /> <KeenIcon icon="cross" className="text-1.5xl" />
</div> </div>
</div> </div>
{alert.show && ( {/* {alert.show && (
<div className="absolute left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]"> <div className="absolute left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]">
<Alert variant="danger"> <Alert variant="danger">
<h3>{alert.message}</h3> <h3>{alert.message}</h3>
</Alert> </Alert>
</div> </div>
)} )} */}
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0"> <div className="flex flex-col px-0">
<form action="" onSubmit={doEditPosition}> <form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0"> <div className="card-body grid gap-5 p-0">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Name</label> <label className="form-label flex items-center gap-1 max-w-56">Name</label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={errors.name ? 'border-red-500' : ''}
value={formField.name} type="text"
onChange={({ target }) => value={formField.name}
setFormField((prev) => ({ ...prev, name: target.value })) onChange={({ target }) =>
} setFormField((prev) => ({ ...prev, name: target.value }))
/> }
/>
{errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
</div>
</div> </div>
</div> </div>

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

@ -34,31 +34,12 @@ import { toast } from 'sonner';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import clsx from 'clsx'; import clsx from 'clsx';
import {
export interface CustomerProps { CustomerProps,
id: string; initialStateCreateUser,
msisdn: string; RoleListProps,
email: string; validateFormCreateUser
fullname: string; } from './Types';
username: string;
}
interface RoleListProps {
id: string;
name: string;
roles: string;
status: string;
}
interface CreateUserParams {
email: string;
username: string;
password: string;
retype_password: string;
name: string;
id_role: string;
status: string;
}
const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_dashboard;
@ -71,34 +52,30 @@ const AddDialog = () => {
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PostData, GetData } = useCallApi(); const { PostData, GetData } = useCallApi();
const [roles, setRoles] = useState<RoleListProps[]>([]); const [roles, setRoles] = useState<RoleListProps[]>([]);
const [alert, setAlert] = useState({ const [errors, setErrors] = useState<Record<string, string>>({});
show: false,
message: '' const [formField, setFormField] = useState(initialStateCreateUser);
});
const initialState = {
email: '',
username: '',
password: '',
retype_password: '',
name: '',
id_role: '',
status: '',
customerid: ''
};
const [formField, setFormField] = useState(initialState);
const [showPassword, setShowPassword] = useState({ const [showPassword, setShowPassword] = useState({
password: false, password: false,
retype_password: false retype_password: false
}); });
const [searchTerm, setSearchTerm] = useState('');
const [selectedCustomerName, setSelectedCustomerName] = useState('');
const [dropdownOpen, setDropdownOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const [messagePassword, setMessagePassword] = useState(true); const [messagePassword, setMessagePassword] = useState(true);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [passwordErrors, setPasswordErrors] = useState<string[]>([]); const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
const [notMatch, setNotMatch] = useState<string[]>([]);
const validatePassword = (password: string, confirmPassword: string) => { const validatePassword = (password: string, confirmPassword: string) => {
const errors: string[] = []; const errors: string[] = [];
const notMatch: string[] = [];
if (password) { if (password) {
if (password.length < 8) { if (password.length < 8) {
@ -114,25 +91,29 @@ const AddDialog = () => {
errors.push('Password must contain at least one special character'); errors.push('Password must contain at least one special character');
} }
if (password !== confirmPassword) { if (password !== confirmPassword) {
errors.push('Passwords do not match'); notMatch.push('Passwords do not match');
} }
} }
return { return {
isValid: errors.length === 0, isValid: errors.length === 0,
errors errors,
notMatch
}; };
}; };
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialStateCreateUser);
setAlert({ show: false, message: '' }); setSelectedCustomerName('');
setSearchTerm('');
setErrors({});
}; };
/* actions */ /* actions */
const doCreateUser = useCallback( const doCreateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
try { try {
const response = await PostData(`${API_URL}/user/create`, formField); const response = await PostData(`${API_URL}/user/create`, formField);
@ -150,8 +131,7 @@ const AddDialog = () => {
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
toast.success('Success Create User'); toast.success('Success Create User');
} else { } else {
toast.error('Failed to create user'); toast.error(response?.message);
setAlert({ show: true, message: 'Failed to create user. Please try again.' });
} }
} catch (err) { } catch (err) {
toast.error('Something went wrong'); toast.error('Something went wrong');
@ -175,80 +155,112 @@ const AddDialog = () => {
}) })
}; };
const response = await GetData(`${API_URL}/user_role/list`, params); const response = await GetData(`${API_URL}/user_role/list`, params);
// console.log('ini data:', response);
if (response?.status) { if (response?.status) {
const roleList = response.data?.list || []; const roleList = response.data?.list || [];
setRoles(roleList); setRoles(roleList);
} else { } else {
setRoles(() => []); setRoles(() => []);
} }
// console.log('ini data user_role:', response?.data);
}, []); }, []);
const getCustomerList = async (sorting: any) => { const getCustomerList = async (sorting: any, filterValue: string) => {
try { const filter: any =
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } };
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
setCustomers(response?.data.list); sorting = sorting.length == 0 ? [{ id: 'created_at', desc: false }] : sorting;
const query: any = {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
};
if (filter && Object.keys(filter).length > 0) {
query.filter = JSON.stringify(filter);
}
try {
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
if (response?.status) {
setCustomers(response?.data.list);
} else {
toast.error(response?.message);
}
} catch (error) { } catch (error) {
console.error('Error fetching customer', error); toast.error('Failed to fetch customer list');
} finally {
setIsLoading(false);
} }
}; };
const handleCustomerSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setIsLoading(true);
setSearchTerm(e.target.value);
setSelectedCustomerName(e.target.value);
setDropdownOpen(true);
const timer = setTimeout(() => {
getCustomerList([{ id: 'fullname', desc: false }], e.target.value);
}, 500);
return () => clearTimeout(timer);
};
const handleCustomerSelect = (customer: CustomerProps) => {
setFormField({ ...formField, customerid: customer.id });
setSelectedCustomerName(customer.fullname);
setDropdownOpen(false);
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (isSubmitting) return;
if (!validateFormCreateUser(formField, setErrors, 'create')) {
return;
}
doCreateUser(e);
};
const isButtonDisabled = !messagePassword || isSubmitting || passwordErrors.length > 0;
const filteredCustomer = customers
.filter((item) => item.fullname.toLowerCase().includes(searchTerm.toLowerCase()))
.slice(0, 10);
useEffect(() => { useEffect(() => {
fetchRoles(); fetchRoles();
}, [fetchRoles]); }, [fetchRoles]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// console.log('Form data before submit:', formField);
if (isSubmitting) return;
if (
formField.email.trim() === '' ||
formField.username.trim() === '' ||
formField.password.trim() === '' ||
formField.retype_password.trim() === '' ||
formField.name.trim() === '' ||
formField.id_role.trim() === '' ||
formField.status.trim() === '' ||
formField.customerid.trim() === ''
) {
setAlert({ show: true, message: 'Please fill name field.' });
return;
}
setIsSubmitting(true);
doCreateUser(e);
// console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => { useEffect(() => {
const validation = validatePassword(formField.password, formField.retype_password); const validation = validatePassword(formField.password, formField.retype_password);
setMessagePassword(validation.isValid); setMessagePassword(validation.isValid);
setPasswordErrors(validation.errors); setPasswordErrors(validation.errors);
setNotMatch(validation.notMatch);
}, [formField.password, formField.retype_password]); }, [formField.password, formField.retype_password]);
const isButtonDisabled = !messagePassword || isSubmitting || passwordErrors.length > 0;
useEffect(() => { useEffect(() => {
if (showAddDialog === false) { if (showAddDialog === false) {
resetForm(); resetForm();
setDropdownOpen(false);
} }
}, [showAddDialog]); }, [showAddDialog]);
useEffect(() => { useEffect(() => {
getCustomerList([{ id: 'id', desc: false }]); getCustomerList([{ id: 'created_at', desc: false }], '');
const handleClickOutside = (event: any) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setDropdownOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []); }, []);
const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => { const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
@ -258,14 +270,13 @@ const AddDialog = () => {
return ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-10 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0"> <DialogHeader className="p-0 border-0">
<DialogTitle></DialogTitle> <DialogTitle></DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
<div className="flex items-center justify-between flex-wrap grow"> <div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900">User - Create</h1> <h1 className="text-xl font-semibold leading-none text-gray-900">User - Create</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div> </div>
<div <div
className="cursor-pointer hover:opacity-100 opacity-50" className="cursor-pointer hover:opacity-100 opacity-50"
@ -278,249 +289,255 @@ const AddDialog = () => {
</div> </div>
</div> </div>
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0">
{alert.show && (
<Alert variant="danger" className="mb-3">
<h3>{alert.message}</h3>
</Alert>
)}
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Name</label>
<Input
className="input"
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</div>
</div>
<div className="w-full"> <DialogBody className="scrollable-y p-5 pb-0" ref={parentRef}>
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <form onSubmit={handleSubmit} className="grid gap-5">
<label className="form-label flex items-center gap-1 max-w-56">Username</label> {/* Name */}
<Input <div className="flex gap-2.5">
className="input" <label className="form-label flex items-center gap-1 max-w-56">Name</label>
type="text" <div className="grow flex flex-col">
autoComplete="off" <Input
value={formField.username} className={`input ${errors.name ? 'border-red-500' : ''}`}
onChange={({ target }) => type="text"
setFormField((prev) => ({ ...prev, username: target.value })) autoComplete="off"
} value={formField.name}
/> onChange={({ target }) => {
</div> setFormField((prev) => ({ ...prev, name: target.value }));
</div> setErrors((prev) => ({ ...prev, name: '' }));
}}
<div className="w-full"> />
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> {errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
<label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left flex justify-between"
style={{ color: 'inherit' }}
>
<span>
{customers.find((customer) => customer.id === formField.customerid)
?.username || 'Select Customer'}
</span>
<ChevronDown className="w-4 h-4 opacity-70" />
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Customer..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customerid: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Email</label>
<Input
className="input"
type="email"
autoComplete="off"
value={formField.email}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, email: target.value }))
}
/>
</div>
</div>
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Role</label>
<div className="grow">
<Select
value={formField.id_role}
onValueChange={(id_role) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, id_role }));
}, 0);
// console.log('Role selected:', value);`
}}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
{roles.map((role, idx) => (
<SelectItem value={role.id} key={role.id}>
{role.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Status</label>
<div className="grow">
<Select
value={formField.status}
onValueChange={(status) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, status }));
}, 0);
}}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Non Active</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Password</label>
<div className="input">
<input
className="form-control"
type={showPassword.password ? 'text' : 'password'}
value={formField.password}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, password: target.value }))
}
/>
<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>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Confirm Password
</label>
<div className="w-full">
<div className="input block">
<input
className="form-control"
autoComplete="off"
type={showPassword.retype_password ? 'text' : 'password'}
value={formField.retype_password}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, retype_password: target.value }))
}
/>
<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 className="w-full">
{passwordErrors.length > 0 && (
<div className="text-xs text-red-500 mt-2">
{passwordErrors.map((error, index) => (
<p key={index}>{error}</p>
))}
</div>
)}
</div>
</div>
</div>
</div>
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary" type="submit" disabled={isButtonDisabled}>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</div> </div>
</form> </div>
</div>
{/* Username */}
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Username</label>
<div className="grow flex flex-col">
<Input
className={`input ${errors.username ? 'border-red-500' : ''}`}
type="text"
autoComplete="off"
value={formField.username}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, username: target.value }));
setErrors((prev) => ({ ...prev, username: '' }));
}}
/>
{errors.username && (
<span className="text-red-500 text-xs mt-1">{errors.username}</span>
)}
</div>
</div>
{/* Customer */}
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<div className="grow flex flex-col" ref={dropdownRef}>
<Input
id="customer"
type="text"
value={selectedCustomerName || searchTerm}
onChange={handleCustomerSearch}
placeholder="Search Customer"
onClick={() => setDropdownOpen(true)}
className={`input ${errors.customerid ? 'border-red-500' : ''}`}
/>
{dropdownOpen && (
<div className="absolute z-10 w-[60%] mt-11 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
{filteredCustomer.length > 0 ? (
filteredCustomer.map((item) => (
<div
key={item.id}
className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
onClick={() => handleCustomerSelect(item)}
>
{item.fullname}
</div>
))
) : (
<div className="px-4 py-2 text-gray-500">
{isLoading ? 'Loading...' : 'No results found'}
</div>
)}
</div>
)}
{errors.customerid && (
<span className="text-red-500 text-xs mt-1">{errors.customerid}</span>
)}
</div>
</div>
{/* Email */}
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Email</label>
<div className="grow flex flex-col">
<Input
className={`input ${errors.email ? 'border-red-500' : ''}`}
type="email"
autoComplete="off"
value={formField.email}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, email: target.value }));
setErrors((prev) => ({ ...prev, email: '' }));
}}
/>
{errors.email && <span className="text-red-500 text-xs mt-1">{errors.email}</span>}
</div>
</div>
{/* Role */}
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Role</label>
<div className="grow flex flex-col">
<Select
value={formField.id_role}
onValueChange={(id_role) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, id_role }));
setErrors((prev) => ({ ...prev, id_role: '' }));
}, 0);
}}
>
<SelectTrigger className={errors.id_role ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
{roles.map((role) => (
<SelectItem value={role.id} key={role.id}>
{role.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.id_role && (
<span className="text-red-500 text-xs mt-1">{errors.id_role}</span>
)}
</div>
</div>
{/* Status */}
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Status</label>
<div className="grow flex flex-col">
<Select
value={formField.status}
onValueChange={(status) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, status }));
setErrors((prev) => ({ ...prev, status: '' }));
}, 0);
}}
>
<SelectTrigger className={errors.status ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Non Active</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div>
{/* Password */}
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Password</label>
<div className="grow flex flex-col">
<div className="input">
<input
className={`w-full ${errors.password ? 'border-red-500' : ''}`}
type={showPassword.password ? 'text' : 'password'}
value={formField.password}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, password: target.value }));
setErrors((prev) => ({ ...prev, 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>
{passwordErrors.length > 0 && (
<div className="text-xs text-red-500 mt-2">
{passwordErrors.map((error, index) => (
<p key={index}>{error}</p>
))}
</div>
)}
{errors.password && (
<span className="text-red-500 text-xs mt-1">{errors.password}</span>
)}
</div>
</div>
{/* Confirm Password */}
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Confirm Password
</label>
<div className="grow flex flex-col">
<div className="input">
<input
className={`form-control w-full ${passwordErrors.length > 0 ? 'border-red-500' : ''}`}
type={showPassword.retype_password ? 'text' : 'password'}
autoComplete="off"
value={formField.retype_password}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, retype_password: target.value }));
setErrors((prev) => ({ ...prev, retype_password: '' }));
}}
/>
<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>
{notMatch.length > 0 && (
<div className="text-xs text-red-500 mt-2">
{notMatch.map((error, index) => (
<p key={index}>{error}</p>
))}
</div>
)}
{errors.retype_password && (
<span className="text-red-500 text-xs mt-1">{errors.retype_password}</span>
)}
</div>
</div>
{/* Submit Button */}
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary" type="submit" disabled={isButtonDisabled}>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</form>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

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

@ -31,7 +31,7 @@ const DeleteDialog = () => {
/* actions */ /* actions */
const doDeleteData = useCallback(async () => { const doDeleteData = useCallback(async () => {
const response = await DeleteData(`${API_URL}/user/delete/${selectedUser}/${enforce}`, { const response = await DeleteData(`${API_URL}/user/delete/${selectedUser}/false`, {
id: selectedUser id: selectedUser
}); });
// console.log('Delete Response User:', response); // console.log('Delete Response User:', response);

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

@ -23,7 +23,6 @@ import {
DialogHeader, DialogHeader,
DialogTitle DialogTitle
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { CustomerProps } from './AddDialog';
import { useUserContext } from '../hooks'; import { useUserContext } from '../hooks';
import { ChevronDown } from 'lucide-react'; import { ChevronDown } from 'lucide-react';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@ -33,25 +32,16 @@ import { Alert, KeenIcon, useDataGrid } from '@/components';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import {
interface RoleListProps { CustomerProps,
id: string; initialStateCreateUser,
name: string; RoleListProps,
status: string; validateFormCreateUser
} } from './Types';
const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL = apiConfig.service_dashboard; const API_URL = apiConfig.service_dashboard;
const initialState = {
name: '',
username: '',
email: '',
id_role: '',
status: '',
customerid: ''
};
const EditDialog = () => { const EditDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
const { showEditDialog, selectedUser, handleEditDialog } = useUserContext(); const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
@ -61,16 +51,22 @@ const EditDialog = () => {
const [roles, setRoles] = useState<RoleListProps[]>([]); const [roles, setRoles] = useState<RoleListProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [alert, setAlert] = useState({ const [isFetching, setIsFetching] = useState(false);
show: false,
message: ''
});
const [formField, setFormField] = useState(initialState); const [errors, setErrors] = useState<Record<string, string>>({});
const [searchTerm, setSearchTerm] = useState('');
const [selectedCustomerName, setSelectedCustomerName] = useState('');
const [dropdownOpen, setDropdownOpen] = useState(false);
const [isLoadingCustomer, setIsLoadingCustomer] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const [formField, setFormField] = useState(initialStateCreateUser);
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialStateCreateUser);
setAlert({ show: false, message: '' }); setSelectedCustomerName('');
setSearchTerm('');
setErrors({});
}; };
/* actions */ /* actions */
@ -79,15 +75,8 @@ const EditDialog = () => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true); setIsSubmitting(true);
if ( if (!validateFormCreateUser(formField, setErrors, 'update')) {
!formField.name.trim() || setIsSubmitting(false);
!formField.username.trim() ||
!formField.email.trim() ||
!formField.id_role ||
!formField.status ||
!formField.customerid
) {
setAlert({ show: true, message: 'Please fill all required field' });
return; return;
} }
@ -109,7 +98,7 @@ const EditDialog = () => {
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message })); toast.error(response?.message);
} }
} catch (error) { } catch (error) {
toast.error('Something went wrong, please try again.'); toast.error('Something went wrong, please try again.');
@ -131,35 +120,48 @@ const EditDialog = () => {
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
}); });
// console.log('User ID_ROLE:', response?.data.id_role);
// console.log('Role: ', response?.data.list);
setRoles(response?.data.list); setRoles(response?.data.list);
} catch (error) { } catch (error) {
console.error('Error fetching role', error); console.error('Error fetching role', error);
} }
}, []); }, []);
const getCustomerList = async (sorting: any) => { const getCustomerList = async (sorting: any, filterValue: string) => {
try { const filter: any =
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } };
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('CUSTOMER: ', response?.data); sorting = sorting.length == 0 ? [{ id: 'created_at', desc: false }] : sorting;
setCustomers(response?.data.list);
const query: any = {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
};
if (filter && Object.keys(filter).length > 0) {
query.filter = JSON.stringify(filter);
}
try {
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
if (response?.status) {
setCustomers(response?.data.list);
} else {
toast.error(response?.message);
}
} catch (error) { } catch (error) {
console.error('Error fetching customer', error); toast.error('Failed to fetch customer list');
} finally {
setIsLoadingCustomer(false);
} }
}; };
const doFetchUserData = useCallback(async (id: string) => { const doFetchUserData = useCallback(async (id: string) => {
setIsFetching(true);
const response = await GetData(`${API_URL}/user/detail/${id}`, { id }); const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
// console.log('User detail response:', response?.data);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
@ -171,44 +173,71 @@ const EditDialog = () => {
status: response.data.status, status: response.data.status,
customerid: response.data.customer?.id || '' customerid: response.data.customer?.id || ''
})); }));
// console.log('Customer ID from API:', response?.data.customerid);
} else { } else {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
name: '', name: '',
username: '', username: '',
email: '', email: '',
id_role: '0', id_role: '',
status: '', status: '',
customerid: '' customerid: ''
})); }));
} }
// console.log('Fetched ID Role:', response?.data.id_role); setIsFetching(false);
}, []); }, []);
const handleCustomerSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setIsLoadingCustomer(true);
setSearchTerm(e.target.value);
setSelectedCustomerName(e.target.value);
setDropdownOpen(true);
const timer = setTimeout(() => {
getCustomerList([{ id: 'fullname', desc: false }], e.target.value);
}, 500);
return () => clearTimeout(timer);
};
const handleCustomerSelect = (customer: CustomerProps) => {
setFormField({ ...formField, customerid: customer.id });
setSelectedCustomerName(customer.fullname);
setDropdownOpen(false);
};
const filteredCustomer = customers
.filter((item) => item.fullname.toLowerCase().includes(searchTerm.toLowerCase()))
.slice(0, 10);
useEffect(() => { useEffect(() => {
if (showEditDialog === false) { if (showEditDialog === false) {
resetForm(); resetForm();
setDropdownOpen(false);
} }
}, [showEditDialog]); }, [showEditDialog]);
useEffect(() => { useEffect(() => {
const fetchAllData = async () => { getCustomerList([{ id: 'created_at', desc: false }], '');
await getCustomerList([{ id: 'id', desc: false }]); doFetchUserRole([{ id: 'name', desc: false }]);
await doFetchUserRole([{ id: 'name', desc: false }]); }, []);
if (selectedUser) {
await doFetchUserData(selectedUser); useEffect(() => {
if (selectedUser) {
doFetchUserData(selectedUser);
}
}, [selectedUser]);
useEffect(() => {
const handleClickOutside = (event: any) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setDropdownOpen(false);
} }
}; };
fetchAllData(); document.addEventListener('mousedown', handleClickOutside);
}, [selectedUser]); return () => {
document.removeEventListener('mousedown', handleClickOutside);
// console.log('ini role: ', roles); };
// useEffect(() => { }, []);
// console.log('Selected User ID Role:', formField.id_role);
// // console.log('Available Roles:', roles);
// }, [formField.id_role, roles]);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@ -231,160 +260,184 @@ const EditDialog = () => {
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0"> <div className="flex flex-col px-0">
{alert.show && ( {isFetching ? (
<Alert variant="danger"> <div className="flex flex-col items-center justify-center p-8">
<h3>{alert.message}</h3> <div className="animate-pulse flex space-x-4 w-full">
</Alert> <div className="flex-1 space-y-4 py-1">
)} <div className="h-4 bg-gray-200 rounded w-3/4"></div>
<form onSubmit={doUpdateUser}> <div className="space-y-2">
<div className="card-body grid gap-5 p-0"> <div className="h-4 bg-gray-200 rounded"></div>
<div className="w-full"> <div className="h-4 bg-gray-200 rounded w-5/6"></div>
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> </div>
</div>
</div>
<p className="mt-4 text-gray-500">Loading User Details...</p>
</div>
) : (
<form onSubmit={doUpdateUser}>
<div className="card-body grid gap-5 p-0">
<div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Name</label> <label className="form-label flex items-center gap-1 max-w-56">Name</label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={({ target }) => autoComplete="off"
setFormField((prev) => ({ ...prev, name: target.value })) value={formField.name}
} onChange={({ target }) => {
/> setFormField((prev) => ({ ...prev, name: target.value }));
setErrors((prev) => ({ ...prev, name: '' }));
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div>
<div className="w-full"> {/* Username */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Username</label> <label className="form-label flex items-center gap-1 max-w-56">Username</label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.username ? 'border-red-500' : ''}`}
value={formField.username} type="text"
onChange={({ target }) => autoComplete="off"
setFormField((prev) => ({ ...prev, username: target.value })) value={formField.username}
} onChange={({ target }) => {
/> setFormField((prev) => ({ ...prev, username: target.value }));
setErrors((prev) => ({ ...prev, username: '' }));
}}
/>
{errors.username && (
<span className="text-red-500 text-xs mt-1">{errors.username}</span>
)}
</div>
</div> </div>
</div>
<div className="w-full"> {/* Customer */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Customer</label> <label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col" ref={dropdownRef}>
<PopoverTrigger asChild> <Input
<button id="customer"
type="button" type="text"
className="input col-span-5 text-left flex justify-between" value={selectedCustomerName || searchTerm}
style={{ color: 'inherit' }} onChange={handleCustomerSearch}
> placeholder="Search Customer"
<span> onClick={() => setDropdownOpen(true)}
{customers.find((customer) => customer.id === formField.customerid) className={`input ${errors.customerid ? 'border-red-500' : ''}`}
?.username || 'Select Customer'} />
</span> {dropdownOpen && (
<ChevronDown className="w-4 h-4 opacity-70" /> <div className="absolute z-10 w-[60%] mt-11 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
</button> {filteredCustomer.length > 0 ? (
</PopoverTrigger> filteredCustomer.map((item) => (
<PopoverContent className="w-[400px] p-0"> <div
<Command> key={item.id}
<CommandInput placeholder="Search Customer..." /> className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
<CommandList onClick={() => handleCustomerSelect(item)}
className="max-h-[300px] overflow-y-auto" >
style={{ touchAction: 'pan-y' }} {item.fullname}
onWheel={(e) => { </div>
e.currentTarget.scrollTop += e.deltaY; ))
}} ) : (
> <div className="px-4 py-2 text-gray-500">
<CommandEmpty>No Customer found.</CommandEmpty> {isLoadingCustomer ? 'Loading...' : 'No results found'}
<CommandGroup> </div>
{customers.map((customer) => ( )}
<CommandItem </div>
key={customer.id} )}
value={customer.username} {errors.customerid && (
onSelect={() => { <span className="text-red-500 text-xs mt-1">{errors.customerid}</span>
setFormField({ )}
...formField, </div>
customerid: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div> </div>
</div>
<div className="w-full"> {/* Email */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Email</label> <label className="form-label flex items-center gap-1 max-w-56">Email</label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="email" className={`input ${errors.email ? 'border-red-500' : ''}`}
value={formField.email} type="email"
onChange={({ target }) => autoComplete="off"
setFormField((prev) => ({ ...prev, email: target.value })) value={formField.email}
} onChange={({ target }) => {
/> setFormField((prev) => ({ ...prev, email: target.value }));
setErrors((prev) => ({ ...prev, email: '' }));
}}
/>
{errors.email && (
<span className="text-red-500 text-xs mt-1">{errors.email}</span>
)}
</div>
</div> </div>
</div>
<div className="w-full"> {/* Role */}
<div className="flex items-center flex-wrap gap-2.5"> <div className="flex gap-2.5">
<label className="form-label max-w-56">Role</label> <label className="form-label flex items-center gap-1 max-w-56">Role</label>
<div className="grow flex flex-col">
<div className="grow">
<Select <Select
value={formField.id_role} value={formField.id_role}
onValueChange={(id_role) => { onValueChange={(id_role) => {
// console.log('Role changed to:', id_role); setTimeout(() => {
setFormField((prev) => ({ ...prev, id_role })); setFormField((prev) => ({ ...prev, id_role }));
setErrors((prev) => ({ ...prev, id_role: '' }));
}, 0);
}} }}
> >
<SelectTrigger> <SelectTrigger className={errors.id_role ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{roles.map((role, idx) => ( {roles.map((role) => (
<SelectItem value={role.id} key={role.id}> <SelectItem value={role.id} key={role.id}>
{role.name} {role.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
{errors.id_role && (
<span className="text-red-500 text-xs mt-1">{errors.id_role}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="flex items-center flex-wrap gap-2.5"> {/* Status */}
<label className="form-label max-w-56">Status</label> <div className="flex gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Status</label>
<div className="grow flex flex-col">
<Select
value={formField.status}
onValueChange={(status) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, status }));
setErrors((prev) => ({ ...prev, status: '' }));
}, 0);
}}
>
<SelectTrigger className={errors.status ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Non Active</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div>
<div className="grow"> <div className="flex justify-end pt-2.5">
<Select <Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
value={formField.status} {isSubmitting ? 'Saving...' : 'Save Changes'}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))} </Button>
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Non Active</SelectItem>
</SelectContent>
</Select>
</div> </div>
</div> </div>
</form>
<div className="flex justify-end pt-2.5"> )}
<Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
</div>
</div>
</form>
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

91
src/pages/settings/user/manage-user/blocks/Types.ts Normal file
View File

@ -0,0 +1,91 @@
import { toast } from 'sonner';
export interface CustomerProps {
id: string;
msisdn: string;
email: string;
fullname: string;
username: string;
}
export interface RoleListProps {
id: string;
name: string;
roles: string;
status: string;
}
export interface CreateUserParams {
email: string;
username: string;
password: string;
retype_password: string;
name: string;
id_role: string;
status: string;
}
export const initialStateCreateUser: {
email: string;
username: string;
password: string;
retype_password: string;
name: string;
id_role: string;
status: string;
customerid: string;
} = {
email: '',
username: '',
password: '',
retype_password: '',
name: '',
id_role: '',
status: '',
customerid: ''
};
export const validateFormCreateUser = (
formField: typeof initialStateCreateUser,
setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>,
mode: 'create' | 'update' = 'create'
) => {
const requiredFields =
mode === 'create'
? [
{ key: 'name', label: 'Name' },
{ key: 'username', label: 'Username' },
{ key: 'email', label: 'Email' },
{ key: 'customerid', label: 'Customer ID' },
{ key: 'id_role', label: 'Role' },
{ key: 'status', label: 'Status' },
{ key: 'password', label: 'Password' },
{ key: 'retype_password', label: 'Retype Password' }
]
: [
{ key: 'name', label: 'Name' },
{ key: 'username', label: 'Username' },
{ key: 'customerid', label: 'Customer ID' },
{ key: 'email', label: 'Email' },
{ key: 'id_role', label: 'Role' },
{ key: 'status', label: 'Status' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
if (
formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};

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

@ -232,8 +232,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
handleDeleteDialog handleDeleteDialog
}} }}
> >
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider <DataGridProvider
columns={columns} columns={columns}
pagination={{ size: 10 }} pagination={{ size: 10 }}

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

@ -95,22 +95,27 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
}, },
{ {
accessorKey: 'origin_customer.fullname', accessorKey: 'origin_customer.fullname',
header: ({ column }) => <DataGridColumnHeader title="Origin Customer Full Name" column={column} />, header: ({ column }) => (
<DataGridColumnHeader title="Origin Customer Full Name" column={column} />
),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[250px]', headerClassName: 'w-[250px]'
}, },
cell: ({ row }) => row.original.origin_customer?.fullname ?? ''
}, },
{ {
accessorFn: (row) => { accessorFn: (row) => {
const purchase = row?.purchase?.destination_customer.fullname; const purchase = row?.purchase?.destination_customer?.fullname;
const transfer = row?.transfer?.destination_customer.fullname; const transfer = row?.transfer?.destination_customer?.fullname;
return purchase ?? transfer ?? "-"; return purchase ?? transfer ?? "";
}, },
id: 'destination_customer.fullname', id: 'destination_customer.fullname',
header: ({ column }) => <DataGridColumnHeader title="Destination Customer Full Name" column={column} />, header: ({ column }) => (
<DataGridColumnHeader title="Destination Customer Full Name" column={column} />
),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {

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

@ -113,22 +113,27 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}, },
{ {
accessorKey: 'origin_customer.fullname', accessorKey: 'origin_customer.fullname',
header: ({ column }) => <DataGridColumnHeader title="Origin Customer Full Name" column={column} />, header: ({ column }) => (
<DataGridColumnHeader title="Origin Customer Full Name" column={column} />
),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
headerClassName: 'w-[250px]' headerClassName: 'w-[250px]'
} },
cell: ({ row }) => row.original.origin_customer?.fullname ?? ''
}, },
{ {
accessorFn: (row) => { accessorFn: (row) => {
const purchase = row?.purchase?.destination_customer.fullname; const purchase = row?.purchase?.destination_customer?.fullname;
const transfer = row?.transfer?.destination_customer.fullname; const transfer = row?.transfer?.destination_customer?.fullname;
return purchase ?? transfer ?? "-"; return purchase ?? transfer ?? "";
}, },
id: 'destination_customer.fullname', id: 'destination_customer.fullname',
header: ({ column }) => <DataGridColumnHeader title="Destination Customer Full Name" column={column} />, header: ({ column }) => (
<DataGridColumnHeader title="Destination Customer Full Name" column={column} />
),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { meta: {
@ -228,7 +233,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
cell: (data) => { cell: (data) => {
const row = data.row.original; const row = data.row.original;
const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false; const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
return ( return (
<div key={`actions-${row.id}`}> <div key={`actions-${row.id}`}>

1
src/pages/transfer/transferfee/blocks/AddDialog.tsx
View File

@ -90,6 +90,7 @@ const AddFeeDialog = () => {
id: customer.id, id: customer.id,
name: customer.username name: customer.username
})); }));
const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = { const initialState = {
name: '', name: '',
description: '', description: '',

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

@ -482,6 +482,7 @@ const AddDialog = () => {
<SelectItem value="DA">Disbursment Agent</SelectItem> <SelectItem value="DA">Disbursment Agent</SelectItem>
<SelectItem value="WI">Withdraw Merchant</SelectItem> <SelectItem value="WI">Withdraw Merchant</SelectItem>
<SelectItem value="IC">Income Merchant</SelectItem> <SelectItem value="IC">Income Merchant</SelectItem>
<SelectItem value="DN">Donation</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>} {errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}

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

@ -68,9 +68,9 @@ const EditDialog = () => {
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({}); const [errors, setErrors] = useState<Record<string, string>>({});
const [isLoadingData, setIsLoadingData] = useState(true);
const [isLoadingWallets, setIsLoadingWallets] = useState(false); const [isLoadingWallets, setIsLoadingWallets] = useState(false);
const initialState: { const initialState: {
name: string; name: string;
@ -109,7 +109,6 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setSelectedGroups([]); setSelectedGroups([]);
setAlert({ show: false, message: '' });
setErrors({}); setErrors({});
}; };
@ -123,6 +122,10 @@ const EditDialog = () => {
permission: prevState.permission.filter((id) => id !== groupId) permission: prevState.permission.filter((id) => id !== groupId)
}; };
} else { } else {
// Hapus error permission ketika user memilih group
if (errors.permission && prevState.permission.length === 0) {
setErrors((prev) => ({ ...prev, permission: '' }));
}
return { return {
...prevState, ...prevState,
permission: [...prevState.permission, groupId] permission: [...prevState.permission, groupId]
@ -139,7 +142,8 @@ const EditDialog = () => {
{ key: 'wallet_destination', label: 'To Account' }, { key: 'wallet_destination', label: 'To Account' },
{ key: 'status', label: 'Status' }, { key: 'status', label: 'Status' },
{ key: 'status_approval', label: 'Status Approval' }, { key: 'status_approval', label: 'Status Approval' },
{ key: 'status_kind', label: 'Status Kind' } { key: 'status_kind', label: 'Status Kind' },
{ key: 'permission', label: 'Group' }
]; ];
const newErrors: Record<string, string> = {}; const newErrors: Record<string, string> = {};
@ -147,9 +151,11 @@ const EditDialog = () => {
requiredFields.forEach(({ key, label }) => { requiredFields.forEach(({ key, label }) => {
if ( if (
formField[key as keyof typeof formField] === '' || key === 'permission'
formField[key as keyof typeof formField] === null || ? !formField[key] || formField[key].length === 0
formField[key as keyof typeof formField] === undefined : formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === null ||
formField[key as keyof typeof formField] === undefined
) { ) {
newErrors[key] = `${label} is required`; newErrors[key] = `${label} is required`;
// Show toast for each required field // Show toast for each required field
@ -229,13 +235,7 @@ const EditDialog = () => {
return false; return false;
} }
} catch (error) { } catch (error) {
toast.error( toast.error(error instanceof Error ? error.message : 'Failed to Update Transfer Type');
error instanceof Error ? error.message : 'Failed to Update Transfer Type'
);
setAlert({
show: true,
message: error instanceof Error ? error.message : 'Failed to Update Transfer Type'
});
return false; return false;
} }
}, [formField, selectedTransferType]); }, [formField, selectedTransferType]);
@ -317,6 +317,7 @@ const EditDialog = () => {
if (!showEditDialog || !selectedTransferType) return; if (!showEditDialog || !selectedTransferType) return;
const fetchTransactionType = async () => { const fetchTransactionType = async () => {
setIsLoadingData(true);
try { try {
const response = await GetData( const response = await GetData(
`${API_URL}/transactiontype/getdata/${selectedTransferType}`, `${API_URL}/transactiontype/getdata/${selectedTransferType}`,
@ -358,6 +359,8 @@ const EditDialog = () => {
show: true, show: true,
message: 'Failed to load transaction type data' message: 'Failed to load transaction type data'
}); });
} finally {
setIsLoadingData(false);
} }
}; };
@ -374,36 +377,35 @@ const EditDialog = () => {
} }
}, [showEditDialog]); }, [showEditDialog]);
const renderSelectWithLoading = ( const renderSelectWithLoading = (
value: string, value: string,
onChangeHandler: (value: string) => void, onChangeHandler: (value: string) => void,
options: { id: string; name: string }[] | null, options: { id: string; name: string }[] | null,
placeholder: string, placeholder: string,
isLoading: boolean isLoading: boolean
) => { ) => {
return ( return (
<Select value={value} onValueChange={onChangeHandler} disabled={isLoading}> <Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
<SelectTrigger> <SelectTrigger>
{isLoading ? ( {isLoading ? (
<div className="flex items-center"> <div className="flex items-center">
<div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div> <div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
<span className="ml-2">Loading...</span> <span className="ml-2">Loading...</span>
</div> </div>
) : ( ) : (
<SelectValue placeholder={placeholder} /> <SelectValue placeholder={placeholder} />
)} )}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{options && {options &&
options.map((option) => ( options.map((option) => (
<SelectItem value={option.id} key={option.id}> <SelectItem value={option.id} key={option.id}>
{option.name} {option.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
); );
}; };
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@ -416,7 +418,6 @@ const EditDialog = () => {
<h1 className="text-xl font-semibold leading-none text-gray-900"> <h1 className="text-xl font-semibold leading-none text-gray-900">
Update Transaction Type Update Transaction Type
</h1> </h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div> </div>
<div <div
className="cursor-pointer hover:opacity-100 opacity-50" className="cursor-pointer hover:opacity-100 opacity-50"
@ -429,6 +430,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}> <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0"> <div className="flex flex-col px-0">
{alert.show && ( {alert.show && (
@ -438,382 +440,415 @@ const EditDialog = () => {
</Alert> </Alert>
</div> </div>
)} )}
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Transfer Type Name
<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input
className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div>
</div>
<div className="w-full"> {isLoadingData ? (
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="p-5">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="animate-pulse space-y-4">
Description {[...Array(6)].map((_, idx) => (
<span className="text-red-500">*</span> <div key={idx}>
</label> <div className="h-4 bg-gray-200 rounded w-1/3 mb-2"></div>
<div className="grow flex flex-col"> <div className="h-10 bg-gray-200 rounded w-full"></div>
<Input </div>
className={`input ${errors.description ? 'border-red-500' : ''}`} ))}
type="text" </div>
autoComplete="off" <p className="mt-4 text-gray-500 text-center">Loading transaction type data...</p>
value={formField.description} </div>
onChange={({ target }) => { ) : (
setFormField((prev) => ({ ...prev, description: target.value })); <form action="" onSubmit={handleSubmit}>
if (target.value) { <div className="card-body grid gap-5 p-0">
setErrors((prev) => ({ ...prev, description: '' })); <div className="w-full">
} <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
}} <label className="form-label flex items-center gap-1 max-w-56">
/> Transfer Type Name
{errors.description && ( <span className="text-red-500">*</span>
<span className="text-red-500 text-xs mt-1">{errors.description}</span> </label>
)} <div className="grow flex flex-col">
<Input
className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Minimum Amount Description
</label> <span className="text-red-500">*</span>
<div className="grow"> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <Input
value={formField.minimum_amount} className={`input ${errors.description ? 'border-red-500' : ''}`}
thousandSeparator="." type="text"
decimalSeparator="," autoComplete="off"
allowNegative={false} value={formField.description}
onValueChange={(values) => { onChange={({ target }) => {
setFormField((prev) => ({ setFormField((prev) => ({ ...prev, description: target.value }));
...prev, if (target.value) {
minimum_amount: values.floatValue || 0 setErrors((prev) => ({ ...prev, description: '' }));
})); }
}} }}
placeholder="Enter Minimum Amount" />
/> {errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div>
</div> </div>
</div> </div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Maximum Amount Minimum Amount
</label> </label>
<div className="grow"> <div className="grow">
<NumericFormat <NumericFormat
className="input" className="input"
value={formField.maximum_amount} value={formField.minimum_amount}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
allowNegative={false} allowNegative={false}
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
maximum_amount: values.floatValue || 0 minimum_amount: values.floatValue || 0
})); }));
}} }}
placeholder="Enter Maximum Amount" placeholder="Enter Minimum Amount"
/> />
</div>
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Max Transaction per day
</label>
<div className="grow">
<NumericFormat
className="input"
value={formField.max_transaction_per_day}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day: values.floatValue || 0
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
From Account
<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
{renderSelectWithLoading(
formField.wallet_origin,
(value) => setFormField({ ...formField, wallet_origin: value }),
wallets,
'Select Wallet',
isLoadingWallets
)}
{errors.wallet_origin && (
<span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
To Account Maximum Amount
<span className="text-red-500">*</span> </label>
</label> <div className="grow">
<div className="grow flex flex-col"> <NumericFormat
<Select className="input"
value={formField.wallet_destination} value={formField.maximum_amount}
onValueChange={(wallet_destination) => { thousandSeparator="."
setFormField((prev) => ({ ...prev, wallet_destination })); decimalSeparator=","
setErrors((prev) => ({ ...prev, wallet_destination: '' })); allowNegative={false}
}} onValueChange={(values) => {
> setFormField((prev) => ({
<SelectTrigger className={errors.wallet_destination ? 'border-red-500' : ''}> ...prev,
<SelectValue placeholder="Select Wallet" /> maximum_amount: values.floatValue || 0
</SelectTrigger> }));
<SelectContent> }}
{wallets.map((wallet) => ( placeholder="Enter Maximum Amount"
<SelectItem value={wallet.id} key={wallet.id}> />
{wallet.name} </div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Max Transaction per day
</label>
<div className="grow">
<NumericFormat
className="input"
value={formField.max_transaction_per_day}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day: values.floatValue || 0
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
From Account
<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
{renderSelectWithLoading(
formField.wallet_origin,
(value) => setFormField({ ...formField, wallet_origin: value }),
wallets,
'Select Wallet',
isLoadingWallets
)}
{errors.wallet_origin && (
<span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
)}
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
To Account
<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.wallet_destination}
onValueChange={(wallet_destination) => {
setFormField((prev) => ({ ...prev, wallet_destination }));
setErrors((prev) => ({ ...prev, wallet_destination: '' }));
}}
>
<SelectTrigger
className={errors.wallet_destination ? 'border-red-500' : ''}
>
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet) => (
<SelectItem value={wallet.id} key={wallet.id}>
{wallet.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.wallet_destination && (
<span className="text-red-500 text-xs mt-1">
{errors.wallet_destination}
</span>
)}
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Status Transaction Type
<span className="text-red-500"> *</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.type}
onValueChange={(value) => {
setFormField((prev) => ({ ...prev, type: value }));
setErrors((prev) => ({ ...prev, type: '' }));
}}
>
<SelectTrigger className={errors.type ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="O">Other </SelectItem>
<SelectItem value="CA">
Change Group Emoney Customer to Agent{' '}
</SelectItem> </SelectItem>
))} <SelectItem value="AC">
</SelectContent> Change Group Emoney Agent to Customer{' '}
</Select> </SelectItem>
{errors.wallet_destination && ( <SelectItem value="PA">
<span className="text-red-500 text-xs mt-1">{errors.wallet_destination}</span> Change Group Point Agent to Customer{' '}
)} </SelectItem>
<SelectItem value="PC">Change Group Point Customer to Agent</SelectItem>
<SelectItem value="CE">Return Customer Emoney </SelectItem>
<SelectItem value="AD">Return Agent Deposit </SelectItem>
<SelectItem value="AM">Return Agent Merchant </SelectItem>
<SelectItem value="AE">Return Agent Emoney </SelectItem>
<SelectItem value="R">Reward Point </SelectItem>
<SelectItem value="TE">Top Up Escrow </SelectItem>
<SelectItem value="TM">Top Up Master Agent </SelectItem>
<SelectItem value="TA">Top Up Agent </SelectItem>
<SelectItem value="PL">Purchase Loja</SelectItem>
<SelectItem value="DE">Disbursment Escrow</SelectItem>
<SelectItem value="DM">Disbursment Master Agent</SelectItem>
<SelectItem value="DA">Disbursment Agent</SelectItem>
<SelectItem value="WI">Withdraw Merchant</SelectItem>
<SelectItem value="IC">Income Merchant</SelectItem>
<SelectItem value="DN">Donation</SelectItem>
</SelectContent>
</Select>
{errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span>
)}
</div>
</div> </div>
</div> </div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Status Transaction Type Status Approval
<span className="text-red-500"> *</span> <span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Select <Select
value={formField.type} value={formField.status_approval}
onValueChange={(value) => { onValueChange={(value) => {
setFormField((prev) => ({ ...prev, type: value })); setFormField((prev) => ({ ...prev, status_approval: value }));
setErrors((prev) => ({ ...prev, type: '' })); setErrors((prev) => ({ ...prev, status_approval: '' }));
}} }}
> >
<SelectTrigger className={errors.type ? 'border-red-500' : ''}> <SelectTrigger className={errors.status_approval ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" /> <SelectValue placeholder="Select" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="D">Disbursement </SelectItem> <SelectItem value="Y">Yes</SelectItem>
<SelectItem value="O">Other </SelectItem> <SelectItem value="N">No</SelectItem>
<SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem> </SelectContent>
<SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem> </Select>
<SelectItem value="PA">Change Group Point Agent to Customer </SelectItem> {errors.status_approval && (
<SelectItem value="PC">Change Group Point Customer to Agent</SelectItem> <span className="text-red-500 text-xs mt-1">
<SelectItem value="CE">Return Customer Emoney </SelectItem> {errors.status_approval}
<SelectItem value="AD">Return Agent Deposit </SelectItem> </span>
<SelectItem value="AM">Return Agent Merchant </SelectItem> )}
<SelectItem value="AE">Return Agent Emoney </SelectItem> </div>
<SelectItem value="R">Reward Point </SelectItem>
<SelectItem value="TE">Top Up Escrow </SelectItem>
<SelectItem value="TM">Top Up Master Agent </SelectItem>
<SelectItem value="TA">Top Up Agent </SelectItem>
<SelectItem value="PL">Purchase Loja</SelectItem>
<SelectItem value="DE">Disbursment Escrow</SelectItem>
<SelectItem value="DM">Disbursment Master Agent</SelectItem>
<SelectItem value="DA">Disbursment Agent</SelectItem>
<SelectItem value="WI">Withdraw Merchant</SelectItem>
<SelectItem value="IC">Income Merchant</SelectItem>
</SelectContent>
</Select>
{errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span>
)}
</div> </div>
</div> </div>
</div> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Status Kind
<span className="text-red-500">*</span>
</label>
<div className="w-full"> <div className="grow flex flex-col">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <Select
<label className="form-label flex items-center gap-1 max-w-56"> value={formField.status_kind}
Status Approval onValueChange={(value) => {
<span className="text-red-500">*</span> setFormField((prev) => ({ ...prev, status_kind: value }));
</label> setErrors((prev) => ({ ...prev, status_kind: '' }));
<div className="grow flex flex-col"> }}
<Select >
value={formField.status_approval} <SelectTrigger className={errors.status_kind ? 'border-red-500' : ''}>
onValueChange={(value) => { <SelectValue placeholder="Select" />
setFormField((prev) => ({ ...prev, status_approval: value })); </SelectTrigger>
setErrors((prev) => ({ ...prev, status_approval: '' })); <SelectContent>
}} <SelectItem value="R">Return</SelectItem>
> <SelectItem value="T">Transfer</SelectItem>
<SelectTrigger className={errors.status_approval ? 'border-red-500' : ''}> <SelectItem value="P">Purchase</SelectItem>
<SelectValue placeholder="Select" /> <SelectItem value="W">Withdraw</SelectItem>
</SelectTrigger> <SelectItem value="U">Top Up</SelectItem>
<SelectContent> <SelectItem value="N">Top Up Patner</SelectItem>
<SelectItem value="Y">Yes</SelectItem> </SelectContent>
<SelectItem value="N">No</SelectItem> </Select>
</SelectContent> {errors.status_kind && (
</Select> <span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>
{errors.status_approval && ( )}
<span className="text-red-500 text-xs mt-1">{errors.status_approval}</span> </div>
)}
</div> </div>
</div> </div>
</div> <div className="w-full">
<div className="w-full"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <label className="form-label flex items-center gap-1 max-w-56">
<label className="form-label flex items-center gap-1 max-w-56"> Status
Status Kind <span className="text-red-500"> *</span>
<span className="text-red-500">*</span> </label>
</label> <div className="grow flex flex-col">
<Select
<div className="grow flex flex-col"> value={formField.status}
<Select onValueChange={(value) => {
value={formField.status_kind} setFormField((prev) => ({ ...prev, status: value }));
onValueChange={(value) => { setErrors((prev) => ({ ...prev, status: '' }));
setFormField((prev) => ({ ...prev, status_kind: value })); }}
setErrors((prev) => ({ ...prev, status_kind: '' })); >
}} <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
> <SelectValue placeholder="Select" />
<SelectTrigger className={errors.status_kind ? 'border-red-500' : ''}> </SelectTrigger>
<SelectValue placeholder="Select" /> <SelectContent>
</SelectTrigger> <SelectItem value="Y">Active</SelectItem>
<SelectContent> <SelectItem value="N">Inactive</SelectItem>
<SelectItem value="R">Return</SelectItem> </SelectContent>
<SelectItem value="T">Transfer</SelectItem> </Select>
<SelectItem value="P">Purchase</SelectItem> {errors.status && (
<SelectItem value="W">Withdraw</SelectItem> <span className="text-red-500 text-xs mt-1">{errors.status}</span>
<SelectItem value="U">Top Up</SelectItem> )}
<SelectItem value="N">Top Up Patner</SelectItem> </div>
</SelectContent>
</Select>
{errors.status_kind && (
<span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Status
<span className="text-red-500"> *</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.status}
onValueChange={(value) => {
setFormField((prev) => ({ ...prev, status: value }));
setErrors((prev) => ({ ...prev, status: '' }));
}}
>
<SelectTrigger className={errors.status ? 'border-red-500' : ''}>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Groups Groups
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
</label> </label>
<div className="relative w-full"> <div className="relative w-full">
<Input <Input
type="text" type="text"
placeholder="No groups selected" placeholder="No groups selected"
value={selectedPermissionNames || ''} value={selectedPermissionNames || ''}
readOnly readOnly
className="bg-gray-100 mb-2" className={`bg-gray-100 mb-2 ${errors.permission ? 'border-red-500' : ''}`}
/> />
{errors.permission && (
<div className="border rounded-md p-3 max-h-48 overflow-y-auto"> <span className="text-red-500 text-xs mt-2">{errors.permission}</span>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2"> )}
{groups.map((group) => ( <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
<div key={group.id} className="flex items-center space-x-2"> <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
<Checkbox {groups.map((group) => (
id={`group-${group.id}`} <div key={group.id} className="flex items-center space-x-2">
checked={formField.permission.includes(group.id)} <Checkbox
onCheckedChange={() => handleGroupChange(group.id)} id={`group-${group.id}`}
/> checked={formField.permission.includes(group.id)}
<label onCheckedChange={() => handleGroupChange(group.id)}
htmlFor={`group-${group.id}`} />
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" <label
> htmlFor={`group-${group.id}`}
{group.name} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
</label> >
</div> {group.name}
))} </label>
</div>
))}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="flex justify-end pt-2.5 gap-5"> <div className="flex justify-end pt-2.5 gap-5">
<Button <Button variant={'outline'} type="button" onClick={() => resetForm()}>
variant={'outline'} Reset
type="button" </Button>
onClick={() => resetForm()} <Button
> variant={'default'}
Reset type="submit"
</Button> disabled={isSubmitting || isLoadingData}
<Button variant={'default'} type="submit" disabled={isSubmitting}> >
{isSubmitting ? 'Saving...' : 'Save Changes'} {isSubmitting ? 'Saving...' : 'Save Changes'}
</Button> </Button>
</div>
</div> </div>
</div> </form>
</form> )}
<ManageTransferFeeContextProvider transactionTypeId={selectedTransferType}>
<Container> {isLoadingData && (
<div className="grid gap-5 lg:gap-7.5 mt-5"> <ManageTransferFeeContextProvider transactionTypeId={selectedTransferType}>
<DataGridInner /> <Container>
</div> <div className="grid gap-5 lg:gap-7.5 mt-5">
<AddFeeDialog /> <DataGridInner />
<DeleteFeeDialog /> </div>
<EditFeeDialog /> <AddFeeDialog />
</Container> <DeleteFeeDialog />
</ManageTransferFeeContextProvider> <EditFeeDialog />
</Container>
</ManageTransferFeeContextProvider>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>
@ -821,4 +856,4 @@ const EditDialog = () => {
); );
}; };
export { EditDialog }; export { EditDialog };

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

@ -203,7 +203,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
DM: 'Disbursment Master Agent', DM: 'Disbursment Master Agent',
DA: 'Disbursment Agent', DA: 'Disbursment Agent',
WI: 'Withdraw Merchant', WI: 'Withdraw Merchant',
IC: 'Income Merchant' IC: 'Income Merchant',
DN: 'Donation'
}; };
return mapping[row.type] || 'Unknown'; return mapping[row.type] || 'Unknown';
@ -227,20 +228,18 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
{ {
accessorFn: (row: { status_kind: string }) => { accessorFn: (row: { status_kind: string }) => {
const mapping: Record<string, string> = { const mapping: Record<string, string> = {
R: "Return", R: 'Return',
T: "Transfer", T: 'Transfer',
P: "Purchase", P: 'Purchase',
W: "Withdraw", W: 'Withdraw',
U: "Top Up", U: 'Top Up',
N: "Top Up Patner" N: 'Top Up Patner'
}; };
return mapping[row.status_kind] || 'Unknown'; return mapping[row.status_kind] || 'Unknown';
}, },
id: 'status_kind', id: 'status_kind',
header: ({ column }) => ( header: ({ column }) => <DataGridColumnHeader title="Status Kind" column={column} />,
<DataGridColumnHeader title="Status Kind" column={column} />
),
enableSorting: false, enableSorting: false,
enableHiding: false, enableHiding: false,
meta: { headerClassName: 'w-[250px]' } meta: { headerClassName: 'w-[250px]' }
@ -295,22 +294,19 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
let filterObject: Record<string, any> = {}; let filterObject: Record<string, any> = {};
if (debouncedSearchTerm) { if (debouncedSearchTerm) {
filterObject["any"] = debouncedSearchTerm.toLowerCase(); filterObject['any'] = debouncedSearchTerm.toLowerCase();
} }
if (columnFilters.length > 0) { if (columnFilters.length > 0) {
columnFilters.forEach((filter: any) => { columnFilters.forEach((filter: any) => {
if (filter.id && filter.value) { if (filter.id && filter.value) {
if (filter.id === 'name') { if (filter.id === 'name') {
filterObject["any"] = filter.value.toLowerCase(); filterObject['any'] = filter.value.toLowerCase();
} } else if (filter.id === 'wallet_origin') {
else if (filter.id === 'wallet_origin') { filterObject['wallet_origin.name'] = filter.value.toLowerCase();
filterObject["wallet_origin.name"] = filter.value.toLowerCase(); } else if (filter.id === 'wallet_destination') {
} filterObject['wallet_destination.name'] = filter.value.toLowerCase();
else if (filter.id === 'wallet_destination') { } else {
filterObject["wallet_destination.name"] = filter.value.toLowerCase();
}
else {
filterObject[filter.id] = filter.value.toLowerCase(); filterObject[filter.id] = filter.value.toLowerCase();
} }
} }
@ -369,4 +365,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
}; };
export { ManageTransferTypeContext, ManageTransferTypeContextProvider }; export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
export type { TransferType }; export type { TransferType };