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

This commit is contained in:
rstubryan
2025-11-06 10:58:14 +07:00
parent 3d3569bbc0
commit fa42f9b941
@@ -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