diff --git a/src/pages/master/reward/blocks/AddDialog.tsx b/src/pages/master/reward/blocks/AddDialog.tsx index 71727b8..83b9169 100644 --- a/src/pages/master/reward/blocks/AddDialog.tsx +++ b/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({ - show: false, - message: '' - }); + const [errors, setErrors] = useState>({}); - const initialState = { - name: '', - type: '', - amount: 0, - status: '', - created_by: '', - created_at: '' - }; - - const [formField, setFormField] = useState(initialState); + const [formField, setFormField] = useState(initialStateReward); const [isSubmitting, setIsSubmitting] = useState(false); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const resetForm = () => { - setFormField(initialState); - setAlert({ show: false, message: '' }); + setFormField(initialStateReward); + setErrors({}); }; const RewardType = { @@ -88,8 +77,7 @@ const AddDialog = () => { doSaveLogActivity(createActivity); } else { - toast.error('Failed to create reward.'); - setAlert({ show: true, message: response?.message }); + toast.error(response?.message); } } catch (error) { toast.error('Something went wrong, please try again.'); @@ -103,19 +91,11 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if ( - formField.name.trim() === '' || - formField.type.trim() === '' || - formField.amount === 0 || - formField.status.trim() === '' - ) { - setAlert({ show: true, message: 'Please fill name field.' }); + if (!validateFormReward(formField, setErrors)) { return; } doCreateReward(e); - // console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -135,43 +115,52 @@ const AddDialog = () => { }, [showAddDialog]); return ( - handleAddDialog(open)}> + Reward - Create - +
- {alert.show && {alert.message}}
-
+ {/* Reward Name */} +
- - setFormField((prev) => ({ ...prev, name: target.value })) - } + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, name: target.value })); + setErrors((prev) => ({ ...prev, name: '' })); + }} /> + {errors.name && ( + + {errors.name} + + )}
-
+ + {/* Reward Type */} +
-
+ {errors.type && ( + + {errors.type} + + )}
-
+ + {/* Amount */} +
- { onValueChange={(values) => { setFormField((prev) => ({ ...prev, - amount: values.floatValue || 0 + amount: values.floatValue ?? null })); + setErrors((prev) => ({ ...prev, amount: '' })); }} placeholder="Enter Amount" /> + {errors.amount && ( + + {errors.amount} + + )}
-
+ + {/* Status */} +
-
+ {errors.status && ( + + {errors.status} + + )}
+ + {/* Actions */}
diff --git a/src/pages/master/reward/blocks/Types.ts b/src/pages/master/reward/blocks/Types.ts new file mode 100644 index 0000000..28e068c --- /dev/null +++ b/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>> +) => { + const requiredFields = [ + { key: 'name', label: 'Name' }, + { key: 'type', label: 'Type' }, + { key: 'amount', label: 'Amount' }, + { key: 'status', label: 'Status' } + ]; + + const newErrors: Record = {}; + 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; +}; diff --git a/src/pages/master/reward/hooks/ManageRewardContext.tsx b/src/pages/master/reward/hooks/ManageRewardContext.tsx index 1d4d2f3..509d643 100644 --- a/src/pages/master/reward/hooks/ManageRewardContext.tsx +++ b/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={} 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)