fix alert empty validation on reward module

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

@@ -25,6 +25,7 @@ import {
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
+import { initialStateReward, validateFormReward } from './Types';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -34,28 +35,16 @@ const AddDialog = () => {
   const { reload } = useDataGrid();
   const { PostData } = useCallApi();
   const parsedUser = getAuth()?.user;
-  const [alert, setAlert] = useState({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
-    message: ''
-  });
 
-  const initialState = {
+  const [formField, setFormField] = useState(initialStateReward);
-    name: '',
-    type: '',
-    amount: 0,
-    status: '',
-    created_by: '',
-    created_at: ''
-  };
-
-  const [formField, setFormField] = useState(initialState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateReward);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const RewardType = {
@@ -88,8 +77,7 @@ const AddDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed to create reward.');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong, please try again.');
@@ -103,19 +91,11 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (
+    if (!validateFormReward(formField, setErrors)) {
-      formField.name.trim() === '' ||
-      formField.type.trim() === '' ||
-      formField.amount === 0 ||
-      formField.status.trim() === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill name field.' });
       return;
     }
 
     doCreateReward(e);
-    // console.log(formField);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -135,43 +115,52 @@ const AddDialog = () => {
   }, [showAddDialog]);
 
   return (
-    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+    <Dialog open={showAddDialog} onOpenChange={handleAddDialog}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
           <DialogTitle>Reward - Create</DialogTitle>
-          <DialogDescription></DialogDescription>
+          <DialogDescription />
         </DialogHeader>
         <DialogBody ref={parentRef}>
           <div className="flex flex-col">
-            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                {/* Reward Name */}
+                <div className="grid grid-cols-8 gap-2 items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">
                     Reward Name<span className="text-red-500">*</span>
                   </label>
-
                   <Input
-                    className="input col-span-6"
+                    className={`input col-span-6 ${errors.name ? 'border-red-500' : ''}`}
                     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">
+
+                {/* Reward Type */}
+                <div className="grid grid-cols-8 gap-2 items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">
                     Reward Type<span className="text-red-500">*</span>
                   </label>
-
                   <div className="col-span-6">
                     <Select
                       value={formField.type}
-                      onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
+                      onValueChange={(value) => {
+                        setFormField((prev) => ({ ...prev, type: value }));
+                        setErrors((prev) => ({ ...prev, type: '' }));
+                      }}
                     >
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger className={`w-full ${errors.type ? 'border-red-500' : ''}`}>
                         <SelectValue placeholder="Select Type" />
                       </SelectTrigger>
                       <SelectContent>
@@ -185,14 +174,20 @@ const AddDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
+                  {errors.type && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.type}
+                    </span>
+                  )}
                 </div>
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
+
+                {/* Amount */}
+                <div className="grid grid-cols-8 gap-2 items-center">
                   <label className="form-label flex items-center gap-1 col-span-2">
                     Amount<span className="text-red-500">*</span>
                   </label>
-
                   <NumericFormat
-                    className="input col-span-6"
+                    className={`input col-span-6 ${errors.amount ? 'border-red-500' : ''}`}
                     value={formField.amount}
                     thousandSeparator="."
                     decimalSeparator=","
@@ -200,34 +195,49 @@ const AddDialog = () => {
                     onValueChange={(values) => {
                       setFormField((prev) => ({
                         ...prev,
-                        amount: values.floatValue || 0
+                        amount: values.floatValue ?? null
                       }));
+                      setErrors((prev) => ({ ...prev, amount: '' }));
                     }}
                     placeholder="Enter Amount"
                   />
+                  {errors.amount && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.amount}
+                    </span>
+                  )}
                 </div>
-                <div className="grid grid-cols-8 gap-2 w-full items-center">
+
+                {/* 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) =>
+                      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>
                         <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">InActive</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

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

@@ -25,6 +25,7 @@ import {
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
+import { initialStateReward, validateFormReward } from './Types';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -36,27 +37,15 @@ const EditDialog = () => {
   const parsedUser = getAuth()?.user;
   const [isLoading, setIsLoading] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [alert, setAlert] = useState({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
-    message: ''
-  });
 
-  const initialState = {
+  const [formField, setFormField] = useState(initialStateReward);
-    name: '',
-    type: '',
-    amount: 0,
-    status: '',
-    updated_by: '',
-    updated_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(initialStateReward);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const RewardType = {
@@ -73,6 +62,11 @@ const EditDialog = () => {
       e.preventDefault();
       setIsSubmitting(true);
 
+      if (!validateFormReward(formField, setErrors)) {
+        setIsSubmitting(false);
+        return;
+      }
+
       try {
         const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
 
@@ -89,8 +83,7 @@ const EditDialog = () => {
 
           doSaveLogActivity(editActivity);
         } else {
-          toast.error('Error Update Reward');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong, please try again.');
@@ -106,7 +99,6 @@ const EditDialog = () => {
     const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
     const fetchData = GetData(`${API_URL}/reward/getdata/${id}`, { id });
     const [response] = await Promise.all([fetchData, minDelay]);
-    // console.log('API Response:', response);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -120,24 +112,6 @@ const EditDialog = () => {
     setIsLoading(false);
   }, []);
 
-  // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
-  //   e.preventDefault();
-
-  //   if (
-  //     formField.name === '' ||
-  //     formField.type === '' ||
-  //     formField.amount === 0 ||
-  //     formField.status === ''
-  //   ) {
-  //     setAlert({ show: true, message: 'Please fill in all required fields.' });
-  //     return;
-  //   }
-
-  //   doUpdateReward(e);
-  //   // console.log(formField);
-  //   setAlert({ show: false, message: '' });
-  // };
-
   useEffect(() => {
     if (selectedReward) {
       doFetchData(selectedReward);
@@ -169,8 +143,6 @@ const EditDialog = () => {
         </DialogHeader>
         <DialogBody ref={parentRef}>
           <div className="flex flex-col">
-            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
-
             {isLoading ? (
               <div className="flex flex-col items-center justify-center p-8">
                 <div className="animate-pulse flex space-x-4 w-full">
@@ -187,31 +159,42 @@ const EditDialog = () => {
             ) : (
               <form onSubmit={doUpdateReward}>
                 <div className="card-body grid gap-5">
-                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  {/* Reward Name */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
                     <label className="form-label flex items-center gap-1 col-span-2">
                       Reward Name<span className="text-red-500">*</span>
                     </label>
-
                     <Input
-                      className="input col-span-6"
+                      className={`input col-span-6 ${errors.name ? 'border-red-500' : ''}`}
                       type="text"
+                      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">
+
+                  {/* Reward Type */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
                     <label className="form-label flex items-center gap-1 col-span-2">
                       Reward Type<span className="text-red-500">*</span>
                     </label>
-
                     <div className="col-span-6">
                       <Select
                         value={formField.type}
-                        onValueChange={(value) =>
+                        onValueChange={(value) => {
-                          setFormField((prev) => ({ ...prev, type: value }))
+                          setFormField((prev) => ({ ...prev, type: value }));
-                        }
+                          setErrors((prev) => ({ ...prev, type: '' }));
+                        }}
                       >
-                        <SelectTrigger className="w-full">
+                        <SelectTrigger className={`w-full ${errors.type ? 'border-red-500' : ''}`}>
                           <SelectValue placeholder="Select Type" />
                         </SelectTrigger>
                         <SelectContent>
@@ -225,14 +208,20 @@ const EditDialog = () => {
                         </SelectContent>
                       </Select>
                     </div>
+                    {errors.type && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.type}
+                      </span>
+                    )}
                   </div>
-                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+
+                  {/* Amount */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
                     <label className="form-label flex items-center gap-1 col-span-2">
                       Amount<span className="text-red-500">*</span>
                     </label>
-
                     <NumericFormat
-                      className="input col-span-6"
+                      className={`input col-span-6 ${errors.amount ? 'border-red-500' : ''}`}
                       value={formField.amount}
                       thousandSeparator="."
                       decimalSeparator=","
@@ -240,40 +229,60 @@ const EditDialog = () => {
                       onValueChange={(values) => {
                         setFormField((prev) => ({
                           ...prev,
-                          amount: values.floatValue || 0
+                          amount: values.floatValue ?? null
                         }));
+                        setErrors((prev) => ({ ...prev, amount: '' }));
                       }}
                       placeholder="Enter Amount"
                     />
+                    {errors.amount && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.amount}
+                      </span>
+                    )}
                   </div>
-                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+
+                  {/* 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) =>
+                        onValueChange={(value) => {
-                          setFormField((prev) => ({ ...prev, status: value }))
+                          setFormField((prev) => ({ ...prev, status: value }));
-                        }
+                          setErrors((prev) => ({ ...prev, status: '' }));
+                        }}
                       >
-                        <SelectTrigger className="w-full">
+                        <SelectTrigger
-                          <SelectValue placeholder="Select" defaultValue={formField.status} />
+                          className={`w-full ${errors.status ? 'border-red-500' : ''}`}
+                        >
+                          <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="Y">Active</SelectItem>
-                          <SelectItem value="N">InActive</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-7" />
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
                       ) : (
-                        'Save Changes'
+                        'Create'
                       )}
                     </Button>
                   </div>

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

@@ -0,0 +1,47 @@
+import { toast } from 'sonner';
+
+export const initialStateReward: {
+  name: string;
+  type: string;
+  amount: number | null;
+  status: string;
+  created_by: string;
+  created_at: string;
+} = {
+  name: '',
+  type: '',
+  amount: null,
+  status: '',
+  created_by: '',
+  created_at: ''
+};
+
+export const validateFormReward = (
+  formField: typeof initialStateReward,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>
+) => {
+  const requiredFields = [
+    { key: 'name', label: 'Name' },
+    { key: 'type', label: 'Type' },
+    { key: 'amount', label: 'Amount' },
+    { 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/reward/hooks/ManageRewardContext.tsx

@@ -159,8 +159,6 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      // console.log('API Response:', response?.data.list);
-      // console.log('reward list :', response);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
       console.error('Error fethcing reward', error);
@@ -185,7 +183,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 5 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'created_at', desc: true }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getRewardList(pageIndex, pageSize, sorting, columnFilters)