fix alert empty validation on currency module

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

@@ -15,16 +15,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { NumericFormat } from 'react-number-format';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@/components/ui/command';
-import { set } from 'date-fns';
 import {
   Select,
   SelectContent,
@@ -33,9 +23,9 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
-import { prefix } from 'stylis';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
+import { initialStateCurrency, validateFormCurrency } from './Types';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -50,27 +40,15 @@ const AddDialog = () => {
   const { PostData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
-  const [open, setOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [alert, setAlert] = useState({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
+  const [formField, setFormField] = useState(initialStateCurrency);
-    message: ''
-  });
-  const initialState = {
-    code: '',
-    name: '',
-    prefix: '',
-    status: '',
-    created_by: '',
-    created_at: ''
-  };
-  const [formField, setFormField] = useState(initialState);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateCurrency);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doCreateCurrency = useCallback(
@@ -94,8 +72,7 @@ const AddDialog = () => {
           doSaveLogActivity(createActivity);
           reload();
         } else {
-          toast.error('Error Create Currency');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong');
@@ -109,19 +86,11 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (
+    if (!validateFormCurrency(formField, setErrors)) {
-      formField.code === '' ||
-      formField.name === '' ||
-      formField.prefix === '' ||
-      formField.status === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
     doCreateCurrency(e);
-    // console.log(formField);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -144,17 +113,11 @@ const AddDialog = () => {
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Cuurency - Create</DialogTitle>
+          <DialogTitle>Currency - Create</DialogTitle>
           <DialogDescription></DialogDescription>
         </DialogHeader>
         <DialogBody ref={parentRef}>
           <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
@@ -167,10 +130,16 @@ const AddDialog = () => {
                     type="text"
                     autoComplete="off"
                     value={formField.code}
-                    onChange={({ target }) =>
+                    onChange={({ target }) => {
-                      setFormField((prev) => ({ ...prev, code: target.value }))
+                      setFormField((prev) => ({ ...prev, code: target.value }));
-                    }
+                      setErrors((prev) => ({ ...prev, code: '' }));
+                    }}
                   />
+                  {errors.code && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.code}
+                    </span>
+                  )}
                 </div>
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">
@@ -182,10 +151,16 @@ const AddDialog = () => {
                     type="text"
                     autoComplete="off"
                     value={formField.name}
-                    onChange={({ target }) =>
+                    onChange={({ target }) => {
-                      setFormField((prev) => ({ ...prev, name: target.value }))
+                      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>
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">
@@ -197,10 +172,16 @@ const AddDialog = () => {
                     type="text"
                     autoComplete="off"
                     value={formField.prefix}
-                    onChange={({ target }) =>
+                    onChange={({ target }) => {
-                      setFormField((prev) => ({ ...prev, prefix: target.value }))
+                      setFormField((prev) => ({ ...prev, prefix: target.value }));
-                    }
+                      setErrors((prev) => ({ ...prev, prefix: '' }));
+                    }}
                   />
+                  {errors.prefix && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.prefix}
+                    </span>
+                  )}
                 </div>
 
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
@@ -211,11 +192,12 @@ const AddDialog = () => {
                   <div className="col-span-6">
                     <Select
                       value={formField.status}
-                      onValueChange={(value) =>
+                      onValueChange={(value) => {
-                        setFormField((prev) => ({ ...prev, status: value }))
+                        setFormField((prev) => ({ ...prev, status: value }));
-                      }
+                        setErrors((prev) => ({ ...prev, status: '' }));
+                      }}
                     >
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger className={`w-full ${errors.status && 'border-red-500'}`}>
                         <SelectValue placeholder="Select" />
                       </SelectTrigger>
                       <SelectContent>
@@ -223,12 +205,12 @@ const AddDialog = () => {
                         <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="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" />

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

@@ -15,16 +15,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { NumericFormat } from 'react-number-format';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@/components/ui/command';
-import { set } from 'date-fns';
 import {
   Select,
   SelectContent,
@@ -35,6 +25,7 @@ import {
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
+import { initialStateCurrency, validateFormCurrency } from './Types';
 interface CurrencyProps {
   ID: string;
   name: string;
@@ -49,28 +40,16 @@ const EditDialog = () => {
   const { PostData, GetData, PutData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
-  const [open, setOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [alert, setAlert] = useState({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
+  const [formField, setFormField] = useState(initialStateCurrency);
-    message: ''
-  });
-  const initialState = {
-    code: '',
-    name: '',
-    prefix: '',
-    status: '',
-    created_by: '',
-    created_at: ''
-  };
-  const [formField, setFormField] = useState(initialState);
   const updated_time = new Date();
   const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateCurrency);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doUpdateCurrency = useCallback(
@@ -78,6 +57,11 @@ const EditDialog = () => {
       e.preventDefault();
       setIsSubmitting(true);
 
+      if (!validateFormCurrency(formField, setErrors)) {
+        setIsSubmitting(false);
+        return;
+      }
+
       try {
         const response = await PutData(
           `${API_URL}/dashboard/currency/${selectedCurrency}`,
@@ -97,8 +81,7 @@ const EditDialog = () => {
           doSaveLogActivity(createActivity);
           reload();
         } else {
-          toast.error('Error Create Currency');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong');
@@ -115,7 +98,6 @@ const EditDialog = () => {
     const fetchData = GetData(`${API_URL}/dashboard/currency/${id}`, { id });
     const [response] = await Promise.all([fetchData, minDelay]);
 
-    // console.log('Transaction Type: ', response?.data);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
@@ -126,7 +108,6 @@ const EditDialog = () => {
       }));
     }
     setIsLoading(false);
-    // console.log('form fieldd Transaction Type: ', formField);
   }, []);
 
   useEffect(() => {
@@ -160,12 +141,6 @@ const EditDialog = () => {
         </DialogHeader>
         <DialogBody ref={parentRef}>
           <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
             {isLoading ? (
               <div className="flex flex-col items-center justify-center p-8">
                 <div className="animate-pulse flex space-x-4 w-full">
@@ -182,74 +157,102 @@ const EditDialog = () => {
             ) : (
               <form onSubmit={doUpdateCurrency}>
                 <div className="card-body grid gap-5">
-                  <div className="w-full">
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
-                    <label className="form-label">
+                    <label className="form-label flex items-center gap-1 col-span-2">
-                      Code
+                      Code<span className="text-red-500">*</span>
-                      <span className="text-red-500">*</span>
                     </label>
+
                     <Input
+                      className="input col-span-6"
                       type="text"
-                      placeholder="Code"
+                      autoComplete="off"
                       value={formField.code}
-                      onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
+                      onChange={({ target }) => {
+                        setFormField((prev) => ({ ...prev, code: target.value }));
+                        setErrors((prev) => ({ ...prev, code: '' }));
+                      }}
                     />
+                    {errors.code && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.code}
+                      </span>
+                    )}
                   </div>
-                  <div className="w-full">
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
-                    <label className="form-label">
+                    <label className="form-label flex items-center gap-1 col-span-2">
-                      Name
+                      Name<span className="text-red-500">*</span>
-                      <span className="text-red-500">*</span>
                     </label>
+
                     <Input
+                      className="input col-span-6"
                       type="text"
-                      placeholder="Code"
+                      autoComplete="off"
                       value={formField.name}
-                      onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
+                      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>
-
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
-                  <div className="w-full">
+                    <label className="form-label flex items-center gap-1 col-span-2">
-                    <label className="form-label">
+                      Prefix<span className="text-red-500">*</span>
-                      Prefix
-                      <span className="text-red-500">*</span>
                     </label>
+
                     <Input
+                      className="input col-span-6"
                       type="text"
-                      placeholder="Code"
+                      autoComplete="off"
                       value={formField.prefix}
-                      onChange={(e) =>
+                      onChange={({ target }) => {
-                        setFormField((prev) => ({ ...prev, prefix: e.target.value }))
+                        setFormField((prev) => ({ ...prev, prefix: target.value }));
-                      }
+                        setErrors((prev) => ({ ...prev, prefix: '' }));
+                      }}
                     />
+                    {errors.prefix && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.prefix}
+                      </span>
+                    )}
                   </div>
 
-                  <div className="w-full">
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
-                    <label className="form-label">
+                    <label className="form-label flex items-center gap-1 col-span-2">
-                      Status
+                      Status<span className="text-red-500">*</span>
-                      <span className="text-red-500">*</span>
                     </label>
 
-                    <Select
+                    <div className="col-span-6">
-                      value={formField.status}
+                      <Select
-                      onValueChange={(value) =>
+                        value={formField.status}
-                        setFormField((prev) => ({ ...prev, status: value }))
+                        onValueChange={(value) => {
-                      }
+                          setFormField((prev) => ({ ...prev, status: value }));
-                    >
+                          setErrors((prev) => ({ ...prev, status: '' }));
-                      <SelectTrigger className="w-full">
+                        }}
-                        <SelectValue placeholder="Select" defaultValue={formField.status} />
+                      >
-                      </SelectTrigger>
+                        <SelectTrigger className={`w-full ${errors.status && 'border-red-500'}`}>
-                      <SelectContent>
+                          <SelectValue placeholder="Select" />
-                        <SelectItem value="Y">Active</SelectItem>
+                        </SelectTrigger>
-                        <SelectItem value="N">Inactive</SelectItem>
+                        <SelectContent>
-                      </SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
-                    </Select>
+                          <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="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" />
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
                       ) : (
-                        'Save Changes'
+                        'Create'
                       )}
                     </Button>
                   </div>

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

@@ -0,0 +1,47 @@
+import { toast } from 'sonner';
+
+export const initialStateCurrency: {
+  code: string;
+  name: string;
+  prefix: string;
+  status: string;
+  created_by: string;
+  created_at: string;
+} = {
+  code: '',
+  name: '',
+  prefix: '',
+  status: '',
+  created_by: '',
+  created_at: ''
+};
+
+export const validateFormCurrency = (
+  formField: typeof initialStateCurrency,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>
+) => {
+  const requiredFields = [
+    { key: 'code', label: 'Code' },
+    { key: 'name', label: 'Name' },
+    { key: 'prefix', label: 'Prefix' },
+    { 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/currency/hooks/ManageCurrencyContext.tsx

@@ -155,7 +155,6 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
       order_direction: sorting[0].desc ? 'ASC' : 'DESC'
       // filter: JSON.stringify(filter)
     });
-    // console.log(response?.data);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
@@ -181,7 +180,7 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
             pagination={{ size: 10 }}
             layout={{ card: true }}
             toolbar={<ListToolbar />}
-            sorting={[{ id: 'ID', desc: true }]}
+            sorting={[{ id: 'created_at', desc: false }]}
             serverSide={true}
             onFetchData={({ pageIndex, pageSize, sorting }) =>
               doGetCurrency(pageIndex, pageSize, sorting)