feat(FE-114): integrate date time handling in RecordingForm for on-time status

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
@@ -119,6 +119,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('project_flock_kandang_id', projectFlockId, false);
   };
 
+  // EVENT HANDLERS - Date Time
+  const recordDateTimeChangeHandler = (datetime: Date | null) => {
+    formik.setFieldValue('record_datetime', datetime, false);
+
+    // Auto-set ontime based on date difference
+    if (datetime) {
+      const today = new Date();
+      const recordDate = new Date(datetime);
+
+      // Reset time to compare only dates
+      const todayDateOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const recordDateOnly = new Date(recordDate.getFullYear(), recordDate.getMonth(), recordDate.getDate());
+
+      // Set ontime to true if recording date is today, false otherwise
+      const isOnTime = todayDateOnly.getTime() === recordDateOnly.getTime();
+      formik.setFieldValue('ontime', isOnTime, false);
+    }
+  };
+
+  // Set initial ontime value when form loads or record_datetime changes
+  useEffect(() => {
+    if (formik.values.record_datetime) {
+      const today = new Date();
+      const recordDate = new Date(formik.values.record_datetime);
+
+      // Reset time to compare only dates
+      const todayDateOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const recordDateOnly = new Date(recordDate.getFullYear(), recordDate.getMonth(), recordDate.getDate());
+
+      // Set ontime to true if recording date is today, false otherwise
+      const isOnTime = todayDateOnly.getTime() === recordDateOnly.getTime();
+
+      // Only update if ontime is not set or different from calculated value
+      if (formik.values.ontime !== isOnTime) {
+        formik.setFieldValue('ontime', isOnTime, false);
+      }
+    }
+  }, [formik.values.record_datetime]);
+
   // EVENT HANDLERS - Body Weights
   const addBodyWeight = () => {
     const newBodyWeights = [
@@ -304,7 +343,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   const datetime = e.target.value
                     ? new Date(e.target.value)
                     : null;
-                  formik.setFieldValue('record_datetime', datetime);
+                  recordDateTimeChangeHandler(datetime);
                 }}
                 onBlur={formik.handleBlur}
                 isError={
@@ -332,13 +371,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               />
 
               <CheckboxInput
-                label='On Time'
+                hidden={true}
                 name='ontime'
                 checked={formik.values.ontime || false}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   formik.setFieldValue('ontime', e.target.checked);
                 }}
-                disabled={type === 'detail'}
+                disabled={type !== 'detail'}
               />
             </div>
           </Card>