refactor(FE-170): clean up imports and enhance state management in RecordingForm

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

@@ -2,19 +2,28 @@
 
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
+
 import { useFormik } from 'formik';
 import useSWR from 'swr';
+
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
-
+import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { useModal } from '@/components/Modal';
+
 import {
   ProjectFlockKandangApi,
   RecordingApi,
+  ProjectFlockApi,
 } from '@/services/api/production';
+import { LocationApi } from '@/services/api/master-data';
+import { ProductWarehouseApi } from '@/services/api/inventory';
+
 import {
   CreateGrowingRecordingPayload,
   CreateLayingRecordingPayload,
@@ -23,6 +32,10 @@ import {
   Recording,
 } from '@/types/api/production/recording';
 import { type BaseApiResponse, FormStepStatus } from '@/types/api/api-general';
+import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Kandang } from '@/types/api/master-data/kandang';
+
 import {
   RecordingGrowingFormSchema,
   RecordingLayingFormSchema,
@@ -33,28 +46,21 @@ import {
   UpdateRecordingGrowingFormSchema,
   UpdateRecordingLayingFormSchema,
 } from './RecordingForm.schema';
-import { ProjectFlockApi } from '@/services/api/production';
+
-import { LocationApi } from '@/services/api/master-data';
-import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { cn, formatDate } from '@/lib/helper';
-import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
-import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 
-import Card from '@/components/Card';
-import Badge from '@/components/Badge';
-import StepItem from '@/components/steps/StepItem';
-import { Kandang } from '@/types/api/master-data/kandang';
-
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
   initialValues?: Recording;
 }
 
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
+  // ===== HOOKS & ROUTER =====
   const router = useRouter();
+
+  // ===== STATE MANAGEMENT =====
   const [selectedBodyWeights, setSelectedBodyWeights] = useState<number[]>([]);
   const [selectedStocks, setSelectedStocks] = useState<number[]>([]);
   const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
@@ -78,7 +84,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
-  const [formSteps, setFormSteps] = useState<FormStepStatus[] | null>(null);
+  const [, setFormSteps] = useState<FormStepStatus[] | null>(null);
   const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
     useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -489,6 +495,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     projectFlockKandangLookup?.project_flock?.category === 'LAYING' ||
     projectFlockKandangDetail?.project_flock?.category === 'LAYING';
 
+  // ===== FORMIK SETUP =====
   const formikInitialValues = useMemo(() => {
     let baseValues;
     if (isLayingCategory) {
@@ -1235,6 +1242,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   }, [bodyWeightValues, editingAverageIndex, manuallyEditedRows]);
 
+  // ===== RENDER =====
   return (
     <>
       <section className='w-full'>
@@ -2448,6 +2456,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         </form>
       </section>
 
+      {/* ===== MODALS ===== */}
       {type !== 'add' && (
         <>
           <ConfirmationModal