diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx index d29e7f72..42edc1ca 100644 --- a/src/components/pages/flock/recording/form/RecordingForm.tsx +++ b/src/components/pages/flock/recording/form/RecordingForm.tsx @@ -1,9 +1,8 @@ 'use client'; import { useCallback, useEffect, useMemo, useState } from 'react'; -import { FormikProps, useFormik } from 'formik'; +import { useFormik } from 'formik'; import { Icon } from '@iconify/react'; -import { toast } from 'react-hot-toast'; import Button from '@/components/Button'; import TextInput from '@/components/input/TextInput'; import NumberInput from '@/components/input/NumberInput'; @@ -42,8 +41,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { const [selectedWeight, setSelectedWeight] = useState([]); const [selectedVaccine, setSelectedVaccine] = useState([]); const [selectedMortality, setSelectedMortality] = useState([]); - const [, setRecordingFormErrorMessage] = useState(''); + const { deleteModal, recordingFormErrorMessage, @@ -107,15 +106,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { }, }); + // Locations const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue }).toString()}`; const { data: locations, isLoading: isLoadingLocations } = useSWR( locationsUrl, LocationApi.getAllFetcher ); - const locationOptions = isResponseSuccess(locations) - ? locations.data.map((loc) => ({ value: loc.id, label: loc.name })) - : []; + // Project Flocks const projectFlocksUrl = useMemo(() => { if (!formik.values.location_id) return null; const params = new URLSearchParams({ @@ -130,13 +128,39 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { ProjectFlockApi.getAllFetcher ); - const flockOptions = isResponseSuccess(projectFlocks) - ? projectFlocks.data.map((flock) => ({ - value: flock.id, - label: flock.flock.name, - })) - : []; + // Pakan Products + const pakanUrl = useMemo(() => { + if (!formik.values.location_id) return null; + const params = new URLSearchParams({ + flag: 'PAKAN', + search: '', + location_id: formik.values.location_id.toString(), + }); + return `${ProductWarehouseApi.basePath}?${params.toString()}`; + }, [formik.values.location_id]); + const { data: pakanProducts, isLoading: isLoadingPakan } = useSWR( + pakanUrl, + ProductWarehouseApi.getAllFetcher + ); + + // OVK Products + const ovkUrl = useMemo(() => { + if (!formik.values.location_id) return null; + const params = new URLSearchParams({ + flag: 'OVK', + search: '', + location_id: formik.values.location_id.toString(), + }); + return `${ProductWarehouseApi.basePath}?${params.toString()}`; + }, [formik.values.location_id]); + + const { data: ovkProducts, isLoading: isLoadingOvk } = useSWR( + ovkUrl, + ProductWarehouseApi.getAllFetcher + ); + + // COMPUTED VALUES const buildWarehouseLabel = useCallback((warehouse: Warehouse) => { const parts: string[] = [warehouse.name]; @@ -155,20 +179,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { return parts.join(' - '); }, []); - const pakanUrl = useMemo(() => { - if (!formik.values.location_id) return null; - const params = new URLSearchParams({ - flag: 'PAKAN', - search: '', - location_id: formik.values.location_id.toString(), - }); - return `${ProductWarehouseApi.basePath}?${params.toString()}`; - }, [formik.values.location_id]); + const locationOptions = isResponseSuccess(locations) + ? locations.data.map((loc) => ({ value: loc.id, label: loc.name })) + : []; - const { data: pakanProducts, isLoading: isLoadingPakan } = useSWR( - pakanUrl, - ProductWarehouseApi.getAllFetcher - ); + const flockOptions = isResponseSuccess(projectFlocks) + ? projectFlocks.data.map((flock) => ({ + value: flock.id, + label: flock.flock.name, + })) + : []; + + const coopOptions = useMemo(() => { + if (!selectedProjectFlock || !selectedProjectFlock.kandangs) return []; + return selectedProjectFlock.kandangs.map((kandang) => ({ + value: kandang.id, + label: kandang.name, + })); + }, [selectedProjectFlock]); const filteredPakanProducts = useMemo(() => { if (!isResponseSuccess(pakanProducts) || !formik.values.location_id) @@ -181,8 +209,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { return warehouse.location.id === formik.values.location_id; } - // If warehouse only has area, include it if area matches the location's area - // Note: This might need adjustment based on your business logic return false; }); }, [pakanProducts, formik.values.location_id]); @@ -204,21 +230,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { return map; }, [filteredPakanProducts]); - const ovkUrl = useMemo(() => { - if (!formik.values.location_id) return null; - const params = new URLSearchParams({ - flag: 'OVK', - search: '', - location_id: formik.values.location_id.toString(), - }); - return `${ProductWarehouseApi.basePath}?${params.toString()}`; - }, [formik.values.location_id]); - - const { data: ovkProducts, isLoading: isLoadingOvk } = useSWR( - ovkUrl, - ProductWarehouseApi.getAllFetcher - ); - const filteredOvkProducts = useMemo(() => { if (!isResponseSuccess(ovkProducts) || !formik.values.location_id) return []; @@ -230,8 +241,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { return warehouse.location.id === formik.values.location_id; } - // If warehouse only has area, include it if area matches the location's area - // Note: This might need adjustment based on your business logic return false; }); }, [ovkProducts, formik.values.location_id]); @@ -253,14 +262,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { return map; }, [filteredOvkProducts]); - const coopOptions = useMemo(() => { - if (!selectedProjectFlock || !selectedProjectFlock.kandangs) return []; - return selectedProjectFlock.kandangs.map((kandang) => ({ - value: kandang.id, - label: kandang.name, - })); - }, [selectedProjectFlock]); + // EFFECTS + useEffect(() => { + if (initialValues?.flock && isResponseSuccess(projectFlocks)) { + const flock = projectFlocks.data.find( + (f) => f.id === initialValues.flock.id + ); + if (flock) { + setSelectedProjectFlock(flock); + } + } + }, [initialValues, projectFlocks]); + // EVENT HANDLERS - Select Inputs const locationChangeHandler = (val: OptionType | OptionType[] | null) => { const locationValue = (val as OptionType)?.value; @@ -298,17 +312,120 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { formik.setFieldValue('coop_id', coopValue || 0, false); }; - useEffect(() => { - if (initialValues?.flock && isResponseSuccess(projectFlocks)) { - const flock = projectFlocks.data.find( - (f) => f.id === initialValues.flock.id - ); - if (flock) { - setSelectedProjectFlock(flock); - } - } - }, [initialValues, projectFlocks]); + // EVENT HANDLERS - Feed Data + const addFeedData = () => { + const newFeedData = [ + ...(formik.values.feed_data || []), + { + feed: null, + feed_id: '', + feed_qty: '', + feed_stock: 0, + }, + ]; + formik.setFieldValue('feed_data', newFeedData); + }; + const removeFeedData = (idx: number) => { + const updatedFeedData = formik.values.feed_data?.filter( + (_, i) => i !== idx + ); + formik.setFieldValue('feed_data', updatedFeedData); + }; + + const removeSelectedFeedData = () => { + const updatedFeedData = formik.values.feed_data?.filter( + (_, idx) => !selectedFeed.includes(idx) + ); + formik.setFieldValue('feed_data', updatedFeedData); + setSelectedFeed([]); + }; + + // EVENT HANDLERS - Body Weight + const addBodyWeight = () => { + const newBodyWeight = [ + ...(formik.values.body_weight || []), + { + chicken_weight: 0, + chicken_count: 0, + average_chicken_weight: 0, + }, + ]; + formik.setFieldValue('body_weight', newBodyWeight); + }; + + const removeBodyWeight = (idx: number) => { + const updatedBodyWeight = formik.values.body_weight?.filter( + (_, i) => i !== idx + ); + formik.setFieldValue('body_weight', updatedBodyWeight); + }; + + const removeSelectedBodyWeight = () => { + const updatedBodyWeight = formik.values.body_weight?.filter( + (_, idx) => !selectedWeight.includes(idx) + ); + formik.setFieldValue('body_weight', updatedBodyWeight); + setSelectedWeight([]); + }; + + // EVENT HANDLERS - Vaccination + const addVaccination = () => { + const newVaccination = [ + ...(formik.values.vaccination || []), + { + vaccine: null, + vaccine_id: '', + total_stock: '', + used_stock: 0, + }, + ]; + formik.setFieldValue('vaccination', newVaccination); + }; + + const removeVaccination = (idx: number) => { + const updatedVaccination = formik.values.vaccination?.filter( + (_, i) => i !== idx + ); + formik.setFieldValue('vaccination', updatedVaccination); + }; + + const removeSelectedVaccination = () => { + const updatedVaccination = formik.values.vaccination?.filter( + (_, idx) => !selectedVaccine.includes(idx) + ); + formik.setFieldValue('vaccination', updatedVaccination); + setSelectedVaccine([]); + }; + + // EVENT HANDLERS - Mortality + const addMortality = () => { + const newMortality = [ + ...(formik.values.mortality || []), + { + condition: RECORDING_FLAG_OPTIONS[0].value, + count: 0, + }, + ]; + formik.setFieldValue('mortality', newMortality); + }; + + const removeMortality = (idx: number) => { + const updatedMortality = formik.values.mortality?.filter( + (_, i) => i !== idx + ); + formik.setFieldValue('mortality', updatedMortality); + }; + + const removeSelectedMortality = () => { + const updatedMortality = formik.values.mortality?.filter( + (_, idx) => !selectedMortality.includes(idx) + ); + formik.setFieldValue('mortality', updatedMortality); + setSelectedMortality([]); + }; + + // HELPER FUNCTIONS const isRepeaterInputError = ( arrayName: T, field: T extends 'feed_data' @@ -350,115 +467,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => { }; }; - const addFeedData = () => { - const newFeedData = [ - ...(formik.values.feed_data || []), - { - feed: null, - feed_id: '', - feed_qty: '', - feed_stock: 0, - }, - ]; - formik.setFieldValue('feed_data', newFeedData); - }; - - const removeFeedData = (idx: number) => { - const updatedFeedData = formik.values.feed_data?.filter( - (_, i) => i !== idx - ); - formik.setFieldValue('feed_data', updatedFeedData); - }; - - const removeSelectedFeedData = () => { - const updatedFeedData = formik.values.feed_data?.filter( - (_, idx) => !selectedFeed.includes(idx) - ); - formik.setFieldValue('feed_data', updatedFeedData); - setSelectedFeed([]); - }; - - const addBodyWeight = () => { - const newBodyWeight = [ - ...(formik.values.body_weight || []), - { - chicken_weight: 0, - chicken_count: 0, - average_chicken_weight: 0, - }, - ]; - formik.setFieldValue('body_weight', newBodyWeight); - }; - - const removeBodyWeight = (idx: number) => { - const updatedBodyWeight = formik.values.body_weight?.filter( - (_, i) => i !== idx - ); - formik.setFieldValue('body_weight', updatedBodyWeight); - }; - - const removeSelectedBodyWeight = () => { - const updatedBodyWeight = formik.values.body_weight?.filter( - (_, idx) => !selectedWeight.includes(idx) - ); - formik.setFieldValue('body_weight', updatedBodyWeight); - setSelectedWeight([]); - }; - - const addVaccination = () => { - const newVaccination = [ - ...(formik.values.vaccination || []), - { - vaccine: null, - vaccine_id: '', - total_stock: '', - used_stock: 0, - }, - ]; - formik.setFieldValue('vaccination', newVaccination); - }; - - const removeVaccination = (idx: number) => { - const updatedVaccination = formik.values.vaccination?.filter( - (_, i) => i !== idx - ); - formik.setFieldValue('vaccination', updatedVaccination); - }; - - const removeSelectedVaccination = () => { - const updatedVaccination = formik.values.vaccination?.filter( - (_, idx) => !selectedVaccine.includes(idx) - ); - formik.setFieldValue('vaccination', updatedVaccination); - setSelectedVaccine([]); - }; - - const addMortality = () => { - const newMortality = [ - ...(formik.values.mortality || []), - { - condition: RECORDING_FLAG_OPTIONS[0].value, - count: 0, - }, - ]; - formik.setFieldValue('mortality', newMortality); - }; - - const removeMortality = (idx: number) => { - const updatedMortality = formik.values.mortality?.filter( - (_, i) => i !== idx - ); - formik.setFieldValue('mortality', updatedMortality); - }; - - const removeSelectedMortality = () => { - const updatedMortality = formik.values.mortality?.filter( - (_, idx) => !selectedMortality.includes(idx) - ); - formik.setFieldValue('mortality', updatedMortality); - setSelectedMortality([]); - }; - return ( <>