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

src/pages/master/aldeias/blocks/AddDialog.tsx

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

src/pages/master/aldeias/blocks/EditDialog.tsx

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

src/pages/master/municipios/blocks/AddDialog.tsx

@@ -41,10 +41,30 @@ const AddDialog = () => {
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [isSubmitting, setIsSubmitting] = useState(false);
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const resetForm = () => {
     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(
@@ -82,16 +102,17 @@ const AddDialog = () => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (formField.name.trim() === '') {
-      setAlert({ show: true, message: 'Please fill name field.' });
+    setIsSubmitting(true);
+    if(!validateForm()) {
+      setIsSubmitting(false);
       return;
     }
 
+
     doCreateMunicipio(e);
-    console.log(parsedUser.email);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
+    // console.log(parsedUser.email);
+    // console.log(formField);
+    // setAlert({ show: false, message: '' });
   };
 
   const handleReset = () => {
@@ -133,21 +154,29 @@ const AddDialog = () => {
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <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">
                       Municipio Name<span className="text-red-500">*</span>
                     </label>
                     <Input
-                      className="input"
-                      type="text"
+                        className={`input ${errors.name ? 'border-red-500' : ''}`}
+                        type="text"
+                        autoComplete='off'
                       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 className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+                  <Button variant={'outline'} type="reset" onClick={resetForm}>
                     Reset
                   </Button>
                   <Button variant="default" type="submit" disabled={isSubmitting}>

src/pages/master/municipios/blocks/EditDialog.tsx

@@ -44,9 +44,32 @@ const EditDialog = () => {
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
   const resetForm = () => {
     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(
@@ -73,7 +96,7 @@ const EditDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed update user');
+          toast.error('Failed update municipios');
           setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
@@ -85,6 +108,21 @@ const EditDialog = () => {
     [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) => {
     setIsLoading(true);
     const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
@@ -105,18 +143,18 @@ const EditDialog = () => {
     setIsLoading(false);
   }, []);
 
-  const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
+  //   e.preventDefault();
 
-    if (formField.name.trim() === '') {
-      setAlert({ show: true, message: 'Please fill name field.' });
-      return;
-    }
+  //   if (formField.name.trim() === '') {
+  //     setAlert({ show: true, message: 'Please fill name field.' });
+  //     return;
+  //   }
 
-    doUpdateMunicipios(e);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
-  };
+  //   doUpdateMunicipios(e);
+  //   console.log(formField);
+  //   setAlert({ show: false, message: '' });
+  // };
 
   useEffect(() => {
     if (selectedMunicipios) {
@@ -170,21 +208,33 @@ const EditDialog = () => {
                 <p className="mt-4 text-gray-500">Loading Municipio Details...</p>
               </div>
             ) : (
-              <form onSubmit={handleUpdate}>
+              <form onSubmit={handleSubmit}>
                 <div className="card-body grid gap-5">
-                  <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">
-                        Municipio Name<span className="text-red-500">*</span>
-                      </label>
+                <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">
+                      Municipios Name
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <Input
-                        className="input"
+                        className={`input ${errors.name ? 'border-red-500' : ''}`}
                         type="text"
+                        autoComplete="off"
                         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 className="flex justify-end pt-2.5">
                     <Button variant="default" type="submit" disabled={isSubmitting}>

src/pages/master/postoadms/blocks/AddDialog.tsx

@@ -47,7 +47,7 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const initialState = {
     name: '',
     municipio_id: 0,
@@ -61,9 +61,32 @@ const AddDialog = () => {
 
   const resetForm = () => {
     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(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -121,15 +144,12 @@ const AddDialog = () => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (formField.name.trim() === '' || formField.municipio_id === 0) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
+    setIsSubmitting(true);
+    if (!validateForm()) {
+      setIsSubmitting(false);
       return;
     }
-
     doCreatePostoAdm(e);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -169,61 +189,78 @@ const AddDialog = () => {
 
             <form onSubmit={handleSubmit}>
               <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">
                     <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>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                    />
+                    <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">
                   <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">
-                      Municipio Name<span className="text-red-500">*</span>
+                      Municipio Name
+                      <span className="text-red-500">*</span>
                     </label>
-                    <Popover open={open} onOpenChange={setOpen}>
-                      <PopoverTrigger asChild>
-                        <button type="button" className="input col-span-5 text-left">
-                          {municipios.find((municipio) => municipio.id === formField.municipio_id)
-                            ?.name || 'Select Municipio'}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent
-                        className="w-[400px] p-0"
-                        onWheel={(e) => e.stopPropagation()}
-                      >
-                        <Command>
-                          <CommandInput placeholder="Search Municipio..." />
-                          <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
-                            <CommandEmpty>No Municipio found.</CommandEmpty>
-                            <CommandGroup>
-                              {municipios.map((municipio) => (
-                                <CommandItem
-                                  key={municipio.id}
-                                  value={municipio.name}
-                                  onSelect={() => {
-                                    setFormField({
-                                      ...formField,
-                                      municipio_id: municipio.id
-                                    });
-                                    setOpen(false);
-                                  }}
-                                >
-                                  {municipio.name}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
+                    <div className="grow flex flex-col">
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className={`input text-left ${errors.municipio_id ? 'border-red-500' : ''}`}
+                          >
+                            {municipios.find((municipio) => municipio.id === formField.municipio_id)
+                              ?.name || 'Select Municipio'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="w-[400px] p-0"
+                          onWheel={(e) => e.stopPropagation()}
+                        >
+                          <Command>
+                            <CommandInput placeholder="Search Municipio..." />
+                            <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
+                              <CommandEmpty>No Municipio found.</CommandEmpty>
+                              <CommandGroup>
+                                {municipios.map((municipio) => (
+                                  <CommandItem
+                                    key={municipio.id}
+                                    value={municipio.name}
+                                    onSelect={() => {
+                                      setFormField({ ...formField, municipio_id: municipio.id });
+                                      setErrors((prev) => ({ ...prev, municipio_id: '' }));
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {municipio.name}
+                                  </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>
 

src/pages/master/postoadms/blocks/EditDialog.tsx

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

src/pages/master/products/blocks/AddDialog.tsx

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

src/pages/master/products/blocks/EditDialog.tsx

@@ -81,7 +81,37 @@ const EditDialog = () => {
     setFormField(initialState);
     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(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -164,29 +194,14 @@ const EditDialog = () => {
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (
-      formField.name.trim() === '' ||
-      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.' });
+    setIsSubmitting(true);
+    if (!validateForm()) {
+      setIsSubmitting(false);
       return;
     }
-
     doUpdateProduct(e);
     // console.log(formField);
-    setAlert({ show: false, message: '' });
+    // setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -245,72 +260,102 @@ const EditDialog = () => {
               </div>
             ) : (
               <form onSubmit={handleUpdate}>
-                <div className="card-body grid gap-5">
-                  <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<span className="text-red-500">*</span>
-                      </label>
+              <div className="card-body grid gap-5">
+                {/* Name */}
+                <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<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <Input
-                        className="input"
+                        className={`input ${errors.name ? 'border-red-500' : ''}`}
                         type="text"
                         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 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">
-                        Type<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* Type */}
+                <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">
+                      Type<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <Input
-                        className="input"
+                        className={`input ${errors.type ? 'border-red-500' : ''}`}
                         type="text"
                         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 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">
-                        Code<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* Code */}
+                <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">
+                      Code<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <Input
-                        className="input"
+                        className={`input ${errors.code ? 'border-red-500' : ''}`}
                         type="text"
                         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 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">
-                        Description<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* 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">
+                      Description<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <Input
-                        className="input"
+                        className={`input ${errors.description ? 'border-red-500' : ''}`}
                         type="text"
                         value={formField.description}
-                        onChange={(e) =>
-                          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 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">
-                        Price Point<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* Price Point */}
+                <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">
+                      Price Point<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <NumericFormat
-                        className="input"
+                        className={`input ${errors.price_point ? 'border-red-500' : ''}`}
                         value={formField.price_point ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -318,21 +363,29 @@ const EditDialog = () => {
                         onValueChange={(values) => {
                           setFormField((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"
                       />
+                      {errors.price_point && (
+                        <span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
+                      )}
                     </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">
-                        Price Cash<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* Price Cash */}
+                <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">
+                      Price Cash<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <NumericFormat
-                        className="input"
+                        className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
                         value={formField.price_cash ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -340,21 +393,29 @@ const EditDialog = () => {
                         onValueChange={(values) => {
                           setFormField((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"
                       />
+                      {errors.price_cash && (
+                        <span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
+                      )}
                     </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">
-                        Cashback Point<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* Cashback Point */}
+                <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">
+                      Cashback Point<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <NumericFormat
-                        className="input"
+                        className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
                         value={formField.cashback_point ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -362,21 +423,29 @@ const EditDialog = () => {
                         onValueChange={(values) => {
                           setFormField((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"
                       />
+                      {errors.cashback_point && (
+                        <span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
+                      )}
                     </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">
-                        Cashback Cash<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* Cashback Cash */}
+                <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">
+                      Cashback Cash<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <NumericFormat
-                        className="input"
+                        className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
                         value={formField.cashback_cash ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -384,24 +453,35 @@ const EditDialog = () => {
                         onValueChange={(values) => {
                           setFormField((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"
                       />
+                      {errors.cashback_cash && (
+                        <span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
+                      )}
                     </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>
+            
+                {/* Status */}
+                <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={(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" />
                         </SelectTrigger>
                         <SelectContent>
@@ -409,44 +489,63 @@ const EditDialog = () => {
                           <SelectItem value="N">Inactive</SelectItem>
                         </SelectContent>
                       </Select>
+                      {errors.status && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                      )}
                     </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">
-                        Provider
-                      </label>
+                </div>
+            
+                {/* Provider */}
+                <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">
+                      Provider
+                    </label>
+                    <div className="grow flex flex-col">
                       <Select
                         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" />
                         </SelectTrigger>
                         <SelectContent>
                           {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}
                             </SelectItem>
                           ))}
                         </SelectContent>
                       </Select>
+                      {errors.provider && (
+                        <span className="text-red-500 text-xs mt-1">{errors.provider}</span>
+                      )}
                     </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">
-                        Process on Third Party<span className="text-red-500">*</span>
-                      </label>
+                </div>
+            
+                {/* Process on Third Party */}
+                <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">
+                      Process on Third Party<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <Select
                         value={formField.process_on_third_party}
-                        onValueChange={(value) =>
-                          setFormField({ ...formField, process_on_third_party: value })
-                        }
+                        onValueChange={(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" />
                         </SelectTrigger>
                         <SelectContent>
@@ -454,20 +553,25 @@ const EditDialog = () => {
                           <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 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 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>
         </DialogBody>

src/pages/master/products/hooks/ManageProductsContext.tsx

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

src/pages/master/profession/blocks/AddDialog.tsx

@@ -29,7 +29,7 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const initialState = {
     name: '',
     created_by: '',
@@ -40,9 +40,31 @@ const AddDialog = () => {
   const created_time = new Date();
   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 = () => {
     setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doCreateProfession = useCallback(
@@ -81,15 +103,13 @@ const AddDialog = () => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (!formField.name.trim()) {
-      setAlert({ show: true, message: 'Please fill name field.' });
+    setIsSubmitting(true);
+    if (!validateForm()) {
+      setIsSubmitting(false);
       return;
     }
 
     doCreateProfession(e);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -130,12 +150,21 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Name<span className="text-red-500">*</span>
                     </label>
+                    <div className='grow flex flex-col'>
+
                     <Input
-                      className="input"
-                      type="text"
+                          className={`input ${errors.name ? 'border-red-500' : ''}`}
+                          type="text"
+                          autoComplete='off'
                       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>
 

src/pages/master/profession/blocks/EditDialog.tsx

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

src/pages/master/provider/blocks/AddDialog.tsx

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

src/pages/master/provider/blocks/EditDialog.tsx

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

src/pages/master/sucos/blocks/AddDialog.tsx

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

src/pages/master/sucos/blocks/EditDialog.tsx

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

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

@@ -17,6 +17,7 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { Checkbox } from '@/components/ui/checkbox';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { set } from 'date-fns';
 
 const API_URL = apiConfig.service_dashboard;
 
@@ -74,7 +75,7 @@ const AddDialog = () => {
   });
   const [selectMenus, setSelectMenus] = useState<string[]>([]);
   const [formField, setFormField] = useState(initialState);
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   /* actions */
   const handleCheckboxChange = useCallback((key: string) => {
     setSelectMenus((prev) =>
@@ -82,21 +83,48 @@ const AddDialog = () => {
     );
   }, []);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const resetForm = () => {
     setFormField(() => ({ name: '' }));
-    setAlert({ show: false, message: '' });
+    setErrors(() => ({}));
     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(
     async (e: React.FormEvent<HTMLFormElement>) => {
       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`, {
         name: formField.name,
         roles: selectMenus,
@@ -150,29 +178,29 @@ const AddDialog = () => {
               Close
             </Button>
           </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>
         <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">
-            <form action="" onSubmit={doCreatePosition}>
+            <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <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"
-                      value={formField.name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, name: target.value }))
-                      }
-                    />
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Name <span className="text-danger">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
+                      <Input
+                        className={`input ${errors.name ? 'border-danger' : ''}`}
+                        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>
 

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

@@ -35,7 +35,7 @@ const DeleteDialog = () => {
       return;
     }
     const response = await DeleteData(
-      `${API_URL}/user_role/delete/${selectedPosition.id}/${enforce}`,
+      `${API_URL}/user_role/delete/${selectedPosition.id}/false`,
       {
         id: selectedPosition.id
       }
@@ -65,7 +65,7 @@ const DeleteDialog = () => {
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <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>
               <EnforceSwitch
                 enforce={enforce}
@@ -73,7 +73,7 @@ const DeleteDialog = () => {
                   setEnforce(e.target.checked);
                 }}
               />
-            </div>
+            </div> */}
           </Alert>
           {alert.show && (
             <Alert variant="danger">

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

@@ -81,7 +81,35 @@ const EditDialog = () => {
     name: '',
     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 */
   const handleCheckboxChange = useCallback((key: string) => {
     setSelectMenus((prev) =>
@@ -94,11 +122,6 @@ const EditDialog = () => {
       e.preventDefault();
       setIsSubmitting(true);
 
-      if (formField.name.trim() === '') {
-        setAlert((prev) => ({ ...prev, show: true, message: 'Please fill name field.' }));
-        return;
-      }
-
       if (!selectedPosition) {
         toast.success('Please Select Position');
         return;
@@ -164,29 +187,32 @@ const EditDialog = () => {
               <KeenIcon icon="cross" className="text-1.5xl" />
             </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]">
               <Alert variant="danger">
                 <h3>{alert.message}</h3>
               </Alert>
             </div>
-          )}
+          )} */}
         </DialogHeader>
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <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="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"
-                      value={formField.name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, name: target.value }))
-                      }
-                    />
+                    <div className="grow flex flex-col">
+                      <Input
+                        className={errors.name ? 'border-red-500' : ''}
+                        type="text"
+                        value={formField.name}
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, name: target.value }))
+                        }
+                      />
+                      {errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
+                    </div>
                   </div>
                 </div>
 

src/pages/settings/user/manage-user/blocks/AddDialog.tsx

@@ -34,31 +34,12 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import clsx from 'clsx';
-
-export interface CustomerProps {
-  id: string;
-  msisdn: string;
-  email: string;
-  fullname: string;
-  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;
-}
+import {
+  CustomerProps,
+  initialStateCreateUser,
+  RoleListProps,
+  validateFormCreateUser
+} from './Types';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL = apiConfig.service_dashboard;
@@ -71,34 +52,30 @@ const AddDialog = () => {
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
   const [roles, setRoles] = useState<RoleListProps[]>([]);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    email: '',
-    username: '',
-    password: '',
-    retype_password: '',
-    name: '',
-    id_role: '',
-    status: '',
-    customerid: ''
-  };
-  const [formField, setFormField] = useState(initialState);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const [formField, setFormField] = useState(initialStateCreateUser);
   const [showPassword, setShowPassword] = useState({
     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 [open, setOpen] = useState(false);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
+  const [notMatch, setNotMatch] = useState<string[]>([]);
 
   const validatePassword = (password: string, confirmPassword: string) => {
     const errors: string[] = [];
+    const notMatch: string[] = [];
 
     if (password) {
       if (password.length < 8) {
@@ -114,25 +91,29 @@ const AddDialog = () => {
         errors.push('Password must contain at least one special character');
       }
       if (password !== confirmPassword) {
-        errors.push('Passwords do not match');
+        notMatch.push('Passwords do not match');
       }
     }
 
     return {
       isValid: errors.length === 0,
-      errors
+      errors,
+      notMatch
     };
   };
 
   const resetForm = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setFormField(initialStateCreateUser);
+    setSelectedCustomerName('');
+    setSearchTerm('');
+    setErrors({});
   };
 
   /* actions */
   const doCreateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
       try {
         const response = await PostData(`${API_URL}/user/create`, formField);
@@ -150,8 +131,7 @@ const AddDialog = () => {
           doSaveLogActivity(createActivity);
           toast.success('Success Create User');
         } else {
-          toast.error('Failed to create user');
-          setAlert({ show: true, message: 'Failed to create user. Please try again.' });
+          toast.error(response?.message);
         }
       } catch (err) {
         toast.error('Something went wrong');
@@ -175,80 +155,112 @@ const AddDialog = () => {
       })
     };
     const response = await GetData(`${API_URL}/user_role/list`, params);
-    // console.log('ini data:', response);
     if (response?.status) {
       const roleList = response.data?.list || [];
       setRoles(roleList);
     } else {
       setRoles(() => []);
     }
-    // console.log('ini data user_role:', response?.data);
   }, []);
 
-  const getCustomerList = async (sorting: any) => {
-    try {
-      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      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'
-      });
+  const getCustomerList = async (sorting: any, filterValue: string) => {
+    const filter: any =
+      filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } };
 
-      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) {
-      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(() => {
     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(() => {
     const validation = validatePassword(formField.password, formField.retype_password);
     setMessagePassword(validation.isValid);
     setPasswordErrors(validation.errors);
+    setNotMatch(validation.notMatch);
   }, [formField.password, formField.retype_password]);
 
-  const isButtonDisabled = !messagePassword || isSubmitting || passwordErrors.length > 0;
-
   useEffect(() => {
     if (showAddDialog === false) {
       resetForm();
+      setDropdownOpen(false);
     }
   }, [showAddDialog]);
 
   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) => {
@@ -258,14 +270,13 @@ const AddDialog = () => {
 
   return (
     <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">
           <DialogTitle></DialogTitle>
           <DialogDescription></DialogDescription>
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
               <h1 className="text-xl font-semibold leading-none text-gray-900">User - Create</h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
             <div
               className="cursor-pointer hover:opacity-100 opacity-50"
@@ -278,249 +289,255 @@ const AddDialog = () => {
             </div>
           </div>
         </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
-          <div className="flex flex-col px-0">
-            {alert.show && (
-              <Alert variant="danger" className="mb-3">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-            <form action="" onSubmit={handleSubmit}>
-              <div className="card-body grid gap-5 p-0">
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">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">
-                  <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">Username</label>
-                    <Input
-                      className="input"
-                      type="text"
-                      autoComplete="off"
-                      value={formField.username}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, username: target.value }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">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>
+        <DialogBody className="scrollable-y p-5 pb-0" ref={parentRef}>
+          <form onSubmit={handleSubmit} className="grid gap-5">
+            {/* Name */}
+            <div className="flex gap-2.5">
+              <label className="form-label flex items-center gap-1 max-w-56">Name</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 }));
+                    setErrors((prev) => ({ ...prev, name: '' }));
+                  }}
+                />
+                {errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
               </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>
       </DialogContent>
     </Dialog>

src/pages/settings/user/manage-user/blocks/DeleteDialog.tsx

@@ -31,7 +31,7 @@ const DeleteDialog = () => {
 
   /* actions */
   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
     });
     // console.log('Delete Response User:', response);

src/pages/settings/user/manage-user/blocks/EditDialog.tsx

@@ -23,7 +23,6 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
-import { CustomerProps } from './AddDialog';
 import { useUserContext } from '../hooks';
 import { ChevronDown } from 'lucide-react';
 import { Input } from '@/components/ui/input';
@@ -33,25 +32,16 @@ import { Alert, KeenIcon, useDataGrid } from '@/components';
 import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
-
-interface RoleListProps {
-  id: string;
-  name: string;
-  status: string;
-}
+import {
+  CustomerProps,
+  initialStateCreateUser,
+  RoleListProps,
+  validateFormCreateUser
+} from './Types';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL = apiConfig.service_dashboard;
 
-const initialState = {
-  name: '',
-  username: '',
-  email: '',
-  id_role: '',
-  status: '',
-  customerid: ''
-};
-
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
@@ -61,16 +51,22 @@ const EditDialog = () => {
   const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
+  const [isFetching, setIsFetching] = useState(false);
 
-  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 = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setFormField(initialStateCreateUser);
+    setSelectedCustomerName('');
+    setSearchTerm('');
+    setErrors({});
   };
 
   /* actions */
@@ -79,15 +75,8 @@ const EditDialog = () => {
       e.preventDefault();
       setIsSubmitting(true);
 
-      if (
-        !formField.name.trim() ||
-        !formField.username.trim() ||
-        !formField.email.trim() ||
-        !formField.id_role ||
-        !formField.status ||
-        !formField.customerid
-      ) {
-        setAlert({ show: true, message: 'Please fill all required field' });
+      if (!validateFormCreateUser(formField, setErrors, 'update')) {
+        setIsSubmitting(false);
         return;
       }
 
@@ -109,7 +98,7 @@ const EditDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+          toast.error(response?.message);
         }
       } catch (error) {
         toast.error('Something went wrong, please try again.');
@@ -131,35 +120,48 @@ const EditDialog = () => {
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
 
-      // console.log('User ID_ROLE:', response?.data.id_role);
-      // console.log('Role: ', response?.data.list);
       setRoles(response?.data.list);
     } catch (error) {
       console.error('Error fetching role', error);
     }
   }, []);
 
-  const getCustomerList = async (sorting: any) => {
-    try {
-      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      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'
-      });
+  const getCustomerList = async (sorting: any, filterValue: string) => {
+    const filter: any =
+      filterValue?.trim().length === 0 ? {} : { fullname: { like: `%${filterValue}%` } };
 
-      // console.log('CUSTOMER: ', response?.data);
-      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) {
-      console.error('Error fetching customer', error);
+      toast.error('Failed to fetch customer list');
+    } finally {
+      setIsLoadingCustomer(false);
     }
   };
 
   const doFetchUserData = useCallback(async (id: string) => {
+    setIsFetching(true);
+
     const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
-    // console.log('User detail response:', response?.data);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -171,44 +173,71 @@ const EditDialog = () => {
         status: response.data.status,
         customerid: response.data.customer?.id || ''
       }));
-      // console.log('Customer ID from API:', response?.data.customerid);
     } else {
       setFormField((prev) => ({
         ...prev,
         name: '',
         username: '',
         email: '',
-        id_role: '0',
+        id_role: '',
         status: '',
         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(() => {
     if (showEditDialog === false) {
       resetForm();
+      setDropdownOpen(false);
     }
   }, [showEditDialog]);
 
   useEffect(() => {
-    const fetchAllData = async () => {
-      await getCustomerList([{ id: 'id', desc: false }]);
-      await doFetchUserRole([{ id: 'name', desc: false }]);
-      if (selectedUser) {
-        await doFetchUserData(selectedUser);
+    getCustomerList([{ id: 'created_at', desc: false }], '');
+    doFetchUserRole([{ id: 'name', desc: false }]);
+  }, []);
+
+  useEffect(() => {
+    if (selectedUser) {
+      doFetchUserData(selectedUser);
+    }
+  }, [selectedUser]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: any) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
       }
     };
 
-    fetchAllData();
-  }, [selectedUser]);
-
-  // console.log('ini role: ', roles);
-  // useEffect(() => {
-  //   console.log('Selected User ID Role:', formField.id_role);
-  //   // console.log('Available Roles:', roles);
-  // }, [formField.id_role, roles]);
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
 
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@@ -231,160 +260,184 @@ const EditDialog = () => {
         </DialogHeader>
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-            <form onSubmit={doUpdateUser}>
-              <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">
+            {isFetching ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </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>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, name: target.value }))
-                      }
-                    />
+                    <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 }));
+                          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">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  {/* Username */}
+                  <div className="flex gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">Username</label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.username}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, username: target.value }))
-                      }
-                    />
+                    <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>
-                </div>
 
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  {/* Customer */}
+                  <div className="flex gap-2.5">
                     <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 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">
+                              {isLoadingCustomer ? 'Loading...' : 'No results found'}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      {errors.customerid && (
+                        <span className="text-red-500 text-xs mt-1">{errors.customerid}</span>
+                      )}
+                    </div>
                   </div>
-                </div>
 
-                <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  {/* Email */}
+                  <div className="flex gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">Email</label>
-                    <Input
-                      className="input"
-                      type="email"
-                      value={formField.email}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, email: target.value }))
-                      }
-                    />
+                    <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>
-                </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">
+                  {/* 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) => {
-                          // console.log('Role changed to:', id_role);
-                          setFormField((prev) => ({ ...prev, id_role }));
+                          setTimeout(() => {
+                            setFormField((prev) => ({ ...prev, id_role }));
+                            setErrors((prev) => ({ ...prev, id_role: '' }));
+                          }, 0);
                         }}
                       >
-                        <SelectTrigger>
+                        <SelectTrigger className={errors.id_role ? 'border-red-500' : ''}>
                           <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
-                          {roles.map((role, idx) => (
+                          {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>
-                </div>
 
-                <div className="flex items-center flex-wrap gap-2.5">
-                  <label className="form-label max-w-56">Status</label>
+                  {/* 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>
 
-                  <div className="grow">
-                    <Select
-                      value={formField.status}
-                      onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Non Active</SelectItem>
-                      </SelectContent>
-                    </Select>
+                  <div className="flex justify-end pt-2.5">
+                    <Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? 'Saving...' : 'Save Changes'}
+                    </Button>
                   </div>
                 </div>
-
-                <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>
+              </form>
+            )}
           </div>
         </DialogBody>
       </DialogContent>

src/pages/settings/user/manage-user/blocks/Types.ts

@@ -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;
+};

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

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

src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx

@@ -95,22 +95,27 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         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,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[250px]',
+          headerClassName: 'w-[250px]'
         },
+        cell: ({ row }) => row.original.origin_customer?.fullname ?? ''
       },
       {
         accessorFn: (row) => {
-          const purchase = row?.purchase?.destination_customer.fullname;
-          const transfer = row?.transfer?.destination_customer.fullname;
+          const purchase = row?.purchase?.destination_customer?.fullname;
+          const transfer = row?.transfer?.destination_customer?.fullname;
 
-          return purchase ?? transfer ?? "-";
+          return purchase ?? transfer ?? "";
         },
         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,
         enableHiding: false,
         meta: {

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -113,22 +113,27 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       },
       {
         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,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[250px]'
-        }
+        },
+        cell: ({ row }) => row.original.origin_customer?.fullname ?? ''
       },
       {
         accessorFn: (row) => {
-          const purchase = row?.purchase?.destination_customer.fullname;
-          const transfer = row?.transfer?.destination_customer.fullname;
+          const purchase = row?.purchase?.destination_customer?.fullname;
+          const transfer = row?.transfer?.destination_customer?.fullname;
 
-          return purchase ?? transfer ?? "-";
+          return purchase ?? transfer ?? "";
         },
         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,
         enableHiding: false,
         meta: {
@@ -228,7 +233,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         enableSorting: false,
         enableHiding: false,
         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;
           return (
             <div key={`actions-${row.id}`}>

src/pages/transfer/transferfee/blocks/AddDialog.tsx

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

src/pages/transfer/transfertype/blocks/AddDialog.tsx

@@ -482,6 +482,7 @@ const AddDialog = () => {
                           <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>}

src/pages/transfer/transfertype/blocks/EditDialog.tsx

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

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

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