refactor(FE-114): improve recording date handling in RecordingForm

src/components/pages/flock/recording/form/RecordingForm.tsx

@@ -74,7 +74,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         recording_date:
           values.recording_date instanceof Date
             ? values.recording_date.toISOString()
-            : new Date().toISOString(),
+            : '',
         feed_data: (values.feed_data ?? []).map((p) => ({
           feed_name: p.feed_name,
           feed_qty: p.feed_qty,
@@ -119,11 +119,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const flockOptions = DUMMY_FLOCKS;
 
-  // Location and Coop state/handlers
   const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
   const [coopSelectInputValue, setCoopSelectInputValue] = useState('');
 
-  // Location fetch
   const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue ?? '' }).toString()}`;
   const { data: locations, isLoading: isLoadingLocations } = useSWR(
     locationsUrl,
@@ -133,14 +131,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     ? locations?.data.map((loc) => ({ value: loc.id, label: loc.name }))
     : [];
 
-  // Coop fetch
   const coopsUrl = `${KandangApi.basePath}?${new URLSearchParams({ search: coopSelectInputValue ?? '' }).toString()}`;
   const { data: coops, isLoading: isLoadingCoops } = useSWR(
     coopsUrl,
     KandangApi.getAllFetcher
   );
 
-  // Filter coop options based on selected location
   const coopOptions = useMemo(() => {
     if (!isResponseSuccess(coops) || !formik.values.location_id) return [];
     return coops.data
@@ -148,14 +144,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       .map((coop) => ({ value: coop.id, label: coop.name }));
   }, [coops, formik.values.location_id]);
 
-  // Handlers
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     const locationValue = (val as OptionType)?.value;
 
     formik.setFieldValue('location', val);
     formik.setFieldValue('location_id', locationValue || 0);
 
-    // Only set touched if there's a value
     if (locationValue) {
       formik.setFieldTouched('location', true);
       formik.setFieldTouched('location_id', true);
@@ -164,7 +158,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       formik.setFieldTouched('location_id', false);
     }
 
-    // Reset coop selection when location changes or is cleared
     formik.setFieldValue('coop', null);
     formik.setFieldValue('coop_id', 0);
     formik.setFieldTouched('coop', false);
@@ -178,7 +171,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('coop', val);
     formik.setFieldValue('coop_id', coopValue || 0);
 
-    // Only set touched if there's a value
     if (coopValue) {
       formik.setFieldTouched('coop', true);
       formik.setFieldTouched('coop_id', true);
@@ -229,6 +221,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     };
   };
 
+  const flockChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const flockValue = (val as OptionType)?.value;
+
+    formik.setFieldValue('flock', val);
+    formik.setFieldValue('flock_id', flockValue || 0);
+
+    if (flockValue) {
+      formik.setFieldTouched('flock', true);
+      formik.setFieldTouched('flock_id', true);
+    } else {
+      formik.setFieldTouched('flock', false);
+      formik.setFieldTouched('flock_id', false);
+    }
+  };
+
   const addFeedData = () => {
     const newFeedData = [
       ...(formik.values.feed_data || []),
@@ -382,17 +389,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     required
                     label='Flock'
                     value={formik.values.flock ?? undefined}
-                    onChange={(val) => {
-                      formik.setFieldValue('flock', val);
-                      formik.setFieldValue(
-                        'flock_id',
-                        (val as OptionType)?.value
-                      );
-                    }}
+                    onChange={flockChangeHandler}
                     options={flockOptions}
-                    onInputChange={(val) => {
-                      return val;
-                    }}
+                    onInputChange={setFlockSelectInputValue}
                     isLoading={false}
                     isError={
                       formik.touched.flock_id && Boolean(formik.errors.flock_id)
@@ -405,7 +404,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     required
                     label='Tanggal Recording'
                     type='date'
-                    name='tanggal_recording'
+                    name='recording_date'
                     value={
                       formik.values.recording_date instanceof Date
                         ? formik.values.recording_date
@@ -416,8 +415,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     onChange={(e) => {
                       const date = e.target.value
                         ? new Date(e.target.value)
-                        : new Date();
-                      formik.setFieldValue('tanggal_recording', date);
+                        : null;
+                      formik.setFieldValue('recording_date', date);
                     }}
                     onBlur={formik.handleBlur}
                     isError={
@@ -1129,6 +1128,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             }
                             options={RECORDING_FLAG_OPTIONS}
                             isDisabled={type === 'detail'}
+                            isClearable
                           />
                         </td>
                         <td>