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

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -234,6 +234,12 @@ const DashboardHomePage = () => {
     </div>
   );
 
+  const number: number = responseStatisticCard?.data.total_cash_in ?? 0;
+  const formattedNumber: number = parseFloat(number.toFixed(2));
+
+  const numbercashout: number = responseStatisticCard?.data.total_cash_out ?? 0;
+  const formattedNumbercashout: number = parseFloat(numbercashout.toFixed(2));
+
   return (
     <>
       <Helmet>
@@ -266,14 +272,14 @@ const DashboardHomePage = () => {
           />
           <Card
             title="Total Cash-in"
-            total={responseStatisticCard?.data.total_cash_in ?? 0}
+            total={formattedNumber.toFixed(2)} // now a number: 972.80
             growth={parseFloat((responseStatisticCard?.data?.cash_in_last_week.percent ?? 0).toFixed(2)) ?? 0}
             surplus={responseStatisticCard?.data.cash_in_last_week.surplus ?? false}
             icon="test"
           />
           <Card
             title="Total Cash-out"
-            total={responseStatisticCard?.data.total_cash_out ?? 0}
+            total={formattedNumbercashout.toFixed(2)} // now a number: 972.80
             growth={parseFloat((responseStatisticCard?.data?.cash_out_last_week.percent ?? 0).toFixed(2)) ?? 0}
             surplus={responseStatisticCard?.data.cash_out_last_week.surplus ?? false}
             icon="test"

src/pages/dashboards/home/blocks/Card.tsx

@@ -4,7 +4,7 @@ import { toAbsoluteUrl } from '@/utils/Assets';
 
 interface CardDataProduct {
   title: string;
-  total: number;
+  total: string;
   growth: number;
   surplus: boolean;
   icon: string;

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/pointiers/PointiersMaster.tsx

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

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

@@ -0,0 +1,244 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import { getAuth } from '@/auth';
+import { useCallApi } from '@/hooks';
+import { NumericFormat } from 'react-number-format';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
+import { initialStatePointiers, validateFormPointiers } from '../../pointiers/blocks/Types';
+import { Textarea } from '@/components/ui/textarea';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+
+const API_URL = apiConfig.service_master_data;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showAddDialog, handleAddDialog } = useManagePointiersContext();
+  const { reload } = useDataGrid();
+  const { PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const [formField, setFormField] = useState(initialStatePointiers);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const created_time = new Date();
+  const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialStatePointiers);
+    setErrors({});
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormField({ ...formField, [e.target.name]: e.target.value });
+  };
+
+  const doCreatePointiers = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+
+      try {
+        const response = await PostData(`${API_URL}/pointiers/create`, formField);
+
+        if (response?.status) {
+          handleAddDialog(false);
+          resetForm();
+          reload();
+          toast.success('Pointiers Create successfully!');
+          const createActivity = {
+            module: 'Manage Pointiers',
+            description: `Create New Pointiers => ${formField.name}`,
+            action: 'C'
+          };
+
+          doSaveLogActivity(createActivity);
+        } else {
+          toast.error(response?.message);
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!validateFormPointiers(formField, setErrors)) {
+      return;
+    }
+
+    doCreatePointiers(e);
+  };
+
+  useEffect(() => {
+    if (showAddDialog) {
+      setFormField((prev) => ({
+        ...prev,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      }));
+    }
+  }, [showAddDialog, parsedUser?.username, formattedTime]);
+
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={handleAddDialog}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Pointiers - Create</DialogTitle>
+          <DialogDescription />
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                {/* Pointiers Name */}
+                <div className="grid grid-cols-8 gap-2 items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Pointiers Name<span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    className={`input col-span-6 ${errors.name ? 'border-red-500' : ''}`}
+                    type="text"
+                    placeholder="Enter Name"
+                    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 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.name}
+                    </span>
+                  )}
+                </div>
+
+                {/* Description */}
+                <div className="grid grid-cols-8 gap-2 items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Description <span className="text-red-500">*</span>
+                  </label>
+                  <Textarea
+                    className={`input col-span-6 ${errors.name ? 'border-red-500' : ''}`}
+                    name="description"
+                    placeholder="Enter Description"
+                    value={formField.description}
+                    onChange={handleChange}
+                  />
+                  {errors.description && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.description}
+                    </span>
+                  )}
+                </div>
+
+                {/* Amount */}
+                <div className="grid grid-cols-8 gap-2 items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Minimal Point<span className="text-red-500">*</span>
+                  </label>
+                  <NumericFormat
+                    className={`input col-span-6 ${errors.minimal_point ? 'border-red-500' : ''}`}
+                    value={formField.minimal_point}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        minimal_point: values.floatValue ?? null
+                      }));
+                      setErrors((prev) => ({ ...prev, minimal_point: '' }));
+                    }}
+                    placeholder="Enter Point"
+                  />
+                  {errors.minimal_point && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.minimal_point}
+                    </span>
+                  )}
+                </div>
+
+                {/* Status */}
+                <div className="grid grid-cols-8 gap-2 items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Status<span className="text-red-500">*</span>
+                  </label>
+                  <div className="col-span-6">
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) => {
+                        setFormField((prev) => ({ ...prev, status: value }));
+                        setErrors((prev) => ({ ...prev, status: '' }));
+                      }}
+                    >
+                      <SelectTrigger className={`w-full ${errors.status ? 'border-red-500' : ''}`}>
+                        <SelectValue placeholder="Select" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {errors.status && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.status}
+                    </span>
+                  )}
+                </div>
+
+                {/* Actions */}
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;

src/pages/master/pointiers/blocks/DeleteDialog.tsx

@@ -0,0 +1,89 @@
+import { Alert, useDataGrid } from '@/components';
+import { useCallback, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+
+const API_URL = apiConfig.service_master_data;
+
+const DeleteDialog = () => {
+  const { showDeleteDialog, handleDeleteDialog, selectedPointiers } = useManagePointiersContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  // console.log('ini data :', selectedPointiers);
+
+  const doDeletePointiers = useCallback(async () => {
+    if (!selectedPointiers) {
+      toast.error('No Pointiers selected');
+      return;
+    }
+    // console.log('Ini datanya:', selectedPointiers);
+    const response = await DeleteData(`${API_URL}/pointiers/delete/${selectedPointiers}/true`, {
+      id: selectedPointiers
+    });
+    // console.log('Response Delete:', response);
+
+    if (response?.status) {
+      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      handleDeleteDialog(false, null);
+      toast.success('Success Delete Pointiers');
+      reload();
+      const createActivity = {
+        module: 'Manage Pointiers',
+        description: `Delete Pointiers => ${selectedPointiers}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
+    } else {
+      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      toast.error('Failed Delete Pointiers');
+    }
+  }, [selectedPointiers, DeleteData, handleDeleteDialog, reload]);
+
+  return (
+    <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <Alert variant="warning">
+            <h3 className="text-lg">Are you sure?</h3>
+            <span className="text-sm">You will delete this data!</span>
+          </Alert>
+          {alert.show && (
+            <Alert variant="danger">
+              <h3>{alert.message}</h3>
+            </Alert>
+          )}
+        </DialogHeader>
+        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={doDeletePointiers}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;

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

@@ -0,0 +1,324 @@
+import { apiConfig } from '@/config/api.config';
+import { Alert, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import { getAuth } from '@/auth';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { NumericFormat } from 'react-number-format';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
+import { initialStatePointiers, validateFormPointiers } from './Types';
+import { Textarea } from '@/components/ui/textarea';
+
+const API_URL = apiConfig.service_master_data;
+
+const EditDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedPointiers } = useManagePointiersContext();
+  const { reload } = useDataGrid();
+  const { PutData, GetData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const [formField, setFormField] = useState(initialStatePointiers);
+  const updated_time = new Date();
+  const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialStatePointiers);
+    setErrors({});
+  };
+
+  const doUpdatePointiers = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+
+      if (!validateFormPointiers(formField, setErrors)) {
+        setIsSubmitting(false);
+        return;
+      }
+
+      try {
+        const payload = {
+          name: formField.name,
+          description: formField.description,
+          minimal_point: formField.minimal_point,
+          status: formField.status,
+          updated_by: parsedUser.username,
+          updated_at: formattedTime
+        };
+
+        const response = await PutData(`${API_URL}/pointiers/update/${selectedPointiers}`, payload);
+
+        if (response?.status) {
+          resetForm();
+          handleEditDialog(false, null);
+          toast.success('Success Update Pointiers');
+          reload();
+          const editActivity = {
+            module: 'Manage Pointiers',
+            description: `Edit Pointiers => ${formField.name}`,
+            action: 'U'
+          };
+
+          doSaveLogActivity(editActivity);
+        } else {
+          toast.error(response?.message);
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [selectedPointiers, formField]
+  );
+
+  const handleRestore = useCallback(async () => {
+    setIsSubmitting(true);
+
+    try {
+      const response = await PutData(`${API_URL}/pointiers/restore/${selectedPointiers}`, {
+        updated_by: parsedUser.username,
+        updated_at: formattedTime
+      });
+
+      if (response?.status) {
+        toast.success('Success Restore Pointiers');
+        handleEditDialog(false, null);
+        reload();
+      } else {
+        toast.error(response?.message);
+      }
+    } catch (error) {
+      toast.error('Failed to restore pointiers');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [selectedPointiers, parsedUser.username, formattedTime]);
+
+  const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/pointiers/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        description: response.data.description,
+        minimal_point: response.data.minimal_point,
+        status: response.data.status
+      }));
+    }
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    if (selectedPointiers) {
+      doFetchData(selectedPointiers);
+    }
+  }, [selectedPointiers]);
+
+  useEffect(() => {
+    if (showEditDialog && selectedPointiers) {
+      setFormField((prev) => ({
+        ...prev,
+        updated_by: parsedUser.username,
+        updated_at: formattedTime
+      }));
+    }
+  }, [showEditDialog, selectedPointiers]);
+
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
+  return (
+    <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Pointiers - Update</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            {isLoading ? (
+              <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 Pointiers Details...</p>
+              </div>
+            ) : (
+              <form onSubmit={doUpdatePointiers}>
+                <div className="card-body grid gap-5">
+                  {/* Pointiers Name */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Pointiers Name<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className={`input col-span-6 ${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 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.name}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Pointiers Type */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Description<span className="text-red-500">*</span>
+                    </label>
+                    <Textarea
+                      className={`input col-span-6 ${errors.description ? 'border-red-500' : ''}`}
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) => {
+                        setFormField((prev) => ({ ...prev, description: target.value }));
+                        setErrors((prev) => ({ ...prev, description: '' }));
+                      }}
+                    />
+                    {errors.type && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.type}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* minimal point */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Minimal Point<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className={`input col-span-6 ${errors.minimal_point ? 'border-red-500' : ''}`}
+                      value={formField.minimal_point}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          minimal_point: values.floatValue ?? null
+                        }));
+                        setErrors((prev) => ({ ...prev, minimal_point: '' }));
+                      }}
+                      placeholder="Enter Point"
+                    />
+                    {errors.minimal_point && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.minimal_point}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Status */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+                    <div className="col-span-6">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) => {
+                          setFormField((prev) => ({ ...prev, status: value }));
+                          setErrors((prev) => ({ ...prev, status: '' }));
+                        }}
+                      >
+                        <SelectTrigger
+                          className={`w-full ${errors.status ? 'border-red-500' : ''}`}
+                        >
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    {errors.status && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.status}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex justify-end gap-5">
+                    {/* <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button> */}
+                    <div className="flex justify-end gap-5">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleRestore}
+                        disabled={isSubmitting}
+                      >
+                        {isSubmitting ? (
+                          <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                        ) : (
+                          'Restore'
+                        )}
+                      </Button>
+                      <Button variant="default" type="submit" disabled={isSubmitting}>
+                        {isSubmitting ? (
+                          <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                        ) : (
+                          'Update'
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            )}
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditDialog;

src/pages/master/pointiers/blocks/ListToolbar.tsx

@@ -0,0 +1,57 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+import { useEffect, useState } from 'react';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManagePointiersContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3 overflow-hidden">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+              />
+            </label>
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleAddDialog(true)}
+            >
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

src/pages/master/pointiers/blocks/Types.ts

@@ -0,0 +1,47 @@
+import { toast } from 'sonner';
+
+export const initialStatePointiers: {
+  name: string;
+  description: string;
+  minimal_point: number | null;
+  status: string;
+  created_by: string;
+  created_at: string;
+} = {
+  name: '',
+  description: '',
+  minimal_point: null,
+  status: '',
+  created_by: '',
+  created_at: ''
+};
+
+export const validateFormPointiers = (
+  formField: typeof initialStatePointiers,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>
+) => {
+  const requiredFields = [
+    { key: 'name', label: 'Name' },
+    { key: 'description', label: 'Description' },
+    { key: 'minimal_point', label: 'Minimal Point' },
+    { 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/master/pointiers/hooks/ManagePointiersContext.tsx

@@ -0,0 +1,199 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { Toaster } from 'sonner';
+import ListToolbar from '../blocks/ListToolbar';
+
+interface SelectedPointiers {
+  id: number;
+  name: string;
+  description: string;
+  minimal_point: number;
+  status: string;
+}
+
+interface ContextProps {
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_pointiers: string | null) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_pointiers: string | null) => void;
+  selectedPointiers: string | null;
+}
+
+const initialProps: ContextProps = {
+  showAddDialog: false,
+  handleAddDialog: (show: boolean) => {},
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedPointiers: null
+};
+
+const ManagePointiersContext = createContext<ContextProps>(initialProps);
+const API_URL_MASTER_DATA = apiConfig.service_master_data;
+
+const ManagePointiersContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedPointiers, setSelectedPointiers] = useState<string | null>(null);
+  const { GetData } = useCallApi();
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleEditDialog = useCallback((show: boolean, selected_pointiers: string | null) => {
+    setShowEditDialog(show);
+    setSelectedPointiers(show ? selected_pointiers : null);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_pointiers: string | null) => {
+    setShowDeleteDialog(show);
+    setSelectedPointiers(show ? selected_pointiers : null);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'description',
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorKey: 'minimal_point',
+        id: 'minimal_point',
+        header: ({ column }) => <DataGridColumnHeader title="Point" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'status',
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[250px] text-center',
+          cellClassName: 'text-center'
+        }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditDialog(true, row.id)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteDialog(true, row.id)}
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px] text-center',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleEditDialog, handleDeleteDialog]
+  );
+
+  const getPointiersList = async (page: number, limit: number, sorting: any, filter: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+      const response = await GetData(`${API_URL_MASTER_DATA}/pointiers/list`, {
+        limit: limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        filter: JSON.stringify(filter)
+      });
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fethcing pointiers', error);
+    }
+  };
+
+  return (
+    <ManagePointiersContext.Provider
+      value={{
+        showAddDialog,
+        handleAddDialog,
+        showEditDialog,
+        handleEditDialog,
+        showDeleteDialog,
+        handleDeleteDialog,
+        selectedPointiers
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 5 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'created_at', desc: true }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getPointiersList(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManagePointiersContext.Provider>
+  );
+};
+
+export { ManagePointiersContext, ManagePointiersContextProvider };
+export type { SelectedPointiers };

src/pages/master/pointiers/hooks/useManagePointiersContext.tsx

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

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/notification/blocks/AddDialog.tsx

@@ -27,6 +27,7 @@ import { useManageNotificationContext } from '../hooks/useManageNotificationCont
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog';
 import { Check, ChevronDown } from 'lucide-react';
+import { initialStateNotification, selectedNotification, validateFormNotification } from './Types';
 
 const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_NOTIFICATION = apiConfig.service_notification;
@@ -37,32 +38,34 @@ const AddDialog = () => {
   const { GetData, PostData } = useCallApi();
   const [alert, setAlert] = useState({ show: false, message: '' });
   const isSubmittingRef = useRef(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
 
-  const initialState = {
-    customers: [] as string[],
-    all_customer: '',
-    type: '',
-    via: '',
-    subject: '',
-    content: ''
-  };
-
-  const [formField, setFormField] = useState(initialState);
+  const [formField, setFormField] = useState<selectedNotification>(initialStateNotification);
   const [open, setOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const resetForm = () => {
-    setFormField({ ...initialState });
+    setFormField({ ...initialStateNotification });
     setIsSubmitting(false);
     setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setFormField({ ...formField, [e.target.name]: e.target.value });
+    const { name, value } = e.target;
+    setFormField({ ...formField, [name]: value });
 
-    if (e.target.name === 'all_customer' && e.target.value === 'true') {
+    if (name === 'all_customer' && value === 'true') {
       setFormField((prev) => ({ ...prev, customers: [] }));
     }
+
+    if (errors[name]) {
+      setErrors((prevErrors) => {
+        const updatedErrors = { ...prevErrors };
+        delete updatedErrors[name];
+        return updatedErrors;
+      });
+    }
   };
 
   const doCreateNotification = useCallback(
@@ -120,32 +123,8 @@ const AddDialog = () => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (isSubmittingRef.current) return;
-
-    if (
-      formField.all_customer.trim() === '' ||
-      formField.via.trim() === '' ||
-      formField.content.trim() === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill all required fields.' });
-      return;
-    }
-
-    if (formField.via === 'email' && formField.subject.trim() === '') {
-      setAlert({ show: true, message: 'Subject is required for E-Mail' });
-      return;
-    }
-
-    if (formField.via === 'fcm' && formField.subject.trim() === '') {
-      setAlert({ show: true, message: 'Subject is required form FCM' });
-      return;
-    }
-
-    setIsSubmitting(true);
+    if (!validateFormNotification(formField, setErrors)) return;
     doCreateNotification(e);
-    // console.log(formField);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -179,7 +158,11 @@ const AddDialog = () => {
                   <label className="form-label flex items-center gap-1 max-w-56">
                     Send To<span className="text-red-500">*</span>
                   </label>
-                  <div className="flex gap-6 items-center">
+                  <div
+                    className={`flex gap-6 items-center border rounded-md px-3 py-1 ${
+                      errors.all_customer ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                  >
                     <label className="flex items-center space-x-2">
                       <input
                         type="radio"
@@ -204,6 +187,13 @@ const AddDialog = () => {
                     </label>
                   </div>
                 </div>
+                {errors.all_customer && (
+                  <div className="w-full">
+                    <span className="text-red-500 text-xs mt-3 ml-[calc(30%+2rem)] block">
+                      {errors.all_customer}
+                    </span>
+                  </div>
+                )}
               </div>
 
               <div className="w-full">
@@ -277,7 +267,11 @@ const AddDialog = () => {
                   <label className="form-label flex items-center gap-1 max-w-56">
                     Type<span className="text-red-500">*</span>
                   </label>
-                  <div className="flex gap-6 items-center">
+                  <div
+                    className={`flex gap-6 items-center border rounded-md px-3 py-1 ${
+                      errors.type ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                  >
                     {['info', 'promo'].map((type) => (
                       <label key={type} className="flex items-center space-x-2">
                         <input
@@ -293,6 +287,13 @@ const AddDialog = () => {
                     ))}
                   </div>
                 </div>
+                {errors.type && (
+                  <div className="w-full">
+                    <span className="text-red-500 text-xs mt-3 ml-[calc(30%+2rem)] block">
+                      {errors.type}
+                    </span>
+                  </div>
+                )}
               </div>
 
               <div className="w-full">
@@ -300,7 +301,11 @@ const AddDialog = () => {
                   <label className="form-label flex items-center gap-1 max-w-56">
                     Send Via<span className="text-red-500">*</span>
                   </label>
-                  <div className="flex gap-6 items-center">
+                  <div
+                    className={`flex gap-6 items-center border rounded-md px-3 py-1 ${
+                      errors.via ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                  >
                     <label className="flex items-center space-x-2">
                       <input
                         type="radio"
@@ -336,6 +341,13 @@ const AddDialog = () => {
                     </label>
                   </div>
                 </div>
+                {errors.via && (
+                  <div className="w-full">
+                    <span className="text-red-500 text-xs mt-3 ml-[calc(30%+2rem)] block">
+                      {errors.via}
+                    </span>
+                  </div>
+                )}
               </div>
 
               <div className="w-full">
@@ -358,13 +370,20 @@ const AddDialog = () => {
                     Content<span className="text-red-500">*</span>
                   </label>
                   <Textarea
-                    className="input col-span-6"
+                    className={`input col-span-6 ${errors.content ? 'border-red-500' : ''}`}
                     name="content"
                     placeholder="Enter Content Notification"
                     value={formField.content}
                     onChange={handleChange}
                   />
                 </div>
+                {errors.content && (
+                  <div className="w-full">
+                    <span className="text-red-500 text-xs mt-3 col-span-8 ml-[calc(30%+2rem)] block">
+                      {errors.content}
+                    </span>
+                  </div>
+                )}
               </div>
 
               <div className="flex justify-end gap-4">

src/pages/notification/blocks/ListToolbar.tsx

@@ -1,50 +1,136 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
 import { Button } from '@/components/ui/button';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { DateRangePicker } from '@/pages/dashboards/home/blocks';
+
+const getOneMonthsAgo = () => {
+  const today = new Date();
+  return new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+};
+
+const formatDate = (date: Date): string => date.toISOString().split('T')[0];
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageNotificationContext();
+  const [dateRange, setDateRange] = useState({ from: '', to: '' });
   const [searchValue, setSearchValue] = useState<string>(
     (table.getColumn('content')?.getFilterValue() as string) ?? ''
   );
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  const handleSearch = () => {
-    table.getColumn('content')?.setFilterValue(searchValue);
-    table.setPageIndex(0);
-  };
+  useEffect(() => {
+    const today = new Date();
+    const threeMonthsAgo = getOneMonthsAgo();
+    setDateRange({ from: formatDate(threeMonthsAgo), to: formatDate(today) });
+  }, []);
 
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('content')?.setFilterValue(searchValue);
       table.setPageIndex(0);
     }, 200);
-
     return () => clearTimeout(timer);
   }, [searchValue, table]);
 
+  const handleFilterByDate = useCallback(() => {
+    try {
+      table.getColumn('created_at')?.setFilterValue(dateRange);
+    } catch (error) {
+      toast.error('Error applying date filter');
+      console.error('Error applying date filter:', error);
+    }
+  }, [dateRange, table]);
+
+  useEffect(() => {
+    if (dateRange.from && dateRange.to) {
+      handleFilterByDate();
+    }
+  }, [dateRange, handleFilterByDate]);
+
+  const handleClearAllFilters = () => {
+    const today = new Date();
+    const oneMonthAgo = getOneMonthsAgo();
+    const resetDateRange = {
+      from: formatDate(oneMonthAgo),
+      to: formatDate(today)
+    };
+
+    setSearchValue('');
+    setDateRange(resetDateRange);
+
+    table.getColumn('content')?.setFilterValue('');
+    table.getColumn('created_at')?.setFilterValue(resetDateRange);
+
+    setTimeout(() => {
+      table.setPageIndex(0);
+      reload();
+    }, 0);
+  };
+
+  const handleRefresh = () => {
+    const today = new Date();
+    const threeMonthsAgo = getOneMonthsAgo();
+    const resetDateRange = {
+      from: formatDate(threeMonthsAgo),
+      to: formatDate(today)
+    };
+
+    setSearchValue('');
+    setDateRange(resetDateRange);
+
+    table.setColumnFilters([{ id: 'created_at', value: resetDateRange }]);
+    table.setPageIndex(0);
+    reload();
+  };
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
-        <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
-              <KeenIcon icon="magnifier" />
-              <input
-                type="text"
-                placeholder="Search notifications"
-                value={searchValue}
-                onChange={(event) => setSearchValue(event.target.value)}
-              />
-            </label>
-            {/* <DefaultTooltip title={'Search'} placement={'top'}>
+        <div className="flex flex-wrap gap-3">
+          <label className="input input-sm w-[160px]">
+            From
+            <input
+              type="date"
+              placeholder="From"
+              value={dateRange.from}
+              onChange={(event) => setDateRange({ ...dateRange, from: event.target.value })}
+              name="from"
+            />
+          </label>
+
+          <label className="input input-sm w-[160px]">
+            To
+            <input
+              type="date"
+              placeholder="To"
+              value={dateRange.to}
+              onChange={(event) => setDateRange({ ...dateRange, to: event.target.value })}
+              name="to"
+            />
+          </label>
+
+          <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+            <Button
+              variant="outline"
+              className="h-8 disabled:bg-gray-400"
+              onClick={handleClearAllFilters}
+            >
+              <KeenIcon icon="arrow-circle-left" />
+            </Button>
+          </DefaultTooltip>
+
+          <label className="input input-sm w-1/3">
+            <KeenIcon icon="magnifier" />
+            <input
+              type="text"
+              placeholder="Search Notification"
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+            />
+          </label>
+          {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -53,21 +139,21 @@ const ListToolBar = () => {
                 <KeenIcon icon="magnifier" />
               </Button>
             </DefaultTooltip> */}
-          </div>
-          <div className="flex gap-3 items-center">
-            <Button
-              variant="outline"
-              className="h-7.5 text-[0.8rem]"
-              onClick={() => handleAddDialog(true)}
-            >
-              Add Data
+        </div>
+
+        <div className="flex gap-3 ml-auto">
+          <Button
+            variant="outline"
+            className="h-7.5 text-[0.8rem]"
+            onClick={() => handleAddDialog(true)}
+          >
+            Add Data
+          </Button>
+          <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <KeenIcon icon="arrows-circle" />
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
-              </Button>
-            </DefaultTooltip>
-          </div>
+          </DefaultTooltip>
         </div>
       </div>
     </div>

src/pages/notification/blocks/Types.ts

@@ -0,0 +1,49 @@
+import { toast } from 'sonner';
+
+export interface selectedNotification {
+  customers: string[];
+  all_customer: string;
+  type: string;
+  via: string;
+  subject: string;
+  content: string;
+}
+
+export const initialStateNotification: selectedNotification = {
+  customers: [],
+  all_customer: '',
+  type: '',
+  via: '',
+  subject: '',
+  content: ''
+};
+
+export const validateFormNotification = (
+  formField: typeof initialStateNotification,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>
+) => {
+  const requiredFields = [
+    { key: 'all_customer', label: 'Send To' },
+    { key: 'type', label: 'Type' },
+    { key: 'via', label: 'Via' },
+    { key: 'content', label: 'Content' }
+  ];
+
+  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/notification/hooks/ManageNotificationContext.tsx

@@ -7,17 +7,6 @@ import { ListToolBar } from '../blocks/ListToolbar';
 import { useCallApi } from '@/hooks';
 import moment from 'moment';
 
-interface SelectedNotification {
-  all_customers: string;
-  customer_name: string;
-  id: string;
-  content: string;
-  subject: string;
-  type: string;
-  via: string;
-  created_at: string;
-}
-
 interface ContextProps {
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
@@ -86,7 +75,8 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         enableSorting: true,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[350px]'
+          headerClassName: 'w-[350px]',
+          searchable: true
         }
       },
       {
@@ -111,7 +101,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         enableHiding: false
       },
       {
-        accessorFn: (row) => row.created_at,
+        accessorKey: 'created_at',
         id: 'created_at',
         header: ({ column }) => <DataGridColumnHeader title="Date Create" column={column} />,
         enableSorting: true,
@@ -124,16 +114,36 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
 
   const getNotificationList = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      sorting = sorting.length === 0 ? [{ id: 'created_at', desc: true }] : sorting;
-      filter =
-        filter.length == 0 ? {} : { content: { like: `%${filter[0].value?.toLowerCase()}%` } };
+      const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
+      const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
+
+      // Initialize filter object
+      let filterParams: any = {};
+
+      // Process filter array
+      if (Array.isArray(filter)) {
+        filter.forEach((f: any) => {
+          if (f.id === 'content' && f.value) {
+            filterParams.content = { like: `%${f.value.toLowerCase()}%` };
+          }
+
+          // Handle date range filter
+          if (f.id === 'created_at' && f.value?.from && f.value?.to) {
+            filterParams.created_at = {
+              from: `${f.value.from} 00:00:00`,
+              to: `${f.value.to} 23:59:59`
+            };
+          }
+        });
+      }
+
       const response = await GetData(`${API_URL_NOTIFICATION}/list`, {
         limit: limit,
         page: page + 1,
         with_deleted: false,
-        order_field: sorting[0].id,
-        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
-        filter: JSON.stringify(filter)
+        order_field: sortField,
+        order_direction: sortDirection,
+        filter: JSON.stringify(filterParams)
       });
       // console.log('API Response notif: ', response.);
       return { data: response?.data.list, totalCount: response?.data.total_count };
@@ -176,4 +186,3 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
 };
 
 export { ManageNotifContext, ManageNotifContextProvider };
-export type { SelectedNotification };

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/blocks/DetailApprovalTransaction.tsx

@@ -196,8 +196,7 @@ const DetailApprovalTransaction = () => {
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
                                         <p className="font-medium">
-                                            {transactionDetails?.origin_customer?.fullname ?? "-"}
-                                        </p>
+                                            {transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}                                        </p>
                                     </div>
 
                                     <div>
@@ -395,11 +394,12 @@ const DetailApprovalTransaction = () => {
                                                 second: '2-digit',
                                                 hour12: false
                                             })
-                                            : ''}</p>                                    </div>
+                                            : ''}</p>
+                                    </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
                                         <p className="font-medium">
-                                            {transactionDetails?.origin_customer?.fullname ?? "-"}
+                                            {transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}
                                         </p>
                                     </div>
                                     <div>
@@ -479,12 +479,12 @@ const DetailApprovalTransaction = () => {
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
                                         <p className="font-medium">
-                                            {transactionDetails?.origin_customer?.fullname ?? "-"}
+                                            {transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}
                                         </p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? "-"}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Email</p>
@@ -513,7 +513,7 @@ const DetailApprovalTransaction = () => {
                                         <div>
                                             <p className="text-sm text-gray-500">MSISDN</p>
                                             <p className="font-medium">
-                                                {transactionDetails.transfer.destination_customer.msisdn ?? "-"}
+                                                {transactionDetails.transfer.destination_customer.msisdn ?? transactionDetails.transfer.destination_msisdn}
                                             </p>
                                         </div>
                                         <div>

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

@@ -94,23 +94,28 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         },
       },
       {
-        accessorKey: 'origin_customer.fullname',
-        header: ({ column }) => <DataGridColumnHeader title="Origin Customer Full Name" column={column} />,
+        accessorKey: 'origin_name',
+        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: {
@@ -321,9 +326,9 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
         // Terapkan berdasarkan searchtype + code
         if (searchType && codeValue) {
           if (searchType === "msisdn") {
-            formattedFilter["origin_customer.msisdn"] = { like: `%${codeValue}%` };
+            formattedFilter["Transactions.origin_msisdn"] = { like: `%${codeValue}%` };
           } else if (searchType === "fullname") {
-            formattedFilter["origin_customer.fullname"] = { like: `%${codeValue}%` };
+            formattedFilter["Transactions.origin_name"] = { like: `%${codeValue}%` };
           } else if (searchType === "trxid") {
             formattedFilter["Transactions.code"] = { like: `%${codeValue}%` };
           }

src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx

@@ -217,7 +217,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? "-"}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
@@ -416,7 +416,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? "-"}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Amount</p>
@@ -492,11 +492,11 @@ const DetailTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? "-"}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
-                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? "-"}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Email</p>
@@ -519,13 +519,13 @@ const DetailTransaction = () => {
                                         <div>
                                             <p className="text-sm text-gray-500">Name</p>
                                             <p className="font-medium">
-                                                {transactionDetails.transfer.destination_customer.fullname ?? "-"}
+                                                {transactionDetails.transfer.destination_customer.fullname ?? transactionDetails.transfer.destination_name}
                                             </p>
                                         </div>
                                         <div>
                                             <p className="text-sm text-gray-500">MSISDN</p>
                                             <p className="font-medium">
-                                                {transactionDetails.transfer.destination_customer.msisdn ?? "-"}
+                                                {transactionDetails.transfer.destination_customer.msisdn ?? transactionDetails.transfer.destination_msisdn}
                                             </p>
                                         </div>
                                         <div>

src/pages/transaction/history-transaction/blocks/ListToolbar.tsx

@@ -98,9 +98,9 @@ const ListToolbar = () => {
       };
 
       if (typeSearchValue === 'msisdn') {
-        formattedFilter['origin_customer.msisdn'] = searchValue;
+        formattedFilter['Transactions.origin_msisdn'] = searchValue;
       } else if (typeSearchValue === 'fullname') {
-        formattedFilter['origin_customer.fullname'] = searchValue;
+        formattedFilter['Transactions.origin_name'] = searchValue;
       } else if (typeSearchValue === 'trxid') {
         formattedFilter['Transactions.code'] = searchValue;
       }

src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx

@@ -112,7 +112,8 @@ const ResendTransaction = ({ isOpen, onClose, selectedTransactionForResend }: Re
                 apiEndpoint = `${API_URL}/transaction/transfer`;
                 apiJsonData = {
                     id_origin_customer: data.origin_customer.id,
-                    msisdn_destination: data.transfer.destination_customer.msisdn,
+                    // msisdn_destination: data.transfer.destination_customer.msisdn,
+                    msisdn_destination: data.transfer.destination_msisdn,
                     id_transaction_type: data.type.id,
                     amount: String(data.transfer.amount),
                     pin: pintransactiion,

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

@@ -112,23 +112,28 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         }
       },
       {
-        accessorKey: 'origin_customer.fullname',
-        header: ({ column }) => <DataGridColumnHeader title="Origin Customer Full Name" column={column} />,
+        accessorKey: 'origin_name',
+        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/transaction/withdrawl-saldo/TransactionWithdraw.tsx

@@ -101,6 +101,7 @@ const TransactionWithdraw = () => {
 
   const doPostData = async (form: typeof initialForm) => {
     setIsSubmitting(true);
+    // console.log(getAuth()?.user.customer.id);
 
     try {
       let response = await PostData(`${API_URL}/transaction/transfer`, {
@@ -109,7 +110,8 @@ const TransactionWithdraw = () => {
         pin: form.pin,
         purpose: form.purpose,
         id_transaction_type: "20c8a690-dc02-463d-b391-324184d1fefa",
-        id_origin_customer: getAuth()?.id
+        id_origin_customer: getAuth()?.user.customer.id,
+        type:"R"
       });
       if (response?.status == true) {
         await fetchWallets();

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