From 1869fa8dc55cf1e5e9105981c8614866532b86af Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 22:03:09 +0700
Subject: [PATCH 01/68] feat(FE-136): add flock and recording management with
 validation in forms

---
 .../recording/form/RecordingForm.schema.ts    | 121 ++++++++++++++++++
 src/config/constant.ts                        |  30 +++++
 src/services/api/flock.ts                     |  22 ++++
 src/types/api/flock/flock.d.ts                |  14 ++
 src/types/api/flock/recording.d.ts            |  54 ++++++++
 5 files changed, 241 insertions(+)
 create mode 100644 src/components/pages/flock/recording/form/RecordingForm.schema.ts
 create mode 100644 src/services/api/flock.ts
 create mode 100644 src/types/api/flock/flock.d.ts
 create mode 100644 src/types/api/flock/recording.d.ts

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
new file mode 100644
index 00000000..f78e65e1
--- /dev/null
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -0,0 +1,121 @@
+import * as Yup from 'yup';
+import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
+
+export const RecordingFormSchema = Yup.object({
+  flock_id: Yup.number().required('Flock wajib diisi!'),
+  tanggal: Yup.string().required('Tanggal wajib diisi!'),
+  data_pakan: Yup.array()
+    .of(
+      Yup.object({
+        nama_pakan: Yup.string().required('Nama pakan wajib diisi!'),
+        qty_pakan: Yup.number()
+          .required('Qty pakan wajib diisi!')
+          .min(1, 'Qty minimal 1!'),
+        stock_pakan: Yup.number()
+          .required('Stock pakan wajib diisi!')
+          .min(0, 'Stock minimal 0!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data pakan!')
+    .required('Data pakan wajib diisi!'),
+  bobot_badan: Yup.array()
+    .of(
+      Yup.object({
+        berat_ayam: Yup.number()
+          .required('Berat ayam wajib diisi!')
+          .min(1, 'Berat minimal 1!'),
+        jumlah_ayam: Yup.number()
+          .required('Jumlah ayam wajib diisi!')
+          .min(1, 'Jumlah minimal 1!'),
+        rata_rata_berat_ayam: Yup.number()
+          .required('Rata-rata berat ayam wajib diisi!')
+          .min(1, 'Rata-rata minimal 1!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data bobot badan!')
+    .required('Data bobot badan wajib diisi!'),
+  vaksinasi: Yup.array()
+    .of(
+      Yup.object({
+        nama_vaksin: Yup.string().required('Nama vaksin wajib diisi!'),
+        total_stock: Yup.number()
+          .required('Total stock wajib diisi!')
+          .min(0, 'Total stock minimal 0!'),
+        jumlah_stock: Yup.number()
+          .required('Jumlah stock wajib diisi!')
+          .min(0, 'Jumlah stock minimal 0!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data vaksinasi!')
+    .required('Data vaksinasi wajib diisi!'),
+  mortalitas: Yup.array()
+    .of(
+      Yup.object({
+        kondisi: Yup.mixed<string>()
+          .oneOf(
+            RECORDING_FLAG_OPTIONS.map((opt) => opt.value),
+            'Kondisi tidak valid!'
+          )
+          .required('Kondisi wajib diisi!'),
+        jumlah: Yup.number()
+          .required('Jumlah wajib diisi!')
+          .min(1, 'Jumlah minimal 1!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data mortalitas!')
+    .required('Data mortalitas wajib diisi!'),
+});
+
+export const UpdateRecordingFormSchema = RecordingFormSchema;
+
+export type RecordingFormValues = Yup.InferType<typeof RecordingFormSchema>;
+
+export const getRecordingFormInitialValues = (
+  initialValues?: Partial<RecordingFormValues>
+): RecordingFormValues => ({
+  flock_id: initialValues?.flock_id ?? 0,
+  tanggal: initialValues?.tanggal ?? '',
+  data_pakan:
+    Array.isArray(initialValues?.data_pakan) &&
+    initialValues.data_pakan.length > 0
+      ? initialValues.data_pakan
+      : [
+          {
+            nama_pakan: '',
+            qty_pakan: 0,
+            stock_pakan: 0,
+          },
+        ],
+  bobot_badan:
+    Array.isArray(initialValues?.bobot_badan) &&
+    initialValues.bobot_badan.length > 0
+      ? initialValues.bobot_badan
+      : [
+          {
+            berat_ayam: 0,
+            jumlah_ayam: 0,
+            rata_rata_berat_ayam: 0,
+          },
+        ],
+  vaksinasi:
+    Array.isArray(initialValues?.vaksinasi) &&
+    initialValues.vaksinasi.length > 0
+      ? initialValues.vaksinasi
+      : [
+          {
+            nama_vaksin: '',
+            total_stock: 0,
+            jumlah_stock: 0,
+          },
+        ],
+  mortalitas:
+    Array.isArray(initialValues?.mortalitas) &&
+    initialValues.mortalitas.length > 0
+      ? initialValues.mortalitas
+      : [
+          {
+            kondisi: '',
+            jumlah: 0,
+          },
+        ],
+});
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 8f712726..87dcd927 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -12,6 +12,29 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'gg:chart',
   },
 
+  {
+    title: 'Flock',
+    link: '/flock',
+    icon: 'mdi:chicken',
+    submenu: [
+      {
+        title: 'List Flock',
+        link: '/flock/list',
+        icon: 'mdi:chicken',
+      },
+      {
+        title: 'Chick In',
+        link: '/flock/chick-in',
+        icon: 'mdi:home-import-outline',
+      },
+      {
+        title: 'Recording',
+        link: '/flock/recording',
+        icon: 'mdi:clipboard-text',
+      },
+    ],
+  },
+
   {
     title: 'Persediaan',
     link: '/inventory',
@@ -175,3 +198,10 @@ export const PRODUCT_FLAG_OPTIONS = [
 export const SUPPLIER_FLAG_OPTIONS = [
   { label: 'EKSPEDISI', value: 'EKSPEDISI' },
 ];
+
+export const RECORDING_FLAG_OPTIONS = [
+  { label: 'Ayam Afkir', value: 'Ayam Afkir' },
+  { label: 'Ayam Culling', value: 'Ayam Culling' },
+  { label: 'Ayam Mati', value: 'Ayam Mati' },
+  { label: 'DOC', value: 'DOC' },
+];
diff --git a/src/services/api/flock.ts b/src/services/api/flock.ts
new file mode 100644
index 00000000..83fbb0d8
--- /dev/null
+++ b/src/services/api/flock.ts
@@ -0,0 +1,22 @@
+import {
+  CreateFlockPayload,
+  Flock,
+  UpdateFlockPayload,
+} from '@/types/api/flock/flock';
+import {
+  CreateRecordingPayload,
+  Recording,
+  UpdateRecordingPayload,
+} from '@/types/api/flock/recording';
+import { BaseApiService } from '@/services/api/base';
+
+export const FlockApi = new BaseApiService<
+  Flock,
+  CreateFlockPayload,
+  UpdateFlockPayload
+>('/flock/flocks');
+export const RecordingApi = new BaseApiService<
+  Recording,
+  CreateRecordingPayload,
+  UpdateRecordingPayload
+>('/flock/recordings');
diff --git a/src/types/api/flock/flock.d.ts b/src/types/api/flock/flock.d.ts
new file mode 100644
index 00000000..e0dcfda4
--- /dev/null
+++ b/src/types/api/flock/flock.d.ts
@@ -0,0 +1,14 @@
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseFlock = {
+  id: number;
+  name: string;
+};
+
+export type Flock = BaseMetadata & BaseFlock;
+
+export type CreateFlockPayload = {
+  name: string;
+};
+
+export type UpdateFlockPayload = CreateFlockPayload;
diff --git a/src/types/api/flock/recording.d.ts b/src/types/api/flock/recording.d.ts
new file mode 100644
index 00000000..66818f0c
--- /dev/null
+++ b/src/types/api/flock/recording.d.ts
@@ -0,0 +1,54 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { Flock } from '@/types/api/flock/flock';
+
+export type BaseRecording = {
+  id: number;
+  flock: Flock;
+  data_pakan: {
+    nama_pakan: string;
+    qty_pakan: number;
+    stock_pakan;
+  }[];
+  bobot_badan: {
+    berat_ayam: number;
+    jumlah_ayam: number;
+    rata_rata_berat_ayam: number;
+  }[];
+  vaksinasi: {
+    nama_vaksin: string;
+    total_stock: number;
+    jumlah_stock: number;
+  }[];
+  mortalitas: {
+    kondisi: string;
+    jumlah: number;
+  }[];
+};
+
+export type Recording = BaseMetadata & BaseRecording;
+
+export type CreateRecordingPayload = {
+  flock_id: number;
+  tanggal: string;
+  data_pakan: {
+    nama_pakan: string;
+    qty_pakan: number;
+    stock_pakan: number;
+  }[];
+  bobot_badan: {
+    berat_ayam: number;
+    jumlah_ayam: number;
+    rata_rata_berat_ayam: number;
+  }[];
+  vaksinasi: {
+    nama_vaksin: string;
+    total_stock: number;
+    jumlah_stock: number;
+  }[];
+  mortalitas: {
+    kondisi: string;
+    jumlah: number;
+  }[];
+};
+
+export type UpdateRecordingPayload = CreateRecordingPayload;

From 6dcb97bcacdb671740863371e9e0c70c862c0f11 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 22:03:51 +0700
Subject: [PATCH 02/68] feat(FE-114,129): add RecordingForm and RecordingTable
 components with handlers

---
 src/components/pages/flock/recording/RecordingTable.tsx           | 0
 src/components/pages/flock/recording/form/RecordingForm.tsx       | 0
 .../pages/flock/recording/form/useRecordingFormHandlers.ts        | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/pages/flock/recording/RecordingTable.tsx
 create mode 100644 src/components/pages/flock/recording/form/RecordingForm.tsx
 create mode 100644 src/components/pages/flock/recording/form/useRecordingFormHandlers.ts

diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/flock/recording/RecordingTable.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts b/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
new file mode 100644
index 00000000..e69de29b

From 89318407eaa0c242fa3018d5f0ad534d2763dec4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 23:01:01 +0700
Subject: [PATCH 03/68] feat(FE-136): update RecordingForm schema to remove
 tanggal and add flock object

---
 .../recording/form/RecordingForm.schema.ts    | 87 +++++++++----------
 src/types/api/flock/recording.d.ts            |  1 -
 2 files changed, 40 insertions(+), 48 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index f78e65e1..ffd9e2bd 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -1,9 +1,13 @@
 import * as Yup from 'yup';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
+import { Recording } from '@/types/api/flock/recording';
 
 export const RecordingFormSchema = Yup.object({
+  flock: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
   flock_id: Yup.number().required('Flock wajib diisi!'),
-  tanggal: Yup.string().required('Tanggal wajib diisi!'),
   data_pakan: Yup.array()
     .of(
       Yup.object({
@@ -71,51 +75,40 @@ export const UpdateRecordingFormSchema = RecordingFormSchema;
 export type RecordingFormValues = Yup.InferType<typeof RecordingFormSchema>;
 
 export const getRecordingFormInitialValues = (
-  initialValues?: Partial<RecordingFormValues>
+  initialValues?: Recording
 ): RecordingFormValues => ({
-  flock_id: initialValues?.flock_id ?? 0,
-  tanggal: initialValues?.tanggal ?? '',
-  data_pakan:
-    Array.isArray(initialValues?.data_pakan) &&
-    initialValues.data_pakan.length > 0
-      ? initialValues.data_pakan
-      : [
-          {
-            nama_pakan: '',
-            qty_pakan: 0,
-            stock_pakan: 0,
-          },
-        ],
-  bobot_badan:
-    Array.isArray(initialValues?.bobot_badan) &&
-    initialValues.bobot_badan.length > 0
-      ? initialValues.bobot_badan
-      : [
-          {
-            berat_ayam: 0,
-            jumlah_ayam: 0,
-            rata_rata_berat_ayam: 0,
-          },
-        ],
-  vaksinasi:
-    Array.isArray(initialValues?.vaksinasi) &&
-    initialValues.vaksinasi.length > 0
-      ? initialValues.vaksinasi
-      : [
-          {
-            nama_vaksin: '',
-            total_stock: 0,
-            jumlah_stock: 0,
-          },
-        ],
-  mortalitas:
-    Array.isArray(initialValues?.mortalitas) &&
-    initialValues.mortalitas.length > 0
-      ? initialValues.mortalitas
-      : [
-          {
-            kondisi: '',
-            jumlah: 0,
-          },
-        ],
+  flock: initialValues?.flock
+    ? {
+        value: initialValues.flock.id,
+        label: initialValues.flock.name,
+      }
+    : null,
+  flock_id: initialValues?.flock?.id ?? 0,
+  data_pakan: initialValues?.data_pakan ?? [
+    {
+      nama_pakan: '',
+      qty_pakan: 0,
+      stock_pakan: 0,
+    },
+  ],
+  bobot_badan: initialValues?.bobot_badan ?? [
+    {
+      berat_ayam: 0,
+      jumlah_ayam: 0,
+      rata_rata_berat_ayam: 0,
+    },
+  ],
+  vaksinasi: initialValues?.vaksinasi ?? [
+    {
+      nama_vaksin: '',
+      total_stock: 0,
+      jumlah_stock: 0,
+    },
+  ],
+  mortalitas: initialValues?.mortalitas ?? [
+    {
+      kondisi: '',
+      jumlah: 0,
+    },
+  ],
 });
diff --git a/src/types/api/flock/recording.d.ts b/src/types/api/flock/recording.d.ts
index 66818f0c..7fc873ef 100644
--- a/src/types/api/flock/recording.d.ts
+++ b/src/types/api/flock/recording.d.ts
@@ -29,7 +29,6 @@ export type Recording = BaseMetadata & BaseRecording;
 
 export type CreateRecordingPayload = {
   flock_id: number;
-  tanggal: string;
   data_pakan: {
     nama_pakan: string;
     qty_pakan: number;

From b1a3796ecaa61dbefad07d83357cce7e1c3c456a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 09:28:57 +0700
Subject: [PATCH 04/68] feat(FE-114,136): implement RecordingForm component
 with data handling and validation

---
 .../flock/recording/form/RecordingForm.tsx    | 873 ++++++++++++++++++
 .../form/useRecordingFormHandlers.ts          |  70 ++
 2 files changed, 943 insertions(+)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index e69de29b..1b09b274 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -0,0 +1,873 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormikProps, 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 SelectInput, { OptionType } from '@/components/input/SelectInput';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { FormActions } from '@/components/helper/form/FormActions';
+import { CreateRecordingPayload, Recording } from '@/types/api/flock/recording';
+import {
+  RecordingFormSchema,
+  RecordingFormValues,
+  getRecordingFormInitialValues,
+  UpdateRecordingFormSchema,
+} from './RecordingForm.schema';
+import { useRecordingFormHandlers } from './useRecordingFormHandlers';
+import { FlockApi } from '@/services/api/flock';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
+import useSWR from 'swr';
+
+interface RecordingFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Recording;
+}
+
+const DUMMY_FLOCKS = [
+  { value: 1, label: 'Flock A' },
+  { value: 2, label: 'Flock B' },
+  { value: 3, label: 'Flock C' },
+  { value: 4, label: 'Flock D' },
+];
+
+const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
+  const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
+  const [selectedPakan, setSelectedPakan] = useState<number[]>([]);
+  const [selectedBobot, setSelectedBobot] = useState<number[]>([]);
+  const [selectedVaksin, setSelectedVaksin] = useState<number[]>([]);
+  const [selectedMortal, setSelectedMortal] = useState<number[]>([]);
+  const [, setRecordingFormErrorMessage] = useState('');
+  const {
+    deleteModal,
+    recordingFormErrorMessage,
+    isDeleteLoading,
+    createRecordingHandler,
+    updateRecordingHandler,
+    deleteRecordingClickHandler,
+    confirmationModalDeleteClickHandler,
+  } = useRecordingFormHandlers(initialValues?.id);
+
+  const formikInitialValues = useMemo<RecordingFormValues>(
+    () => getRecordingFormInitialValues(initialValues),
+    [initialValues]
+  );
+
+  const formik = useFormik<RecordingFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit' ? UpdateRecordingFormSchema : RecordingFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      setRecordingFormErrorMessage('');
+      const payload: CreateRecordingPayload = {
+        flock_id: values.flock_id,
+        data_pakan: (values.data_pakan ?? []).map((p) => ({
+          nama_pakan: p.nama_pakan,
+          qty_pakan: p.qty_pakan,
+          stock_pakan: p.stock_pakan,
+        })),
+        bobot_badan: (values.bobot_badan ?? []).map((b) => ({
+          berat_ayam: b.berat_ayam,
+          jumlah_ayam: b.jumlah_ayam,
+          rata_rata_berat_ayam: b.rata_rata_berat_ayam,
+        })),
+        vaksinasi: (values.vaksinasi ?? []).map((v) => ({
+          nama_vaksin: v.nama_vaksin,
+          total_stock: v.total_stock,
+          jumlah_stock: v.jumlah_stock,
+        })),
+        mortalitas: (values.mortalitas ?? []).map((m) => ({
+          kondisi: m.kondisi,
+          jumlah: m.jumlah,
+        })),
+      };
+
+      switch (type) {
+        case 'add':
+          await createRecordingHandler(payload);
+          break;
+        case 'edit':
+          await updateRecordingHandler(initialValues?.id as number, payload);
+          break;
+      }
+    },
+  });
+
+  // // Flock selection
+  // const flocksUrl = `${FlockApi.basePath}?${new URLSearchParams({ search: flockSelectInputValue }).toString()}`;
+  // const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
+  //   flocksUrl,
+  //   FlockApi.getAllFetcher
+  // );
+  // const flockOptions = isResponseSuccess(flocks)
+  //   ? flocks?.data.map((f) => ({ value: f.id, label: f.name }))
+  //   : [];
+
+  const flockOptions = DUMMY_FLOCKS;
+
+  const addDataPakan = () => {
+    const newDataPakan = [
+      ...(formik.values.data_pakan || []),
+      {
+        nama_pakan: '',
+        qty_pakan: 0,
+        stock_pakan: 0,
+      },
+    ];
+    formik.setFieldValue('data_pakan', newDataPakan);
+  };
+
+  const removeDataPakan = (idx: number) => {
+    const updatedDataPakan = formik.values.data_pakan?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('data_pakan', updatedDataPakan);
+  };
+
+  const removeSelectedDataPakan = () => {
+    const updatedDataPakan = formik.values.data_pakan?.filter(
+      (_, idx) => !selectedPakan.includes(idx)
+    );
+    formik.setFieldValue('data_pakan', updatedDataPakan);
+    setSelectedPakan([]);
+  };
+
+  const addBobotBadan = () => {
+    const newBobotBadan = [
+      ...(formik.values.bobot_badan || []),
+      {
+        berat_ayam: 0,
+        jumlah_ayam: 0,
+        rata_rata_berat_ayam: 0,
+      },
+    ];
+    formik.setFieldValue('bobot_badan', newBobotBadan);
+  };
+
+  const removeBobotBadan = (idx: number) => {
+    const updatedBobotBadan = formik.values.bobot_badan?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('bobot_badan', updatedBobotBadan);
+  };
+
+  const removeSelectedBobotBadan = () => {
+    const updatedBobotBadan = formik.values.bobot_badan?.filter(
+      (_, idx) => !selectedBobot.includes(idx)
+    );
+    formik.setFieldValue('bobot_badan', updatedBobotBadan);
+    setSelectedBobot([]);
+  };
+
+  const addVaksinasi = () => {
+    const newVaksinasi = [
+      ...(formik.values.vaksinasi || []),
+      {
+        nama_vaksin: '',
+        total_stock: 0,
+        jumlah_stock: 0,
+      },
+    ];
+    formik.setFieldValue('vaksinasi', newVaksinasi);
+  };
+
+  const removeVaksinasi = (idx: number) => {
+    const updatedVaksinasi = formik.values.vaksinasi?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('vaksinasi', updatedVaksinasi);
+  };
+
+  const removeSelectedVaksinasi = () => {
+    const updatedVaksinasi = formik.values.vaksinasi?.filter(
+      (_, idx) => !selectedVaksin.includes(idx)
+    );
+    formik.setFieldValue('vaksinasi', updatedVaksinasi);
+    setSelectedVaksin([]);
+  };
+
+  const addMortalitas = () => {
+    const newMortalitas = [
+      ...(formik.values.mortalitas || []),
+      {
+        kondisi: RECORDING_FLAG_OPTIONS[0].value,
+        jumlah: 0,
+      },
+    ];
+    formik.setFieldValue('mortalitas', newMortalitas);
+  };
+
+  const removeMortalitas = (idx: number) => {
+    const updatedMortalitas = formik.values.mortalitas?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('mortalitas', updatedMortalitas);
+  };
+
+  const removeSelectedMortalitas = () => {
+    const updatedMortalitas = formik.values.mortalitas?.filter(
+      (_, idx) => !selectedMortal.includes(idx)
+    );
+    formik.setFieldValue('mortalitas', updatedMortalitas);
+    setSelectedMortal([]);
+  };
+
+  return (
+    <>
+      <section className='w-full max-w-5xl'>
+        <FormHeader type={type} title='Recording' backUrl='/flock/recording' />
+        <form
+          onSubmit={formik.handleSubmit}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Basic Info Card */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <div className='flex gap-4'>
+                <SelectInput
+                  required
+                  label='Flock'
+                  value={formik.values.flock ?? undefined}
+                  onChange={(val) => {
+                    formik.setFieldValue('flock', val);
+                    formik.setFieldValue(
+                      'flock_id',
+                      (val as OptionType)?.value
+                    );
+                  }}
+                  options={flockOptions}
+                  onInputChange={(val) => {
+                    // Filter options locally instead of API call
+                    return val;
+                  }}
+                  isLoading={false} // Remove isLoadingFlocks
+                  isError={
+                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                  }
+                  errorMessage={formik.errors.flock_id as string}
+                  isDisabled={type === 'detail'}
+                  isClearable
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Data Pakan Table */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <h2 className='card-title mb-4'>Data Pakan</h2>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      {type !== 'detail' && (
+                        <th>
+                          <input
+                            type='checkbox'
+                            className='checkbox'
+                            checked={
+                              formik.values.data_pakan?.length ===
+                                selectedPakan.length &&
+                              formik.values.data_pakan?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedPakan(
+                                  formik.values.data_pakan?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedPakan([]);
+                              }
+                            }}
+                          />
+                        </th>
+                      )}
+                      <th>Nama Pakan</th>
+                      <th>Qty Pakan</th>
+                      <th>Stock Pakan</th>
+                      {type !== 'detail' && <th>Aksi</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {formik.values.data_pakan?.map((pakan, idx) => (
+                      <tr key={`pakan-${idx}`}>
+                        {type !== 'detail' && (
+                          <td>
+                            <input
+                              type='checkbox'
+                              className='checkbox'
+                              checked={selectedPakan.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedPakan([...selectedPakan, idx]);
+                                } else {
+                                  setSelectedPakan(
+                                    selectedPakan.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                            />
+                          </td>
+                        )}
+                        <td>
+                          <TextInput
+                            required
+                            name={`data_pakan.${idx}.nama_pakan`}
+                            value={pakan.nama_pakan}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`data_pakan.${idx}.qty_pakan`}
+                            value={pakan.qty_pakan}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`data_pakan.${idx}.stock_pakan`}
+                            value={pakan.stock_pakan}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        {type !== 'detail' && (
+                          <td>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeDataPakan(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {type !== 'detail' && (
+                <div className='flex justify-center items-center mt-4 gap-4'>
+                  {selectedPakan.length > 0 && (
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={removeSelectedDataPakan}
+                      disabled={selectedPakan.length === 0}
+                      className='w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:delete-outline-rounded'
+                        width={24}
+                        height={24}
+                      />
+                      Hapus Data Pakan Terpilih ({selectedPakan.length})
+                    </Button>
+                  )}
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={addDataPakan}
+                    className='w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah Data Pakan
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Bobot Badan Table */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <h2 className='card-title mb-4'>Bobot Badan</h2>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      {type !== 'detail' && (
+                        <th>
+                          <input
+                            type='checkbox'
+                            className='checkbox'
+                            checked={
+                              formik.values.bobot_badan?.length ===
+                                selectedBobot.length &&
+                              formik.values.bobot_badan?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedBobot(
+                                  formik.values.bobot_badan?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedBobot([]);
+                              }
+                            }}
+                          />
+                        </th>
+                      )}
+                      <th>Berat Ayam</th>
+                      <th>Jumlah Ayam</th>
+                      <th>Rata-rata Berat Ayam</th>
+                      {type !== 'detail' && <th>Aksi</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {formik.values.bobot_badan?.map((bobot, idx) => (
+                      <tr key={`bobot-${idx}`}>
+                        {type !== 'detail' && (
+                          <td>
+                            <input
+                              type='checkbox'
+                              className='checkbox'
+                              checked={selectedBobot.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedBobot([...selectedBobot, idx]);
+                                } else {
+                                  setSelectedBobot(
+                                    selectedBobot.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                            />
+                          </td>
+                        )}
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`bobot_badan.${idx}.berat_ayam`}
+                            value={bobot.berat_ayam}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`bobot_badan.${idx}.jumlah_ayam`}
+                            value={bobot.jumlah_ayam}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`bobot_badan.${idx}.rata_rata_berat_ayam`}
+                            value={bobot.rata_rata_berat_ayam}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        {type !== 'detail' && (
+                          <td>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeBobotBadan(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {type !== 'detail' && (
+                <div className='flex justify-center items-center mt-4 gap-4'>
+                  {selectedBobot.length > 0 && (
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={removeSelectedBobotBadan}
+                      disabled={selectedBobot.length === 0}
+                      className='w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:delete-outline-rounded'
+                        width={24}
+                        height={24}
+                      />
+                      Hapus Bobot Badan Terpilih ({selectedBobot.length})
+                    </Button>
+                  )}
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={addBobotBadan}
+                    className='w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah Data Bobot Badan
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Vaksinasi Table */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <h2 className='card-title mb-4'>Vaksinasi</h2>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      {type !== 'detail' && (
+                        <th>
+                          <input
+                            type='checkbox'
+                            className='checkbox'
+                            checked={
+                              formik.values.vaksinasi?.length ===
+                                selectedVaksin.length &&
+                              formik.values.vaksinasi?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedVaksin(
+                                  formik.values.vaksinasi?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedVaksin([]);
+                              }
+                            }}
+                          />
+                        </th>
+                      )}
+                      <th>Nama Vaksin</th>
+                      <th>Total Stock</th>
+                      <th>Jumlah Stock</th>
+                      {type !== 'detail' && <th>Aksi</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {formik.values.vaksinasi?.map((vaksin, idx) => (
+                      <tr key={`vaksin-${idx}`}>
+                        {type !== 'detail' && (
+                          <td>
+                            <input
+                              type='checkbox'
+                              className='checkbox'
+                              checked={selectedVaksin.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedVaksin([...selectedVaksin, idx]);
+                                } else {
+                                  setSelectedVaksin(
+                                    selectedVaksin.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                            />
+                          </td>
+                        )}
+                        <td>
+                          <TextInput
+                            required
+                            name={`vaksinasi.${idx}.nama_vaksin`}
+                            value={vaksin.nama_vaksin}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`vaksinasi.${idx}.total_stock`}
+                            value={vaksin.total_stock}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`vaksinasi.${idx}.jumlah_stock`}
+                            value={vaksin.jumlah_stock}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        {type !== 'detail' && (
+                          <td>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeVaksinasi(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {type !== 'detail' && (
+                <div className='flex justify-center items-center mt-4 gap-4'>
+                  {selectedVaksin.length > 0 && (
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={removeSelectedVaksinasi}
+                      disabled={selectedVaksin.length === 0}
+                      className='w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:delete-outline-rounded'
+                        width={24}
+                        height={24}
+                      />
+                      Hapus Vaksinasi Terpilih ({selectedVaksin.length})
+                    </Button>
+                  )}
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={addVaksinasi}
+                    className='w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah Data Vaksinasi
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Mortalitas Table */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <h2 className='card-title mb-4'>Mortalitas</h2>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      {type !== 'detail' && (
+                        <th>
+                          <input
+                            type='checkbox'
+                            className='checkbox'
+                            checked={
+                              formik.values.mortalitas?.length ===
+                                selectedMortal.length &&
+                              formik.values.mortalitas?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedMortal(
+                                  formik.values.mortalitas?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedMortal([]);
+                              }
+                            }}
+                          />
+                        </th>
+                      )}
+                      <th>Kondisi</th>
+                      <th>Jumlah</th>
+                      {type !== 'detail' && <th>Aksi</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {formik.values.mortalitas?.map((mortal, idx) => (
+                      <tr key={`mortal-${idx}`}>
+                        {type !== 'detail' && (
+                          <td>
+                            <input
+                              type='checkbox'
+                              className='checkbox'
+                              checked={selectedMortal.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedMortal([...selectedMortal, idx]);
+                                } else {
+                                  setSelectedMortal(
+                                    selectedMortal.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                            />
+                          </td>
+                        )}
+                        <td>
+                          <SelectInput
+                            required
+                            value={RECORDING_FLAG_OPTIONS.find(
+                              (opt) => opt.value === mortal.kondisi
+                            )}
+                            onChange={(val) => {
+                              formik.setFieldValue(
+                                `mortalitas.${idx}.kondisi`,
+                                (val as OptionType)?.value
+                              );
+                            }}
+                            options={RECORDING_FLAG_OPTIONS}
+                            isDisabled={type === 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`mortalitas.${idx}.jumlah`}
+                            value={mortal.jumlah}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            readOnly={type === 'detail'}
+                          />
+                        </td>
+                        {type !== 'detail' && (
+                          <td>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeMortalitas(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {type !== 'detail' && (
+                <div className='flex justify-center items-center mt-4 gap-4'>
+                  {selectedMortal.length > 0 && (
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={removeSelectedMortalitas}
+                      disabled={selectedMortal.length === 0}
+                      className='w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:delete-outline-rounded'
+                        width={24}
+                        height={24}
+                      />
+                      Hapus Mortalitas Terpilih ({selectedMortal.length})
+                    </Button>
+                  )}
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={addMortalitas}
+                    className='w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah Data Mortalitas
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <FormActions<RecordingFormValues>
+            type={type}
+            formik={formik}
+            editUrl={
+              initialValues
+                ? `/flock/recording/detail/edit/?recordingId=${initialValues.id}`
+                : undefined
+            }
+            onDelete={deleteRecordingClickHandler}
+          />
+
+          {recordingFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{recordingFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data Recording ini?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default RecordingForm;
diff --git a/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts b/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
index e69de29b..a508806f 100644
--- a/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
+++ b/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-hot-toast';
+import { useModal } from '@/components/Modal';
+import { RecordingApi } from '@/services/api/flock';
+import {
+  CreateRecordingPayload,
+  UpdateRecordingPayload,
+} from '@/types/api/flock/recording';
+import { isResponseError } from '@/lib/api-helper';
+
+export const useRecordingFormHandlers = (initialValuesId?: number) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
+    useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createRecordingHandler = useCallback(
+    async (payload: CreateRecordingPayload) => {
+      const res = await RecordingApi.create(payload);
+      if (isResponseError(res)) {
+        setRecordingFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/flock/recording');
+    },
+    [router]
+  );
+
+  const updateRecordingHandler = useCallback(
+    async (recordingId: number, payload: UpdateRecordingPayload) => {
+      const res = await RecordingApi.update(recordingId, payload);
+      if (res?.status === 'error') {
+        setRecordingFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/flock/recording');
+    },
+    [router]
+  );
+
+  const deleteRecordingClickHandler = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    if (!initialValuesId) return;
+
+    setIsDeleteLoading(true);
+    await RecordingApi.delete(initialValuesId);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Recording!');
+    setIsDeleteLoading(false);
+    router.push('/flock/recording');
+  }, [deleteModal, initialValuesId, router]);
+
+  return {
+    deleteModal,
+    recordingFormErrorMessage,
+    isDeleteLoading,
+    createRecordingHandler,
+    updateRecordingHandler,
+    deleteRecordingClickHandler,
+    confirmationModalDeleteClickHandler,
+  };
+};

From 53ee4cdc1bb3cf89276f3bae826bea2fdaf05fa1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 09:29:29 +0700
Subject: [PATCH 05/68] feat(FE-114): add Layout and AddRecording components
 with routing link

---
 src/app/flock/recording/add/page.tsx         | 11 +++++++++++
 src/app/flock/recording/detail/edit/page.tsx |  0
 src/app/flock/recording/detail/layout.tsx    | 11 +++++++++++
 src/app/flock/recording/detail/page.tsx      |  0
 src/app/flock/recording/page.tsx             |  9 +++++++++
 5 files changed, 31 insertions(+)
 create mode 100644 src/app/flock/recording/add/page.tsx
 create mode 100644 src/app/flock/recording/detail/edit/page.tsx
 create mode 100644 src/app/flock/recording/detail/layout.tsx
 create mode 100644 src/app/flock/recording/detail/page.tsx
 create mode 100644 src/app/flock/recording/page.tsx

diff --git a/src/app/flock/recording/add/page.tsx b/src/app/flock/recording/add/page.tsx
new file mode 100644
index 00000000..50bb1d92
--- /dev/null
+++ b/src/app/flock/recording/add/page.tsx
@@ -0,0 +1,11 @@
+import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
+
+const AddRecording = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <RecordingForm />
+    </div>
+  );
+};
+
+export default AddRecording;
diff --git a/src/app/flock/recording/detail/edit/page.tsx b/src/app/flock/recording/detail/edit/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/flock/recording/detail/layout.tsx b/src/app/flock/recording/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/flock/recording/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/flock/recording/detail/page.tsx b/src/app/flock/recording/detail/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/flock/recording/page.tsx b/src/app/flock/recording/page.tsx
new file mode 100644
index 00000000..01154025
--- /dev/null
+++ b/src/app/flock/recording/page.tsx
@@ -0,0 +1,9 @@
+import Link from 'next/link';
+
+export default function Page() {
+  return (
+    <>
+      <Link href={'recording/add'}>Recording</Link>
+    </>
+  );
+}

From 6f0467918b790229ccd0f741e91b3f91ea4a35d3 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 09:50:21 +0700
Subject: [PATCH 06/68] feat(FE-114): add tanggal_recording field to
 RecordingForm and update schema validation

---
 .../recording/form/RecordingForm.schema.ts    |  6 +++
 .../flock/recording/form/RecordingForm.tsx    | 51 ++++++++++++++++++-
 src/types/api/flock/recording.d.ts            |  4 +-
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index ffd9e2bd..90d91c4f 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -8,6 +8,9 @@ export const RecordingFormSchema = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
   flock_id: Yup.number().required('Flock wajib diisi!'),
+  tanggal_recording: Yup.date()
+    .required('Tanggal recording wajib diisi')
+    .typeError('Format tanggal tidak valid'),
   data_pakan: Yup.array()
     .of(
       Yup.object({
@@ -84,6 +87,9 @@ export const getRecordingFormInitialValues = (
       }
     : null,
   flock_id: initialValues?.flock?.id ?? 0,
+  tanggal_recording: initialValues?.tanggal_recording
+    ? new Date(initialValues.tanggal_recording)
+    : new Date(),
   data_pakan: initialValues?.data_pakan ?? [
     {
       nama_pakan: '',
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 1b09b274..cb291720 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -67,6 +67,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       setRecordingFormErrorMessage('');
       const payload: CreateRecordingPayload = {
         flock_id: values.flock_id,
+        tanggal_recording: values.tanggal_recording.toISOString(),
         data_pakan: (values.data_pakan ?? []).map((p) => ({
           nama_pakan: p.nama_pakan,
           qty_pakan: p.qty_pakan,
@@ -230,6 +231,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
               <div className='flex gap-4'>
+                {/*<SelectInput*/}
+                {/*  required*/}
+                {/*  label='Flock'*/}
+                {/*  value={*/}
+                {/*    formik.values.flock_id*/}
+                {/*      ? {*/}
+                {/*          value: formik.values.flock_id,*/}
+                {/*          label: initialValues?.flock?.name,*/}
+                {/*        }*/}
+                {/*      : null*/}
+                {/*  }*/}
+                {/*  onChange={(val) => {*/}
+                {/*    formik.setFieldValue(*/}
+                {/*      'flock_id',*/}
+                {/*      (val as OptionType)?.value*/}
+                {/*    );*/}
+                {/*  }}*/}
+                {/*  options={flockOptions}*/}
+                {/*  onInputChange={setFlockSelectInputValue}*/}
+                {/*  isLoading={isLoadingFlocks}*/}
+                {/*  isError={*/}
+                {/*    formik.touched.flock_id && Boolean(formik.errors.flock_id)*/}
+                {/*  }*/}
+                {/*  errorMessage={formik.errors.flock_id as string}*/}
+                {/*  isDisabled={type === 'detail'}*/}
+                {/*  isClearable*/}
+                {/*/>*/}
                 <SelectInput
                   required
                   label='Flock'
@@ -243,10 +271,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   }}
                   options={flockOptions}
                   onInputChange={(val) => {
-                    // Filter options locally instead of API call
                     return val;
                   }}
-                  isLoading={false} // Remove isLoadingFlocks
+                  isLoading={false}
                   isError={
                     formik.touched.flock_id && Boolean(formik.errors.flock_id)
                   }
@@ -254,6 +281,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   isDisabled={type === 'detail'}
                   isClearable
                 />
+                <TextInput
+                  required
+                  label='Tanggal Recording'
+                  type='date'
+                  name='tanggal_recording'
+                  value={formik.values.tanggal_recording
+                    .toISOString()
+                    .substring(0, 10)}
+                  onChange={(e) => {
+                    const date = new Date(e.target.value);
+                    formik.setFieldValue('tanggal_recording', date);
+                  }}
+                  onBlur={formik.handleBlur}
+                  isError={
+                    formik.touched.tanggal_recording &&
+                    Boolean(formik.errors.tanggal_recording)
+                  }
+                  errorMessage={formik.errors.tanggal_recording as string}
+                  readOnly={type === 'detail'}
+                />
               </div>
             </div>
           </div>
diff --git a/src/types/api/flock/recording.d.ts b/src/types/api/flock/recording.d.ts
index 7fc873ef..69c2b0b5 100644
--- a/src/types/api/flock/recording.d.ts
+++ b/src/types/api/flock/recording.d.ts
@@ -4,10 +4,11 @@ import { Flock } from '@/types/api/flock/flock';
 export type BaseRecording = {
   id: number;
   flock: Flock;
+  tanggal_recording: string;
   data_pakan: {
     nama_pakan: string;
     qty_pakan: number;
-    stock_pakan;
+    stock_pakan: number;
   }[];
   bobot_badan: {
     berat_ayam: number;
@@ -29,6 +30,7 @@ export type Recording = BaseMetadata & BaseRecording;
 
 export type CreateRecordingPayload = {
   flock_id: number;
+  tanggal_recording: string;
   data_pakan: {
     nama_pakan: string;
     qty_pakan: number;

From 24144f01d4bce7495776fdebdc10e698ae96a928 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 10:37:04 +0700
Subject: [PATCH 07/68] feat(FE-114,136): add error handling for repeater
 inputs in RecordingForm

---
 .../flock/recording/form/RecordingForm.tsx    | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index cb291720..c0efe1fa 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -112,6 +112,32 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const flockOptions = DUMMY_FLOCKS;
 
+  const isRepeaterInputError = <T extends keyof CreateRecordingPayload>(
+    arrayName: T,
+    field: T extends 'data_pakan'
+      ? keyof CreateRecordingPayload['data_pakan'][0]
+      : T extends 'bobot_badan'
+        ? keyof CreateRecordingPayload['bobot_badan'][0]
+        : T extends 'vaksinasi'
+          ? keyof CreateRecordingPayload['vaksinasi'][0]
+          : T extends 'mortalitas'
+            ? keyof CreateRecordingPayload['mortalitas'][0]
+            : never,
+    idx: number
+  ) => {
+    const touched = formik.touched[arrayName] as
+      | Record<string, boolean | undefined>[]
+      | undefined;
+    const errors = formik.errors[arrayName] as
+      | Record<string, string | undefined>[]
+      | undefined;
+
+    return (
+      touched?.[idx]?.[field as string] &&
+      Boolean(errors?.[idx]?.[field as string])
+    );
+  };
+
   const addDataPakan = () => {
     const newDataPakan = [
       ...(formik.values.data_pakan || []),
@@ -371,7 +397,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={pakan.nama_pakan}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'data_pakan',
+                              'nama_pakan',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         <td>
@@ -382,7 +416,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={pakan.qty_pakan}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'data_pakan',
+                              'qty_pakan',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         <td>
@@ -393,7 +435,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={pakan.stock_pakan}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'data_pakan',
+                              'stock_pakan',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         {type !== 'detail' && (
@@ -515,6 +565,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={bobot.berat_ayam}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'bobot_badan',
+                              'berat_ayam',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
                           />
                         </td>
@@ -526,6 +581,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={bobot.jumlah_ayam}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'bobot_badan',
+                              'jumlah_ayam',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
                           />
                         </td>
@@ -537,6 +597,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={bobot.rata_rata_berat_ayam}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'bobot_badan',
+                              'rata_rata_berat_ayam',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
                           />
                         </td>
@@ -658,7 +723,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={vaksin.nama_vaksin}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'vaksinasi',
+                              'nama_vaksin',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         <td>
@@ -669,7 +742,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={vaksin.total_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'vaksinasi',
+                              'total_stock',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         <td>
@@ -680,7 +761,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={vaksin.jumlah_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'vaksinasi',
+                              'jumlah_stock',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         {type !== 'detail' && (
@@ -805,6 +894,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 (val as OptionType)?.value
                               );
                             }}
+                            isError={isRepeaterInputError(
+                              'mortalitas',
+                              'kondisi',
+                              idx
+                            )}
                             options={RECORDING_FLAG_OPTIONS}
                             isDisabled={type === 'detail'}
                           />
@@ -817,7 +911,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={mortal.jumlah}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'mortalitas',
+                              'jumlah',
+                              idx
+                            )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         {type !== 'detail' && (

From 2ee88a274249f47cf0edd34f1a99645ab3930dd0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 13:45:48 +0700
Subject: [PATCH 08/68] refactor(FE-114): enhance tanggal_recording handling
 and improve error messaging in RecordingForm

---
 .../flock/recording/form/RecordingForm.tsx    | 247 +++++++++++++-----
 1 file changed, 179 insertions(+), 68 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index c0efe1fa..f53123f1 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -67,7 +67,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       setRecordingFormErrorMessage('');
       const payload: CreateRecordingPayload = {
         flock_id: values.flock_id,
-        tanggal_recording: values.tanggal_recording.toISOString(),
+        tanggal_recording:
+          values.tanggal_recording instanceof Date
+            ? values.tanggal_recording.toISOString()
+            : new Date().toISOString(),
         data_pakan: (values.data_pakan ?? []).map((p) => ({
           nama_pakan: p.nama_pakan,
           qty_pakan: p.qty_pakan,
@@ -126,16 +129,31 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     idx: number
   ) => {
     const touched = formik.touched[arrayName] as
-      | Record<string, boolean | undefined>[]
-      | undefined;
-    const errors = formik.errors[arrayName] as
-      | Record<string, string | undefined>[]
+      | {
+          [key: string]: boolean | undefined;
+        }[]
       | undefined;
 
-    return (
-      touched?.[idx]?.[field as string] &&
-      Boolean(errors?.[idx]?.[field as string])
-    );
+    const errors = formik.errors[arrayName] as
+      | {
+          [key: string]: string | undefined;
+        }[]
+      | undefined;
+
+    if (!touched || !Array.isArray(touched)) {
+      return {
+        isError: false,
+        errorMessage: undefined,
+      };
+    }
+
+    const touchedField = touched[idx]?.[field as string];
+    const errorField = errors?.[idx]?.[field as string];
+
+    return {
+      isError: touchedField && Boolean(errorField),
+      errorMessage: touchedField ? errorField : undefined,
+    };
   };
 
   const addDataPakan = () => {
@@ -312,11 +330,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   label='Tanggal Recording'
                   type='date'
                   name='tanggal_recording'
-                  value={formik.values.tanggal_recording
-                    .toISOString()
-                    .substring(0, 10)}
+                  value={
+                    formik.values.tanggal_recording instanceof Date
+                      ? formik.values.tanggal_recording
+                          .toISOString()
+                          .substring(0, 10)
+                      : ''
+                  }
                   onChange={(e) => {
-                    const date = new Date(e.target.value);
+                    const date = e.target.value
+                      ? new Date(e.target.value)
+                      : new Date();
                     formik.setFieldValue('tanggal_recording', date);
                   }}
                   onBlur={formik.handleBlur}
@@ -397,11 +421,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={pakan.nama_pakan}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'data_pakan',
-                              'nama_pakan',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'data_pakan',
+                                'nama_pakan',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'data_pakan',
+                                'nama_pakan',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -416,11 +449,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={pakan.qty_pakan}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'data_pakan',
-                              'qty_pakan',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'data_pakan',
+                                'qty_pakan',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'data_pakan',
+                                'qty_pakan',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -435,11 +477,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={pakan.stock_pakan}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'data_pakan',
-                              'stock_pakan',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'data_pakan',
+                                'stock_pakan',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'data_pakan',
+                                'stock_pakan',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -565,11 +616,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={bobot.berat_ayam}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'bobot_badan',
-                              'berat_ayam',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'bobot_badan',
+                                'berat_ayam',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'bobot_badan',
+                                'berat_ayam',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                           />
                         </td>
@@ -581,11 +641,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={bobot.jumlah_ayam}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'bobot_badan',
-                              'jumlah_ayam',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'bobot_badan',
+                                'jumlah_ayam',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'bobot_badan',
+                                'jumlah_ayam',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                           />
                         </td>
@@ -597,11 +666,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={bobot.rata_rata_berat_ayam}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'bobot_badan',
-                              'rata_rata_berat_ayam',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'bobot_badan',
+                                'rata_rata_berat_ayam',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'bobot_badan',
+                                'rata_rata_berat_ayam',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                           />
                         </td>
@@ -723,11 +801,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={vaksin.nama_vaksin}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'vaksinasi',
-                              'nama_vaksin',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'vaksinasi',
+                                'nama_vaksin',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'vaksinasi',
+                                'nama_vaksin',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -742,11 +829,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={vaksin.total_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'vaksinasi',
-                              'total_stock',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'vaksinasi',
+                                'total_stock',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'vaksinasi',
+                                'total_stock',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -761,11 +857,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={vaksin.jumlah_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'vaksinasi',
-                              'jumlah_stock',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError(
+                                'vaksinasi',
+                                'jumlah_stock',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'vaksinasi',
+                                'jumlah_stock',
+                                idx
+                              ).errorMessage
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -894,11 +999,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 (val as OptionType)?.value
                               );
                             }}
-                            isError={isRepeaterInputError(
-                              'mortalitas',
-                              'kondisi',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError('mortalitas', 'kondisi', idx)
+                                .isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError('mortalitas', 'kondisi', idx)
+                                .errorMessage
+                            }
                             options={RECORDING_FLAG_OPTIONS}
                             isDisabled={type === 'detail'}
                           />
@@ -911,11 +1019,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={mortal.jumlah}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'mortalitas',
-                              'jumlah',
-                              idx
-                            )}
+                            isError={
+                              isRepeaterInputError('mortalitas', 'jumlah', idx)
+                                .isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError('mortalitas', 'jumlah', idx)
+                                .errorMessage
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',

From 64a32fd214f41179e133055386794f3595a3265c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 17:39:27 +0700
Subject: [PATCH 09/68] refactor(FE-114,136): update RecordingForm schema and
 types to include location and coop fields

---
 .../recording/form/RecordingForm.schema.ts    |  86 ++-
 .../flock/recording/form/RecordingForm.tsx    | 610 ++++++++++--------
 src/types/api/flock/recording.d.ts            |  66 +-
 3 files changed, 443 insertions(+), 319 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index 90d91c4f..394b08b0 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -8,63 +8,73 @@ export const RecordingFormSchema = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
   flock_id: Yup.number().required('Flock wajib diisi!'),
-  tanggal_recording: Yup.date()
+  location: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  location_id: Yup.number().required('Lokasi wajib diisi!'),
+  coop: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  coop_id: Yup.number().required('Kandang wajib diisi!'),
+  recording_date: Yup.date()
     .required('Tanggal recording wajib diisi')
     .typeError('Format tanggal tidak valid'),
-  data_pakan: Yup.array()
+  feed_data: Yup.array()
     .of(
       Yup.object({
-        nama_pakan: Yup.string().required('Nama pakan wajib diisi!'),
-        qty_pakan: Yup.number()
+        feed_name: Yup.string().required('Nama pakan wajib diisi!'),
+        feed_qty: Yup.number()
           .required('Qty pakan wajib diisi!')
           .min(1, 'Qty minimal 1!'),
-        stock_pakan: Yup.number()
+        feed_stock: Yup.number()
           .required('Stock pakan wajib diisi!')
           .min(0, 'Stock minimal 0!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data pakan!')
     .required('Data pakan wajib diisi!'),
-  bobot_badan: Yup.array()
+  body_weight: Yup.array()
     .of(
       Yup.object({
-        berat_ayam: Yup.number()
+        chicken_weight: Yup.number()
           .required('Berat ayam wajib diisi!')
           .min(1, 'Berat minimal 1!'),
-        jumlah_ayam: Yup.number()
+        chicken_count: Yup.number()
           .required('Jumlah ayam wajib diisi!')
           .min(1, 'Jumlah minimal 1!'),
-        rata_rata_berat_ayam: Yup.number()
+        average_chicken_weight: Yup.number()
           .required('Rata-rata berat ayam wajib diisi!')
           .min(1, 'Rata-rata minimal 1!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data bobot badan!')
     .required('Data bobot badan wajib diisi!'),
-  vaksinasi: Yup.array()
+  vaccination: Yup.array()
     .of(
       Yup.object({
-        nama_vaksin: Yup.string().required('Nama vaksin wajib diisi!'),
+        vaccine_name: Yup.string().required('Nama vaksin wajib diisi!'),
         total_stock: Yup.number()
           .required('Total stock wajib diisi!')
           .min(0, 'Total stock minimal 0!'),
-        jumlah_stock: Yup.number()
+        used_stock: Yup.number()
           .required('Jumlah stock wajib diisi!')
           .min(0, 'Jumlah stock minimal 0!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data vaksinasi!')
     .required('Data vaksinasi wajib diisi!'),
-  mortalitas: Yup.array()
+  mortality: Yup.array()
     .of(
       Yup.object({
-        kondisi: Yup.mixed<string>()
+        condition: Yup.mixed<string>()
           .oneOf(
             RECORDING_FLAG_OPTIONS.map((opt) => opt.value),
             'Kondisi tidak valid!'
           )
           .required('Kondisi wajib diisi!'),
-        jumlah: Yup.number()
+        count: Yup.number()
           .required('Jumlah wajib diisi!')
           .min(1, 'Jumlah minimal 1!'),
       })
@@ -87,34 +97,48 @@ export const getRecordingFormInitialValues = (
       }
     : null,
   flock_id: initialValues?.flock?.id ?? 0,
-  tanggal_recording: initialValues?.tanggal_recording
-    ? new Date(initialValues.tanggal_recording)
+  location: initialValues?.location
+    ? {
+        value: initialValues.location.id,
+        label: initialValues.location.name,
+      }
+    : null,
+  location_id: initialValues?.location?.id ?? 0,
+  coop: initialValues?.coop
+    ? {
+        value: initialValues.coop.id,
+        label: initialValues.coop.name,
+      }
+    : null,
+  coop_id: initialValues?.coop?.id ?? 0,
+  recording_date: initialValues?.recording_date
+    ? new Date(initialValues.recording_date)
     : new Date(),
-  data_pakan: initialValues?.data_pakan ?? [
+  feed_data: initialValues?.feed_data ?? [
     {
-      nama_pakan: '',
-      qty_pakan: 0,
-      stock_pakan: 0,
+      feed_name: '',
+      feed_qty: 0,
+      feed_stock: 0,
     },
   ],
-  bobot_badan: initialValues?.bobot_badan ?? [
+  body_weight: initialValues?.body_weight ?? [
     {
-      berat_ayam: 0,
-      jumlah_ayam: 0,
-      rata_rata_berat_ayam: 0,
+      chicken_weight: 0,
+      chicken_count: 0,
+      average_chicken_weight: 0,
     },
   ],
-  vaksinasi: initialValues?.vaksinasi ?? [
+  vaccination: initialValues?.vaccination ?? [
     {
-      nama_vaksin: '',
+      vaccine_name: '',
       total_stock: 0,
-      jumlah_stock: 0,
+      used_stock: 0,
     },
   ],
-  mortalitas: initialValues?.mortalitas ?? [
+  mortality: initialValues?.mortality ?? [
     {
-      kondisi: '',
-      jumlah: 0,
+      condition: '',
+      count: 0,
     },
   ],
 });
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index f53123f1..afc9cd84 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -22,6 +22,7 @@ import { FlockApi } from '@/services/api/flock';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 import useSWR from 'swr';
+import { KandangApi, LocationApi } from '@/services/api/master-data';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -37,10 +38,11 @@ const DUMMY_FLOCKS = [
 
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
-  const [selectedPakan, setSelectedPakan] = useState<number[]>([]);
-  const [selectedBobot, setSelectedBobot] = useState<number[]>([]);
-  const [selectedVaksin, setSelectedVaksin] = useState<number[]>([]);
-  const [selectedMortal, setSelectedMortal] = useState<number[]>([]);
+  const [selectedFeed, setSelectedFeed] = useState<number[]>([]);
+  const [selectedWeight, setSelectedWeight] = useState<number[]>([]);
+  const [selectedVaccine, setSelectedVaccine] = useState<number[]>([]);
+  const [selectedMortality, setSelectedMortality] = useState<number[]>([]);
+
   const [, setRecordingFormErrorMessage] = useState('');
   const {
     deleteModal,
@@ -67,28 +69,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       setRecordingFormErrorMessage('');
       const payload: CreateRecordingPayload = {
         flock_id: values.flock_id,
-        tanggal_recording:
-          values.tanggal_recording instanceof Date
-            ? values.tanggal_recording.toISOString()
+        location_id: values.location_id,
+        coop_id: values.coop_id,
+        recording_date:
+          values.recording_date instanceof Date
+            ? values.recording_date.toISOString()
             : new Date().toISOString(),
-        data_pakan: (values.data_pakan ?? []).map((p) => ({
-          nama_pakan: p.nama_pakan,
-          qty_pakan: p.qty_pakan,
-          stock_pakan: p.stock_pakan,
+        feed_data: (values.feed_data ?? []).map((p) => ({
+          feed_name: p.feed_name,
+          feed_qty: p.feed_qty,
+          feed_stock: p.feed_stock,
         })),
-        bobot_badan: (values.bobot_badan ?? []).map((b) => ({
-          berat_ayam: b.berat_ayam,
-          jumlah_ayam: b.jumlah_ayam,
-          rata_rata_berat_ayam: b.rata_rata_berat_ayam,
+        body_weight: (values.body_weight ?? []).map((b) => ({
+          chicken_weight: b.chicken_weight,
+          chicken_count: b.chicken_count,
+          average_chicken_weight: b.average_chicken_weight,
         })),
-        vaksinasi: (values.vaksinasi ?? []).map((v) => ({
-          nama_vaksin: v.nama_vaksin,
+        vaccination: (values.vaccination ?? []).map((v) => ({
+          vaccine_name: v.vaccine_name,
           total_stock: v.total_stock,
-          jumlah_stock: v.jumlah_stock,
+          used_stock: v.used_stock,
         })),
-        mortalitas: (values.mortalitas ?? []).map((m) => ({
-          kondisi: m.kondisi,
-          jumlah: m.jumlah,
+        mortality: (values.mortality ?? []).map((m) => ({
+          condition: m.condition,
+          count: m.count,
         })),
       };
 
@@ -115,16 +119,64 @@ 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,
+    LocationApi.getAllFetcher
+  );
+  const locationOptions = isResponseSuccess(locations)
+    ? 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
+      .filter((coop) => coop.location.id === formik.values.location_id)
+      .map((coop) => ({ value: coop.id, label: coop.name }));
+  }, [coops, formik.values.location_id]);
+
+  // Handlers
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('location', true);
+    formik.setFieldValue('location', val);
+    formik.setFieldTouched('location_id', true);
+    formik.setFieldValue('location_id', (val as OptionType)?.value);
+    // Reset coop selection when location changes
+    formik.setFieldValue('coop', null);
+    formik.setFieldValue('coop_id', 0);
+    setCoopSelectInputValue('');
+  };
+
+  const coopChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('coop', true);
+    formik.setFieldValue('coop', val);
+    formik.setFieldTouched('coop_id', true);
+    formik.setFieldValue('coop_id', (val as OptionType)?.value);
+  };
+
   const isRepeaterInputError = <T extends keyof CreateRecordingPayload>(
     arrayName: T,
-    field: T extends 'data_pakan'
-      ? keyof CreateRecordingPayload['data_pakan'][0]
-      : T extends 'bobot_badan'
-        ? keyof CreateRecordingPayload['bobot_badan'][0]
-        : T extends 'vaksinasi'
-          ? keyof CreateRecordingPayload['vaksinasi'][0]
-          : T extends 'mortalitas'
-            ? keyof CreateRecordingPayload['mortalitas'][0]
+    field: T extends 'feed_data'
+      ? keyof CreateRecordingPayload['feed_data'][0]
+      : T extends 'body_weight'
+        ? keyof CreateRecordingPayload['body_weight'][0]
+        : T extends 'vaccination'
+          ? keyof CreateRecordingPayload['vaccination'][0]
+          : T extends 'mortality'
+            ? keyof CreateRecordingPayload['mortality'][0]
             : never,
     idx: number
   ) => {
@@ -156,111 +208,111 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     };
   };
 
-  const addDataPakan = () => {
-    const newDataPakan = [
-      ...(formik.values.data_pakan || []),
+  const addFeedData = () => {
+    const newFeedData = [
+      ...(formik.values.feed_data || []),
       {
-        nama_pakan: '',
-        qty_pakan: 0,
-        stock_pakan: 0,
+        feed_name: '',
+        feed_qty: 0,
+        feed_stock: 0,
       },
     ];
-    formik.setFieldValue('data_pakan', newDataPakan);
+    formik.setFieldValue('feed_data', newFeedData);
   };
 
-  const removeDataPakan = (idx: number) => {
-    const updatedDataPakan = formik.values.data_pakan?.filter(
+  const removeFeedData = (idx: number) => {
+    const updatedFeedData = formik.values.feed_data?.filter(
       (_, i) => i !== idx
     );
-    formik.setFieldValue('data_pakan', updatedDataPakan);
+    formik.setFieldValue('feed_data', updatedFeedData);
   };
 
-  const removeSelectedDataPakan = () => {
-    const updatedDataPakan = formik.values.data_pakan?.filter(
-      (_, idx) => !selectedPakan.includes(idx)
+  const removeSelectedFeedData = () => {
+    const updatedFeedData = formik.values.feed_data?.filter(
+      (_, idx) => !selectedFeed.includes(idx)
     );
-    formik.setFieldValue('data_pakan', updatedDataPakan);
-    setSelectedPakan([]);
+    formik.setFieldValue('feed_data', updatedFeedData);
+    setSelectedFeed([]);
   };
 
-  const addBobotBadan = () => {
-    const newBobotBadan = [
-      ...(formik.values.bobot_badan || []),
+  const addBodyWeight = () => {
+    const newBodyWeight = [
+      ...(formik.values.body_weight || []),
       {
-        berat_ayam: 0,
-        jumlah_ayam: 0,
-        rata_rata_berat_ayam: 0,
+        chicken_weight: 0,
+        chicken_count: 0,
+        average_chicken_weight: 0,
       },
     ];
-    formik.setFieldValue('bobot_badan', newBobotBadan);
+    formik.setFieldValue('body_weight', newBodyWeight);
   };
 
-  const removeBobotBadan = (idx: number) => {
-    const updatedBobotBadan = formik.values.bobot_badan?.filter(
+  const removeBodyWeight = (idx: number) => {
+    const updatedBodyWeight = formik.values.body_weight?.filter(
       (_, i) => i !== idx
     );
-    formik.setFieldValue('bobot_badan', updatedBobotBadan);
+    formik.setFieldValue('body_weight', updatedBodyWeight);
   };
 
-  const removeSelectedBobotBadan = () => {
-    const updatedBobotBadan = formik.values.bobot_badan?.filter(
-      (_, idx) => !selectedBobot.includes(idx)
+  const removeSelectedBodyWeight = () => {
+    const updatedBodyWeight = formik.values.body_weight?.filter(
+      (_, idx) => !selectedWeight.includes(idx)
     );
-    formik.setFieldValue('bobot_badan', updatedBobotBadan);
-    setSelectedBobot([]);
+    formik.setFieldValue('body_weight', updatedBodyWeight);
+    setSelectedWeight([]);
   };
 
-  const addVaksinasi = () => {
-    const newVaksinasi = [
-      ...(formik.values.vaksinasi || []),
+  const addVaccination = () => {
+    const newVaccination = [
+      ...(formik.values.vaccination || []),
       {
-        nama_vaksin: '',
+        vaccine_name: '',
         total_stock: 0,
-        jumlah_stock: 0,
+        used_stock: 0,
       },
     ];
-    formik.setFieldValue('vaksinasi', newVaksinasi);
+    formik.setFieldValue('vaccination', newVaccination);
   };
 
-  const removeVaksinasi = (idx: number) => {
-    const updatedVaksinasi = formik.values.vaksinasi?.filter(
+  const removeVaccination = (idx: number) => {
+    const updatedVaccination = formik.values.vaccination?.filter(
       (_, i) => i !== idx
     );
-    formik.setFieldValue('vaksinasi', updatedVaksinasi);
+    formik.setFieldValue('vaccination', updatedVaccination);
   };
 
-  const removeSelectedVaksinasi = () => {
-    const updatedVaksinasi = formik.values.vaksinasi?.filter(
-      (_, idx) => !selectedVaksin.includes(idx)
+  const removeSelectedVaccination = () => {
+    const updatedVaccination = formik.values.vaccination?.filter(
+      (_, idx) => !selectedVaccine.includes(idx)
     );
-    formik.setFieldValue('vaksinasi', updatedVaksinasi);
-    setSelectedVaksin([]);
+    formik.setFieldValue('vaccination', updatedVaccination);
+    setSelectedVaccine([]);
   };
 
-  const addMortalitas = () => {
-    const newMortalitas = [
-      ...(formik.values.mortalitas || []),
+  const addMortality = () => {
+    const newMortality = [
+      ...(formik.values.mortality || []),
       {
-        kondisi: RECORDING_FLAG_OPTIONS[0].value,
-        jumlah: 0,
+        condition: RECORDING_FLAG_OPTIONS[0].value,
+        count: 0,
       },
     ];
-    formik.setFieldValue('mortalitas', newMortalitas);
+    formik.setFieldValue('mortality', newMortality);
   };
 
-  const removeMortalitas = (idx: number) => {
-    const updatedMortalitas = formik.values.mortalitas?.filter(
+  const removeMortality = (idx: number) => {
+    const updatedMortality = formik.values.mortality?.filter(
       (_, i) => i !== idx
     );
-    formik.setFieldValue('mortalitas', updatedMortalitas);
+    formik.setFieldValue('mortality', updatedMortality);
   };
 
-  const removeSelectedMortalitas = () => {
-    const updatedMortalitas = formik.values.mortalitas?.filter(
-      (_, idx) => !selectedMortal.includes(idx)
+  const removeSelectedMortality = () => {
+    const updatedMortality = formik.values.mortality?.filter(
+      (_, idx) => !selectedMortality.includes(idx)
     );
-    formik.setFieldValue('mortalitas', updatedMortalitas);
-    setSelectedMortal([]);
+    formik.setFieldValue('mortality', updatedMortality);
+    setSelectedMortality([]);
   };
 
   return (
@@ -331,8 +383,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   type='date'
                   name='tanggal_recording'
                   value={
-                    formik.values.tanggal_recording instanceof Date
-                      ? formik.values.tanggal_recording
+                    formik.values.recording_date instanceof Date
+                      ? formik.values.recording_date
                           .toISOString()
                           .substring(0, 10)
                       : ''
@@ -345,20 +397,59 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   }}
                   onBlur={formik.handleBlur}
                   isError={
-                    formik.touched.tanggal_recording &&
-                    Boolean(formik.errors.tanggal_recording)
+                    formik.touched.recording_date &&
+                    Boolean(formik.errors.recording_date)
                   }
-                  errorMessage={formik.errors.tanggal_recording as string}
+                  errorMessage={formik.errors.recording_date as string}
                   readOnly={type === 'detail'}
                 />
               </div>
+              <div className='flex gap-4'>
+                <SelectInput
+                  required
+                  label='Lokasi'
+                  value={formik.values.location ?? undefined}
+                  onChange={locationChangeHandler}
+                  options={locationOptions}
+                  onInputChange={setLocationSelectInputValue}
+                  isLoading={isLoadingLocations}
+                  isError={
+                    formik.touched.location_id &&
+                    Boolean(formik.errors.location_id)
+                  }
+                  errorMessage={formik.errors.location_id as string}
+                  isDisabled={type === 'detail'}
+                  isClearable
+                />
+
+                <SelectInput
+                  required
+                  label='Kandang'
+                  value={formik.values.coop ?? undefined}
+                  onChange={coopChangeHandler}
+                  options={coopOptions}
+                  onInputChange={setCoopSelectInputValue}
+                  isLoading={isLoadingCoops}
+                  isError={
+                    formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                  }
+                  errorMessage={formik.errors.coop_id as string}
+                  isDisabled={type === 'detail' || !formik.values.location_id}
+                  isClearable
+                  placeholder={
+                    !formik.values.location_id
+                      ? 'Pilih lokasi terlebih dahulu'
+                      : 'Pilih Kandang'
+                  }
+                />
+              </div>{' '}
             </div>
           </div>
 
-          {/* Data Pakan Table */}
+          {/* Feed Data Table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Data Pakan</h2>
+              <h2 className='card-title mb-4'>Feed Data</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -369,45 +460,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.data_pakan?.length ===
-                                selectedPakan.length &&
-                              formik.values.data_pakan?.length > 0
+                              formik.values.feed_data?.length ===
+                                selectedFeed.length &&
+                              formik.values.feed_data?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedPakan(
-                                  formik.values.data_pakan?.map(
+                                setSelectedFeed(
+                                  formik.values.feed_data?.map(
                                     (_, idx) => idx
                                   ) ?? []
                                 );
                               } else {
-                                setSelectedPakan([]);
+                                setSelectedFeed([]);
                               }
                             }}
                           />
                         </th>
                       )}
-                      <th>Nama Pakan</th>
-                      <th>Qty Pakan</th>
-                      <th>Stock Pakan</th>
-                      {type !== 'detail' && <th>Aksi</th>}
+                      <th>Feed Name</th>
+                      <th>Feed Qty</th>
+                      <th>Feed Stock</th>
+                      {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.data_pakan?.map((pakan, idx) => (
-                      <tr key={`pakan-${idx}`}>
+                    {formik.values.feed_data?.map((feed, idx) => (
+                      <tr key={`feed-${idx}`}>
                         {type !== 'detail' && (
                           <td>
                             <input
                               type='checkbox'
                               className='checkbox'
-                              checked={selectedPakan.includes(idx)}
+                              checked={selectedFeed.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedPakan([...selectedPakan, idx]);
+                                  setSelectedFeed([...selectedFeed, idx]);
                                 } else {
-                                  setSelectedPakan(
-                                    selectedPakan.filter((i) => i !== idx)
+                                  setSelectedFeed(
+                                    selectedFeed.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -417,21 +508,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <td>
                           <TextInput
                             required
-                            name={`data_pakan.${idx}.nama_pakan`}
-                            value={pakan.nama_pakan}
+                            name={`feed_data.${idx}.feed_name`}
+                            value={feed.feed_name}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'data_pakan',
-                                'nama_pakan',
+                                'feed_data',
+                                'feed_name',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'data_pakan',
-                                'nama_pakan',
+                                'feed_data',
+                                'feed_name',
                                 idx
                               ).errorMessage
                             }
@@ -445,23 +536,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`data_pakan.${idx}.qty_pakan`}
-                            value={pakan.qty_pakan}
+                            name={`feed_data.${idx}.feed_qty`}
+                            value={feed.feed_qty}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
-                              isRepeaterInputError(
-                                'data_pakan',
-                                'qty_pakan',
-                                idx
-                              ).isError
+                              isRepeaterInputError('feed_data', 'feed_qty', idx)
+                                .isError
                             }
                             errorMessage={
-                              isRepeaterInputError(
-                                'data_pakan',
-                                'qty_pakan',
-                                idx
-                              ).errorMessage
+                              isRepeaterInputError('feed_data', 'feed_qty', idx)
+                                .errorMessage
                             }
                             readOnly={type === 'detail'}
                             className={{
@@ -473,21 +558,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`data_pakan.${idx}.stock_pakan`}
-                            value={pakan.stock_pakan}
+                            name={`feed_data.${idx}.feed_stock`}
+                            value={feed.feed_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'data_pakan',
-                                'stock_pakan',
+                                'feed_data',
+                                'feed_stock',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'data_pakan',
-                                'stock_pakan',
+                                'feed_data',
+                                'feed_stock',
                                 idx
                               ).errorMessage
                             }
@@ -502,7 +587,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <Button
                               type='button'
                               color='error'
-                              onClick={() => removeDataPakan(idx)}
+                              onClick={() => removeFeedData(idx)}
                             >
                               <Icon
                                 icon='material-symbols:delete-outline-rounded'
@@ -519,12 +604,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </div>
               {type !== 'detail' && (
                 <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedPakan.length > 0 && (
+                  {selectedFeed.length > 0 && (
                     <Button
                       type='button'
                       color='error'
-                      onClick={removeSelectedDataPakan}
-                      disabled={selectedPakan.length === 0}
+                      onClick={removeSelectedFeedData}
+                      disabled={selectedFeed.length === 0}
                       className='w-fit'
                     >
                       <Icon
@@ -532,27 +617,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         width={24}
                         height={24}
                       />
-                      Hapus Data Pakan Terpilih ({selectedPakan.length})
+                      Delete Selected Feed Data ({selectedFeed.length})
                     </Button>
                   )}
                   <Button
                     type='button'
                     color='success'
-                    onClick={addDataPakan}
+                    onClick={addFeedData}
                     className='w-fit'
                   >
                     <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Data Pakan
+                    Add Feed Data
                   </Button>
                 </div>
               )}
             </div>
           </div>
 
-          {/* Bobot Badan Table */}
+          {/* Body Weight Table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Bobot Badan</h2>
+              <h2 className='card-title mb-4'>Body Weight</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -563,45 +648,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.bobot_badan?.length ===
-                                selectedBobot.length &&
-                              formik.values.bobot_badan?.length > 0
+                              formik.values.body_weight?.length ===
+                                selectedWeight.length &&
+                              formik.values.body_weight?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedBobot(
-                                  formik.values.bobot_badan?.map(
+                                setSelectedWeight(
+                                  formik.values.body_weight?.map(
                                     (_, idx) => idx
                                   ) ?? []
                                 );
                               } else {
-                                setSelectedBobot([]);
+                                setSelectedWeight([]);
                               }
                             }}
                           />
                         </th>
                       )}
-                      <th>Berat Ayam</th>
-                      <th>Jumlah Ayam</th>
-                      <th>Rata-rata Berat Ayam</th>
-                      {type !== 'detail' && <th>Aksi</th>}
+                      <th>Chicken Weight</th>
+                      <th>Chicken Count</th>
+                      <th>Average Weight</th>
+                      {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.bobot_badan?.map((bobot, idx) => (
-                      <tr key={`bobot-${idx}`}>
+                    {formik.values.body_weight?.map((weight, idx) => (
+                      <tr key={`weight-${idx}`}>
                         {type !== 'detail' && (
                           <td>
                             <input
                               type='checkbox'
                               className='checkbox'
-                              checked={selectedBobot.includes(idx)}
+                              checked={selectedWeight.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedBobot([...selectedBobot, idx]);
+                                  setSelectedWeight([...selectedWeight, idx]);
                                 } else {
-                                  setSelectedBobot(
-                                    selectedBobot.filter((i) => i !== idx)
+                                  setSelectedWeight(
+                                    selectedWeight.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -612,21 +697,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`bobot_badan.${idx}.berat_ayam`}
-                            value={bobot.berat_ayam}
+                            name={`body_weight.${idx}.chicken_weight`}
+                            value={weight.chicken_weight}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'bobot_badan',
-                                'berat_ayam',
+                                'body_weight',
+                                'chicken_weight',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'bobot_badan',
-                                'berat_ayam',
+                                'body_weight',
+                                'chicken_weight',
                                 idx
                               ).errorMessage
                             }
@@ -637,21 +722,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`bobot_badan.${idx}.jumlah_ayam`}
-                            value={bobot.jumlah_ayam}
+                            name={`body_weight.${idx}.chicken_count`}
+                            value={weight.chicken_count}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'bobot_badan',
-                                'jumlah_ayam',
+                                'body_weight',
+                                'chicken_count',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'bobot_badan',
-                                'jumlah_ayam',
+                                'body_weight',
+                                'chicken_count',
                                 idx
                               ).errorMessage
                             }
@@ -662,21 +747,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`bobot_badan.${idx}.rata_rata_berat_ayam`}
-                            value={bobot.rata_rata_berat_ayam}
+                            name={`body_weight.${idx}.average_chicken_weight`}
+                            value={weight.average_chicken_weight}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'bobot_badan',
-                                'rata_rata_berat_ayam',
+                                'body_weight',
+                                'average_chicken_weight',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'bobot_badan',
-                                'rata_rata_berat_ayam',
+                                'body_weight',
+                                'average_chicken_weight',
                                 idx
                               ).errorMessage
                             }
@@ -688,7 +773,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <Button
                               type='button'
                               color='error'
-                              onClick={() => removeBobotBadan(idx)}
+                              onClick={() => removeBodyWeight(idx)}
                             >
                               <Icon
                                 icon='material-symbols:delete-outline-rounded'
@@ -705,12 +790,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </div>
               {type !== 'detail' && (
                 <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedBobot.length > 0 && (
+                  {selectedWeight.length > 0 && (
                     <Button
                       type='button'
                       color='error'
-                      onClick={removeSelectedBobotBadan}
-                      disabled={selectedBobot.length === 0}
+                      onClick={removeSelectedBodyWeight}
+                      disabled={selectedWeight.length === 0}
                       className='w-fit'
                     >
                       <Icon
@@ -718,27 +803,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         width={24}
                         height={24}
                       />
-                      Hapus Bobot Badan Terpilih ({selectedBobot.length})
+                      Delete Selected Body Weight ({selectedWeight.length})
                     </Button>
                   )}
                   <Button
                     type='button'
                     color='success'
-                    onClick={addBobotBadan}
+                    onClick={addBodyWeight}
                     className='w-fit'
                   >
                     <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Data Bobot Badan
+                    Add Body Weight Data
                   </Button>
                 </div>
               )}
             </div>
           </div>
 
-          {/* Vaksinasi Table */}
+          {/* Vaccination Table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Vaksinasi</h2>
+              <h2 className='card-title mb-4'>Vaccination</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -749,45 +834,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.vaksinasi?.length ===
-                                selectedVaksin.length &&
-                              formik.values.vaksinasi?.length > 0
+                              formik.values.vaccination?.length ===
+                                selectedVaccine.length &&
+                              formik.values.vaccination?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedVaksin(
-                                  formik.values.vaksinasi?.map(
+                                setSelectedVaccine(
+                                  formik.values.vaccination?.map(
                                     (_, idx) => idx
                                   ) ?? []
                                 );
                               } else {
-                                setSelectedVaksin([]);
+                                setSelectedVaccine([]);
                               }
                             }}
                           />
                         </th>
                       )}
-                      <th>Nama Vaksin</th>
+                      <th>Vaccine Name</th>
                       <th>Total Stock</th>
-                      <th>Jumlah Stock</th>
-                      {type !== 'detail' && <th>Aksi</th>}
+                      <th>Used Stock</th>
+                      {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.vaksinasi?.map((vaksin, idx) => (
-                      <tr key={`vaksin-${idx}`}>
+                    {formik.values.vaccination?.map((vaccine, idx) => (
+                      <tr key={`vaccine-${idx}`}>
                         {type !== 'detail' && (
                           <td>
                             <input
                               type='checkbox'
                               className='checkbox'
-                              checked={selectedVaksin.includes(idx)}
+                              checked={selectedVaccine.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedVaksin([...selectedVaksin, idx]);
+                                  setSelectedVaccine([...selectedVaccine, idx]);
                                 } else {
-                                  setSelectedVaksin(
-                                    selectedVaksin.filter((i) => i !== idx)
+                                  setSelectedVaccine(
+                                    selectedVaccine.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -797,21 +882,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <td>
                           <TextInput
                             required
-                            name={`vaksinasi.${idx}.nama_vaksin`}
-                            value={vaksin.nama_vaksin}
+                            name={`vaccination.${idx}.vaccine_name`}
+                            value={vaccine.vaccine_name}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'vaksinasi',
-                                'nama_vaksin',
+                                'vaccination',
+                                'vaccine_name',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'vaksinasi',
-                                'nama_vaksin',
+                                'vaccination',
+                                'vaccine_name',
                                 idx
                               ).errorMessage
                             }
@@ -825,20 +910,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`vaksinasi.${idx}.total_stock`}
-                            value={vaksin.total_stock}
+                            name={`vaccination.${idx}.total_stock`}
+                            value={vaccine.total_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'vaksinasi',
+                                'vaccination',
                                 'total_stock',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'vaksinasi',
+                                'vaccination',
                                 'total_stock',
                                 idx
                               ).errorMessage
@@ -853,21 +938,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`vaksinasi.${idx}.jumlah_stock`}
-                            value={vaksin.jumlah_stock}
+                            name={`vaccination.${idx}.used_stock`}
+                            value={vaccine.used_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
                               isRepeaterInputError(
-                                'vaksinasi',
-                                'jumlah_stock',
+                                'vaccination',
+                                'used_stock',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
-                                'vaksinasi',
-                                'jumlah_stock',
+                                'vaccination',
+                                'used_stock',
                                 idx
                               ).errorMessage
                             }
@@ -882,7 +967,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <Button
                               type='button'
                               color='error'
-                              onClick={() => removeVaksinasi(idx)}
+                              onClick={() => removeVaccination(idx)}
                             >
                               <Icon
                                 icon='material-symbols:delete-outline-rounded'
@@ -899,12 +984,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </div>
               {type !== 'detail' && (
                 <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedVaksin.length > 0 && (
+                  {selectedVaccine.length > 0 && (
                     <Button
                       type='button'
                       color='error'
-                      onClick={removeSelectedVaksinasi}
-                      disabled={selectedVaksin.length === 0}
+                      onClick={removeSelectedVaccination}
+                      disabled={selectedVaccine.length === 0}
                       className='w-fit'
                     >
                       <Icon
@@ -912,27 +997,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         width={24}
                         height={24}
                       />
-                      Hapus Vaksinasi Terpilih ({selectedVaksin.length})
+                      Delete Selected Vaccination ({selectedVaccine.length})
                     </Button>
                   )}
                   <Button
                     type='button'
                     color='success'
-                    onClick={addVaksinasi}
+                    onClick={addVaccination}
                     className='w-fit'
                   >
                     <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Data Vaksinasi
+                    Add Vaccination Data
                   </Button>
                 </div>
               )}
             </div>
           </div>
 
-          {/* Mortalitas Table */}
+          {/* Mortality Table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Mortalitas</h2>
+              <h2 className='card-title mb-4'>Mortality</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -943,44 +1028,47 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.mortalitas?.length ===
-                                selectedMortal.length &&
-                              formik.values.mortalitas?.length > 0
+                              formik.values.mortality?.length ===
+                                selectedMortality.length &&
+                              formik.values.mortality?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedMortal(
-                                  formik.values.mortalitas?.map(
+                                setSelectedMortality(
+                                  formik.values.mortality?.map(
                                     (_, idx) => idx
                                   ) ?? []
                                 );
                               } else {
-                                setSelectedMortal([]);
+                                setSelectedMortality([]);
                               }
                             }}
                           />
                         </th>
                       )}
-                      <th>Kondisi</th>
-                      <th>Jumlah</th>
-                      {type !== 'detail' && <th>Aksi</th>}
+                      <th>Condition</th>
+                      <th>Count</th>
+                      {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.mortalitas?.map((mortal, idx) => (
-                      <tr key={`mortal-${idx}`}>
+                    {formik.values.mortality?.map((mortality, idx) => (
+                      <tr key={`mortality-${idx}`}>
                         {type !== 'detail' && (
                           <td>
                             <input
                               type='checkbox'
                               className='checkbox'
-                              checked={selectedMortal.includes(idx)}
+                              checked={selectedMortality.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedMortal([...selectedMortal, idx]);
+                                  setSelectedMortality([
+                                    ...selectedMortality,
+                                    idx,
+                                  ]);
                                 } else {
-                                  setSelectedMortal(
-                                    selectedMortal.filter((i) => i !== idx)
+                                  setSelectedMortality(
+                                    selectedMortality.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -991,21 +1079,27 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <SelectInput
                             required
                             value={RECORDING_FLAG_OPTIONS.find(
-                              (opt) => opt.value === mortal.kondisi
+                              (opt) => opt.value === mortality.condition
                             )}
                             onChange={(val) => {
                               formik.setFieldValue(
-                                `mortalitas.${idx}.kondisi`,
+                                `mortality.${idx}.condition`,
                                 (val as OptionType)?.value
                               );
                             }}
                             isError={
-                              isRepeaterInputError('mortalitas', 'kondisi', idx)
-                                .isError
+                              isRepeaterInputError(
+                                'mortality',
+                                'condition',
+                                idx
+                              ).isError
                             }
                             errorMessage={
-                              isRepeaterInputError('mortalitas', 'kondisi', idx)
-                                .errorMessage
+                              isRepeaterInputError(
+                                'mortality',
+                                'condition',
+                                idx
+                              ).errorMessage
                             }
                             options={RECORDING_FLAG_OPTIONS}
                             isDisabled={type === 'detail'}
@@ -1015,16 +1109,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`mortalitas.${idx}.jumlah`}
-                            value={mortal.jumlah}
+                            name={`mortality.${idx}.count`}
+                            value={mortality.count}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             isError={
-                              isRepeaterInputError('mortalitas', 'jumlah', idx)
+                              isRepeaterInputError('mortality', 'count', idx)
                                 .isError
                             }
                             errorMessage={
-                              isRepeaterInputError('mortalitas', 'jumlah', idx)
+                              isRepeaterInputError('mortality', 'count', idx)
                                 .errorMessage
                             }
                             readOnly={type === 'detail'}
@@ -1038,7 +1132,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <Button
                               type='button'
                               color='error'
-                              onClick={() => removeMortalitas(idx)}
+                              onClick={() => removeMortality(idx)}
                             >
                               <Icon
                                 icon='material-symbols:delete-outline-rounded'
@@ -1055,12 +1149,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </div>
               {type !== 'detail' && (
                 <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedMortal.length > 0 && (
+                  {selectedMortality.length > 0 && (
                     <Button
                       type='button'
                       color='error'
-                      onClick={removeSelectedMortalitas}
-                      disabled={selectedMortal.length === 0}
+                      onClick={removeSelectedMortality}
+                      disabled={selectedMortality.length === 0}
                       className='w-fit'
                     >
                       <Icon
@@ -1068,17 +1162,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         width={24}
                         height={24}
                       />
-                      Hapus Mortalitas Terpilih ({selectedMortal.length})
+                      Delete Selected Mortality ({selectedMortality.length})
                     </Button>
                   )}
                   <Button
                     type='button'
                     color='success'
-                    onClick={addMortalitas}
+                    onClick={addMortality}
                     className='w-fit'
                   >
                     <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Data Mortalitas
+                    Add Mortality Data
                   </Button>
                 </div>
               )}
diff --git a/src/types/api/flock/recording.d.ts b/src/types/api/flock/recording.d.ts
index 69c2b0b5..a39588b5 100644
--- a/src/types/api/flock/recording.d.ts
+++ b/src/types/api/flock/recording.d.ts
@@ -1,28 +1,32 @@
 import { BaseMetadata } from '@/types/api/api-general';
 import { Flock } from '@/types/api/flock/flock';
+import { Location } from '@/types/api/master-data/location';
+import { Kandang } from '@/types/api/master-data/kandang';
 
 export type BaseRecording = {
   id: number;
   flock: Flock;
-  tanggal_recording: string;
-  data_pakan: {
-    nama_pakan: string;
-    qty_pakan: number;
-    stock_pakan: number;
+  recording_date: string;
+  location: Location;
+  coop: Kandang;
+  feed_data: {
+    feed_name: string;
+    feed_qty: number;
+    feed_stock: number;
   }[];
-  bobot_badan: {
-    berat_ayam: number;
-    jumlah_ayam: number;
-    rata_rata_berat_ayam: number;
+  body_weight: {
+    chicken_weight: number;
+    chicken_count: number;
+    average_chicken_weight: number;
   }[];
-  vaksinasi: {
-    nama_vaksin: string;
+  vaccination: {
+    vaccine_name: string;
     total_stock: number;
-    jumlah_stock: number;
+    used_stock: number;
   }[];
-  mortalitas: {
-    kondisi: string;
-    jumlah: number;
+  mortality: {
+    condition: string;
+    count: number;
   }[];
 };
 
@@ -30,25 +34,27 @@ export type Recording = BaseMetadata & BaseRecording;
 
 export type CreateRecordingPayload = {
   flock_id: number;
-  tanggal_recording: string;
-  data_pakan: {
-    nama_pakan: string;
-    qty_pakan: number;
-    stock_pakan: number;
+  recording_date: string;
+  location_id: number;
+  coop_id: number;
+  feed_data: {
+    feed_name: string;
+    feed_qty: number;
+    feed_stock: number;
   }[];
-  bobot_badan: {
-    berat_ayam: number;
-    jumlah_ayam: number;
-    rata_rata_berat_ayam: number;
+  body_weight: {
+    chicken_weight: number;
+    chicken_count: number;
+    average_chicken_weight: number;
   }[];
-  vaksinasi: {
-    nama_vaksin: string;
+  vaccination: {
+    vaccine_name: string;
     total_stock: number;
-    jumlah_stock: number;
+    used_stock: number;
   }[];
-  mortalitas: {
-    kondisi: string;
-    jumlah: number;
+  mortality: {
+    condition: string;
+    count: number;
   }[];
 };
 

From 8bfce061e6f2cc37cfc4fa039d3776a3024510e4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 17:53:08 +0700
Subject: [PATCH 10/68] refactor(FE-114,136): improve location and coop field
 handling in RecordingForm

---
 .../flock/recording/form/RecordingForm.tsx    | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index afc9cd84..d8656b2b 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -150,21 +150,42 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // Handlers
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('location', true);
+    const locationValue = (val as OptionType)?.value;
+
     formik.setFieldValue('location', val);
-    formik.setFieldTouched('location_id', true);
-    formik.setFieldValue('location_id', (val as OptionType)?.value);
-    // Reset coop selection when location changes
+    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);
+    } else {
+      formik.setFieldTouched('location', false);
+      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);
+    formik.setFieldTouched('coop_id', false);
     setCoopSelectInputValue('');
   };
 
   const coopChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('coop', true);
+    const coopValue = (val as OptionType)?.value;
+
     formik.setFieldValue('coop', val);
-    formik.setFieldTouched('coop_id', true);
-    formik.setFieldValue('coop_id', (val as OptionType)?.value);
+    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);
+    } else {
+      formik.setFieldTouched('coop', false);
+      formik.setFieldTouched('coop_id', false);
+    }
   };
 
   const isRepeaterInputError = <T extends keyof CreateRecordingPayload>(
@@ -423,6 +444,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 />
 
                 <SelectInput
+                  key={`coop-select-${formik.values.location_id || 'no-location'}`}
                   required
                   label='Kandang'
                   value={formik.values.coop ?? undefined}

From f319a9b5d10e88849b0967abcf94500629b9e737 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 08:39:32 +0700
Subject: [PATCH 11/68] feat(FE-114): implement RecordingEdit and
 RecordingDetail components with error handling and loading states

---
 src/app/flock/recording/detail/edit/page.tsx  |  47 +++
 src/app/flock/recording/detail/page.tsx       |  47 +++
 src/app/flock/recording/page.tsx              |  14 +-
 .../pages/flock/recording/RecordingTable.tsx  | 358 ++++++++++++++++++
 src/config/constant.ts                        |   1 -
 5 files changed, 460 insertions(+), 7 deletions(-)

diff --git a/src/app/flock/recording/detail/edit/page.tsx b/src/app/flock/recording/detail/edit/page.tsx
index e69de29b..0718731c 100644
--- a/src/app/flock/recording/detail/edit/page.tsx
+++ b/src/app/flock/recording/detail/edit/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
+import { RecordingApi } from '@/services/api/flock'; // Import RecordingApi
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const RecordingEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const recordingId = searchParams.get('recordingId');
+
+  const { data: recording, isLoading: isLoadingRecording } = useSWR(
+    recordingId,
+    (id: number) => RecordingApi.getSingle(id) // Gunakan RecordingApi
+  );
+
+  if (!recordingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingRecording && (!recording || isResponseError(recording))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingRecording && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingRecording && isResponseSuccess(recording) && (
+        <RecordingForm type='edit' initialValues={recording.data} />
+      )}
+    </div>
+  );
+};
+
+export default RecordingEdit;
diff --git a/src/app/flock/recording/detail/page.tsx b/src/app/flock/recording/detail/page.tsx
index e69de29b..a25fe998 100644
--- a/src/app/flock/recording/detail/page.tsx
+++ b/src/app/flock/recording/detail/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
+import { RecordingApi } from '@/services/api/flock';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const RecordingDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const recordingId = searchParams.get('recordingId');
+
+  const { data: recording, isLoading: isLoadingRecording } = useSWR(
+    recordingId,
+    (id: number) => RecordingApi.getSingle(id)
+  );
+
+  if (!recordingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingRecording && (!recording || isResponseError(recording))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingRecording && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingRecording && isResponseSuccess(recording) && (
+        <RecordingForm type='detail' initialValues={recording.data} />
+      )}
+    </div>
+  );
+};
+
+export default RecordingDetail;
diff --git a/src/app/flock/recording/page.tsx b/src/app/flock/recording/page.tsx
index 01154025..06f42789 100644
--- a/src/app/flock/recording/page.tsx
+++ b/src/app/flock/recording/page.tsx
@@ -1,9 +1,11 @@
-import Link from 'next/link';
+import RecordingTable from '@/components/pages/flock/recording/RecordingTable';
 
-export default function Page() {
+const Recording = () => {
   return (
-    <>
-      <Link href={'recording/add'}>Recording</Link>
-    </>
+    <section className='w-full p-4'>
+      <RecordingTable />
+    </section>
   );
-}
+};
+
+export default Recording;
diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/flock/recording/RecordingTable.tsx
index e69de29b..ea7967a8 100644
--- a/src/components/pages/flock/recording/RecordingTable.tsx
+++ b/src/components/pages/flock/recording/RecordingTable.tsx
@@ -0,0 +1,358 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+import { Icon } from '@iconify/react';
+import { SortingState } from '@tanstack/react-table';
+import { cn } from '@/lib/helper';
+import { useModal } from '@/components/Modal';
+import Button from '@/components/Button';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { OptionType } from '@/components/input/SelectInput';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import Table from '@/components/Table';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import { type CellContext } from '@tanstack/react-table';
+import { type Recording } from '@/types/api/flock/recording';
+
+const dummyRecordings: Recording[] = [
+  {
+    id: 1,
+    flock: {
+      id: 1,
+      name: 'Flock A',
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      created_user: {
+        id: 1,
+        id_user: 1,
+        email: 'admin@example.com',
+        name: 'Admin',
+      },
+    },
+    recording_date: '2024-01-01',
+    location: {
+      id: 1,
+      name: 'Location 1',
+      address: 'Jl. Contoh No. 1',
+      area: {
+        id: 1,
+        name: 'Area 1',
+      },
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      created_user: {
+        id: 1,
+        id_user: 1,
+        email: 'admin@example.com',
+        name: 'Admin',
+      },
+    },
+    coop: {
+      id: 1,
+      name: 'Coop 1',
+      location: {
+        id: 1,
+        name: 'Location 1',
+        address: 'Jl. Contoh No. 1',
+        area: {
+          id: 1,
+          name: 'Area 1',
+        },
+      },
+      pic: {
+        id: 1,
+        id_user: 1,
+        email: 'pic@example.com',
+        name: 'PIC User',
+      },
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      created_user: {
+        id: 1,
+        id_user: 1,
+        email: 'admin@example.com',
+        name: 'Admin',
+      },
+    },
+    feed_data: [
+      {
+        feed_name: 'Feed 1',
+        feed_qty: 100,
+        feed_stock: 500,
+      },
+    ],
+    body_weight: [
+      {
+        chicken_weight: 2.5,
+        chicken_count: 1000,
+        average_chicken_weight: 2.5,
+      },
+    ],
+    vaccination: [
+      {
+        vaccine_name: 'Vaccine 1',
+        total_stock: 200,
+        used_stock: 150,
+      },
+    ],
+    mortality: [
+      {
+        condition: 'NORMAL',
+        count: 5,
+      },
+    ],
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+    created_user: {
+      id: 1,
+      id_user: 1,
+      email: 'admin@example.com',
+      name: 'Admin',
+    },
+  },
+];
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Recording, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <Button
+        href={`/flock/recording/detail/?recordingId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+      <Button
+        href={`/flock/recording/detail/edit/?recordingId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:pencil-outline' width={16} height={16} />
+        Edit
+      </Button>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='mdi:delete-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const RecordingTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const deleteModal = useModal();
+
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.target.value);
+      setPage(1);
+    },
+    []
+  );
+
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+      setPage(1);
+    },
+    []
+  );
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      deleteModal.closeModal();
+    }, 1000);
+  };
+
+  const paginatedData = useMemo(() => {
+    const filteredData = dummyRecordings.filter(
+      (recording) =>
+        recording.flock.name.toLowerCase().includes(search.toLowerCase()) ||
+        recording.location.name.toLowerCase().includes(search.toLowerCase()) ||
+        recording.coop.name.toLowerCase().includes(search.toLowerCase())
+    );
+    const start = (page - 1) * pageSize;
+    return filteredData.slice(start, start + pageSize);
+  }, [page, pageSize, search]);
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='flex flex-col gap-2 mb-4'>
+        <TableToolbar
+          addButton={{
+            href: '/flock/recording/add',
+            label: 'Tambah Recording',
+          }}
+          search={{
+            value: search,
+            onChange: searchChangeHandler,
+            placeholder: 'Cari Recording',
+          }}
+        />
+        <TableRowSizeSelector
+          value={pageSize}
+          onChange={pageSizeChangeHandler}
+          options={ROWS_OPTIONS}
+        />
+      </div>
+
+      <Table
+        data={paginatedData}
+        columns={[
+          {
+            header: '#',
+            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+          },
+          {
+            accessorKey: 'flock.name',
+            header: 'Flock',
+          },
+          {
+            accessorKey: 'recording_date',
+            header: 'Tanggal Recording',
+            cell: (props) =>
+              new Date(props.row.original.recording_date).toLocaleDateString(),
+          },
+          {
+            accessorKey: 'location.name',
+            header: 'Lokasi',
+          },
+          {
+            accessorKey: 'coop.name',
+            header: 'Kandang',
+          },
+          {
+            accessorKey: 'mortality',
+            header: 'Total Mortality',
+            cell: (props) =>
+              props.row.original.mortality.reduce(
+                (acc, curr) => acc + curr.count,
+                0
+              ),
+          },
+          {
+            header: 'Aksi',
+            cell: (props: CellContext<Recording, unknown>) => {
+              const currentPageSize =
+                props.table.getPaginationRowModel().rows.length;
+              const currentPageRows =
+                props.table.getPaginationRowModel().flatRows;
+              const currentRowRelativeIndex =
+                currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+              const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+              const deleteClickHandler = () => {
+                setSelectedRecording(props.row.original);
+                deleteModal.openModal();
+              };
+
+              return (
+                <>
+                  {currentPageSize > 2 && (
+                    <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                      <RowOptionsMenu
+                        type='dropdown'
+                        props={props}
+                        deleteClickHandler={deleteClickHandler}
+                      />
+                    </RowDropdownOptions>
+                  )}
+
+                  {currentPageSize <= 2 && (
+                    <RowCollapseOptions>
+                      <RowOptionsMenu
+                        type='collapse'
+                        props={props}
+                        deleteClickHandler={deleteClickHandler}
+                      />
+                    </RowCollapseOptions>
+                  )}
+                </>
+              );
+            },
+          },
+        ]}
+        pageSize={pageSize}
+        page={page}
+        totalItems={dummyRecordings.length}
+        onPageChange={setPage}
+        isLoading={false}
+        sorting={sorting}
+        setSorting={setSorting}
+        className={{
+          containerClassName: cn({
+            'mb-20': paginatedData.length === 0,
+          }),
+          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          headerRowClassName: 'border-b border-b-gray-200',
+          headerColumnClassName:
+            'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+          bodyRowClassName: 'border-b border-b-gray-200',
+          bodyColumnClassName:
+            'px-6 py-3 last:flex last:flex-row last:justify-end',
+        }}
+      />
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Recording ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </div>
+  );
+};
+
+export default RecordingTable;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 87dcd927..668d7209 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -203,5 +203,4 @@ export const RECORDING_FLAG_OPTIONS = [
   { label: 'Ayam Afkir', value: 'Ayam Afkir' },
   { label: 'Ayam Culling', value: 'Ayam Culling' },
   { label: 'Ayam Mati', value: 'Ayam Mati' },
-  { label: 'DOC', value: 'DOC' },
 ];

From 64e67246647a1fe9979606377fb86627fdeeb058 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 09:07:12 +0700
Subject: [PATCH 12/68] feat(FE-114): add bulk action functionality for
 approving, rejecting, and deleting recordings in RecordingTable

---
 .../pages/flock/recording/RecordingTable.tsx  | 203 ++++++++++++++++--
 1 file changed, 191 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/flock/recording/RecordingTable.tsx
index ea7967a8..f2031037 100644
--- a/src/components/pages/flock/recording/RecordingTable.tsx
+++ b/src/components/pages/flock/recording/RecordingTable.tsx
@@ -176,10 +176,16 @@ const RecordingTable = () => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedRecordings, setSelectedRecordings] = useState<number[]>([]);
   const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
+  const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
 
-  const deleteModal = useModal();
+  const singleDeleteModal = useModal();
+  const bulkDeleteModal = useModal();
+  const bulkApproveModal = useModal();
+  const bulkRejectModal = useModal();
 
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -198,14 +204,6 @@ const RecordingTable = () => {
     []
   );
 
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      deleteModal.closeModal();
-    }, 1000);
-  };
-
   const paginatedData = useMemo(() => {
     const filteredData = dummyRecordings.filter(
       (recording) =>
@@ -217,6 +215,53 @@ const RecordingTable = () => {
     return filteredData.slice(start, start + pageSize);
   }, [page, pageSize, search]);
 
+  const bulkApproveHandler = async () => {
+    setIsBulkApproveLoading(true);
+    console.log(
+      'Approved recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsBulkApproveLoading(false);
+      setSelectedRecordings([]);
+      bulkApproveModal.closeModal();
+    }, 1000);
+  };
+
+  const bulkRejectHandler = async () => {
+    setIsBulkRejectLoading(true);
+    console.log(
+      'Rejected recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsBulkRejectLoading(false);
+      setSelectedRecordings([]);
+      bulkRejectModal.closeModal();
+    }, 1000);
+  };
+
+  const singleDeleteHandler = async () => {
+    setIsDeleteLoading(true);
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      singleDeleteModal.closeModal();
+    }, 1000);
+  };
+
+  const bulkDeleteHandler = async () => {
+    setIsDeleteLoading(true);
+    console.log(
+      'Deleted recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      setSelectedRecordings([]);
+      bulkDeleteModal.closeModal();
+    }, 1000);
+  };
+
   return (
     <div className='flex flex-col gap-4'>
       <div className='flex flex-col gap-2 mb-4'>
@@ -238,9 +283,143 @@ const RecordingTable = () => {
         />
       </div>
 
+      {/* Bulk action buttons */}
+      <div className={'flex justify-end items-center'}>
+        {selectedRecordings.length > 0 && (
+          <div className='flex gap-2 mb-4'>
+            <Button
+              type='button'
+              color='success'
+              onClick={() => bulkApproveModal.openModal()}
+              className='flex items-center gap-2'
+            >
+              <Icon
+                icon='material-symbols:check-circle-outline'
+                width={20}
+                height={20}
+              />
+              Approve ({selectedRecordings.length})
+            </Button>
+            <Button
+              type='button'
+              color='error'
+              onClick={() => bulkRejectModal.openModal()}
+              className='flex items-center gap-2'
+            >
+              <Icon
+                icon='material-symbols:cancel-outline'
+                width={20}
+                height={20}
+              />
+              Reject ({selectedRecordings.length})
+            </Button>
+            <Button
+              type='button'
+              color='error'
+              variant='outline'
+              onClick={() => bulkDeleteModal.openModal()}
+              className='flex items-center gap-2'
+            >
+              <Icon
+                icon='material-symbols:delete-outline'
+                width={20}
+                height={20}
+              />
+              Delete Selected ({selectedRecordings.length})
+            </Button>
+          </div>
+        )}
+
+        <ConfirmationModal
+          ref={bulkApproveModal.ref}
+          type='success'
+          text={`Apakah anda yakin ingin menyetujui ${selectedRecordings.length} data Recording yang dipilih?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'success',
+            isLoading: isBulkApproveLoading,
+            onClick: bulkApproveHandler,
+          }}
+        />
+
+        <ConfirmationModal
+          ref={bulkRejectModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menolak ${selectedRecordings.length} data Recording yang dipilih?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isBulkRejectLoading,
+            onClick: bulkRejectHandler,
+          }}
+        />
+
+        <ConfirmationModal
+          ref={bulkDeleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus ${selectedRecordings.length} data Recording yang dipilih?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: bulkDeleteHandler,
+          }}
+        />
+      </div>
+
       <Table
         data={paginatedData}
         columns={[
+          {
+            id: 'select',
+            accessorKey: 'id',
+            header: ({ table }) => (
+              <input
+                type='checkbox'
+                className='checkbox'
+                checked={
+                  table.getRowModel().rows.length > 0 &&
+                  table
+                    .getRowModel()
+                    .rows.every((row) => selectedRecordings.includes(row.index))
+                }
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedRecordings(
+                      table.getRowModel().rows.map((row) => row.index)
+                    );
+                  } else {
+                    setSelectedRecordings([]);
+                  }
+                }}
+              />
+            ),
+            cell: ({ row }) => (
+              <input
+                type='checkbox'
+                className='checkbox'
+                checked={selectedRecordings.includes(row.index)}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedRecordings([...selectedRecordings, row.index]);
+                  } else {
+                    setSelectedRecordings(
+                      selectedRecordings.filter((i) => i !== row.index)
+                    );
+                  }
+                }}
+              />
+            ),
+          },
           {
             header: '#',
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
@@ -286,7 +465,7 @@ const RecordingTable = () => {
 
               const deleteClickHandler = () => {
                 setSelectedRecording(props.row.original);
-                deleteModal.openModal();
+                singleDeleteModal.openModal();
               };
 
               return (
@@ -338,7 +517,7 @@ const RecordingTable = () => {
       />
 
       <ConfirmationModal
-        ref={deleteModal.ref}
+        ref={singleDeleteModal.ref}
         type='error'
         text={`Apakah anda yakin ingin menghapus data Recording ini?`}
         secondaryButton={{
@@ -348,7 +527,7 @@ const RecordingTable = () => {
           text: 'Ya',
           color: 'error',
           isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
+          onClick: singleDeleteHandler,
         }}
       />
     </div>

From ec387637ed488dccbde2e22e266481f1ee2cb2d6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 09:12:21 +0700
Subject: [PATCH 13/68] refactor(FE-114): remove bulk delete functionality from
 RecordingTable

---
 .../pages/flock/recording/RecordingTable.tsx  | 43 -------------------
 1 file changed, 43 deletions(-)

diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/flock/recording/RecordingTable.tsx
index f2031037..bcdcd4dd 100644
--- a/src/components/pages/flock/recording/RecordingTable.tsx
+++ b/src/components/pages/flock/recording/RecordingTable.tsx
@@ -183,7 +183,6 @@ const RecordingTable = () => {
   const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
 
   const singleDeleteModal = useModal();
-  const bulkDeleteModal = useModal();
   const bulkApproveModal = useModal();
   const bulkRejectModal = useModal();
 
@@ -249,19 +248,6 @@ const RecordingTable = () => {
     }, 1000);
   };
 
-  const bulkDeleteHandler = async () => {
-    setIsDeleteLoading(true);
-    console.log(
-      'Deleted recordings:',
-      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
-    );
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      setSelectedRecordings([]);
-      bulkDeleteModal.closeModal();
-    }, 1000);
-  };
-
   return (
     <div className='flex flex-col gap-4'>
       <div className='flex flex-col gap-2 mb-4'>
@@ -313,20 +299,6 @@ const RecordingTable = () => {
               />
               Reject ({selectedRecordings.length})
             </Button>
-            <Button
-              type='button'
-              color='error'
-              variant='outline'
-              onClick={() => bulkDeleteModal.openModal()}
-              className='flex items-center gap-2'
-            >
-              <Icon
-                icon='material-symbols:delete-outline'
-                width={20}
-                height={20}
-              />
-              Delete Selected ({selectedRecordings.length})
-            </Button>
           </div>
         )}
 
@@ -359,21 +331,6 @@ const RecordingTable = () => {
             onClick: bulkRejectHandler,
           }}
         />
-
-        <ConfirmationModal
-          ref={bulkDeleteModal.ref}
-          type='error'
-          text={`Apakah anda yakin ingin menghapus ${selectedRecordings.length} data Recording yang dipilih?`}
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: bulkDeleteHandler,
-          }}
-        />
       </div>
 
       <Table

From 27d2792a9c57bb701d4eb470c8b6ecf46fb309da Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 09:24:00 +0700
Subject: [PATCH 14/68] refactor(FE-114): enhance layout and structure of
 RecordingForm component

---
 .../flock/recording/form/RecordingForm.tsx    | 240 +++++++++---------
 1 file changed, 122 insertions(+), 118 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index d8656b2b..a133e437 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -346,125 +346,129 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         >
           {/* Basic Info Card */}
           <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <div className='flex gap-4'>
-                {/*<SelectInput*/}
-                {/*  required*/}
-                {/*  label='Flock'*/}
-                {/*  value={*/}
-                {/*    formik.values.flock_id*/}
-                {/*      ? {*/}
-                {/*          value: formik.values.flock_id,*/}
-                {/*          label: initialValues?.flock?.name,*/}
-                {/*        }*/}
-                {/*      : null*/}
-                {/*  }*/}
-                {/*  onChange={(val) => {*/}
-                {/*    formik.setFieldValue(*/}
-                {/*      'flock_id',*/}
-                {/*      (val as OptionType)?.value*/}
-                {/*    );*/}
-                {/*  }}*/}
-                {/*  options={flockOptions}*/}
-                {/*  onInputChange={setFlockSelectInputValue}*/}
-                {/*  isLoading={isLoadingFlocks}*/}
-                {/*  isError={*/}
-                {/*    formik.touched.flock_id && Boolean(formik.errors.flock_id)*/}
-                {/*  }*/}
-                {/*  errorMessage={formik.errors.flock_id as string}*/}
-                {/*  isDisabled={type === 'detail'}*/}
-                {/*  isClearable*/}
-                {/*/>*/}
-                <SelectInput
-                  required
-                  label='Flock'
-                  value={formik.values.flock ?? undefined}
-                  onChange={(val) => {
-                    formik.setFieldValue('flock', val);
-                    formik.setFieldValue(
-                      'flock_id',
-                      (val as OptionType)?.value
-                    );
-                  }}
-                  options={flockOptions}
-                  onInputChange={(val) => {
-                    return val;
-                  }}
-                  isLoading={false}
-                  isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                  }
-                  errorMessage={formik.errors.flock_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
-                />
-                <TextInput
-                  required
-                  label='Tanggal Recording'
-                  type='date'
-                  name='tanggal_recording'
-                  value={
-                    formik.values.recording_date instanceof Date
-                      ? formik.values.recording_date
-                          .toISOString()
-                          .substring(0, 10)
-                      : ''
-                  }
-                  onChange={(e) => {
-                    const date = e.target.value
-                      ? new Date(e.target.value)
-                      : new Date();
-                    formik.setFieldValue('tanggal_recording', date);
-                  }}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.recording_date &&
-                    Boolean(formik.errors.recording_date)
-                  }
-                  errorMessage={formik.errors.recording_date as string}
-                  readOnly={type === 'detail'}
-                />
-              </div>
-              <div className='flex gap-4'>
-                <SelectInput
-                  required
-                  label='Lokasi'
-                  value={formik.values.location ?? undefined}
-                  onChange={locationChangeHandler}
-                  options={locationOptions}
-                  onInputChange={setLocationSelectInputValue}
-                  isLoading={isLoadingLocations}
-                  isError={
-                    formik.touched.location_id &&
-                    Boolean(formik.errors.location_id)
-                  }
-                  errorMessage={formik.errors.location_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
-                />
+            <div className='card-body flex flex-col gap-6'>
+              <h2 className='card-title'>Flock</h2>
 
-                <SelectInput
-                  key={`coop-select-${formik.values.location_id || 'no-location'}`}
-                  required
-                  label='Kandang'
-                  value={formik.values.coop ?? undefined}
-                  onChange={coopChangeHandler}
-                  options={coopOptions}
-                  onInputChange={setCoopSelectInputValue}
-                  isLoading={isLoadingCoops}
-                  isError={
-                    formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                  }
-                  errorMessage={formik.errors.coop_id as string}
-                  isDisabled={type === 'detail' || !formik.values.location_id}
-                  isClearable
-                  placeholder={
-                    !formik.values.location_id
-                      ? 'Pilih lokasi terlebih dahulu'
-                      : 'Pilih Kandang'
-                  }
-                />
-              </div>{' '}
+              <div className='flex flex-col gap-6'>
+                <div className='flex gap-4'>
+                  {/*<SelectInput*/}
+                  {/*  required*/}
+                  {/*  label='Flock'*/}
+                  {/*  value={*/}
+                  {/*    formik.values.flock_id*/}
+                  {/*      ? {*/}
+                  {/*          value: formik.values.flock_id,*/}
+                  {/*          label: initialValues?.flock?.name,*/}
+                  {/*        }*/}
+                  {/*      : null*/}
+                  {/*  }*/}
+                  {/*  onChange={(val) => {*/}
+                  {/*    formik.setFieldValue(*/}
+                  {/*      'flock_id',*/}
+                  {/*      (val as OptionType)?.value*/}
+                  {/*    );*/}
+                  {/*  }}*/}
+                  {/*  options={flockOptions}*/}
+                  {/*  onInputChange={setFlockSelectInputValue}*/}
+                  {/*  isLoading={isLoadingFlocks}*/}
+                  {/*  isError={*/}
+                  {/*    formik.touched.flock_id && Boolean(formik.errors.flock_id)*/}
+                  {/*  }*/}
+                  {/*  errorMessage={formik.errors.flock_id as string}*/}
+                  {/*  isDisabled={type === 'detail'}*/}
+                  {/*  isClearable*/}
+                  {/*/>*/}
+                  <SelectInput
+                    required
+                    label='Flock'
+                    value={formik.values.flock ?? undefined}
+                    onChange={(val) => {
+                      formik.setFieldValue('flock', val);
+                      formik.setFieldValue(
+                        'flock_id',
+                        (val as OptionType)?.value
+                      );
+                    }}
+                    options={flockOptions}
+                    onInputChange={(val) => {
+                      return val;
+                    }}
+                    isLoading={false}
+                    isError={
+                      formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                    }
+                    errorMessage={formik.errors.flock_id as string}
+                    isDisabled={type === 'detail'}
+                    isClearable
+                  />
+                  <TextInput
+                    required
+                    label='Tanggal Recording'
+                    type='date'
+                    name='tanggal_recording'
+                    value={
+                      formik.values.recording_date instanceof Date
+                        ? formik.values.recording_date
+                            .toISOString()
+                            .substring(0, 10)
+                        : ''
+                    }
+                    onChange={(e) => {
+                      const date = e.target.value
+                        ? new Date(e.target.value)
+                        : new Date();
+                      formik.setFieldValue('tanggal_recording', date);
+                    }}
+                    onBlur={formik.handleBlur}
+                    isError={
+                      formik.touched.recording_date &&
+                      Boolean(formik.errors.recording_date)
+                    }
+                    errorMessage={formik.errors.recording_date as string}
+                    readOnly={type === 'detail'}
+                  />
+                </div>
+                <div className='flex gap-4'>
+                  <SelectInput
+                    required
+                    label='Lokasi'
+                    value={formik.values.location ?? undefined}
+                    onChange={locationChangeHandler}
+                    options={locationOptions}
+                    onInputChange={setLocationSelectInputValue}
+                    isLoading={isLoadingLocations}
+                    isError={
+                      formik.touched.location_id &&
+                      Boolean(formik.errors.location_id)
+                    }
+                    errorMessage={formik.errors.location_id as string}
+                    isDisabled={type === 'detail'}
+                    isClearable
+                  />
+
+                  <SelectInput
+                    key={`coop-select-${formik.values.location_id || 'no-location'}`}
+                    required
+                    label='Kandang'
+                    value={formik.values.coop ?? undefined}
+                    onChange={coopChangeHandler}
+                    options={coopOptions}
+                    onInputChange={setCoopSelectInputValue}
+                    isLoading={isLoadingCoops}
+                    isError={
+                      formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                    }
+                    errorMessage={formik.errors.coop_id as string}
+                    isDisabled={type === 'detail' || !formik.values.location_id}
+                    isClearable
+                    placeholder={
+                      !formik.values.location_id
+                        ? 'Pilih lokasi terlebih dahulu'
+                        : 'Pilih Kandang'
+                    }
+                  />
+                </div>
+              </div>
             </div>
           </div>
 

From 23d5a41d56fdb973c169e97f74f846f2fd387f03 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 10:08:49 +0700
Subject: [PATCH 15/68] refactor(FE-114): improve recording date handling in
 RecordingForm

---
 .../flock/recording/form/RecordingForm.tsx    | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index a133e437..8d145ca8 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/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>

From 19db9a4eacd5e37aeacea6f34d171429b21293fc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 10:54:36 +0700
Subject: [PATCH 16/68] refactor(FE-114,136): enhance validation and default
 values in RecordingForm schema

---
 .../recording/form/RecordingForm.schema.ts    | 42 +++++++++++++++----
 .../flock/recording/form/RecordingForm.tsx    | 42 ++++---------------
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index 394b08b0..319482e7 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -7,17 +7,41 @@ export const RecordingFormSchema = Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  flock_id: Yup.number().required('Flock wajib diisi!'),
+  flock_id: Yup.number()
+    .default(0)
+    .typeError('Flock wajib diisi!')
+    .test(
+      'is-valid-flock',
+      'Flock wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Flock wajib diisi!'),
   location: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  location_id: Yup.number().required('Lokasi wajib diisi!'),
+  location_id: Yup.number()
+    .default(0)
+    .typeError('Lokasi wajib diisi!')
+    .test(
+      'is-valid-location',
+      'Lokasi wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Lokasi wajib diisi!'),
   coop: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  coop_id: Yup.number().required('Kandang wajib diisi!'),
+  coop_id: Yup.number()
+    .default(0)
+    .typeError('Kandang wajib diisi!')
+    .test(
+      'is-valid-coop',
+      'Kandang wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Kandang wajib diisi!'),
   recording_date: Yup.date()
     .required('Tanggal recording wajib diisi')
     .typeError('Format tanggal tidak valid'),
@@ -27,10 +51,12 @@ export const RecordingFormSchema = Yup.object({
         feed_name: Yup.string().required('Nama pakan wajib diisi!'),
         feed_qty: Yup.number()
           .required('Qty pakan wajib diisi!')
-          .min(1, 'Qty minimal 1!'),
+          .min(1, 'Qty minimal 1!')
+          .typeError('Qty pakan wajib diisi!'),
         feed_stock: Yup.number()
           .required('Stock pakan wajib diisi!')
-          .min(0, 'Stock minimal 0!'),
+          .min(1, 'Stock minimal 1!')
+          .typeError('Stock pakan wajib diisi!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data pakan!')
@@ -57,10 +83,12 @@ export const RecordingFormSchema = Yup.object({
         vaccine_name: Yup.string().required('Nama vaksin wajib diisi!'),
         total_stock: Yup.number()
           .required('Total stock wajib diisi!')
-          .min(0, 'Total stock minimal 0!'),
+          .min(1, 'Total stock minimal 1!')
+          .typeError('Total stock wajib diisi!'),
         used_stock: Yup.number()
           .required('Jumlah stock wajib diisi!')
-          .min(0, 'Jumlah stock minimal 0!'),
+          .min(1, 'Jumlah stock minimal 1!')
+          .typeError('Jumlah stock wajib diisi!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data vaksinasi!')
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 8d145ca8..228683fa 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -147,37 +147,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     const locationValue = (val as OptionType)?.value;
 
-    formik.setFieldValue('location', val);
-    formik.setFieldValue('location_id', locationValue || 0);
+    formik.setFieldValue('location', val, false);
+    formik.setFieldValue('location_id', locationValue || 0, false);
 
-    if (locationValue) {
-      formik.setFieldTouched('location', true);
-      formik.setFieldTouched('location_id', true);
-    } else {
-      formik.setFieldTouched('location', false);
-      formik.setFieldTouched('location_id', false);
-    }
-
-    formik.setFieldValue('coop', null);
-    formik.setFieldValue('coop_id', 0);
-    formik.setFieldTouched('coop', false);
-    formik.setFieldTouched('coop_id', false);
+    formik.setFieldValue('coop', null, false);
+    formik.setFieldValue('coop_id', 0, false);
     setCoopSelectInputValue('');
   };
 
   const coopChangeHandler = (val: OptionType | OptionType[] | null) => {
     const coopValue = (val as OptionType)?.value;
 
-    formik.setFieldValue('coop', val);
-    formik.setFieldValue('coop_id', coopValue || 0);
-
-    if (coopValue) {
-      formik.setFieldTouched('coop', true);
-      formik.setFieldTouched('coop_id', true);
-    } else {
-      formik.setFieldTouched('coop', false);
-      formik.setFieldTouched('coop_id', false);
-    }
+    formik.setFieldValue('coop', val, false);
+    formik.setFieldValue('coop_id', coopValue || 0, false);
   };
 
   const isRepeaterInputError = <T extends keyof CreateRecordingPayload>(
@@ -224,16 +206,8 @@ 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);
-    }
+    formik.setFieldValue('flock', val, false);
+    formik.setFieldValue('flock_id', flockValue || 0, false);
   };
 
   const addFeedData = () => {

From c77968940e12caeb94912ee6079bd200734849ce Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 13:16:54 +0700
Subject: [PATCH 17/68] refactor(FE-114,136): update flock references to use
 ProjectFlock and adjust RecordingForm for new API

---
 .../flock/recording/form/RecordingForm.tsx    | 39 ++++++++-----------
 src/services/api/flock.ts                     |  2 +-
 src/services/api/production.ts                | 12 ++++++
 src/types/api/flock/recording.d.ts            |  4 +-
 .../api/{flock => master-data}/flock.d.ts     |  0
 src/types/api/production/project-flock.d.ts   | 39 +++++++++++++++++++
 6 files changed, 71 insertions(+), 25 deletions(-)
 create mode 100644 src/services/api/production.ts
 rename src/types/api/{flock => master-data}/flock.d.ts (100%)
 create mode 100644 src/types/api/production/project-flock.d.ts

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 228683fa..d6e80a76 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -18,7 +18,7 @@ import {
   UpdateRecordingFormSchema,
 } from './RecordingForm.schema';
 import { useRecordingFormHandlers } from './useRecordingFormHandlers';
-import { FlockApi } from '@/services/api/flock';
+import { ProjectFlockApi } from '@/services/api/production';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 import useSWR from 'swr';
@@ -29,15 +29,10 @@ interface RecordingFormProps {
   initialValues?: Recording;
 }
 
-const DUMMY_FLOCKS = [
-  { value: 1, label: 'Flock A' },
-  { value: 2, label: 'Flock B' },
-  { value: 3, label: 'Flock C' },
-  { value: 4, label: 'Flock D' },
-];
-
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
+  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
+  const [coopSelectInputValue, setCoopSelectInputValue] = useState('');
   const [selectedFeed, setSelectedFeed] = useState<number[]>([]);
   const [selectedWeight, setSelectedWeight] = useState<number[]>([]);
   const [selectedVaccine, setSelectedVaccine] = useState<number[]>([]);
@@ -107,20 +102,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
-  // // Flock selection
-  // const flocksUrl = `${FlockApi.basePath}?${new URLSearchParams({ search: flockSelectInputValue }).toString()}`;
-  // const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
-  //   flocksUrl,
-  //   FlockApi.getAllFetcher
-  // );
-  // const flockOptions = isResponseSuccess(flocks)
-  //   ? flocks?.data.map((f) => ({ value: f.id, label: f.name }))
-  //   : [];
+  // Flock selection
+  const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({ search: flockSelectInputValue }).toString()}`;
+  const { data: projectFlocks, isLoading: isLoadingFlocks } = useSWR(
+    projectFlocksUrl,
+    ProjectFlockApi.getAllFetcher
+  );
+  const flockOptions = isResponseSuccess(projectFlocks)
+    ? projectFlocks?.data.map((flock) => ({
+        value: flock.id,
+        label: flock.flock.name,
+      }))
+    : [];
 
-  const flockOptions = DUMMY_FLOCKS;
-
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-  const [coopSelectInputValue, setCoopSelectInputValue] = useState('');
+  // Pakan selection
 
   const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue ?? '' }).toString()}`;
   const { data: locations, isLoading: isLoadingLocations } = useSWR(
@@ -366,7 +361,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     onChange={flockChangeHandler}
                     options={flockOptions}
                     onInputChange={setFlockSelectInputValue}
-                    isLoading={false}
+                    isLoading={isLoadingFlocks}
                     isError={
                       formik.touched.flock_id && Boolean(formik.errors.flock_id)
                     }
diff --git a/src/services/api/flock.ts b/src/services/api/flock.ts
index 83fbb0d8..ff8c641a 100644
--- a/src/services/api/flock.ts
+++ b/src/services/api/flock.ts
@@ -2,7 +2,7 @@ import {
   CreateFlockPayload,
   Flock,
   UpdateFlockPayload,
-} from '@/types/api/flock/flock';
+} from '@/types/api/master-data/flock';
 import {
   CreateRecordingPayload,
   Recording,
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
new file mode 100644
index 00000000..49f0b133
--- /dev/null
+++ b/src/services/api/production.ts
@@ -0,0 +1,12 @@
+import { BaseApiService } from './base';
+import {
+  CreateProjectFlockPayload,
+  ProjectFlock,
+  UpdateProjectFlockPayload,
+} from '@/types/api/production/project-flock';
+
+export const ProjectFlockApi = new BaseApiService<
+  ProjectFlock,
+  CreateProjectFlockPayload,
+  UpdateProjectFlockPayload
+>('/production/project_flocks');
diff --git a/src/types/api/flock/recording.d.ts b/src/types/api/flock/recording.d.ts
index a39588b5..58fed128 100644
--- a/src/types/api/flock/recording.d.ts
+++ b/src/types/api/flock/recording.d.ts
@@ -1,11 +1,11 @@
 import { BaseMetadata } from '@/types/api/api-general';
-import { Flock } from '@/types/api/flock/flock';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Location } from '@/types/api/master-data/location';
 import { Kandang } from '@/types/api/master-data/kandang';
 
 export type BaseRecording = {
   id: number;
-  flock: Flock;
+  flock: ProjectFlock;
   recording_date: string;
   location: Location;
   coop: Kandang;
diff --git a/src/types/api/flock/flock.d.ts b/src/types/api/master-data/flock.d.ts
similarity index 100%
rename from src/types/api/flock/flock.d.ts
rename to src/types/api/master-data/flock.d.ts
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
new file mode 100644
index 00000000..cd68df40
--- /dev/null
+++ b/src/types/api/production/project-flock.d.ts
@@ -0,0 +1,39 @@
+import { Flock } from '@/types/api/master-data/flock';
+import { Area } from '@/types/api/master-data/area';
+import { ProductCategory } from '@/types/api/master-data/product-category';
+import { Fcr } from '@/types/api/master-data/fcr';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseProjectFlock = {
+  id: number;
+  name: string;
+  flock: Flock;
+  flock_id: number;
+  area: Area;
+  area_id: number;
+  product_category: ProductCategory;
+  product_category_id: number;
+  fcr: Fcr;
+  fcr_id: number;
+  location: Location;
+  location_id: number;
+  period: number;
+  kandang_ids: number[];
+  kandangs: Kandang[];
+};
+
+export type ProjectFlock = BaseMetadata & BaseProjectFlock;
+
+export type CreateProjectFlockPayload = {
+  name: string;
+  flock_id: number;
+  area_id: number;
+  product_category_id: number;
+  fcr_id: number;
+  location_id: number;
+  period: number;
+  kandang_ids: number[];
+};
+
+export type UpdateProjectFlockPayload = CreateProjectFlockPayload;

From caf68d438ff88be2b5b5debd33ea2982df6119f4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 13:59:28 +0700
Subject: [PATCH 18/68] refactor(FE-114,136,137): update feed and vaccination
 fields to use IDs instead of names and add stock validation

---
 .../recording/form/RecordingForm.schema.ts    |  64 ++++--
 .../flock/recording/form/RecordingForm.tsx    | 186 ++++++++++++------
 src/types/api/flock/recording.d.ts            |   4 +-
 3 files changed, 174 insertions(+), 80 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index 319482e7..ed5507eb 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -48,7 +48,7 @@ export const RecordingFormSchema = Yup.object({
   feed_data: Yup.array()
     .of(
       Yup.object({
-        feed_name: Yup.string().required('Nama pakan wajib diisi!'),
+        feed_id: Yup.string().required('Nama pakan wajib diisi!'),
         feed_qty: Yup.number()
           .required('Qty pakan wajib diisi!')
           .min(1, 'Qty minimal 1!')
@@ -56,7 +56,15 @@ export const RecordingFormSchema = Yup.object({
         feed_stock: Yup.number()
           .required('Stock pakan wajib diisi!')
           .min(1, 'Stock minimal 1!')
-          .typeError('Stock pakan wajib diisi!'),
+          .typeError('Stock pakan wajib diisi!')
+          .test(
+            'is-not-exceed-qty',
+            'Feed stock tidak boleh melebihi feed qty yang tersedia!',
+            function (value) {
+              const { feed_qty } = this.parent;
+              return value === undefined || value <= feed_qty;
+            }
+          ),
       })
     )
     .min(1, 'Minimal harus ada 1 data pakan!')
@@ -80,7 +88,7 @@ export const RecordingFormSchema = Yup.object({
   vaccination: Yup.array()
     .of(
       Yup.object({
-        vaccine_name: Yup.string().required('Nama vaksin wajib diisi!'),
+        vaccine_id: Yup.string().required('Nama vaksin wajib diisi!'),
         total_stock: Yup.number()
           .required('Total stock wajib diisi!')
           .min(1, 'Total stock minimal 1!')
@@ -88,7 +96,15 @@ export const RecordingFormSchema = Yup.object({
         used_stock: Yup.number()
           .required('Jumlah stock wajib diisi!')
           .min(1, 'Jumlah stock minimal 1!')
-          .typeError('Jumlah stock wajib diisi!'),
+          .typeError('Jumlah stock wajib diisi!')
+          .test(
+            'is-not-exceed-total',
+            'Used stock tidak boleh melebihi total stock yang tersedia!',
+            function (value) {
+              const { total_stock } = this.parent;
+              return value === undefined || value <= total_stock;
+            }
+          ),
       })
     )
     .min(1, 'Minimal harus ada 1 data vaksinasi!')
@@ -142,13 +158,19 @@ export const getRecordingFormInitialValues = (
   recording_date: initialValues?.recording_date
     ? new Date(initialValues.recording_date)
     : new Date(),
-  feed_data: initialValues?.feed_data ?? [
-    {
-      feed_name: '',
-      feed_qty: 0,
-      feed_stock: 0,
-    },
-  ],
+  feed_data: initialValues?.feed_data
+    ? initialValues.feed_data.map((feed) => ({
+        feed_id: feed.feed_name,
+        feed_qty: feed.feed_qty,
+        feed_stock: feed.feed_stock,
+      }))
+    : [
+        {
+          feed_id: '',
+          feed_qty: 0,
+          feed_stock: 0,
+        },
+      ],
   body_weight: initialValues?.body_weight ?? [
     {
       chicken_weight: 0,
@@ -156,13 +178,19 @@ export const getRecordingFormInitialValues = (
       average_chicken_weight: 0,
     },
   ],
-  vaccination: initialValues?.vaccination ?? [
-    {
-      vaccine_name: '',
-      total_stock: 0,
-      used_stock: 0,
-    },
-  ],
+  vaccination: initialValues?.vaccination
+    ? initialValues.vaccination.map((vaccine) => ({
+        vaccine_id: vaccine.vaccine_name,
+        total_stock: vaccine.total_stock,
+        used_stock: vaccine.used_stock,
+      }))
+    : [
+        {
+          vaccine_id: '',
+          total_stock: 0,
+          used_stock: 0,
+        },
+      ],
   mortality: initialValues?.mortality ?? [
     {
       condition: '',
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index d6e80a76..e2bd0d94 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -23,6 +23,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 import useSWR from 'swr';
 import { KandangApi, LocationApi } from '@/services/api/master-data';
+import { ProductWarehouseApi } from '@/services/api/inventory';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -71,7 +72,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             ? values.recording_date.toISOString()
             : '',
         feed_data: (values.feed_data ?? []).map((p) => ({
-          feed_name: p.feed_name,
+          feed_id: p.feed_id,
           feed_qty: p.feed_qty,
           feed_stock: p.feed_stock,
         })),
@@ -81,7 +82,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           average_chicken_weight: b.average_chicken_weight,
         })),
         vaccination: (values.vaccination ?? []).map((v) => ({
-          vaccine_name: v.vaccine_name,
+          vaccine_id: v.vaccine_id,
           total_stock: v.total_stock,
           used_stock: v.used_stock,
         })),
@@ -116,6 +117,50 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     : [];
 
   // Pakan selection
+  const pakanUrl = `${ProductWarehouseApi.basePath}?${new URLSearchParams({ flag: 'PAKAN', search: '' }).toString()}`;
+  const { data: pakanProducts } = useSWR(
+    pakanUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+  const pakanOptions = isResponseSuccess(pakanProducts)
+    ? pakanProducts?.data.map((product) => ({
+        value: product.id,
+        label: product.product.name,
+      }))
+    : [];
+
+  // Create stock mapping for pakan (Feed)
+  const pakanStockMap = useMemo(() => {
+    if (!isResponseSuccess(pakanProducts)) return new Map<number, number>();
+    const map = new Map<number, number>();
+    pakanProducts.data.forEach((product) => {
+      map.set(product.id, product.quantity);
+    });
+    return map;
+  }, [pakanProducts]);
+
+  // OVK selection
+  const ovkUrl = `${ProductWarehouseApi.basePath}?${new URLSearchParams({ flag: 'OVK', search: '' }).toString()}`;
+  const { data: ovkProducts } = useSWR(
+    ovkUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+  const ovkOptions = isResponseSuccess(ovkProducts)
+    ? ovkProducts?.data.map((product) => ({
+        value: product.id,
+        label: product.product.name,
+      }))
+    : [];
+
+  // Create stock mapping for OVK (Vaccination)
+  const ovkStockMap = useMemo(() => {
+    if (!isResponseSuccess(ovkProducts)) return new Map<number, number>();
+    const map = new Map<number, number>();
+    ovkProducts.data.forEach((product) => {
+      map.set(product.id, product.quantity);
+    });
+    return map;
+  }, [ovkProducts]);
 
   const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue ?? '' }).toString()}`;
   const { data: locations, isLoading: isLoadingLocations } = useSWR(
@@ -209,7 +254,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     const newFeedData = [
       ...(formik.values.feed_data || []),
       {
-        feed_name: '',
+        feed: null,
+        feed_id: 0,
         feed_qty: 0,
         feed_stock: 0,
       },
@@ -263,7 +309,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     const newVaccination = [
       ...(formik.values.vaccination || []),
       {
-        vaccine_name: '',
+        vaccine: null,
+        vaccine_id: 0,
         total_stock: 0,
         used_stock: 0,
       },
@@ -327,33 +374,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
               <div className='flex flex-col gap-6'>
                 <div className='flex gap-4'>
-                  {/*<SelectInput*/}
-                  {/*  required*/}
-                  {/*  label='Flock'*/}
-                  {/*  value={*/}
-                  {/*    formik.values.flock_id*/}
-                  {/*      ? {*/}
-                  {/*          value: formik.values.flock_id,*/}
-                  {/*          label: initialValues?.flock?.name,*/}
-                  {/*        }*/}
-                  {/*      : null*/}
-                  {/*  }*/}
-                  {/*  onChange={(val) => {*/}
-                  {/*    formik.setFieldValue(*/}
-                  {/*      'flock_id',*/}
-                  {/*      (val as OptionType)?.value*/}
-                  {/*    );*/}
-                  {/*  }}*/}
-                  {/*  options={flockOptions}*/}
-                  {/*  onInputChange={setFlockSelectInputValue}*/}
-                  {/*  isLoading={isLoadingFlocks}*/}
-                  {/*  isError={*/}
-                  {/*    formik.touched.flock_id && Boolean(formik.errors.flock_id)*/}
-                  {/*  }*/}
-                  {/*  errorMessage={formik.errors.flock_id as string}*/}
-                  {/*  isDisabled={type === 'detail'}*/}
-                  {/*  isClearable*/}
-                  {/*/>*/}
                   <SelectInput
                     required
                     label='Flock'
@@ -473,8 +493,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </th>
                       )}
                       <th>Feed Name</th>
-                      <th>Feed Qty</th>
-                      <th>Feed Stock</th>
+                      <th>Feed Qty (Available Stock)</th>
+                      <th>Feed Stock (Used)</th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
@@ -500,27 +520,47 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </td>
                         )}
                         <td>
-                          <TextInput
+                          <SelectInput
                             required
-                            name={`feed_data.${idx}.feed_name`}
-                            value={feed.feed_name}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
+                            value={
+                              pakanOptions.find(
+                                (opt: OptionType) =>
+                                  Number(opt.value) === Number(feed.feed_id)
+                              ) ?? null
+                            }
+                            onChange={(val) => {
+                              const productWarehouseId =
+                                (val as OptionType)?.value ?? 0;
+                              const stock =
+                                pakanStockMap.get(
+                                  productWarehouseId as number
+                                ) ?? 0;
+
+                              formik.setFieldValue(
+                                `feed_data.${idx}.feed`,
+                                val
+                              );
+                              formik.setFieldValue(
+                                `feed_data.${idx}.feed_id`,
+                                productWarehouseId
+                              );
+                              formik.setFieldValue(
+                                `feed_data.${idx}.feed_qty`,
+                                stock
+                              );
+                            }}
+                            options={pakanOptions}
+                            isLoading={false}
                             isError={
-                              isRepeaterInputError(
-                                'feed_data',
-                                'feed_name',
-                                idx
-                              ).isError
+                              isRepeaterInputError('feed_data', 'feed_id', idx)
+                                .isError
                             }
                             errorMessage={
-                              isRepeaterInputError(
-                                'feed_data',
-                                'feed_name',
-                                idx
-                              ).errorMessage
+                              isRepeaterInputError('feed_data', 'feed_id', idx)
+                                .errorMessage
                             }
-                            readOnly={type === 'detail'}
+                            isDisabled={type === 'detail'}
+                            isClearable
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
@@ -542,7 +582,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               isRepeaterInputError('feed_data', 'feed_qty', idx)
                                 .errorMessage
                             }
-                            readOnly={type === 'detail'}
+                            readOnly={true}
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
@@ -847,7 +887,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </th>
                       )}
                       <th>Vaccine Name</th>
-                      <th>Total Stock</th>
+                      <th>Total Stock (Available Stock)</th>
                       <th>Used Stock</th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
@@ -874,27 +914,53 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </td>
                         )}
                         <td>
-                          <TextInput
+                          <SelectInput
                             required
-                            name={`vaccination.${idx}.vaccine_name`}
-                            value={vaccine.vaccine_name}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
+                            value={
+                              ovkOptions.find(
+                                (opt: OptionType) =>
+                                  Number(opt.value) ===
+                                  Number(vaccine.vaccine_id)
+                              ) ?? null
+                            }
+                            onChange={(val) => {
+                              const productWarehouseId =
+                                (val as OptionType)?.value ?? 0;
+                              const stock =
+                                ovkStockMap.get(productWarehouseId as number) ??
+                                0;
+
+                              formik.setFieldValue(
+                                `vaccination.${idx}.vaccine`,
+                                val
+                              );
+                              formik.setFieldValue(
+                                `vaccination.${idx}.vaccine_id`,
+                                productWarehouseId
+                              );
+                              formik.setFieldValue(
+                                `vaccination.${idx}.total_stock`,
+                                stock
+                              );
+                            }}
+                            options={ovkOptions}
+                            isLoading={false}
                             isError={
                               isRepeaterInputError(
                                 'vaccination',
-                                'vaccine_name',
+                                'vaccine_id',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
                                 'vaccination',
-                                'vaccine_name',
+                                'vaccine_id',
                                 idx
                               ).errorMessage
                             }
-                            readOnly={type === 'detail'}
+                            isDisabled={type === 'detail'}
+                            isClearable
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
@@ -922,7 +988,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 idx
                               ).errorMessage
                             }
-                            readOnly={type === 'detail'}
+                            readOnly={true}
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
diff --git a/src/types/api/flock/recording.d.ts b/src/types/api/flock/recording.d.ts
index 58fed128..d4bf90ee 100644
--- a/src/types/api/flock/recording.d.ts
+++ b/src/types/api/flock/recording.d.ts
@@ -38,7 +38,7 @@ export type CreateRecordingPayload = {
   location_id: number;
   coop_id: number;
   feed_data: {
-    feed_name: string;
+    feed_id: string;
     feed_qty: number;
     feed_stock: number;
   }[];
@@ -48,7 +48,7 @@ export type CreateRecordingPayload = {
     average_chicken_weight: number;
   }[];
   vaccination: {
-    vaccine_name: string;
+    vaccine_id: string;
     total_stock: number;
     used_stock: number;
   }[];

From 881e2bfc4ad37af1055f66b5d6c3f812d313ece7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 18 Oct 2025 09:04:39 +0700
Subject: [PATCH 19/68] feat(FE-114,136): enhance product label display in
 RecordingForm with warehouse and stock information

---
 src/components/pages/flock/recording/form/RecordingForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index e2bd0d94..65c8073b 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -125,7 +125,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const pakanOptions = isResponseSuccess(pakanProducts)
     ? pakanProducts?.data.map((product) => ({
         value: product.id,
-        label: product.product.name,
+        label: `${product.product.name} - ${product.warehouse.name} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
       }))
     : [];
 
@@ -148,7 +148,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const ovkOptions = isResponseSuccess(ovkProducts)
     ? ovkProducts?.data.map((product) => ({
         value: product.id,
-        label: product.product.name,
+        label: `${product.product.name} - ${product.warehouse.name} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
       }))
     : [];
 

From c25b49c179dbff5f6394f263f45a8ccf4f64581e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 18 Oct 2025 11:39:18 +0700
Subject: [PATCH 20/68] feat(FE-114): add NumberInput component and integrate
 into RecordingForm for enhanced numeric input handling

---
 src/components/input/NumberInput.tsx          | 444 ++++++++++++++++++
 .../flock/recording/form/RecordingForm.tsx    |  42 +-
 2 files changed, 476 insertions(+), 10 deletions(-)
 create mode 100644 src/components/input/NumberInput.tsx

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
new file mode 100644
index 00000000..a9b8d9a0
--- /dev/null
+++ b/src/components/input/NumberInput.tsx
@@ -0,0 +1,444 @@
+'use client';
+
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+
+import { Icon } from '@iconify/react';
+import { cn } from '@/lib/helper';
+
+// Utility Functions
+const formatNumber = (
+  value: number | string,
+  decimals: number = 0,
+  thousandSeparator: string = '.',
+  decimalSeparator: string = ','
+): string => {
+  if (value === '' || value === null || value === undefined) return '';
+
+  const numValue = typeof value === 'string' ? parseFloat(value) : value;
+  if (isNaN(numValue)) return '';
+
+  const parts = numValue.toFixed(decimals).split('.');
+  const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+  const decimalPart = parts[1];
+
+  return decimals > 0 && decimalPart
+    ? `${integerPart}${decimalSeparator}${decimalPart}`
+    : integerPart;
+};
+
+const parseNumber = (
+  value: string,
+  thousandSeparator: string = '.',
+  decimalSeparator: string = ','
+): number => {
+  if (!value) return 0;
+
+  // Remove thousand separators and replace decimal separator with dot
+  const cleaned = value
+    .replace(new RegExp(`\\${thousandSeparator}`, 'g'), '')
+    .replace(decimalSeparator, '.');
+
+  const parsed = parseFloat(cleaned);
+  return isNaN(parsed) ? 0 : parsed;
+};
+
+const formatCurrency = (
+  value: number | string,
+  prefix: string = 'Rp ',
+  decimals: number = 0
+): string => {
+  if (value === '' || value === null || value === undefined) return '';
+  const formatted = formatNumber(value, decimals);
+  return formatted ? `${prefix}${formatted}` : '';
+};
+
+const formatWeight = (
+  value: number | string,
+  unit: string = 'kg',
+  decimals: number = 2
+): string => {
+  if (value === '' || value === null || value === undefined) return '';
+  const formatted = formatNumber(value, decimals);
+  return formatted ? `${formatted} ${unit}` : '';
+};
+
+const cleanNumericInput = (
+  value: string,
+  allowDecimal: boolean = false,
+  decimalSeparator: string = ','
+): string => {
+  // Only allow numbers, decimal separator (if allowed), and minus sign at the start
+  let cleaned = value.replace(/[^\d,.-]/g, '');
+
+  // Handle decimal separator
+  if (allowDecimal) {
+    const parts = cleaned.split(decimalSeparator);
+    if (parts.length > 2) {
+      // Keep only first decimal separator
+      cleaned = parts[0] + decimalSeparator + parts.slice(1).join('');
+    }
+  } else {
+    cleaned = cleaned.replace(new RegExp(decimalSeparator, 'g'), '');
+  }
+
+  // Handle minus sign (only at start)
+  const hasMinusAtStart = cleaned.startsWith('-');
+  cleaned = cleaned.replace(/-/g, '');
+  if (hasMinusAtStart) cleaned = '-' + cleaned;
+
+  return cleaned;
+};
+
+// Types
+export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
+
+export interface NumberInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: number | string;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+
+  // Masking Options
+  maskType?: MaskType;
+  decimals?: number;
+  thousandSeparator?: string;
+  decimalSeparator?: string;
+
+  // Currency specific
+  currencyPrefix?: string;
+
+  // Weight specific
+  weightUnit?: string;
+
+  // Validation
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+
+  // Stepper (Increment/Decrement buttons)
+  showSteppers?: boolean;
+  step?: number;
+}
+
+const NumberInput = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  onFocus,
+  readOnly = false,
+  isLoading = false,
+  maskType = 'number',
+  decimals = 0,
+  thousandSeparator = '.',
+  decimalSeparator = ',',
+  currencyPrefix = 'Rp ',
+  weightUnit = 'kg',
+  min,
+  max,
+  allowNegative = false,
+  showSteppers = false,
+  step = 1,
+}: NumberInputProps) => {
+  const [displayValue, setDisplayValue] = useState<string>('');
+
+  // Determine if decimals are allowed based on maskType
+  const allowDecimal = maskType === 'decimal' || maskType === 'weight' || decimals > 0;
+
+  // Format value for display based on maskType
+  const getFormattedValue = (rawValue: number | string): string => {
+    if (rawValue === '' || rawValue === null || rawValue === undefined) return '';
+
+    switch (maskType) {
+      case 'currency':
+        return formatCurrency(rawValue, currencyPrefix, decimals);
+      case 'weight':
+        return formatWeight(rawValue, weightUnit, decimals);
+      case 'decimal':
+      case 'number':
+        return formatNumber(rawValue, decimals, thousandSeparator, decimalSeparator);
+      default:
+        return String(rawValue);
+    }
+  };
+
+  // Initialize display value when value prop changes
+  useEffect(() => {
+    setDisplayValue(getFormattedValue(value || ''));
+  }, [value]);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let inputValue = e.target.value;
+
+    // Remove prefix/suffix for editing
+    if (maskType === 'currency' && inputValue.startsWith(currencyPrefix)) {
+      inputValue = inputValue.slice(currencyPrefix.length);
+    }
+    if (maskType === 'weight' && inputValue.endsWith(` ${weightUnit}`)) {
+      inputValue = inputValue.slice(0, -weightUnit.length - 1);
+    }
+
+    // Clean input
+    const cleaned = cleanNumericInput(inputValue, allowDecimal, decimalSeparator);
+
+    // Parse to number
+    let numericValue = parseNumber(cleaned, thousandSeparator, decimalSeparator);
+
+    // Apply validation
+    if (!allowNegative && numericValue < 0) {
+      numericValue = 0;
+    }
+    if (min !== undefined && numericValue < min) {
+      numericValue = min;
+    }
+    if (max !== undefined && numericValue > max) {
+      numericValue = max;
+    }
+
+    // Update display value
+    const formattedForDisplay = formatNumber(
+      numericValue,
+      decimals,
+      thousandSeparator,
+      decimalSeparator
+    );
+
+    setDisplayValue(formattedForDisplay);
+
+    // Call onChange with modified event
+    if (onChange) {
+      // Create a synthetic event with the numeric value
+      const syntheticEvent = {
+        ...e,
+        target: {
+          ...e.target,
+          name,
+          value: numericValue.toString(),
+        },
+      } as ChangeEvent<HTMLInputElement>;
+
+      onChange(syntheticEvent);
+    }
+  };
+
+  // Handle Increment
+  const handleIncrement = () => {
+    if (disabled || readOnly) return;
+
+    const currentValue = parseNumber(displayValue, thousandSeparator, decimalSeparator);
+    let newValue = currentValue + step;
+
+    // Apply max validation
+    if (max !== undefined && newValue > max) {
+      newValue = max;
+    }
+
+    // Update display
+    const formattedForDisplay = formatNumber(
+      newValue,
+      decimals,
+      thousandSeparator,
+      decimalSeparator
+    );
+    setDisplayValue(formattedForDisplay);
+
+    // Call onChange with synthetic event
+    if (onChange) {
+      const syntheticEvent = {
+        target: {
+          name,
+          value: newValue.toString(),
+        },
+      } as ChangeEvent<HTMLInputElement>;
+
+      onChange(syntheticEvent);
+    }
+  };
+
+  // Handle Decrement
+  const handleDecrement = () => {
+    if (disabled || readOnly) return;
+
+    const currentValue = parseNumber(displayValue, thousandSeparator, decimalSeparator);
+    let newValue = currentValue - step;
+
+    // Apply min validation (prevent negative if not allowed)
+    if (!allowNegative && newValue < 0) {
+      newValue = 0;
+    }
+    if (min !== undefined && newValue < min) {
+      newValue = min;
+    }
+
+    // Update display
+    const formattedForDisplay = formatNumber(
+      newValue,
+      decimals,
+      thousandSeparator,
+      decimalSeparator
+    );
+    setDisplayValue(formattedForDisplay);
+
+    // Call onChange with synthetic event
+    if (onChange) {
+      const syntheticEvent = {
+        target: {
+          name,
+          value: newValue.toString(),
+        },
+      } as ChangeEvent<HTMLInputElement>;
+
+      onChange(syntheticEvent);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </label>
+      )}
+
+      <div
+        className={cn(
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
+        )}
+      >
+        {/* Decrement Button */}
+        {showSteppers && (
+          <button
+            type='button'
+            onClick={handleDecrement}
+            disabled={disabled || readOnly}
+            className={cn(
+              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
+              {
+                'opacity-50 cursor-not-allowed': disabled || readOnly,
+              }
+            )}
+            tabIndex={-1}
+          >
+            <Icon icon='ic:round-minus' width={20} height={20} />
+          </button>
+        )}
+
+        {startAdornment && startAdornment}
+
+        <input
+          type='text'
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={displayValue}
+          onChange={handleInputChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          disabled={disabled}
+          className={cn('grow', className?.input)}
+          readOnly={readOnly}
+          inputMode='decimal'
+        />
+
+        {(isLoading || endAdornment) && (
+          <div className='flex flex-row gap-2'>
+            {isLoading && <span className='loading loading-spinner' />}
+
+            {endAdornment && endAdornment}
+          </div>
+        )}
+
+        {/* Increment Button */}
+        {showSteppers && (
+          <button
+            type='button'
+            onClick={handleIncrement}
+            disabled={disabled || readOnly}
+            className={cn(
+              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
+              {
+                'opacity-50 cursor-not-allowed': disabled || readOnly,
+              }
+            )}
+            tabIndex={-1}
+          >
+            <Icon icon='ic:round-plus' width={20} height={20} />
+          </button>
+        )}
+      </div>
+
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export default NumberInput;
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 65c8073b..773baab6 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -6,6 +6,7 @@ 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';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
@@ -589,13 +590,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`feed_data.${idx}.feed_stock`}
                             value={feed.feed_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            maskType='number'
+                            decimals={0}
+                            min={0}
                             isError={
                               isRepeaterInputError(
                                 'feed_data',
@@ -728,13 +731,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </td>
                         )}
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`body_weight.${idx}.chicken_weight`}
                             value={weight.chicken_weight}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            maskType='weight'
+                            weightUnit='gram'
+                            decimals={0}
+                            min={0}
                             isError={
                               isRepeaterInputError(
                                 'body_weight',
@@ -750,16 +756,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               ).errorMessage
                             }
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`body_weight.${idx}.chicken_count`}
                             value={weight.chicken_count}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            maskType='number'
+                            decimals={0}
+                            min={0}
                             isError={
                               isRepeaterInputError(
                                 'body_weight',
@@ -775,16 +786,22 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               ).errorMessage
                             }
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`body_weight.${idx}.average_chicken_weight`}
                             value={weight.average_chicken_weight}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            maskType='weight'
+                            weightUnit='gram'
+                            decimals={0}
+                            min={0}
                             isError={
                               isRepeaterInputError(
                                 'body_weight',
@@ -800,6 +817,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               ).errorMessage
                             }
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
                           />
                         </td>
                         {type !== 'detail' && (
@@ -995,13 +1015,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`vaccination.${idx}.used_stock`}
                             value={vaccine.used_stock}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            maskType='number'
+                            decimals={0}
+                            min={0}
                             isError={
                               isRepeaterInputError(
                                 'vaccination',

From e4f554bcd4d6c712d5f935b37f18610034aa2031 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 18 Oct 2025 12:25:04 +0700
Subject: [PATCH 21/68] refactor(FE-114,136): update RecordingForm validation
 and input handling for feed and vaccination data

---
 .../recording/form/RecordingForm.schema.ts    |  52 ++++-----
 .../flock/recording/form/RecordingForm.tsx    | 102 +++++++++---------
 2 files changed, 80 insertions(+), 74 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index ed5507eb..16f7e690 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -49,20 +49,19 @@ export const RecordingFormSchema = Yup.object({
     .of(
       Yup.object({
         feed_id: Yup.string().required('Nama pakan wajib diisi!'),
-        feed_qty: Yup.number()
-          .required('Qty pakan wajib diisi!')
-          .min(1, 'Qty minimal 1!')
-          .typeError('Qty pakan wajib diisi!'),
+        feed_qty: Yup.mixed<number | ''>().notRequired(),
         feed_stock: Yup.number()
-          .required('Stock pakan wajib diisi!')
-          .min(1, 'Stock minimal 1!')
-          .typeError('Stock pakan wajib diisi!')
+          .required('Jumlah pakan yang digunakan wajib diisi!')
+          .min(1, 'Jumlah pakan minimal 1 kg!')
+          .typeError('Jumlah pakan yang digunakan harus berupa angka!')
           .test(
             'is-not-exceed-qty',
-            'Feed stock tidak boleh melebihi feed qty yang tersedia!',
+            'Jumlah pakan yang digunakan tidak boleh melebihi stok tersedia!',
             function (value) {
               const { feed_qty } = this.parent;
-              return value === undefined || value <= feed_qty;
+              if (value === undefined) return true;
+              if (feed_qty === undefined || feed_qty === '' || typeof feed_qty !== 'number') return true;
+              return value <= feed_qty;
             }
           ),
       })
@@ -74,13 +73,16 @@ export const RecordingFormSchema = Yup.object({
       Yup.object({
         chicken_weight: Yup.number()
           .required('Berat ayam wajib diisi!')
-          .min(1, 'Berat minimal 1!'),
+          .min(1, 'Berat ayam minimal 1 gram!')
+          .typeError('Berat ayam harus berupa angka!'),
         chicken_count: Yup.number()
           .required('Jumlah ayam wajib diisi!')
-          .min(1, 'Jumlah minimal 1!'),
+          .min(1, 'Jumlah ayam minimal 1 ekor!')
+          .typeError('Jumlah ayam harus berupa angka!'),
         average_chicken_weight: Yup.number()
           .required('Rata-rata berat ayam wajib diisi!')
-          .min(1, 'Rata-rata minimal 1!'),
+          .min(1, 'Rata-rata berat ayam minimal 1 gram!')
+          .typeError('Rata-rata berat ayam harus berupa angka!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data bobot badan!')
@@ -89,20 +91,19 @@ export const RecordingFormSchema = Yup.object({
     .of(
       Yup.object({
         vaccine_id: Yup.string().required('Nama vaksin wajib diisi!'),
-        total_stock: Yup.number()
-          .required('Total stock wajib diisi!')
-          .min(1, 'Total stock minimal 1!')
-          .typeError('Total stock wajib diisi!'),
+        total_stock: Yup.mixed<number | ''>().notRequired(),
         used_stock: Yup.number()
-          .required('Jumlah stock wajib diisi!')
-          .min(1, 'Jumlah stock minimal 1!')
-          .typeError('Jumlah stock wajib diisi!')
+          .required('Jumlah vaksin yang digunakan wajib diisi!')
+          .min(1, 'Jumlah vaksin minimal 1!')
+          .typeError('Jumlah vaksin yang digunakan harus berupa angka!')
           .test(
             'is-not-exceed-total',
-            'Used stock tidak boleh melebihi total stock yang tersedia!',
+            'Jumlah vaksin yang digunakan tidak boleh melebihi stok tersedia!',
             function (value) {
               const { total_stock } = this.parent;
-              return value === undefined || value <= total_stock;
+              if (value === undefined) return true;
+              if (total_stock === undefined || total_stock === '' || typeof total_stock !== 'number') return true;
+              return value <= total_stock;
             }
           ),
       })
@@ -119,8 +120,9 @@ export const RecordingFormSchema = Yup.object({
           )
           .required('Kondisi wajib diisi!'),
         count: Yup.number()
-          .required('Jumlah wajib diisi!')
-          .min(1, 'Jumlah minimal 1!'),
+          .required('Jumlah mortalitas wajib diisi!')
+          .min(1, 'Jumlah mortalitas minimal 1 ekor!')
+          .typeError('Jumlah mortalitas harus berupa angka!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data mortalitas!')
@@ -167,7 +169,7 @@ export const getRecordingFormInitialValues = (
     : [
         {
           feed_id: '',
-          feed_qty: 0,
+          feed_qty: '',
           feed_stock: 0,
         },
       ],
@@ -187,7 +189,7 @@ export const getRecordingFormInitialValues = (
     : [
         {
           vaccine_id: '',
-          total_stock: 0,
+          total_stock: '',
           used_stock: 0,
         },
       ],
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 773baab6..95600120 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -74,7 +74,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             : '',
         feed_data: (values.feed_data ?? []).map((p) => ({
           feed_id: p.feed_id,
-          feed_qty: p.feed_qty,
+          feed_qty: typeof p.feed_qty === 'number' ? p.feed_qty : 0,
           feed_stock: p.feed_stock,
         })),
         body_weight: (values.body_weight ?? []).map((b) => ({
@@ -84,7 +84,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         })),
         vaccination: (values.vaccination ?? []).map((v) => ({
           vaccine_id: v.vaccine_id,
-          total_stock: v.total_stock,
+          total_stock: typeof v.total_stock === 'number' ? v.total_stock : 0,
           used_stock: v.used_stock,
         })),
         mortality: (values.mortality ?? []).map((m) => ({
@@ -132,8 +132,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // Create stock mapping for pakan (Feed)
   const pakanStockMap = useMemo(() => {
-    if (!isResponseSuccess(pakanProducts)) return new Map<number, number>();
-    const map = new Map<number, number>();
+    if (!isResponseSuccess(pakanProducts))
+      return new Map<number, number | ''>();
+    const map = new Map<number, number | ''>();
     pakanProducts.data.forEach((product) => {
       map.set(product.id, product.quantity);
     });
@@ -155,8 +156,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // Create stock mapping for OVK (Vaccination)
   const ovkStockMap = useMemo(() => {
-    if (!isResponseSuccess(ovkProducts)) return new Map<number, number>();
-    const map = new Map<number, number>();
+    if (!isResponseSuccess(ovkProducts)) return new Map<number, number | ''>();
+    const map = new Map<number, number | ''>();
     ovkProducts.data.forEach((product) => {
       map.set(product.id, product.quantity);
     });
@@ -256,8 +257,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       ...(formik.values.feed_data || []),
       {
         feed: null,
-        feed_id: 0,
-        feed_qty: 0,
+        feed_id: '',
+        feed_qty: '',
         feed_stock: 0,
       },
     ];
@@ -311,8 +312,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       ...(formik.values.vaccination || []),
       {
         vaccine: null,
-        vaccine_id: 0,
-        total_stock: 0,
+        vaccine_id: '',
+        total_stock: '',
         used_stock: 0,
       },
     ];
@@ -532,10 +533,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             onChange={(val) => {
                               const productWarehouseId =
                                 (val as OptionType)?.value ?? 0;
-                              const stock =
-                                pakanStockMap.get(
-                                  productWarehouseId as number
-                                ) ?? 0;
+                              const stock = productWarehouseId
+                                ? (pakanStockMap.get(
+                                    productWarehouseId as number
+                                  ) ?? '')
+                                : '';
 
                               formik.setFieldValue(
                                 `feed_data.${idx}.feed`,
@@ -543,12 +545,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               );
                               formik.setFieldValue(
                                 `feed_data.${idx}.feed_id`,
-                                productWarehouseId
+                                productWarehouseId || ''
                               );
                               formik.setFieldValue(
                                 `feed_data.${idx}.feed_qty`,
                                 stock
                               );
+                              // Reset feed_stock when changing feed
+                              formik.setFieldValue(
+                                `feed_data.${idx}.feed_stock`,
+                                0
+                              );
                             }}
                             options={pakanOptions}
                             isLoading={false}
@@ -569,21 +576,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         <td>
                           <TextInput
-                            required
-                            type='number'
+                            type='text'
                             name={`feed_data.${idx}.feed_qty`}
-                            value={feed.feed_qty}
+                            value={
+                              feed.feed_qty === '' ||
+                              feed.feed_qty === undefined
+                                ? ''
+                                : String(feed.feed_qty)
+                            }
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={
-                              isRepeaterInputError('feed_data', 'feed_qty', idx)
-                                .isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError('feed_data', 'feed_qty', idx)
-                                .errorMessage
-                            }
                             readOnly={true}
+                            placeholder='Pilih pakan terlebih dahulu'
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
@@ -946,9 +950,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             onChange={(val) => {
                               const productWarehouseId =
                                 (val as OptionType)?.value ?? 0;
-                              const stock =
-                                ovkStockMap.get(productWarehouseId as number) ??
-                                0;
+                              const stock = productWarehouseId
+                                ? (ovkStockMap.get(
+                                    productWarehouseId as number
+                                  ) ?? '')
+                                : '';
 
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine`,
@@ -956,12 +962,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               );
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine_id`,
-                                productWarehouseId
+                                productWarehouseId || ''
                               );
                               formik.setFieldValue(
                                 `vaccination.${idx}.total_stock`,
                                 stock
                               );
+                              // Reset used_stock when changing vaccine
+                              formik.setFieldValue(
+                                `vaccination.${idx}.used_stock`,
+                                0
+                              );
                             }}
                             options={ovkOptions}
                             isLoading={false}
@@ -988,27 +999,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         <td>
                           <TextInput
-                            required
-                            type='number'
+                            type='text'
                             name={`vaccination.${idx}.total_stock`}
-                            value={vaccine.total_stock}
+                            value={
+                              vaccine.total_stock === '' ||
+                              vaccine.total_stock === undefined
+                                ? ''
+                                : String(vaccine.total_stock)
+                            }
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'total_stock',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'total_stock',
-                                idx
-                              ).errorMessage
-                            }
                             readOnly={true}
+                            placeholder='Pilih vaksin terlebih dahulu'
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
@@ -1189,13 +1191,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`mortality.${idx}.count`}
                             value={mortality.count}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            maskType='number'
+                            decimals={0}
+                            min={0}
                             isError={
                               isRepeaterInputError('mortality', 'count', idx)
                                 .isError

From 16d72ebf6fdc1ac538fefe8b39ed5a14c8ea6f18 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 09:51:32 +0700
Subject: [PATCH 22/68] feat(FE-114,136): integrate location selection and
 update flock handling in RecordingForm

---
 .../flock/recording/form/RecordingForm.tsx    | 344 ++++++++++++------
 src/types/api/production/project-flock.d.ts   |   1 +
 2 files changed, 224 insertions(+), 121 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 95600120..d29e7f72 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -23,8 +23,10 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 import useSWR from 'swr';
-import { KandangApi, LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { LocationApi } from '@/services/api/master-data';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -32,9 +34,10 @@ interface RecordingFormProps {
 }
 
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
-  const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
   const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-  const [coopSelectInputValue, setCoopSelectInputValue] = useState('');
+  const [flockSelectInputValue, setFlockSelectInputValue] = useState('');
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<ProjectFlock | null>(null);
   const [selectedFeed, setSelectedFeed] = useState<number[]>([]);
   const [selectedWeight, setSelectedWeight] = useState<number[]>([]);
   const [selectedVaccine, setSelectedVaccine] = useState<number[]>([]);
@@ -104,87 +107,159 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
-  // Flock selection
-  const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({ search: flockSelectInputValue }).toString()}`;
-  const { data: projectFlocks, isLoading: isLoadingFlocks } = useSWR(
-    projectFlocksUrl,
-    ProjectFlockApi.getAllFetcher
-  );
-  const flockOptions = isResponseSuccess(projectFlocks)
-    ? projectFlocks?.data.map((flock) => ({
-        value: flock.id,
-        label: flock.flock.name,
-      }))
-    : [];
-
-  // Pakan selection
-  const pakanUrl = `${ProductWarehouseApi.basePath}?${new URLSearchParams({ flag: 'PAKAN', search: '' }).toString()}`;
-  const { data: pakanProducts } = useSWR(
-    pakanUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-  const pakanOptions = isResponseSuccess(pakanProducts)
-    ? pakanProducts?.data.map((product) => ({
-        value: product.id,
-        label: `${product.product.name} - ${product.warehouse.name} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
-      }))
-    : [];
-
-  // Create stock mapping for pakan (Feed)
-  const pakanStockMap = useMemo(() => {
-    if (!isResponseSuccess(pakanProducts))
-      return new Map<number, number | ''>();
-    const map = new Map<number, number | ''>();
-    pakanProducts.data.forEach((product) => {
-      map.set(product.id, product.quantity);
-    });
-    return map;
-  }, [pakanProducts]);
-
-  // OVK selection
-  const ovkUrl = `${ProductWarehouseApi.basePath}?${new URLSearchParams({ flag: 'OVK', search: '' }).toString()}`;
-  const { data: ovkProducts } = useSWR(
-    ovkUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-  const ovkOptions = isResponseSuccess(ovkProducts)
-    ? ovkProducts?.data.map((product) => ({
-        value: product.id,
-        label: `${product.product.name} - ${product.warehouse.name} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
-      }))
-    : [];
-
-  // Create stock mapping for OVK (Vaccination)
-  const ovkStockMap = useMemo(() => {
-    if (!isResponseSuccess(ovkProducts)) return new Map<number, number | ''>();
-    const map = new Map<number, number | ''>();
-    ovkProducts.data.forEach((product) => {
-      map.set(product.id, product.quantity);
-    });
-    return map;
-  }, [ovkProducts]);
-
-  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue ?? '' }).toString()}`;
+  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 }))
+    ? locations.data.map((loc) => ({ value: loc.id, label: loc.name }))
     : [];
 
-  const coopsUrl = `${KandangApi.basePath}?${new URLSearchParams({ search: coopSelectInputValue ?? '' }).toString()}`;
-  const { data: coops, isLoading: isLoadingCoops } = useSWR(
-    coopsUrl,
-    KandangApi.getAllFetcher
+  const projectFlocksUrl = useMemo(() => {
+    if (!formik.values.location_id) return null;
+    const params = new URLSearchParams({
+      search: flockSelectInputValue,
+      location_id: formik.values.location_id.toString(),
+    });
+    return `${ProjectFlockApi.basePath}?${params.toString()}`;
+  }, [formik.values.location_id, flockSelectInputValue]);
+
+  const { data: projectFlocks, isLoading: isLoadingFlocks } = useSWR(
+    projectFlocksUrl,
+    ProjectFlockApi.getAllFetcher
   );
 
+  const flockOptions = isResponseSuccess(projectFlocks)
+    ? projectFlocks.data.map((flock) => ({
+        value: flock.id,
+        label: flock.flock.name,
+      }))
+    : [];
+
+  const buildWarehouseLabel = useCallback((warehouse: Warehouse) => {
+    const parts: string[] = [warehouse.name];
+
+    if ('kandang' in warehouse && warehouse.kandang) {
+      parts.push(warehouse.kandang.name);
+    }
+
+    if ('location' in warehouse && warehouse.location) {
+      parts.push(warehouse.location.name);
+    }
+
+    if (warehouse.area) {
+      parts.push(warehouse.area.name);
+    }
+
+    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 { data: pakanProducts, isLoading: isLoadingPakan } = useSWR(
+    pakanUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  const filteredPakanProducts = useMemo(() => {
+    if (!isResponseSuccess(pakanProducts) || !formik.values.location_id)
+      return [];
+
+    return pakanProducts.data.filter((product) => {
+      const warehouse = product.warehouse;
+
+      if ('location' in warehouse && warehouse.location) {
+        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]);
+
+  const pakanOptions = useMemo(
+    () =>
+      filteredPakanProducts.map((product) => ({
+        value: product.id,
+        label: `${product.product.name} - ${buildWarehouseLabel(product.warehouse)} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
+      })),
+    [filteredPakanProducts, buildWarehouseLabel]
+  );
+
+  const pakanStockMap = useMemo(() => {
+    const map = new Map<number, number | ''>();
+    filteredPakanProducts.forEach((product) => {
+      map.set(product.id, product.quantity);
+    });
+    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 [];
+
+    return ovkProducts.data.filter((product) => {
+      const warehouse = product.warehouse;
+
+      if ('location' in warehouse && warehouse.location) {
+        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]);
+
+  const ovkOptions = useMemo(
+    () =>
+      filteredOvkProducts.map((product) => ({
+        value: product.id,
+        label: `${product.product.name} - ${buildWarehouseLabel(product.warehouse)} (Stock: ${product.quantity.toLocaleString('id-ID')})`,
+      })),
+    [filteredOvkProducts, buildWarehouseLabel]
+  );
+
+  const ovkStockMap = useMemo(() => {
+    const map = new Map<number, number | ''>();
+    filteredOvkProducts.forEach((product) => {
+      map.set(product.id, product.quantity);
+    });
+    return map;
+  }, [filteredOvkProducts]);
+
   const coopOptions = useMemo(() => {
-    if (!isResponseSuccess(coops) || !formik.values.location_id) return [];
-    return coops.data
-      .filter((coop) => coop.location.id === formik.values.location_id)
-      .map((coop) => ({ value: coop.id, label: coop.name }));
-  }, [coops, formik.values.location_id]);
+    if (!selectedProjectFlock || !selectedProjectFlock.kandangs) return [];
+    return selectedProjectFlock.kandangs.map((kandang) => ({
+      value: kandang.id,
+      label: kandang.name,
+    }));
+  }, [selectedProjectFlock]);
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     const locationValue = (val as OptionType)?.value;
@@ -192,9 +267,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('location', val, false);
     formik.setFieldValue('location_id', locationValue || 0, false);
 
+    formik.setFieldValue('flock', null, false);
+    formik.setFieldValue('flock_id', 0, false);
+    formik.setFieldValue('coop', null, false);
+    formik.setFieldValue('coop_id', 0, false);
+    setSelectedProjectFlock(null);
+    setFlockSelectInputValue('');
+  };
+
+  const flockChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const flockValue = (val as OptionType)?.value;
+
+    const selected = isResponseSuccess(projectFlocks)
+      ? projectFlocks.data.find((flock) => flock.id === flockValue)
+      : null;
+
+    setSelectedProjectFlock(selected || null);
+
+    formik.setFieldValue('flock', val, false);
+    formik.setFieldValue('flock_id', flockValue || 0, false);
+
     formik.setFieldValue('coop', null, false);
     formik.setFieldValue('coop_id', 0, false);
-    setCoopSelectInputValue('');
   };
 
   const coopChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -204,6 +298,17 @@ 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]);
+
   const isRepeaterInputError = <T extends keyof CreateRecordingPayload>(
     arrayName: T,
     field: T extends 'feed_data'
@@ -245,13 +350,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     };
   };
 
-  const flockChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const flockValue = (val as OptionType)?.value;
-
-    formik.setFieldValue('flock', val, false);
-    formik.setFieldValue('flock_id', flockValue || 0, false);
-  };
-
   const addFeedData = () => {
     const newFeedData = [
       ...(formik.values.feed_data || []),
@@ -372,25 +470,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {/* Basic Info Card */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body flex flex-col gap-6'>
-              <h2 className='card-title'>Flock</h2>
+              <h2 className='card-title'>Recording Information</h2>
 
               <div className='flex flex-col gap-6'>
                 <div className='flex gap-4'>
                   <SelectInput
                     required
-                    label='Flock'
-                    value={formik.values.flock ?? undefined}
-                    onChange={flockChangeHandler}
-                    options={flockOptions}
-                    onInputChange={setFlockSelectInputValue}
-                    isLoading={isLoadingFlocks}
+                    label='Lokasi'
+                    value={formik.values.location ?? undefined}
+                    onChange={locationChangeHandler}
+                    options={locationOptions}
+                    onInputChange={setLocationSelectInputValue}
+                    isLoading={isLoadingLocations}
                     isError={
-                      formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                      formik.touched.location_id &&
+                      Boolean(formik.errors.location_id)
                     }
-                    errorMessage={formik.errors.flock_id as string}
+                    errorMessage={formik.errors.location_id as string}
                     isDisabled={type === 'detail'}
                     isClearable
+                    placeholder='Pilih lokasi terlebih dahulu'
                   />
+
                   <TextInput
                     required
                     label='Tanggal Recording'
@@ -418,42 +519,45 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     readOnly={type === 'detail'}
                   />
                 </div>
+
                 <div className='flex gap-4'>
                   <SelectInput
                     required
-                    label='Lokasi'
-                    value={formik.values.location ?? undefined}
-                    onChange={locationChangeHandler}
-                    options={locationOptions}
-                    onInputChange={setLocationSelectInputValue}
-                    isLoading={isLoadingLocations}
+                    label='Flock'
+                    value={formik.values.flock ?? undefined}
+                    onChange={flockChangeHandler}
+                    options={flockOptions}
+                    onInputChange={setFlockSelectInputValue}
+                    isLoading={isLoadingFlocks}
                     isError={
-                      formik.touched.location_id &&
-                      Boolean(formik.errors.location_id)
+                      formik.touched.flock_id && Boolean(formik.errors.flock_id)
                     }
-                    errorMessage={formik.errors.location_id as string}
-                    isDisabled={type === 'detail'}
-                    isClearable
-                  />
-
-                  <SelectInput
-                    key={`coop-select-${formik.values.location_id || 'no-location'}`}
-                    required
-                    label='Kandang'
-                    value={formik.values.coop ?? undefined}
-                    onChange={coopChangeHandler}
-                    options={coopOptions}
-                    onInputChange={setCoopSelectInputValue}
-                    isLoading={isLoadingCoops}
-                    isError={
-                      formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                    }
-                    errorMessage={formik.errors.coop_id as string}
+                    errorMessage={formik.errors.flock_id as string}
                     isDisabled={type === 'detail' || !formik.values.location_id}
                     isClearable
                     placeholder={
                       !formik.values.location_id
                         ? 'Pilih lokasi terlebih dahulu'
+                        : 'Pilih Flock'
+                    }
+                  />
+
+                  <SelectInput
+                    key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
+                    required
+                    label='Kandang'
+                    value={formik.values.coop ?? undefined}
+                    onChange={coopChangeHandler}
+                    options={coopOptions}
+                    isError={
+                      formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                    }
+                    errorMessage={formik.errors.coop_id as string}
+                    isDisabled={type === 'detail' || !selectedProjectFlock}
+                    isClearable
+                    placeholder={
+                      !selectedProjectFlock
+                        ? 'Pilih flock terlebih dahulu'
                         : 'Pilih Kandang'
                     }
                   />
@@ -551,14 +655,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 `feed_data.${idx}.feed_qty`,
                                 stock
                               );
-                              // Reset feed_stock when changing feed
                               formik.setFieldValue(
                                 `feed_data.${idx}.feed_stock`,
                                 0
                               );
                             }}
                             options={pakanOptions}
-                            isLoading={false}
+                            isLoading={isLoadingPakan}
                             isError={
                               isRepeaterInputError('feed_data', 'feed_id', idx)
                                 .isError
@@ -968,14 +1071,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 `vaccination.${idx}.total_stock`,
                                 stock
                               );
-                              // Reset used_stock when changing vaccine
                               formik.setFieldValue(
                                 `vaccination.${idx}.used_stock`,
                                 0
                               );
                             }}
                             options={ovkOptions}
-                            isLoading={false}
+                            isLoading={isLoadingOvk}
                             isError={
                               isRepeaterInputError(
                                 'vaccination',
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index cd68df40..7a251d38 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -3,6 +3,7 @@ import { Area } from '@/types/api/master-data/area';
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { Fcr } from '@/types/api/master-data/fcr';
 import { Kandang } from '@/types/api/master-data/kandang';
+import { Location } from '@/types/api/master-data/location';
 import { BaseMetadata } from '@/types/api/api-general';
 
 export type BaseProjectFlock = {

From 4233c19dc9294193197451575aae3ed83ba1b437 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 10:06:26 +0700
Subject: [PATCH 23/68] refactor(FE-114): rearrange code for better readability

---
 .../flock/recording/form/RecordingForm.tsx    | 348 +++++++++---------
 1 file changed, 178 insertions(+), 170 deletions(-)

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<number[]>([]);
   const [selectedVaccine, setSelectedVaccine] = useState<number[]>([]);
   const [selectedMortality, setSelectedMortality] = useState<number[]>([]);
-
   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 = <T extends keyof CreateRecordingPayload>(
     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 (
     <>
       <section className='w-full max-w-5xl'>

From eb02a8b6f72121f45d1f8cc9893d2994fe3c3acf Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 10:09:58 +0700
Subject: [PATCH 24/68] refactor(storyless): update border class for consistent
 styling

---
 src/components/Collapse.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index cb05d5b0..8506f65c 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -68,7 +68,7 @@ export const Collapse = ({
     'collapse',
     variant === 'arrow' && 'collapse-arrow',
     variant === 'plus' && 'collapse-plus',
-    bordered && 'border base-content/20 border-opacity-20 rounded-box',
+    bordered && 'border base-content/20 border-opacity-20 rounded',
     disabled && 'opacity-60 pointer-events-none',
     !open && 'w-fit',
     className

From 895b7afa2589bc8cf4daee7246c49c46be64b86e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 10:38:10 +0700
Subject: [PATCH 25/68] refactor(FE-114): improve product filtering logic for
 location and flag validation

---
 .../flock/recording/form/RecordingForm.tsx    | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 42edc1ca..e97b0377 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -205,11 +205,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     return pakanProducts.data.filter((product) => {
       const warehouse = product.warehouse;
 
-      if ('location' in warehouse && warehouse.location) {
-        return warehouse.location.id === formik.values.location_id;
-      }
+      const hasLocationMatch =
+        'location' in warehouse && warehouse.location
+          ? warehouse.location.id === formik.values.location_id
+          : false;
 
-      return false;
+      const hasPakanFlag = product.product.flags?.includes('PAKAN');
+
+      return hasLocationMatch && hasPakanFlag;
     });
   }, [pakanProducts, formik.values.location_id]);
 
@@ -237,11 +240,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     return ovkProducts.data.filter((product) => {
       const warehouse = product.warehouse;
 
-      if ('location' in warehouse && warehouse.location) {
-        return warehouse.location.id === formik.values.location_id;
-      }
+      // Validate location match
+      const hasLocationMatch =
+        'location' in warehouse && warehouse.location
+          ? warehouse.location.id === formik.values.location_id
+          : false;
 
-      return false;
+      // Validate product has OVK flag
+      const hasOvkFlag = product.product.flags?.includes('OVK');
+
+      return hasLocationMatch && hasOvkFlag;
     });
   }, [ovkProducts, formik.values.location_id]);
 

From ba9ae0745583cfe933823653c8e663592eaa7218 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 13:10:41 +0700
Subject: [PATCH 26/68] refactor(FE-114): improve validation messages and
 update layout for better responsiveness

---
 .../recording/form/RecordingForm.schema.ts    |  16 +-
 .../flock/recording/form/RecordingForm.tsx    | 183 +++++++++---------
 2 files changed, 105 insertions(+), 94 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index 16f7e690..5b31e54a 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -52,7 +52,7 @@ export const RecordingFormSchema = Yup.object({
         feed_qty: Yup.mixed<number | ''>().notRequired(),
         feed_stock: Yup.number()
           .required('Jumlah pakan yang digunakan wajib diisi!')
-          .min(1, 'Jumlah pakan minimal 1 kg!')
+          .min(1, 'Jumlah pakan minimal 1!')
           .typeError('Jumlah pakan yang digunakan harus berupa angka!')
           .test(
             'is-not-exceed-qty',
@@ -60,7 +60,12 @@ export const RecordingFormSchema = Yup.object({
             function (value) {
               const { feed_qty } = this.parent;
               if (value === undefined) return true;
-              if (feed_qty === undefined || feed_qty === '' || typeof feed_qty !== 'number') return true;
+              if (
+                feed_qty === undefined ||
+                feed_qty === '' ||
+                typeof feed_qty !== 'number'
+              )
+                return true;
               return value <= feed_qty;
             }
           ),
@@ -102,7 +107,12 @@ export const RecordingFormSchema = Yup.object({
             function (value) {
               const { total_stock } = this.parent;
               if (value === undefined) return true;
-              if (total_stock === undefined || total_stock === '' || typeof total_stock !== 'number') return true;
+              if (
+                total_stock === undefined ||
+                total_stock === '' ||
+                typeof total_stock !== 'number'
+              )
+                return true;
               return value <= total_stock;
             }
           ),
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index e97b0377..2e137031 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -477,7 +477,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   return (
     <>
-      <section className='w-full max-w-5xl'>
+      <section className='w-full'>
         <FormHeader type={type} title='Recording' backUrl='/flock/recording' />
         <form
           onSubmit={formik.handleSubmit}
@@ -488,96 +488,92 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='card-body flex flex-col gap-6'>
               <h2 className='card-title'>Recording Information</h2>
 
-              <div className='flex flex-col gap-6'>
-                <div className='flex gap-4'>
-                  <SelectInput
-                    required
-                    label='Lokasi'
-                    value={formik.values.location ?? undefined}
-                    onChange={locationChangeHandler}
-                    options={locationOptions}
-                    onInputChange={setLocationSelectInputValue}
-                    isLoading={isLoadingLocations}
-                    isError={
-                      formik.touched.location_id &&
-                      Boolean(formik.errors.location_id)
-                    }
-                    errorMessage={formik.errors.location_id as string}
-                    isDisabled={type === 'detail'}
-                    isClearable
-                    placeholder='Pilih lokasi terlebih dahulu'
-                  />
+              <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+                <SelectInput
+                  required
+                  label='Lokasi'
+                  value={formik.values.location ?? undefined}
+                  onChange={locationChangeHandler}
+                  options={locationOptions}
+                  onInputChange={setLocationSelectInputValue}
+                  isLoading={isLoadingLocations}
+                  isError={
+                    formik.touched.location_id &&
+                    Boolean(formik.errors.location_id)
+                  }
+                  errorMessage={formik.errors.location_id as string}
+                  isDisabled={type === 'detail'}
+                  isClearable
+                  placeholder='Pilih lokasi terlebih dahulu'
+                />
 
-                  <TextInput
-                    required
-                    label='Tanggal Recording'
-                    type='date'
-                    name='recording_date'
-                    value={
-                      formik.values.recording_date instanceof Date
-                        ? formik.values.recording_date
-                            .toISOString()
-                            .substring(0, 10)
-                        : ''
-                    }
-                    onChange={(e) => {
-                      const date = e.target.value
-                        ? new Date(e.target.value)
-                        : null;
-                      formik.setFieldValue('recording_date', date);
-                    }}
-                    onBlur={formik.handleBlur}
-                    isError={
-                      formik.touched.recording_date &&
-                      Boolean(formik.errors.recording_date)
-                    }
-                    errorMessage={formik.errors.recording_date as string}
-                    readOnly={type === 'detail'}
-                  />
-                </div>
+                <TextInput
+                  required
+                  label='Tanggal Recording'
+                  type='date'
+                  name='recording_date'
+                  value={
+                    formik.values.recording_date instanceof Date
+                      ? formik.values.recording_date
+                          .toISOString()
+                          .substring(0, 10)
+                      : ''
+                  }
+                  onChange={(e) => {
+                    const date = e.target.value
+                      ? new Date(e.target.value)
+                      : null;
+                    formik.setFieldValue('recording_date', date);
+                  }}
+                  onBlur={formik.handleBlur}
+                  isError={
+                    formik.touched.recording_date &&
+                    Boolean(formik.errors.recording_date)
+                  }
+                  errorMessage={formik.errors.recording_date as string}
+                  readOnly={type === 'detail'}
+                />
 
-                <div className='flex gap-4'>
-                  <SelectInput
-                    required
-                    label='Flock'
-                    value={formik.values.flock ?? undefined}
-                    onChange={flockChangeHandler}
-                    options={flockOptions}
-                    onInputChange={setFlockSelectInputValue}
-                    isLoading={isLoadingFlocks}
-                    isError={
-                      formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                    }
-                    errorMessage={formik.errors.flock_id as string}
-                    isDisabled={type === 'detail' || !formik.values.location_id}
-                    isClearable
-                    placeholder={
-                      !formik.values.location_id
-                        ? 'Pilih lokasi terlebih dahulu'
-                        : 'Pilih Flock'
-                    }
-                  />
+                <SelectInput
+                  required
+                  label='Flock'
+                  value={formik.values.flock ?? undefined}
+                  onChange={flockChangeHandler}
+                  options={flockOptions}
+                  onInputChange={setFlockSelectInputValue}
+                  isLoading={isLoadingFlocks}
+                  isError={
+                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                  }
+                  errorMessage={formik.errors.flock_id as string}
+                  isDisabled={type === 'detail' || !formik.values.location_id}
+                  isClearable
+                  placeholder={
+                    !formik.values.location_id
+                      ? 'Pilih lokasi terlebih dahulu'
+                      : 'Pilih Flock'
+                  }
+                />
 
-                  <SelectInput
-                    key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
-                    required
-                    label='Kandang'
-                    value={formik.values.coop ?? undefined}
-                    onChange={coopChangeHandler}
-                    options={coopOptions}
-                    isError={
-                      formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                    }
-                    errorMessage={formik.errors.coop_id as string}
-                    isDisabled={type === 'detail' || !selectedProjectFlock}
-                    isClearable
-                    placeholder={
-                      !selectedProjectFlock
-                        ? 'Pilih flock terlebih dahulu'
-                        : 'Pilih Kandang'
-                    }
-                  />
-                </div>
+                <SelectInput
+                  key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
+                  required
+                  label='Kandang'
+                  value={formik.values.coop ?? undefined}
+                  onChange={coopChangeHandler}
+                  options={coopOptions}
+                  isError={
+                    formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                  }
+                  errorMessage={formik.errors.coop_id as string}
+                  isDisabled={type === 'detail' || !selectedProjectFlock}
+                  isClearable
+                  placeholder={
+                    !selectedProjectFlock
+                      ? 'Pilih flock terlebih dahulu'
+                      : 'Pilih Kandang'
+                  }
+                />
               </div>
             </div>
           </div>
@@ -689,7 +685,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isDisabled={type === 'detail'}
                             isClearable
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -1074,7 +1071,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     productWarehouseId as number
                                   ) ?? '')
                                 : '';
-
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine`,
                                 val
@@ -1111,7 +1107,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isDisabled={type === 'detail'}
                             isClearable
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -1306,6 +1303,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             options={RECORDING_FLAG_OPTIONS}
                             isDisabled={type === 'detail'}
                             isClearable
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>

From 1bcfd9bbb42c9b656a1b148e51d7c8d2da07fd51 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 18:54:02 +0700
Subject: [PATCH 27/68] feat(FE-Storyless): add FieldMessage component for
 consistent field feedback across inputs

---
 src/components/helper/FieldMessage.tsx | 65 +++++++++++++++++++++++
 src/components/input/FileInput.tsx     | 14 +++--
 src/components/input/NumberInput.tsx   | 57 +++++++++++++++-----
 src/components/input/RadioInput.tsx    | 17 +++---
 src/components/input/SelectInput.tsx   | 36 ++++++-------
 src/components/input/TagInput.tsx      | 14 +++--
 src/components/input/TextArea.tsx      | 73 +++++++++++++-------------
 src/components/input/TextInput.tsx     | 15 +++---
 8 files changed, 195 insertions(+), 96 deletions(-)
 create mode 100644 src/components/helper/FieldMessage.tsx

diff --git a/src/components/helper/FieldMessage.tsx b/src/components/helper/FieldMessage.tsx
new file mode 100644
index 00000000..e43d0a63
--- /dev/null
+++ b/src/components/helper/FieldMessage.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+type FieldMessageTone = 'error' | 'info' | 'success';
+
+export interface FieldMessageProps {
+  message?: ReactNode;
+  tone?: FieldMessageTone;
+  isVisible?: boolean;
+  persistent?: boolean;
+  className?: string;
+  ariaLive?: 'off' | 'polite' | 'assertive';
+}
+
+const toneClassName: Record<FieldMessageTone, string> = {
+  error: 'text-error',
+  info: 'text-base-content/60',
+  success: 'text-success',
+};
+
+/**
+ * Shared helper to render bottom field feedback without causing layout shift.
+ * Keeps a minimal slot height, but expands when the content wraps onto multiple lines.
+ */
+export const FieldMessage = ({
+  message,
+  tone = 'info',
+  isVisible,
+  persistent = true,
+  className,
+  ariaLive,
+}: FieldMessageProps) => {
+  const hasMessage = Boolean(message);
+  const visible = isVisible ?? hasMessage;
+  const liveRegion = ariaLive ?? (tone === 'error' ? 'assertive' : 'polite');
+
+  return (
+    <div
+      aria-live={liveRegion}
+      aria-hidden={!visible && !hasMessage}
+      className={cn(
+        'relative w-full text-sm leading-5 transition-[opacity,transform] duration-150 ease-out',
+        persistent && 'min-h-[1.25rem]',
+        className
+      )}
+    >
+      <span
+        className={cn(
+          'block whitespace-pre-line',
+          toneClassName[tone],
+          visible
+            ? 'opacity-100 translate-y-0'
+            : 'opacity-0 -translate-y-1 pointer-events-none'
+        )}
+      >
+        {visible || persistent ? (message ?? '\u00A0') : message}
+      </span>
+    </div>
+  );
+};
+
+export default FieldMessage;
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 6218970c..285a3f42 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -2,6 +2,7 @@ import { Ref } from 'react';
 
 import { cn } from '@/lib/helper';
 import { TextInputProps } from '@/components/input/TextInput';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 interface FileInputProps
   extends Omit<
@@ -37,6 +38,9 @@ const FileInput = ({
   onBlur,
   readOnly = false,
 }: FileInputProps) => {
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -76,11 +80,11 @@ const FileInput = ({
         readOnly={readOnly}
       />
 
-      {bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index a9b8d9a0..e5319e5b 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -11,6 +11,7 @@ import {
 
 import { Icon } from '@iconify/react';
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 // Utility Functions
 const formatNumber = (
@@ -25,7 +26,10 @@ const formatNumber = (
   if (isNaN(numValue)) return '';
 
   const parts = numValue.toFixed(decimals).split('.');
-  const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+  const integerPart = parts[0].replace(
+    /\B(?=(\d{3})+(?!\d))/g,
+    thousandSeparator
+  );
   const decimalPart = parts[1];
 
   return decimals > 0 && decimalPart
@@ -180,11 +184,13 @@ const NumberInput = ({
   const [displayValue, setDisplayValue] = useState<string>('');
 
   // Determine if decimals are allowed based on maskType
-  const allowDecimal = maskType === 'decimal' || maskType === 'weight' || decimals > 0;
+  const allowDecimal =
+    maskType === 'decimal' || maskType === 'weight' || decimals > 0;
 
   // Format value for display based on maskType
   const getFormattedValue = (rawValue: number | string): string => {
-    if (rawValue === '' || rawValue === null || rawValue === undefined) return '';
+    if (rawValue === '' || rawValue === null || rawValue === undefined)
+      return '';
 
     switch (maskType) {
       case 'currency':
@@ -193,7 +199,12 @@ const NumberInput = ({
         return formatWeight(rawValue, weightUnit, decimals);
       case 'decimal':
       case 'number':
-        return formatNumber(rawValue, decimals, thousandSeparator, decimalSeparator);
+        return formatNumber(
+          rawValue,
+          decimals,
+          thousandSeparator,
+          decimalSeparator
+        );
       default:
         return String(rawValue);
     }
@@ -216,10 +227,18 @@ const NumberInput = ({
     }
 
     // Clean input
-    const cleaned = cleanNumericInput(inputValue, allowDecimal, decimalSeparator);
+    const cleaned = cleanNumericInput(
+      inputValue,
+      allowDecimal,
+      decimalSeparator
+    );
 
     // Parse to number
-    let numericValue = parseNumber(cleaned, thousandSeparator, decimalSeparator);
+    let numericValue = parseNumber(
+      cleaned,
+      thousandSeparator,
+      decimalSeparator
+    );
 
     // Apply validation
     if (!allowNegative && numericValue < 0) {
@@ -262,7 +281,11 @@ const NumberInput = ({
   const handleIncrement = () => {
     if (disabled || readOnly) return;
 
-    const currentValue = parseNumber(displayValue, thousandSeparator, decimalSeparator);
+    const currentValue = parseNumber(
+      displayValue,
+      thousandSeparator,
+      decimalSeparator
+    );
     let newValue = currentValue + step;
 
     // Apply max validation
@@ -296,7 +319,11 @@ const NumberInput = ({
   const handleDecrement = () => {
     if (disabled || readOnly) return;
 
-    const currentValue = parseNumber(displayValue, thousandSeparator, decimalSeparator);
+    const currentValue = parseNumber(
+      displayValue,
+      thousandSeparator,
+      decimalSeparator
+    );
     let newValue = currentValue - step;
 
     // Apply min validation (prevent negative if not allowed)
@@ -329,6 +356,9 @@ const NumberInput = ({
     }
   };
 
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -431,12 +461,11 @@ const NumberInput = ({
         )}
       </div>
 
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };
diff --git a/src/components/input/RadioInput.tsx b/src/components/input/RadioInput.tsx
index 71a731aa..65589258 100644
--- a/src/components/input/RadioInput.tsx
+++ b/src/components/input/RadioInput.tsx
@@ -2,6 +2,7 @@
 
 import { ChangeEventHandler, ReactNode } from 'react';
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface RadioOption {
   label: string;
@@ -47,6 +48,8 @@ const RadioInput = ({
   onChange,
   onBlur,
 }: RadioInputProps) => {
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
   return (
     <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
       {/* Label atas */}
@@ -97,15 +100,11 @@ const RadioInput = ({
         ))}
       </div>
 
-      {/* Label bawah */}
-      {!isError && bottomLabel && (
-        <p className='text-sm opacity-60'>{bottomLabel}</p>
-      )}
-
-      {/* Pesan error */}
-      {isError && errorMessage && (
-        <p className='text-sm text-error'>{errorMessage}</p>
-      )}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 43a3f622..9caf2e17 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  ComponentType,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
 import Select, {
   OptionProps,
   GroupBase,
@@ -18,6 +12,7 @@ import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface OptionType {
   value: string | number;
@@ -98,10 +93,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (
-    val: string,
-    meta: InputActionMeta
-  ) => {
+  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
   };
@@ -113,9 +105,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const SelectComponent = createables ? CreatableSelect : Select;
 
   /** 🎯 handleChange tanpa any */
-  const handleChange = (
-    val: MultiValue<T> | SingleValue<T>
-  ): void => {
+  const handleChange = (val: MultiValue<T> | SingleValue<T>): void => {
     if (!val) {
       onChange?.(null);
       return;
@@ -128,6 +118,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     }
   };
 
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -145,15 +138,15 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <span className="tooltip tooltip-error" data-tip="required">
-              <span className="text-error"> *</span>
+            <span className='tooltip tooltip-error' data-tip='required'>
+              <span className='text-error'> *</span>
             </span>
           )}
         </span>
       )}
 
       <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId="select"
+        instanceId='select'
         value={value ?? (isMulti ? [] : null)}
         onChange={handleChange}
         options={options}
@@ -225,10 +218,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className="w-full text-sm text-error">{errorMessage}</p>}
-      {!isError && bottomLabel && (
-        <p className="w-full text-sm opacity-60">{bottomLabel}</p>
-      )}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };
diff --git a/src/components/input/TagInput.tsx b/src/components/input/TagInput.tsx
index a14b2f63..11407ada 100644
--- a/src/components/input/TagInput.tsx
+++ b/src/components/input/TagInput.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TagInputProps {
   label?: string;
@@ -73,6 +74,9 @@ const TagInput: React.FC<TagInputProps> = ({
     setInputValue(e.target.value);
   };
 
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -157,11 +161,11 @@ const TagInput: React.FC<TagInputProps> = ({
         )}
       </div>
 
-      {/* Bottom label or error message */}
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index e9517277..802e469c 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -1,12 +1,9 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-} from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TextAreaProps {
   label?: string;
@@ -52,8 +49,11 @@ const TextArea = ({
   onBlur,
   readOnly = false,
   isLoading = false,
-  rows = 3
+  rows = 3,
 }: TextAreaProps) => {
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -83,40 +83,41 @@ const TextArea = ({
           )}
         </label>
       )}
-        {startAdornment && startAdornment}
+      {startAdornment && startAdornment}
 
-        <textarea
-          className={cn(
-            'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-            },
-            className?.inputWrapper
-          )}
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          rows={rows}
-          onChange={onChange}
-          onBlur={onBlur}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
-
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-
-            {endAdornment && endAdornment}
-          </div>
+      <textarea
+        className={cn(
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
         )}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        rows={rows}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
 
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      {(isLoading || endAdornment) && (
+        <div className='flex flex-row gap-2'>
+          {isLoading && <span className='loading loading-spinner' />}
+
+          {endAdornment && endAdornment}
+        </div>
       )}
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index eec312c1..20d99af2 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react';
 
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TextInputProps {
   type?: HTMLInputTypeAttribute;
@@ -55,6 +56,9 @@ const TextInput = ({
   readOnly = false,
   isLoading = false,
 }: TextInputProps) => {
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -119,12 +123,11 @@ const TextInput = ({
         )}
       </div>
 
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };

From e0ce571000fd5db8403e21d36bf407e2a7b912ce Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 18:54:31 +0700
Subject: [PATCH 28/68] refactor(FE-114): streamline cost field validation
 messages and enhance layout with FieldMessage component

---
 .../movement/form/MovementForm.schema.ts      |  36 ++---
 .../inventory/movement/form/MovementForm.tsx  | 128 ++++++++++--------
 2 files changed, 85 insertions(+), 79 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 5df66930..ed8fb479 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -61,32 +61,24 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
     .min(1, 'Biaya minimal 1!')
     .typeError('Biaya harus berupa angka!')
-    .test(
-      'one-of-cost-fields',
-      'Biaya pengiriman atau biaya per item wajib diisi!',
-      function (value) {
-        const { delivery_cost_per_item } = this.parent;
-        return (
-          (value !== undefined && value > 0) ||
-          (delivery_cost_per_item !== undefined && delivery_cost_per_item > 0)
-        );
-      }
-    ),
+    .test('one-of-cost-fields', 'Wajib diisi salah satu!', function (value) {
+      const { delivery_cost_per_item } = this.parent;
+      return (
+        (value !== undefined && value > 0) ||
+        (delivery_cost_per_item !== undefined && delivery_cost_per_item > 0)
+      );
+    }),
   delivery_cost_per_item: Yup.number()
     .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
     .min(1, 'Biaya per item minimal 1!')
     .typeError('Biaya per item harus berupa angka!')
-    .test(
-      'one-of-cost-fields',
-      'Biaya pengiriman atau biaya per item wajib diisi!',
-      function (value) {
-        const { delivery_cost } = this.parent;
-        return (
-          (value !== undefined && value > 0) ||
-          (delivery_cost !== undefined && delivery_cost > 0)
-        );
-      }
-    ),
+    .test('one-of-cost-fields', 'Wajib diisi salah satu!', function (value) {
+      const { delivery_cost } = this.parent;
+      return (
+        (value !== undefined && value > 0) ||
+        (delivery_cost !== undefined && delivery_cost > 0)
+      );
+    }),
   document_path: Yup.string().optional(),
   document_index: Yup.number().optional(),
   document: Yup.mixed<File | string>()
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d5d28f5f..689067ee 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -8,7 +8,6 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import { FormActions } from '@/components/helper/form/FormActions';
 import {
@@ -29,6 +28,7 @@ import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -863,23 +863,26 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedProducts.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedProducts([
-                                    ...selectedProducts,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedProducts(
-                                    selectedProducts.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedProducts.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedProducts([
+                                      ...selectedProducts,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedProducts(
+                                      selectedProducts.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -954,17 +957,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeProduct(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeProduct(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -1051,23 +1057,28 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedDeliveries.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedDeliveries([
-                                    ...selectedDeliveries,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedDeliveries(
-                                    selectedDeliveries.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedDeliveries.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedDeliveries([
+                                      ...selectedDeliveries,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedDeliveries(
+                                      selectedDeliveries.filter(
+                                        (i) => i !== idx
+                                      )
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -1267,17 +1278,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeDelivery(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeDelivery(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>

From ac2f2469882b5dea0ce3ac7ee545f07f93489b44 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 20:00:43 +0700
Subject: [PATCH 29/68] refactor(FE-114): integrate FieldMessage component for
 improved field feedback in checkboxes

---
 .../flock/recording/form/RecordingForm.tsx    | 244 ++++++++++--------
 1 file changed, 136 insertions(+), 108 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 2e137031..c4db3b94 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -26,6 +26,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { LocationApi } from '@/services/api/master-data';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -588,26 +589,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.feed_data?.length ===
-                                selectedFeed.length &&
-                              formik.values.feed_data?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedFeed(
-                                  formik.values.feed_data?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedFeed([]);
+                          <div className='flex flex-col items-start gap-2'>
+                            <input
+                              type='checkbox'
+                              className='checkbox'
+                              checked={
+                                formik.values.feed_data?.length ===
+                                  selectedFeed.length &&
+                                formik.values.feed_data?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedFeed(
+                                    formik.values.feed_data?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedFeed([]);
+                                }
+                              }}
+                            />
+                            <FieldMessage message={null} isVisible={false} />
+                          </div>
                         </th>
                       )}
                       <th>Feed Name</th>
@@ -741,17 +745,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeFeedData(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeFeedData(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -834,20 +841,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`weight-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedWeight.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedWeight([...selectedWeight, idx]);
-                                } else {
-                                  setSelectedWeight(
-                                    selectedWeight.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedWeight.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedWeight([...selectedWeight, idx]);
+                                  } else {
+                                    setSelectedWeight(
+                                      selectedWeight.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -944,17 +954,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeBodyWeight(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeBodyWeight(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -1037,20 +1050,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`vaccine-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedVaccine.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedVaccine([...selectedVaccine, idx]);
-                                } else {
-                                  setSelectedVaccine(
-                                    selectedVaccine.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedVaccine.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedVaccine([
+                                      ...selectedVaccine,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedVaccine(
+                                      selectedVaccine.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -1163,17 +1182,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeVaccination(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeVaccination(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -1255,23 +1277,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`mortality-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedMortality.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedMortality([
-                                    ...selectedMortality,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedMortality(
-                                    selectedMortality.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedMortality.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedMortality([
+                                      ...selectedMortality,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedMortality(
+                                      selectedMortality.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -1335,17 +1360,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeMortality(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeMortality(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>

From a67d353bcbe34e18d37568fad55128f7d9cc1bcc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 20:00:43 +0700
Subject: [PATCH 30/68] refactor(FE-114): integrate FieldMessage component for
 improved field feedback in checkboxes

---
 .../flock/recording/form/RecordingForm.tsx    | 234 ++++++++++--------
 1 file changed, 131 insertions(+), 103 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 2e137031..b75a49d7 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -26,6 +26,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { LocationApi } from '@/services/api/master-data';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -621,20 +622,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`feed-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedFeed.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedFeed([...selectedFeed, idx]);
-                                } else {
-                                  setSelectedFeed(
-                                    selectedFeed.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedFeed.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedFeed([...selectedFeed, idx]);
+                                  } else {
+                                    setSelectedFeed(
+                                      selectedFeed.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -741,17 +745,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeFeedData(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeFeedData(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -834,20 +841,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`weight-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedWeight.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedWeight([...selectedWeight, idx]);
-                                } else {
-                                  setSelectedWeight(
-                                    selectedWeight.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedWeight.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedWeight([...selectedWeight, idx]);
+                                  } else {
+                                    setSelectedWeight(
+                                      selectedWeight.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -944,17 +954,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeBodyWeight(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeBodyWeight(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -1037,20 +1050,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`vaccine-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedVaccine.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedVaccine([...selectedVaccine, idx]);
-                                } else {
-                                  setSelectedVaccine(
-                                    selectedVaccine.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedVaccine.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedVaccine([
+                                      ...selectedVaccine,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedVaccine(
+                                      selectedVaccine.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -1163,17 +1182,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeVaccination(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeVaccination(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>
@@ -1255,23 +1277,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`mortality-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={selectedMortality.includes(idx)}
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedMortality([
-                                    ...selectedMortality,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedMortality(
-                                    selectedMortality.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                            />
+                            <div className='flex flex-col items-start gap-2'>
+                              <input
+                                type='checkbox'
+                                className='checkbox'
+                                checked={selectedMortality.includes(idx)}
+                                onChange={(e) => {
+                                  if (e.target.checked) {
+                                    setSelectedMortality([
+                                      ...selectedMortality,
+                                      idx,
+                                    ]);
+                                  } else {
+                                    setSelectedMortality(
+                                      selectedMortality.filter((i) => i !== idx)
+                                    );
+                                  }
+                                }}
+                              />
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                         <td>
@@ -1335,17 +1360,20 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </td>
                         {type !== 'detail' && (
                           <td>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeMortality(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
+                            <div className='flex flex-col items-start gap-2'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeMortality(idx)}
+                              >
+                                <Icon
+                                  icon='material-symbols:delete-outline-rounded'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                              <FieldMessage message={null} isVisible={false} />
+                            </div>
                           </td>
                         )}
                       </tr>

From 83d31b7047faa6ba259e70a0464280429881b1b8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 20:20:39 +0700
Subject: [PATCH 31/68] refactor(FE-114): remove unnecessary FieldMessage
 component from checkbox

---
 .../flock/recording/form/RecordingForm.tsx    | 41 +++++++++----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 1b21d323..b75a49d7 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -589,29 +589,26 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <div className='flex flex-col items-start gap-2'>
-                            <input
-                              type='checkbox'
-                              className='checkbox'
-                              checked={
-                                formik.values.feed_data?.length ===
-                                  selectedFeed.length &&
-                                formik.values.feed_data?.length > 0
+                          <input
+                            type='checkbox'
+                            className='checkbox'
+                            checked={
+                              formik.values.feed_data?.length ===
+                                selectedFeed.length &&
+                              formik.values.feed_data?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedFeed(
+                                  formik.values.feed_data?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedFeed([]);
                               }
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedFeed(
-                                    formik.values.feed_data?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
-                                } else {
-                                  setSelectedFeed([]);
-                                }
-                              }}
-                            />
-                            <FieldMessage message={null} isVisible={false} />
-                          </div>
+                            }}
+                          />
                         </th>
                       )}
                       <th>Feed Name</th>

From 41f8067727766ff887f21db4704d1fb2ea5797f9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 09:33:17 +0700
Subject: [PATCH 32/68] refactor(FE-114): enhance NumberInput component with
 improved props and validation handling

---
 src/components/input/NumberInput.tsx | 339 +++++++++++++++------------
 1 file changed, 185 insertions(+), 154 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index e5319e5b..231d8b24 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -13,7 +13,65 @@ import { Icon } from '@iconify/react';
 import { cn } from '@/lib/helper';
 import FieldMessage from '@/components/helper/FieldMessage';
 
-// Utility Functions
+export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
+
+export interface NumberInputProps {
+  // Basic Props
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: number | string;
+  placeholder?: string;
+
+  // Styling Props
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+
+  // State Props
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+
+  // Adornment Props
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+
+  // Event Handlers
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+
+  // Masking Options
+  maskType?: MaskType;
+  decimals?: number;
+  thousandSeparator?: string;
+  decimalSeparator?: string;
+  currencyPrefix?: string;
+  weightUnit?: string;
+
+  // Validation Props
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+
+  // Stepper Options
+  showSteppers?: boolean;
+  step?: number;
+}
+
+// UTILITY FUNCTIONS
+/**
+ * Core number formatting function
+ * Formats number with thousand separator and decimal separator
+ */
 const formatNumber = (
   value: number | string,
   decimals: number = 0,
@@ -37,6 +95,10 @@ const formatNumber = (
     : integerPart;
 };
 
+/**
+ * Parse formatted string to number
+ * Converts formatted input back to raw number for processing
+ */
 const parseNumber = (
   value: string,
   thousandSeparator: string = '.',
@@ -53,26 +115,10 @@ const parseNumber = (
   return isNaN(parsed) ? 0 : parsed;
 };
 
-const formatCurrency = (
-  value: number | string,
-  prefix: string = 'Rp ',
-  decimals: number = 0
-): string => {
-  if (value === '' || value === null || value === undefined) return '';
-  const formatted = formatNumber(value, decimals);
-  return formatted ? `${prefix}${formatted}` : '';
-};
-
-const formatWeight = (
-  value: number | string,
-  unit: string = 'kg',
-  decimals: number = 2
-): string => {
-  if (value === '' || value === null || value === undefined) return '';
-  const formatted = formatNumber(value, decimals);
-  return formatted ? `${formatted} ${unit}` : '';
-};
-
+/**
+ * Clean and validate numeric input while typing
+ * Ensures only valid characters are allowed
+ */
 const cleanNumericInput = (
   value: string,
   allowDecimal: boolean = false,
@@ -100,56 +146,6 @@ const cleanNumericInput = (
   return cleaned;
 };
 
-// Types
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
-
-export interface NumberInputProps {
-  label?: string;
-  bottomLabel?: string;
-  name: string;
-  value?: number | string;
-  placeholder?: string;
-  className?: {
-    wrapper?: string;
-    label?: string;
-    inputWrapper?: string;
-    input?: string;
-  };
-  isError?: boolean;
-  isValid?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-  errorMessage?: string;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  // Masking Options
-  maskType?: MaskType;
-  decimals?: number;
-  thousandSeparator?: string;
-  decimalSeparator?: string;
-
-  // Currency specific
-  currencyPrefix?: string;
-
-  // Weight specific
-  weightUnit?: string;
-
-  // Validation
-  min?: number;
-  max?: number;
-  allowNegative?: boolean;
-
-  // Stepper (Increment/Decrement buttons)
-  showSteppers?: boolean;
-  step?: number;
-}
-
 const NumberInput = ({
   label,
   bottomLabel,
@@ -183,20 +179,35 @@ const NumberInput = ({
 }: NumberInputProps) => {
   const [displayValue, setDisplayValue] = useState<string>('');
 
-  // Determine if decimals are allowed based on maskType
+  // CONFIG & HELPERS
   const allowDecimal =
     maskType === 'decimal' || maskType === 'weight' || decimals > 0;
 
-  // Format value for display based on maskType
+  const getInputPrefix = (): string => {
+    switch (maskType) {
+      case 'currency':
+        return currencyPrefix;
+      default:
+        return '';
+    }
+  };
+
+  const getInputSuffix = (): string => {
+    switch (maskType) {
+      case 'weight':
+        return weightUnit;
+      default:
+        return '';
+    }
+  };
+
   const getFormattedValue = (rawValue: number | string): string => {
     if (rawValue === '' || rawValue === null || rawValue === undefined)
       return '';
 
     switch (maskType) {
       case 'currency':
-        return formatCurrency(rawValue, currencyPrefix, decimals);
       case 'weight':
-        return formatWeight(rawValue, weightUnit, decimals);
       case 'decimal':
       case 'number':
         return formatNumber(
@@ -210,21 +221,14 @@ const NumberInput = ({
     }
   };
 
-  // Initialize display value when value prop changes
+  // EFFECTS
   useEffect(() => {
     setDisplayValue(getFormattedValue(value || ''));
   }, [value]);
 
+  // EVENT HANDLERS
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    let inputValue = e.target.value;
-
-    // Remove prefix/suffix for editing
-    if (maskType === 'currency' && inputValue.startsWith(currencyPrefix)) {
-      inputValue = inputValue.slice(currencyPrefix.length);
-    }
-    if (maskType === 'weight' && inputValue.endsWith(` ${weightUnit}`)) {
-      inputValue = inputValue.slice(0, -weightUnit.length - 1);
-    }
+    const inputValue = e.target.value;
 
     // Clean input
     const cleaned = cleanNumericInput(
@@ -263,7 +267,6 @@ const NumberInput = ({
 
     // Call onChange with modified event
     if (onChange) {
-      // Create a synthetic event with the numeric value
       const syntheticEvent = {
         ...e,
         target: {
@@ -277,7 +280,6 @@ const NumberInput = ({
     }
   };
 
-  // Handle Increment
   const handleIncrement = () => {
     if (disabled || readOnly) return;
 
@@ -315,7 +317,6 @@ const NumberInput = ({
     }
   };
 
-  // Handle Decrement
   const handleDecrement = () => {
     if (disabled || readOnly) return;
 
@@ -356,8 +357,11 @@ const NumberInput = ({
     }
   };
 
+  // RENDER CALCULATIONS
   const showErrorMessage = Boolean(isError && errorMessage);
   const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+  const inputPrefix = getInputPrefix();
+  const inputSuffix = getInputSuffix();
 
   return (
     <div
@@ -389,78 +393,105 @@ const NumberInput = ({
         </label>
       )}
 
-      <div
-        className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
-          {
-            'border-error': isError,
-            'border-success!': isValid,
-          },
-          className?.inputWrapper
-        )}
-      >
-        {/* Decrement Button */}
-        {showSteppers && (
-          <button
-            type='button'
-            onClick={handleDecrement}
-            disabled={disabled || readOnly}
-            className={cn(
-              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
-              {
-                'opacity-50 cursor-not-allowed': disabled || readOnly,
-              }
-            )}
-            tabIndex={-1}
-          >
-            <Icon icon='ic:round-minus' width={20} height={20} />
-          </button>
-        )}
-
-        {startAdornment && startAdornment}
-
-        <input
-          type='text'
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={displayValue}
-          onChange={handleInputChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={disabled}
-          className={cn('grow', className?.input)}
-          readOnly={readOnly}
-          inputMode='decimal'
-        />
-
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-
-            {endAdornment && endAdornment}
+      {/* Input Container */}
+      <div className='relative flex'>
+        {/* Prefix Block */}
+        {inputPrefix && (
+          <div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md'>
+            <span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
+              {inputPrefix}
+            </span>
           </div>
         )}
 
-        {/* Increment Button */}
-        {showSteppers && (
-          <button
-            type='button'
-            onClick={handleIncrement}
-            disabled={disabled || readOnly}
-            className={cn(
-              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
-              {
-                'opacity-50 cursor-not-allowed': disabled || readOnly,
-              }
-            )}
-            tabIndex={-1}
-          >
-            <Icon icon='ic:round-plus' width={20} height={20} />
-          </button>
+        {/* Input Wrapper */}
+        <div
+          className={cn(
+            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center',
+            {
+              'border-error': isError,
+              'border-success!': isValid,
+              'rounded-l-none!': inputPrefix,
+              'rounded-r-none!': inputSuffix,
+            },
+            className?.inputWrapper
+          )}
+        >
+          {/* Stepper Buttons */}
+          {showSteppers && (
+            <button
+              type='button'
+              onClick={handleDecrement}
+              disabled={disabled || readOnly}
+              className={cn(
+                'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
+                {
+                  'opacity-50 cursor-not-allowed': disabled || readOnly,
+                }
+              )}
+              tabIndex={-1}
+            >
+              <Icon icon='ic:round-minus' width={20} height={20} />
+            </button>
+          )}
+
+          {/* Start Adornment */}
+          {startAdornment && startAdornment}
+
+          {/* Main Input */}
+          <input
+            type='text'
+            id={name}
+            name={name}
+            placeholder={placeholder}
+            value={displayValue}
+            onChange={handleInputChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            disabled={disabled}
+            className={cn('grow bg-transparent outline-none', className?.input)}
+            readOnly={readOnly}
+            inputMode='decimal'
+          />
+
+          {/* End Adornment & Loading */}
+          {(isLoading || endAdornment) && (
+            <div className='flex flex-row gap-2'>
+              {isLoading && <span className='loading loading-spinner' />}
+              {endAdornment && endAdornment}
+            </div>
+          )}
+
+          {/* Increment Button */}
+          {showSteppers && (
+            <button
+              type='button'
+              onClick={handleIncrement}
+              disabled={disabled || readOnly}
+              className={cn(
+                'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
+                {
+                  'opacity-50 cursor-not-allowed': disabled || readOnly,
+                }
+              )}
+              tabIndex={-1}
+            >
+              <Icon icon='ic:round-plus' width={20} height={20} />
+            </button>
+          )}
+        </div>
+
+        {/* Suffix Block */}
+        {inputSuffix && (
+          <div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md'>
+            <span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
+              {inputSuffix}
+            </span>
+          </div>
         )}
       </div>
 
+      {/* Field Message */}
       <FieldMessage
         message={feedbackMessage}
         tone={showErrorMessage ? 'error' : 'info'}

From 7c6e079f56733d7d1417028d7ceacb6401f5ea81 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 09:33:31 +0700
Subject: [PATCH 33/68] refactor(FE-114): improve data handling in
 RecordingForm for numeric fields

---
 .../pages/flock/recording/form/RecordingForm.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index b75a49d7..40247d3a 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -77,22 +77,22 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             : '',
         feed_data: (values.feed_data ?? []).map((p) => ({
           feed_id: p.feed_id,
-          feed_qty: typeof p.feed_qty === 'number' ? p.feed_qty : 0,
-          feed_stock: p.feed_stock,
+          feed_qty: typeof p.feed_qty === 'number' ? p.feed_qty : parseFloat(String(p.feed_qty)) || 0,
+          feed_stock: typeof p.feed_stock === 'number' ? p.feed_stock : parseFloat(String(p.feed_stock)) || 0,
         })),
         body_weight: (values.body_weight ?? []).map((b) => ({
-          chicken_weight: b.chicken_weight,
-          chicken_count: b.chicken_count,
-          average_chicken_weight: b.average_chicken_weight,
+          chicken_weight: typeof b.chicken_weight === 'number' ? b.chicken_weight : parseFloat(String(b.chicken_weight)) || 0,
+          chicken_count: typeof b.chicken_count === 'number' ? b.chicken_count : parseFloat(String(b.chicken_count)) || 0,
+          average_chicken_weight: typeof b.average_chicken_weight === 'number' ? b.average_chicken_weight : parseFloat(String(b.average_chicken_weight)) || 0,
         })),
         vaccination: (values.vaccination ?? []).map((v) => ({
           vaccine_id: v.vaccine_id,
-          total_stock: typeof v.total_stock === 'number' ? v.total_stock : 0,
-          used_stock: v.used_stock,
+          total_stock: typeof v.total_stock === 'number' ? v.total_stock : parseFloat(String(v.total_stock)) || 0,
+          used_stock: typeof v.used_stock === 'number' ? v.used_stock : parseFloat(String(v.used_stock)) || 0,
         })),
         mortality: (values.mortality ?? []).map((m) => ({
           condition: m.condition,
-          count: m.count,
+          count: typeof m.count === 'number' ? m.count : parseFloat(String(m.count)) || 0,
         })),
       };
 

From 1ecdff855efccee912ac5bceb5b97d5dcec8e3e2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 09:54:14 +0700
Subject: [PATCH 34/68] refactor(FE-114): enhance NumberInput component with
 improved styling and disabled state handling

---
 src/components/input/NumberInput.tsx | 44 ++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 231d8b24..1b5559ed 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -397,8 +397,20 @@ const NumberInput = ({
       <div className='relative flex'>
         {/* Prefix Block */}
         {inputPrefix && (
-          <div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md'>
-            <span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
+          <div className={cn(
+            'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+            {
+              'bg-gray-100 border-gray-300': !disabled,
+              'bg-gray-50 border-gray-200': disabled,
+            }
+          )}>
+            <span className={cn(
+              'text-sm font-medium select-none whitespace-nowrap',
+              {
+                'text-gray-600': !disabled,
+                'text-gray-400': disabled,
+              }
+            )}>
               {inputPrefix}
             </span>
           </div>
@@ -413,6 +425,9 @@ const NumberInput = ({
               'border-success!': isValid,
               'rounded-l-none!': inputPrefix,
               'rounded-r-none!': inputSuffix,
+              'input-disabled': disabled,
+              'cursor-not-allowed': disabled,
+              'bg-gray-50': disabled,
             },
             className?.inputWrapper
           )}
@@ -449,7 +464,14 @@ const NumberInput = ({
             onFocus={onFocus}
             onBlur={onBlur}
             disabled={disabled}
-            className={cn('grow bg-transparent outline-none', className?.input)}
+            className={cn(
+              'grow bg-transparent outline-none',
+              {
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              },
+              className?.input
+            )}
             readOnly={readOnly}
             inputMode='decimal'
           />
@@ -483,8 +505,20 @@ const NumberInput = ({
 
         {/* Suffix Block */}
         {inputSuffix && (
-          <div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md'>
-            <span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
+          <div className={cn(
+            'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
+            {
+              'bg-gray-100 border-gray-300': !disabled,
+              'bg-gray-50 border-gray-200': disabled,
+            }
+          )}>
+            <span className={cn(
+              'text-sm font-medium select-none whitespace-nowrap',
+              {
+                'text-gray-600': !disabled,
+                'text-gray-400': disabled,
+              }
+            )}>
               {inputSuffix}
             </span>
           </div>

From fb29cea8d28eafe235dd1fa29f0ad5310fee1e60 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 09:54:28 +0700
Subject: [PATCH 35/68] refactor(FE-114): enhance body weight calculations in
 RecordingForm with auto-update for average weight

---
 .../flock/recording/form/RecordingForm.tsx    | 169 ++++++++++++++----
 1 file changed, 130 insertions(+), 39 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 40247d3a..7f013538 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
@@ -77,22 +78,46 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             : '',
         feed_data: (values.feed_data ?? []).map((p) => ({
           feed_id: p.feed_id,
-          feed_qty: typeof p.feed_qty === 'number' ? p.feed_qty : parseFloat(String(p.feed_qty)) || 0,
-          feed_stock: typeof p.feed_stock === 'number' ? p.feed_stock : parseFloat(String(p.feed_stock)) || 0,
+          feed_qty:
+            typeof p.feed_qty === 'number'
+              ? p.feed_qty
+              : parseFloat(String(p.feed_qty)) || 0,
+          feed_stock:
+            typeof p.feed_stock === 'number'
+              ? p.feed_stock
+              : parseFloat(String(p.feed_stock)) || 0,
         })),
         body_weight: (values.body_weight ?? []).map((b) => ({
-          chicken_weight: typeof b.chicken_weight === 'number' ? b.chicken_weight : parseFloat(String(b.chicken_weight)) || 0,
-          chicken_count: typeof b.chicken_count === 'number' ? b.chicken_count : parseFloat(String(b.chicken_count)) || 0,
-          average_chicken_weight: typeof b.average_chicken_weight === 'number' ? b.average_chicken_weight : parseFloat(String(b.average_chicken_weight)) || 0,
+          chicken_weight:
+            typeof b.chicken_weight === 'number'
+              ? b.chicken_weight
+              : parseFloat(String(b.chicken_weight)) || 0,
+          chicken_count:
+            typeof b.chicken_count === 'number'
+              ? b.chicken_count
+              : parseFloat(String(b.chicken_count)) || 0,
+          average_chicken_weight:
+            typeof b.average_chicken_weight === 'number'
+              ? b.average_chicken_weight
+              : parseFloat(String(b.average_chicken_weight)) || 0,
         })),
         vaccination: (values.vaccination ?? []).map((v) => ({
           vaccine_id: v.vaccine_id,
-          total_stock: typeof v.total_stock === 'number' ? v.total_stock : parseFloat(String(v.total_stock)) || 0,
-          used_stock: typeof v.used_stock === 'number' ? v.used_stock : parseFloat(String(v.used_stock)) || 0,
+          total_stock:
+            typeof v.total_stock === 'number'
+              ? v.total_stock
+              : parseFloat(String(v.total_stock)) || 0,
+          used_stock:
+            typeof v.used_stock === 'number'
+              ? v.used_stock
+              : parseFloat(String(v.used_stock)) || 0,
         })),
         mortality: (values.mortality ?? []).map((m) => ({
           condition: m.condition,
-          count: typeof m.count === 'number' ? m.count : parseFloat(String(m.count)) || 0,
+          count:
+            typeof m.count === 'number'
+              ? m.count
+              : parseFloat(String(m.count)) || 0,
         })),
       };
 
@@ -283,6 +308,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   }, [initialValues, projectFlocks]);
 
+  // Auto-calculate average weight when chicken weight or count changes
+  useEffect(() => {
+    if (formik.values.body_weight) {
+      const updatedBodyWeight = formik.values.body_weight.map((weight) => ({
+        ...weight,
+        average_chicken_weight:
+          weight.chicken_count > 0
+            ? Math.round(weight.chicken_weight / weight.chicken_count)
+            : 0,
+      }));
+
+      // Only update if values are different to avoid infinite loops
+      const hasChanges = updatedBodyWeight.some(
+        (updated, idx) =>
+          updated.average_chicken_weight !==
+          formik.values.body_weight[idx]?.average_chicken_weight
+      );
+
+      if (hasChanges) {
+        formik.setFieldValue('body_weight', updatedBodyWeight);
+      }
+    }
+  }, [
+    formik.values.body_weight?.map((w) => w.chicken_weight),
+    formik.values.body_weight?.map((w) => w.chicken_count),
+  ]);
+
   // EVENT HANDLERS - Select Inputs
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     const locationValue = (val as OptionType)?.value;
@@ -363,6 +415,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('body_weight', newBodyWeight);
   };
 
+  const handleBodyWeightChange =
+    (fieldName: string, idx: number) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      formik.handleChange(e);
+      setTimeout(() => {
+        const currentWeight = formik.values.body_weight?.[idx];
+        if (currentWeight) {
+          const newAverage =
+            currentWeight.chicken_count > 0
+              ? Math.round(
+                  currentWeight.chicken_weight / currentWeight.chicken_count
+                )
+              : 0;
+
+          formik.setFieldValue(
+            `body_weight.${idx}.average_chicken_weight`,
+            newAverage
+          );
+        }
+      }, 0);
+    };
+
   const removeBodyWeight = (idx: number) => {
     const updatedBodyWeight = formik.values.body_weight?.filter(
       (_, i) => i !== idx
@@ -865,7 +939,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             required
                             name={`body_weight.${idx}.chicken_weight`}
                             value={weight.chicken_weight}
-                            onChange={formik.handleChange}
+                            onChange={handleBodyWeightChange(
+                              'chicken_weight',
+                              idx
+                            )}
                             onBlur={formik.handleBlur}
                             maskType='weight'
                             weightUnit='gram'
@@ -896,7 +973,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             required
                             name={`body_weight.${idx}.chicken_count`}
                             value={weight.chicken_count}
-                            onChange={formik.handleChange}
+                            onChange={handleBodyWeightChange(
+                              'chicken_count',
+                              idx
+                            )}
                             onBlur={formik.handleBlur}
                             maskType='number'
                             decimals={0}
@@ -922,35 +1002,46 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           />
                         </td>
                         <td>
-                          <NumberInput
-                            required
-                            name={`body_weight.${idx}.average_chicken_weight`}
-                            value={weight.average_chicken_weight}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='weight'
-                            weightUnit='gram'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
+                          <div className='relative'>
+                            <NumberInput
+                              required
+                              name={`body_weight.${idx}.average_chicken_weight`}
+                              value={
+                                weight.chicken_count > 0
+                                  ? Math.round(
+                                      weight.chicken_weight /
+                                        weight.chicken_count
+                                    )
+                                  : 0
+                              }
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              maskType='weight'
+                              weightUnit='gram'
+                              decimals={0}
+                              min={0}
+                              isError={
+                                isRepeaterInputError(
+                                  'body_weight',
+                                  'average_chicken_weight',
+                                  idx
+                                ).isError
+                              }
+                              errorMessage={
+                                isRepeaterInputError(
+                                  'body_weight',
+                                  'average_chicken_weight',
+                                  idx
+                                ).errorMessage
+                              }
+                              readOnly={true}
+                              disabled={true}
+                              className={{
+                                wrapper: 'w-full min-w-24',
+                              }}
+                              placeholder='0'
+                            />
+                          </div>
                         </td>
                         {type !== 'detail' && (
                           <td>

From 645668e1f9a6f941a6fb5695dda5a8ed48d4500c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 09:54:28 +0700
Subject: [PATCH 36/68] refactor(FE-114): enhance body weight calculations in
 RecordingForm with auto-update for average weight

---
 .../flock/recording/form/RecordingForm.tsx    | 168 ++++++++++++++----
 1 file changed, 129 insertions(+), 39 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 40247d3a..cbdecdde 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -77,22 +77,46 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             : '',
         feed_data: (values.feed_data ?? []).map((p) => ({
           feed_id: p.feed_id,
-          feed_qty: typeof p.feed_qty === 'number' ? p.feed_qty : parseFloat(String(p.feed_qty)) || 0,
-          feed_stock: typeof p.feed_stock === 'number' ? p.feed_stock : parseFloat(String(p.feed_stock)) || 0,
+          feed_qty:
+            typeof p.feed_qty === 'number'
+              ? p.feed_qty
+              : parseFloat(String(p.feed_qty)) || 0,
+          feed_stock:
+            typeof p.feed_stock === 'number'
+              ? p.feed_stock
+              : parseFloat(String(p.feed_stock)) || 0,
         })),
         body_weight: (values.body_weight ?? []).map((b) => ({
-          chicken_weight: typeof b.chicken_weight === 'number' ? b.chicken_weight : parseFloat(String(b.chicken_weight)) || 0,
-          chicken_count: typeof b.chicken_count === 'number' ? b.chicken_count : parseFloat(String(b.chicken_count)) || 0,
-          average_chicken_weight: typeof b.average_chicken_weight === 'number' ? b.average_chicken_weight : parseFloat(String(b.average_chicken_weight)) || 0,
+          chicken_weight:
+            typeof b.chicken_weight === 'number'
+              ? b.chicken_weight
+              : parseFloat(String(b.chicken_weight)) || 0,
+          chicken_count:
+            typeof b.chicken_count === 'number'
+              ? b.chicken_count
+              : parseFloat(String(b.chicken_count)) || 0,
+          average_chicken_weight:
+            typeof b.average_chicken_weight === 'number'
+              ? b.average_chicken_weight
+              : parseFloat(String(b.average_chicken_weight)) || 0,
         })),
         vaccination: (values.vaccination ?? []).map((v) => ({
           vaccine_id: v.vaccine_id,
-          total_stock: typeof v.total_stock === 'number' ? v.total_stock : parseFloat(String(v.total_stock)) || 0,
-          used_stock: typeof v.used_stock === 'number' ? v.used_stock : parseFloat(String(v.used_stock)) || 0,
+          total_stock:
+            typeof v.total_stock === 'number'
+              ? v.total_stock
+              : parseFloat(String(v.total_stock)) || 0,
+          used_stock:
+            typeof v.used_stock === 'number'
+              ? v.used_stock
+              : parseFloat(String(v.used_stock)) || 0,
         })),
         mortality: (values.mortality ?? []).map((m) => ({
           condition: m.condition,
-          count: typeof m.count === 'number' ? m.count : parseFloat(String(m.count)) || 0,
+          count:
+            typeof m.count === 'number'
+              ? m.count
+              : parseFloat(String(m.count)) || 0,
         })),
       };
 
@@ -283,6 +307,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   }, [initialValues, projectFlocks]);
 
+  // Auto-calculate average weight when chicken weight or count changes
+  useEffect(() => {
+    if (formik.values.body_weight) {
+      const updatedBodyWeight = formik.values.body_weight.map((weight) => ({
+        ...weight,
+        average_chicken_weight:
+          weight.chicken_count > 0
+            ? Math.round(weight.chicken_weight / weight.chicken_count)
+            : 0,
+      }));
+
+      // Only update if values are different to avoid infinite loops
+      const hasChanges = updatedBodyWeight.some(
+        (updated, idx) =>
+          updated.average_chicken_weight !==
+          formik.values.body_weight[idx]?.average_chicken_weight
+      );
+
+      if (hasChanges) {
+        formik.setFieldValue('body_weight', updatedBodyWeight);
+      }
+    }
+  }, [
+    formik.values.body_weight?.map((w) => w.chicken_weight),
+    formik.values.body_weight?.map((w) => w.chicken_count),
+  ]);
+
   // EVENT HANDLERS - Select Inputs
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     const locationValue = (val as OptionType)?.value;
@@ -363,6 +414,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('body_weight', newBodyWeight);
   };
 
+  const handleBodyWeightChange =
+    (fieldName: string, idx: number) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      formik.handleChange(e);
+      setTimeout(() => {
+        const currentWeight = formik.values.body_weight?.[idx];
+        if (currentWeight) {
+          const newAverage =
+            currentWeight.chicken_count > 0
+              ? Math.round(
+                  currentWeight.chicken_weight / currentWeight.chicken_count
+                )
+              : 0;
+
+          formik.setFieldValue(
+            `body_weight.${idx}.average_chicken_weight`,
+            newAverage
+          );
+        }
+      }, 0);
+    };
+
   const removeBodyWeight = (idx: number) => {
     const updatedBodyWeight = formik.values.body_weight?.filter(
       (_, i) => i !== idx
@@ -865,7 +938,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             required
                             name={`body_weight.${idx}.chicken_weight`}
                             value={weight.chicken_weight}
-                            onChange={formik.handleChange}
+                            onChange={handleBodyWeightChange(
+                              'chicken_weight',
+                              idx
+                            )}
                             onBlur={formik.handleBlur}
                             maskType='weight'
                             weightUnit='gram'
@@ -896,7 +972,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             required
                             name={`body_weight.${idx}.chicken_count`}
                             value={weight.chicken_count}
-                            onChange={formik.handleChange}
+                            onChange={handleBodyWeightChange(
+                              'chicken_count',
+                              idx
+                            )}
                             onBlur={formik.handleBlur}
                             maskType='number'
                             decimals={0}
@@ -922,35 +1001,46 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           />
                         </td>
                         <td>
-                          <NumberInput
-                            required
-                            name={`body_weight.${idx}.average_chicken_weight`}
-                            value={weight.average_chicken_weight}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='weight'
-                            weightUnit='gram'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
+                          <div className='relative'>
+                            <NumberInput
+                              required
+                              name={`body_weight.${idx}.average_chicken_weight`}
+                              value={
+                                weight.chicken_count > 0
+                                  ? Math.round(
+                                      weight.chicken_weight /
+                                        weight.chicken_count
+                                    )
+                                  : 0
+                              }
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              maskType='weight'
+                              weightUnit='gram'
+                              decimals={0}
+                              min={0}
+                              isError={
+                                isRepeaterInputError(
+                                  'body_weight',
+                                  'average_chicken_weight',
+                                  idx
+                                ).isError
+                              }
+                              errorMessage={
+                                isRepeaterInputError(
+                                  'body_weight',
+                                  'average_chicken_weight',
+                                  idx
+                                ).errorMessage
+                              }
+                              readOnly={true}
+                              disabled={true}
+                              className={{
+                                wrapper: 'w-full min-w-24',
+                              }}
+                              placeholder='0'
+                            />
+                          </div>
                         </td>
                         {type !== 'detail' && (
                           <td>

From b269728ecdc9e62fa8fb43255fc2908127f756b0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 10:38:07 +0700
Subject: [PATCH 37/68] feat(FE-114): add CheckboxInput component with
 customizable props and styling

---
 src/components/input/CheckboxInput.tsx | 279 +++++++++++++++++++++++++
 1 file changed, 279 insertions(+)
 create mode 100644 src/components/input/CheckboxInput.tsx

diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
new file mode 100644
index 00000000..b8d5ba5e
--- /dev/null
+++ b/src/components/input/CheckboxInput.tsx
@@ -0,0 +1,279 @@
+'use client';
+
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
+
+export interface CheckboxInputProps {
+  // Basic Props
+  name: string;
+  label?: string;
+  bottomLabel?: string;
+  checked?: boolean;
+  value?: string | number;
+  indeterminate?: boolean;
+  naked?: boolean; // New prop for checkbox-only mode
+
+  // Styling Props
+  className?: {
+    wrapper?: string;
+    label?: string;
+    checkbox?: string;
+    input?: string;
+  };
+
+  // State Props
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+
+  // Adornment Props
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+
+  // Event Handlers
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+
+  // Additional Props
+  tooltip?: string;
+  description?: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?:
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'info'
+    | 'error';
+}
+
+const CheckboxInput = ({
+  name,
+  label,
+  bottomLabel,
+  checked = false,
+  value,
+  indeterminate = false,
+  naked = false,
+  className,
+  isError,
+  errorMessage,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  isLoading = false,
+  startAdornment,
+  endAdornment,
+  onChange,
+  onBlur,
+  onFocus,
+  tooltip,
+  description,
+  size = 'md',
+  variant = 'default',
+}: CheckboxInputProps) => {
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
+  // Size classes
+  const sizeClasses = {
+    sm: 'checkbox-sm',
+    md: 'checkbox-md',
+    lg: 'checkbox-lg',
+  };
+
+  // Variant classes
+  const variantClasses = {
+    default: '',
+    primary: 'checkbox-primary',
+    secondary: 'checkbox-secondary',
+    success: 'checkbox-success',
+    warning: 'checkbox-warning',
+    info: 'checkbox-info',
+    error: 'checkbox-error',
+  };
+
+  // Generate unique ID for accessibility
+  const checkboxId = `checkbox-${name}-${Math.random().toString(36).substr(2, 9)}`;
+
+  // Naked mode - only checkbox, no wrapper structure
+  if (naked) {
+    return (
+      <div className='relative'>
+        <input
+          type='checkbox'
+          id={checkboxId}
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={disabled}
+          readOnly={readOnly}
+          className={cn(
+            'checkbox',
+            sizeClasses[size],
+            variantClasses[variant],
+            {
+              'opacity-50 cursor-not-allowed': disabled,
+              'cursor-pointer': !disabled && !readOnly,
+            },
+            className?.checkbox
+          )}
+          ref={(input) => {
+            if (input) {
+              input.indeterminate = indeterminate;
+            }
+          }}
+        />
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className='absolute inset-0 flex items-center justify-center'>
+            <span className='loading loading-spinner loading-xs opacity-50' />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {/* Label with Tooltip Support */}
+      {label && (
+        <label
+          htmlFor={checkboxId}
+          className={cn(
+            'w-full text-sm font-normal leading-5 flex items-start gap-2',
+            {
+              'text-error': isError,
+              'text-gray-500': disabled,
+            },
+            className?.label
+          )}
+        >
+          {/* Checkbox */}
+          <div className='flex items-center gap-2'>
+            {/* Start Adornment */}
+            {startAdornment && (
+              <span className={cn({ 'opacity-50': disabled })}>
+                {startAdornment}
+              </span>
+            )}
+
+            {/* Checkbox Input */}
+            <div className='relative'>
+              <input
+                type='checkbox'
+                id={checkboxId}
+                name={name}
+                value={value}
+                checked={checked}
+                onChange={onChange}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                disabled={disabled}
+                readOnly={readOnly}
+                className={cn(
+                  'checkbox',
+                  sizeClasses[size],
+                  variantClasses[variant],
+                  {
+                    'opacity-50 cursor-not-allowed': disabled,
+                    'cursor-pointer': !disabled && !readOnly,
+                  },
+                  className?.checkbox
+                )}
+                ref={(input) => {
+                  if (input) {
+                    input.indeterminate = indeterminate;
+                  }
+                }}
+              />
+
+              {/* Loading State */}
+              {isLoading && (
+                <div className='absolute inset-0 flex items-center justify-center'>
+                  <span className='loading loading-spinner loading-xs opacity-50' />
+                </div>
+              )}
+            </div>
+
+            {/* Label Text */}
+            <span
+              className={cn('flex-1', {
+                'line-through opacity-50': disabled,
+              })}
+            >
+              {label}
+              {required && (
+                <>
+                  {' '}
+                  <span
+                    className={cn('tooltip', {
+                      'tooltip-error': isError,
+                      'tooltip-base': !isError,
+                    })}
+                    data-tip={tooltip || 'required'}
+                  >
+                    <span
+                      className={cn('text-xs font-bold', {
+                        'text-error': isError,
+                        'text-base-content/70': !isError,
+                      })}
+                    >
+                      *
+                    </span>
+                  </span>
+                </>
+              )}
+            </span>
+
+            {/* End Adornment */}
+            {endAdornment && (
+              <span className={cn({ 'opacity-50': disabled })}>
+                {endAdornment}
+              </span>
+            )}
+          </div>
+        </label>
+      )}
+
+      {/* Description */}
+      {description && (
+        <p
+          className={cn('text-xs leading-4', {
+            'text-gray-500': !isError,
+            'text-error': isError,
+            'opacity-50': disabled,
+          })}
+        >
+          {description}
+        </p>
+      )}
+
+      {/* Field Message */}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
+    </div>
+  );
+};
+
+export default CheckboxInput;

From acea3a3063f3cd77f0445ed84aaf54c21650aead Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 10:38:26 +0700
Subject: [PATCH 38/68] refactor(FE-114): replace native checkboxes with
 CheckboxInput component in RecordingForm

---
 .../flock/recording/form/RecordingForm.tsx    | 202 ++++++++++--------
 1 file changed, 109 insertions(+), 93 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 7f013538..f4d2655e 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ChangeEvent } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
@@ -663,26 +663,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.feed_data?.length ===
-                                selectedFeed.length &&
-                              formik.values.feed_data?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedFeed(
-                                  formik.values.feed_data?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedFeed([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-feed'
+                              checked={
+                                formik.values.feed_data?.length ===
+                                  selectedFeed.length &&
+                                formik.values.feed_data?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedFeed(
+                                    formik.values.feed_data?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedFeed([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Feed Name</th>
@@ -696,10 +699,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`feed-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`feed-${idx}`}
                                 checked={selectedFeed.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -710,6 +712,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -882,26 +886,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.body_weight?.length ===
-                                selectedWeight.length &&
-                              formik.values.body_weight?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedWeight(
-                                  formik.values.body_weight?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedWeight([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-weight'
+                              checked={
+                                formik.values.body_weight?.length ===
+                                  selectedWeight.length &&
+                                formik.values.body_weight?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedWeight(
+                                    formik.values.body_weight?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedWeight([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Chicken Weight</th>
@@ -915,10 +922,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`weight-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`weight-${idx}`}
                                 checked={selectedWeight.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -929,6 +935,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -1108,26 +1116,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.vaccination?.length ===
-                                selectedVaccine.length &&
-                              formik.values.vaccination?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedVaccine(
-                                  formik.values.vaccination?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedVaccine([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-vaccine'
+                              checked={
+                                formik.values.vaccination?.length ===
+                                  selectedVaccine.length &&
+                                formik.values.vaccination?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedVaccine(
+                                    formik.values.vaccination?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedVaccine([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Vaccine Name</th>
@@ -1141,10 +1152,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`vaccine-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`vaccine-${idx}`}
                                 checked={selectedVaccine.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -1158,6 +1168,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -1336,26 +1348,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.mortality?.length ===
-                                selectedMortality.length &&
-                              formik.values.mortality?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedMortality(
-                                  formik.values.mortality?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedMortality([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-mortality'
+                              checked={
+                                formik.values.mortality?.length ===
+                                  selectedMortality.length &&
+                                formik.values.mortality?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedMortality(
+                                    formik.values.mortality?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedMortality([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Condition</th>
@@ -1368,10 +1383,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`mortality-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`mortality-${idx}`}
                                 checked={selectedMortality.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -1385,6 +1399,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>

From 41bb05413c19e95d2cd2427e066417c7abf03b15 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 11:26:15 +0700
Subject: [PATCH 39/68] feat(FE-62): replace native checkboxes with
 CheckboxInput component in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 99 ++++++++++---------
 1 file changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 034b2ead..2716ac85 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -29,6 +29,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
 import FieldMessage from '@/components/helper/FieldMessage';
+import CheckboxInput from '@/components/input/CheckboxInput';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -831,26 +832,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.products?.length ===
-                                selectedProducts.length &&
-                              formik.values.products?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedProducts(
-                                  formik.values.products?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedProducts([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-products'
+                              checked={
+                                formik.values.products?.length ===
+                                  selectedProducts.length &&
+                                formik.values.products?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedProducts(
+                                    formik.values.products?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedProducts([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Produk</th>
@@ -863,10 +867,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`product-${idx}`}
                                 checked={selectedProducts.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -880,6 +883,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -1019,26 +1024,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.deliveries?.length ===
-                                selectedDeliveries.length &&
-                              formik.values.deliveries?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedDeliveries(
-                                  formik.values.deliveries?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedDeliveries([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-deliveries'
+                              checked={
+                                formik.values.deliveries?.length ===
+                                  selectedDeliveries.length &&
+                                formik.values.deliveries?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedDeliveries(
+                                    formik.values.deliveries?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedDeliveries([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Produk</th>
@@ -1058,9 +1066,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         {type !== 'detail' && (
                           <td>
                             <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                              <CheckboxInput
+                                name={`delivery-${idx}`}
                                 checked={selectedDeliveries.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -1076,6 +1083,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>

From 1ee1cf9ea9b07593a47dd6d765bf55212abaa8f9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 11:49:55 +0700
Subject: [PATCH 40/68] refactor(FE-62): update errorMessage handling and
 setFieldTouched for form fields

---
 .../inventory/movement/form/MovementForm.tsx  | 55 +++++++++++++++++--
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 2716ac85..8f432700 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -218,7 +218,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     ) {
       return {
         isError: false,
-        errorMessage: undefined,
+        errorMessage: '',
       };
     }
 
@@ -230,7 +230,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
     return {
       isError: touchedField && Boolean(errorField?.[column as string]),
-      errorMessage: touchedField ? errorField?.[column as string] : undefined,
+      errorMessage:
+        touchedField && errorField?.[column as string]
+          ? errorField[column as string]
+          : '',
     };
   };
 
@@ -247,7 +250,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     if (!touchedDelivery?.products || !errorDelivery?.products) {
       return {
         isError: false,
-        errorMessage: undefined,
+        errorMessage: '',
       };
     }
 
@@ -256,7 +259,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
     return {
       isError: Boolean(touchedField && errorField),
-      errorMessage: touchedField ? errorField : undefined,
+      errorMessage: touchedField && errorField ? errorField : '',
     };
   };
 
@@ -707,7 +710,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   label='Gudang'
                   value={formik.values.source_warehouse}
                   onChange={(val) => {
+                    formik.setFieldTouched('source_warehouse', true);
                     formik.setFieldValue('source_warehouse', val);
+                    formik.setFieldTouched('source_warehouse_id', true);
                     formik.setFieldValue(
                       'source_warehouse_id',
                       (val as WarehouseOptionType)?.value
@@ -765,7 +770,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   label='Gudang'
                   value={formik.values.destination_warehouse}
                   onChange={(val) => {
+                    formik.setFieldTouched('destination_warehouse', true);
                     formik.setFieldValue('destination_warehouse', val);
+                    formik.setFieldTouched('destination_warehouse_id', true);
                     formik.setFieldValue(
                       'destination_warehouse_id',
                       (val as WarehouseOptionType)?.value
@@ -895,10 +902,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             value={product.product ?? undefined}
                             onChange={(val) => {
+                              formik.setFieldTouched(
+                                `products.${idx}.product`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `products.${idx}.product`,
                                 val
                               );
+                              formik.setFieldTouched(
+                                `products.${idx}.product_id`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `products.${idx}.product_id`,
                                 (val as ProductWarehouseOptionType)?.value
@@ -919,7 +934,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isClearable
                             {...isRepeaterInputError(
                               'products',
-                              'product',
+                              'product_id',
                               idx
                             )}
                             className={{
@@ -1095,10 +1110,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             value={delivery.products[0]?.product ?? undefined}
                             onChange={(val) => {
+                              formik.setFieldTouched(
+                                `deliveries.${idx}.products.0.product`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `deliveries.${idx}.products.0.product`,
                                 val
                               );
+                              formik.setFieldTouched(
+                                `deliveries.${idx}.products.0.product_id`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `deliveries.${idx}.products.0.product_id`,
                                 (val as OptionType)?.value
@@ -1107,6 +1130,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             options={getFilteredProductWarehouseOptions()}
                             isDisabled={type === 'detail'}
                             isClearable
+                            isError={
+                              isDeliveryProductInputError(idx, 0, 'product_id')
+                                .isError
+                            }
+                            errorMessage={
+                              isDeliveryProductInputError(idx, 0, 'product_id')
+                                .errorMessage
+                            }
                             className={{
                               wrapper:
                                 'w-full min-w-52 md:min-w-72 lg:min-w-80',
@@ -1142,10 +1173,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             value={delivery.supplier}
                             onChange={(val) => {
+                              formik.setFieldTouched(
+                                `deliveries.${idx}.supplier`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `deliveries.${idx}.supplier`,
                                 val
                               );
+                              formik.setFieldTouched(
+                                `deliveries.${idx}.supplier_id`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `deliveries.${idx}.supplier_id`,
                                 (val as OptionType)?.value
@@ -1156,6 +1195,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isLoading={isLoadingSuppliers}
                             isDisabled={type === 'detail'}
                             isClearable
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'supplier_id',
+                              idx
+                            )}
                             className={{
                               wrapper:
                                 'w-full min-w-52 md:min-w-72 lg:min-w-80',
@@ -1214,6 +1258,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     toast.error(
                                       'Ukuran dokumen maksimal 2 MB!'
                                     );
+                                    e.target.value = '';
                                     return;
                                   }
                                   formik.setFieldValue(

From 25a97e34c7a5e581dc3e3f89e021e58cb9e0ab50 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 11:54:57 +0700
Subject: [PATCH 41/68] refactor(FE-114): use React's useId hook for generating
 unique checkbox IDs in CheckboxInput

---
 src/components/input/CheckboxInput.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
index b8d5ba5e..8ee202db 100644
--- a/src/components/input/CheckboxInput.tsx
+++ b/src/components/input/CheckboxInput.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode, useId } from 'react';
 
 import { cn } from '@/lib/helper';
 import FieldMessage from '@/components/helper/FieldMessage';
@@ -101,8 +101,9 @@ const CheckboxInput = ({
     error: 'checkbox-error',
   };
 
-  // Generate unique ID for accessibility
-  const checkboxId = `checkbox-${name}-${Math.random().toString(36).substr(2, 9)}`;
+  // Generate unique ID for accessibility using React's useId hook for SSR compatibility
+  const generatedId = useId();
+  const checkboxId = `checkbox-${name}-${generatedId}`;
 
   // Naked mode - only checkbox, no wrapper structure
   if (naked) {

From 0740f2d094c7d3ed32d5ec03ea611edc16da59f6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 13:01:56 +0700
Subject: [PATCH 42/68] refactor(FE-114): ensure fields are marked as touched
 on change for better validation handling

---
 .../flock/recording/form/RecordingForm.tsx    | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index f4d2655e..d0286b10 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -568,7 +568,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   required
                   label='Lokasi'
                   value={formik.values.location ?? undefined}
-                  onChange={locationChangeHandler}
+                  onChange={(val) => {
+                    formik.setFieldTouched('location', true);
+                    formik.setFieldTouched('location_id', true);
+                    locationChangeHandler(val);
+                  }}
                   options={locationOptions}
                   onInputChange={setLocationSelectInputValue}
                   isLoading={isLoadingLocations}
@@ -613,7 +617,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   required
                   label='Flock'
                   value={formik.values.flock ?? undefined}
-                  onChange={flockChangeHandler}
+                  onChange={(val) => {
+                    formik.setFieldTouched('flock', true);
+                    formik.setFieldTouched('flock_id', true);
+                    flockChangeHandler(val);
+                  }}
                   options={flockOptions}
                   onInputChange={setFlockSelectInputValue}
                   isLoading={isLoadingFlocks}
@@ -635,7 +643,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   required
                   label='Kandang'
                   value={formik.values.coop ?? undefined}
-                  onChange={coopChangeHandler}
+                  onChange={(val) => {
+                    formik.setFieldTouched('coop', true);
+                    formik.setFieldTouched('coop_id', true);
+                    coopChangeHandler(val);
+                  }}
                   options={coopOptions}
                   isError={
                     formik.touched.coop_id && Boolean(formik.errors.coop_id)
@@ -737,6 +749,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   ) ?? '')
                                 : '';
 
+                              formik.setFieldTouched(
+                                `feed_data.${idx}.feed`,
+                                true
+                              );
+                              formik.setFieldTouched(
+                                `feed_data.${idx}.feed_id`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `feed_data.${idx}.feed`,
                                 val
@@ -1193,6 +1213,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     productWarehouseId as number
                                   ) ?? '')
                                 : '';
+                              formik.setFieldTouched(
+                                `vaccination.${idx}.vaccine`,
+                                true
+                              );
+                              formik.setFieldTouched(
+                                `vaccination.${idx}.vaccine_id`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine`,
                                 val
@@ -1413,6 +1441,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               (opt) => opt.value === mortality.condition
                             )}
                             onChange={(val) => {
+                              formik.setFieldTouched(
+                                `mortality.${idx}.condition`,
+                                true
+                              );
                               formik.setFieldValue(
                                 `mortality.${idx}.condition`,
                                 (val as OptionType)?.value

From 831995e8e43827d251c71dd5e9f3e3f53a0d7bae Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 13:59:26 +0700
Subject: [PATCH 43/68] refactor(FE-114): translate RecordingForm titles and
 table headers to Indonesian

---
 .../flock/recording/form/RecordingForm.tsx    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index d0286b10..78a4436a 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -561,7 +561,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {/* Basic Info Card */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body flex flex-col gap-6'>
-              <h2 className='card-title'>Recording Information</h2>
+              <h2 className='card-title'>Informasi Recording</h2>
 
               <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
                 <SelectInput
@@ -668,7 +668,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {/* Feed Data Table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Feed Data</h2>
+              <h2 className='card-title mb-4'>Data Pakan</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -700,9 +700,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Feed Name</th>
-                      <th>Feed Qty (Available Stock)</th>
-                      <th>Feed Stock (Used)</th>
+                      <th>Nama Pakan</th>
+                      <th>Total Stock pada saat ini</th>
+                      <th>Jumlah Stock yang digunakan</th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
@@ -899,7 +899,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {/* Body Weight Table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Body Weight</h2>
+              <h2 className='card-title mb-4'>Berat Ayam</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -931,9 +931,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Chicken Weight</th>
-                      <th>Chicken Count</th>
-                      <th>Average Weight</th>
+                      <th>Berat (Gram)</th>
+                      <th>Jumlah Ayam</th>
+                      <th>Rata-rata berat Ayam</th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
@@ -1161,9 +1161,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Vaccine Name</th>
-                      <th>Total Stock (Available Stock)</th>
-                      <th>Used Stock</th>
+                      <th>Name Vaksin</th>
+                      <th>Total Stock pada saat ini</th>
+                      <th>Jumlah Stock yang digunakan</th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
@@ -1369,7 +1369,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {/* Mortality Table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Mortality</h2>
+              <h2 className='card-title mb-4'>Mortalitas</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -1401,8 +1401,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Condition</th>
-                      <th>Count</th>
+                      <th>Kondisi/Alasan Mortalitas</th>
+                      <th>Jumlah</th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>

From 12202c2021af7431693472cff87f84af1e595d26 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 15:10:57 +0700
Subject: [PATCH 44/68] fix(resolve): fix resolve mismatch conflict path on
 merge

---
 .../recording/add/page.tsx                    |  0
 .../recording/detail/edit/page.tsx            |  0
 .../recording/detail/layout.tsx               |  0
 .../recording/detail/page.tsx                 |  0
 .../{flock => production}/recording/page.tsx  |  0
 .../pages/flock/recording/RecordingTable.tsx  | 94 ++++++++++++++++++-
 6 files changed, 90 insertions(+), 4 deletions(-)
 rename src/app/{flock => production}/recording/add/page.tsx (100%)
 rename src/app/{flock => production}/recording/detail/edit/page.tsx (100%)
 rename src/app/{flock => production}/recording/detail/layout.tsx (100%)
 rename src/app/{flock => production}/recording/detail/page.tsx (100%)
 rename src/app/{flock => production}/recording/page.tsx (100%)

diff --git a/src/app/flock/recording/add/page.tsx b/src/app/production/recording/add/page.tsx
similarity index 100%
rename from src/app/flock/recording/add/page.tsx
rename to src/app/production/recording/add/page.tsx
diff --git a/src/app/flock/recording/detail/edit/page.tsx b/src/app/production/recording/detail/edit/page.tsx
similarity index 100%
rename from src/app/flock/recording/detail/edit/page.tsx
rename to src/app/production/recording/detail/edit/page.tsx
diff --git a/src/app/flock/recording/detail/layout.tsx b/src/app/production/recording/detail/layout.tsx
similarity index 100%
rename from src/app/flock/recording/detail/layout.tsx
rename to src/app/production/recording/detail/layout.tsx
diff --git a/src/app/flock/recording/detail/page.tsx b/src/app/production/recording/detail/page.tsx
similarity index 100%
rename from src/app/flock/recording/detail/page.tsx
rename to src/app/production/recording/detail/page.tsx
diff --git a/src/app/flock/recording/page.tsx b/src/app/production/recording/page.tsx
similarity index 100%
rename from src/app/flock/recording/page.tsx
rename to src/app/production/recording/page.tsx
diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/flock/recording/RecordingTable.tsx
index bcdcd4dd..0ca0d880 100644
--- a/src/components/pages/flock/recording/RecordingTable.tsx
+++ b/src/components/pages/flock/recording/RecordingTable.tsx
@@ -22,7 +22,90 @@ const dummyRecordings: Recording[] = [
     id: 1,
     flock: {
       id: 1,
-      name: 'Flock A',
+      period: 1,
+      flock: {
+        id: 1,
+        name: 'Flock A',
+        created_at: '2024-01-01',
+        updated_at: '2024-01-01',
+        created_user: {
+          id: 1,
+          id_user: 1,
+          email: 'admin@example.com',
+          name: 'Admin',
+        },
+      },
+      area: {
+        id: 1,
+        name: 'Area 1',
+        created_at: '2024-01-01',
+        updated_at: '2024-01-01',
+        created_user: {
+          id: 1,
+          id_user: 1,
+          email: 'admin@example.com',
+          name: 'Admin',
+        },
+      },
+      fcr: {
+        id: 1,
+        name: 'FCR 1.5',
+        created_at: '2024-01-01',
+        updated_at: '2024-01-01',
+        created_user: {
+          id: 1,
+          id_user: 1,
+          email: 'admin@example.com',
+          name: 'Admin',
+        },
+      },
+      location: {
+        id: 1,
+        name: 'Location 1',
+        address: 'Address 1',
+        area: {
+          id: 1,
+          name: 'Area 1',
+        },
+        created_at: '2024-01-01',
+        updated_at: '2024-01-01',
+        created_user: {
+          id: 1,
+          id_user: 1,
+          email: 'admin@example.com',
+          name: 'Admin',
+        },
+      },
+      kandangs: [
+        {
+          id: 1,
+          name: 'Kandang 1',
+          status: 'ACTIVE',
+          location: {
+            id: 1,
+            name: 'Location 1',
+            address: 'Address 1',
+            area: {
+              id: 1,
+              name: 'Area 1',
+            },
+          },
+          pic: {
+            id: 1,
+            id_user: 1,
+            email: 'pic@example.com',
+            name: 'PIC User',
+          },
+          created_at: '2024-01-01',
+          updated_at: '2024-01-01',
+          created_user: {
+            id: 1,
+            id_user: 1,
+            email: 'admin@example.com',
+            name: 'Admin',
+          },
+        },
+      ],
       created_at: '2024-01-01',
       updated_at: '2024-01-01',
       created_user: {
@@ -53,6 +136,7 @@ const dummyRecordings: Recording[] = [
     coop: {
       id: 1,
       name: 'Coop 1',
+      status: 'ACTIVE',
       location: {
         id: 1,
         name: 'Location 1',
@@ -206,7 +290,9 @@ const RecordingTable = () => {
   const paginatedData = useMemo(() => {
     const filteredData = dummyRecordings.filter(
       (recording) =>
-        recording.flock.name.toLowerCase().includes(search.toLowerCase()) ||
+        recording.flock.flock.name
+          .toLowerCase()
+          .includes(search.toLowerCase()) ||
         recording.location.name.toLowerCase().includes(search.toLowerCase()) ||
         recording.coop.name.toLowerCase().includes(search.toLowerCase())
     );
@@ -253,7 +339,7 @@ const RecordingTable = () => {
       <div className='flex flex-col gap-2 mb-4'>
         <TableToolbar
           addButton={{
-            href: '/flock/recording/add',
+            href: 'recording/add',
             label: 'Tambah Recording',
           }}
           search={{
@@ -382,7 +468,7 @@ const RecordingTable = () => {
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
           },
           {
-            accessorKey: 'flock.name',
+            accessorKey: 'flock.flock.name',
             header: 'Flock',
           },
           {

From e7e0e308c78b07ee8e4e8d8b52e47fc15f5a6679 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 15:20:15 +0700
Subject: [PATCH 45/68] fix(resolve): fix resolve mismatch conflict path on
 merge

---
 .../pages/flock/recording/form/RecordingForm.tsx          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 78a4436a..aa866c81 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -553,7 +553,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   return (
     <>
       <section className='w-full'>
-        <FormHeader type={type} title='Recording' backUrl='/flock/recording' />
+        <FormHeader
+          type={type}
+          title='Recording'
+          backUrl='/production/recording'
+        />
         <form
           onSubmit={formik.handleSubmit}
           className='w-full mt-8 flex flex-col gap-6'
@@ -1558,7 +1562,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             formik={formik}
             editUrl={
               initialValues
-                ? `/flock/recording/detail/edit/?recordingId=${initialValues.id}`
+                ? `/production/recording/detail/edit/?recordingId=${initialValues.id}`
                 : undefined
             }
             onDelete={deleteRecordingClickHandler}

From 2ab26153fd1b4cdd5e3fd373e8ed96287e5781c2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 15:24:55 +0700
Subject: [PATCH 46/68] fix(resolve): fix resolve mismatch conflict path on
 merge

---
 .../production/recording/detail/edit/page.tsx |  2 +-
 src/app/production/recording/detail/page.tsx  |  2 +-
 .../pages/flock/recording/RecordingTable.tsx  |  2 +-
 .../recording/form/RecordingForm.schema.ts    |  2 +-
 .../flock/recording/form/RecordingForm.tsx    |  5 ++++-
 .../form/useRecordingFormHandlers.ts          |  4 ++--
 src/services/api/flock.ts                     | 22 -------------------
 src/services/api/production.ts                | 10 +++++++++
 .../api/{flock => production}/recording.d.ts  |  0
 9 files changed, 20 insertions(+), 29 deletions(-)
 delete mode 100644 src/services/api/flock.ts
 rename src/types/api/{flock => production}/recording.d.ts (100%)

diff --git a/src/app/production/recording/detail/edit/page.tsx b/src/app/production/recording/detail/edit/page.tsx
index 0718731c..0ab55785 100644
--- a/src/app/production/recording/detail/edit/page.tsx
+++ b/src/app/production/recording/detail/edit/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
-import { RecordingApi } from '@/services/api/flock'; // Import RecordingApi
+import { RecordingApi } from '@/services/api/production';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const RecordingEdit = () => {
diff --git a/src/app/production/recording/detail/page.tsx b/src/app/production/recording/detail/page.tsx
index a25fe998..66a6202a 100644
--- a/src/app/production/recording/detail/page.tsx
+++ b/src/app/production/recording/detail/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
-import { RecordingApi } from '@/services/api/flock';
+import { RecordingApi } from '@/services/api/production';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const RecordingDetail = () => {
diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/flock/recording/RecordingTable.tsx
index 0ca0d880..04a6fce6 100644
--- a/src/components/pages/flock/recording/RecordingTable.tsx
+++ b/src/components/pages/flock/recording/RecordingTable.tsx
@@ -15,7 +15,7 @@ import Table from '@/components/Table';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
-import { type Recording } from '@/types/api/flock/recording';
+import { type Recording } from '@/types/api/production/recording';
 
 const dummyRecordings: Recording[] = [
   {
diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index 5b31e54a..4b0b37dd 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
-import { Recording } from '@/types/api/flock/recording';
+import { Recording } from '@/types/api/production/recording';
 
 export const RecordingFormSchema = Yup.object({
   flock: Yup.object({
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index aa866c81..6d4f90a7 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -11,7 +11,10 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import { FormActions } from '@/components/helper/form/FormActions';
-import { CreateRecordingPayload, Recording } from '@/types/api/flock/recording';
+import {
+  CreateRecordingPayload,
+  Recording,
+} from '@/types/api/production/recording';
 import {
   RecordingFormSchema,
   RecordingFormValues,
diff --git a/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts b/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
index a508806f..334b791d 100644
--- a/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
+++ b/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
@@ -2,11 +2,11 @@ import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'react-hot-toast';
 import { useModal } from '@/components/Modal';
-import { RecordingApi } from '@/services/api/flock';
+import { RecordingApi } from '@/services/api/production';
 import {
   CreateRecordingPayload,
   UpdateRecordingPayload,
-} from '@/types/api/flock/recording';
+} from '@/types/api/production/recording';
 import { isResponseError } from '@/lib/api-helper';
 
 export const useRecordingFormHandlers = (initialValuesId?: number) => {
diff --git a/src/services/api/flock.ts b/src/services/api/flock.ts
deleted file mode 100644
index ff8c641a..00000000
--- a/src/services/api/flock.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {
-  CreateFlockPayload,
-  Flock,
-  UpdateFlockPayload,
-} from '@/types/api/master-data/flock';
-import {
-  CreateRecordingPayload,
-  Recording,
-  UpdateRecordingPayload,
-} from '@/types/api/flock/recording';
-import { BaseApiService } from '@/services/api/base';
-
-export const FlockApi = new BaseApiService<
-  Flock,
-  CreateFlockPayload,
-  UpdateFlockPayload
->('/flock/flocks');
-export const RecordingApi = new BaseApiService<
-  Recording,
-  CreateRecordingPayload,
-  UpdateRecordingPayload
->('/flock/recordings');
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 49f0b133..d4d3d4b7 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -4,9 +4,19 @@ import {
   ProjectFlock,
   UpdateProjectFlockPayload,
 } from '@/types/api/production/project-flock';
+import {
+  CreateRecordingPayload,
+  Recording,
+  UpdateRecordingPayload,
+} from '@/types/api/production/recording';
 
 export const ProjectFlockApi = new BaseApiService<
   ProjectFlock,
   CreateProjectFlockPayload,
   UpdateProjectFlockPayload
 >('/production/project_flocks');
+export const RecordingApi = new BaseApiService<
+  Recording,
+  CreateRecordingPayload,
+  UpdateRecordingPayload
+>('/flock/recordings');
diff --git a/src/types/api/flock/recording.d.ts b/src/types/api/production/recording.d.ts
similarity index 100%
rename from src/types/api/flock/recording.d.ts
rename to src/types/api/production/recording.d.ts

From 2e595b5e86a0f14daa6d72d729c71c9899612e15 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 09:11:23 +0700
Subject: [PATCH 47/68] refactor(FE-114): update import paths from flock to
 production for recording components

---
 src/app/production/recording/add/page.tsx                     | 2 +-
 src/app/production/recording/detail/edit/page.tsx             | 2 +-
 src/app/production/recording/detail/page.tsx                  | 2 +-
 src/app/production/recording/page.tsx                         | 2 +-
 .../pages/{flock => production}/recording/RecordingTable.tsx  | 4 ++--
 .../recording/form/RecordingForm.schema.ts                    | 0
 .../{flock => production}/recording/form/RecordingForm.tsx    | 0
 .../recording/form/useRecordingFormHandlers.ts                | 0
 8 files changed, 6 insertions(+), 6 deletions(-)
 rename src/components/pages/{flock => production}/recording/RecordingTable.tsx (99%)
 rename src/components/pages/{flock => production}/recording/form/RecordingForm.schema.ts (100%)
 rename src/components/pages/{flock => production}/recording/form/RecordingForm.tsx (100%)
 rename src/components/pages/{flock => production}/recording/form/useRecordingFormHandlers.ts (100%)

diff --git a/src/app/production/recording/add/page.tsx b/src/app/production/recording/add/page.tsx
index 50bb1d92..d41fc183 100644
--- a/src/app/production/recording/add/page.tsx
+++ b/src/app/production/recording/add/page.tsx
@@ -1,4 +1,4 @@
-import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
+import RecordingForm from '@/components/pages/production/recording/form/RecordingForm';
 
 const AddRecording = () => {
   return (
diff --git a/src/app/production/recording/detail/edit/page.tsx b/src/app/production/recording/detail/edit/page.tsx
index 0ab55785..de53a354 100644
--- a/src/app/production/recording/detail/edit/page.tsx
+++ b/src/app/production/recording/detail/edit/page.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
+import RecordingForm from '@/components/pages/production/recording/form/RecordingForm';
 import { RecordingApi } from '@/services/api/production';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
diff --git a/src/app/production/recording/detail/page.tsx b/src/app/production/recording/detail/page.tsx
index 66a6202a..77b82a68 100644
--- a/src/app/production/recording/detail/page.tsx
+++ b/src/app/production/recording/detail/page.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-import RecordingForm from '@/components/pages/flock/recording/form/RecordingForm';
+import RecordingForm from '@/components/pages/production/recording/form/RecordingForm';
 import { RecordingApi } from '@/services/api/production';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
diff --git a/src/app/production/recording/page.tsx b/src/app/production/recording/page.tsx
index 06f42789..f31ac19a 100644
--- a/src/app/production/recording/page.tsx
+++ b/src/app/production/recording/page.tsx
@@ -1,4 +1,4 @@
-import RecordingTable from '@/components/pages/flock/recording/RecordingTable';
+import RecordingTable from '@/components/pages/production/recording/RecordingTable';
 
 const Recording = () => {
   return (
diff --git a/src/components/pages/flock/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
similarity index 99%
rename from src/components/pages/flock/recording/RecordingTable.tsx
rename to src/components/pages/production/recording/RecordingTable.tsx
index 04a6fce6..cf95f3f5 100644
--- a/src/components/pages/flock/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -220,7 +220,7 @@ const RowOptionsMenu = ({
       )}
     >
       <Button
-        href={`/flock/recording/detail/?recordingId=${props.row.original.id}`}
+        href={`recording/detail/?recordingId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
@@ -229,7 +229,7 @@ const RowOptionsMenu = ({
         Detail
       </Button>
       <Button
-        href={`/flock/recording/detail/edit/?recordingId=${props.row.original.id}`}
+        href={`recording/detail/edit/?recordingId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
         className='justify-start text-sm'
diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
similarity index 100%
rename from src/components/pages/flock/recording/form/RecordingForm.schema.ts
rename to src/components/pages/production/recording/form/RecordingForm.schema.ts
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
similarity index 100%
rename from src/components/pages/flock/recording/form/RecordingForm.tsx
rename to src/components/pages/production/recording/form/RecordingForm.tsx
diff --git a/src/components/pages/flock/recording/form/useRecordingFormHandlers.ts b/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
similarity index 100%
rename from src/components/pages/flock/recording/form/useRecordingFormHandlers.ts
rename to src/components/pages/production/recording/form/useRecordingFormHandlers.ts

From a904c35b7f059aa379e24e2f684e76fedb44564d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 09:41:00 +0700
Subject: [PATCH 48/68] refactor(FE-114): simplify project flock types and
 update flock reference in recording

---
 .../production/recording/RecordingTable.tsx   | 89 +------------------
 src/types/api/production/project-flock.d.ts   | 28 +++---
 src/types/api/production/recording.d.ts       |  4 +-
 3 files changed, 15 insertions(+), 106 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index cf95f3f5..f1dffcea 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -22,90 +22,7 @@ const dummyRecordings: Recording[] = [
     id: 1,
     flock: {
       id: 1,
-      period: 1,
-      flock: {
-        id: 1,
-        name: 'Flock A',
-        created_at: '2024-01-01',
-        updated_at: '2024-01-01',
-        created_user: {
-          id: 1,
-          id_user: 1,
-          email: 'admin@example.com',
-          name: 'Admin',
-        },
-      },
-      area: {
-        id: 1,
-        name: 'Area 1',
-        created_at: '2024-01-01',
-        updated_at: '2024-01-01',
-        created_user: {
-          id: 1,
-          id_user: 1,
-          email: 'admin@example.com',
-          name: 'Admin',
-        },
-      },
-      fcr: {
-        id: 1,
-        name: 'FCR 1.5',
-        created_at: '2024-01-01',
-        updated_at: '2024-01-01',
-        created_user: {
-          id: 1,
-          id_user: 1,
-          email: 'admin@example.com',
-          name: 'Admin',
-        },
-      },
-      location: {
-        id: 1,
-        name: 'Location 1',
-        address: 'Address 1',
-        area: {
-          id: 1,
-          name: 'Area 1',
-        },
-        created_at: '2024-01-01',
-        updated_at: '2024-01-01',
-        created_user: {
-          id: 1,
-          id_user: 1,
-          email: 'admin@example.com',
-          name: 'Admin',
-        },
-      },
-      kandangs: [
-        {
-          id: 1,
-          name: 'Kandang 1',
-          status: 'ACTIVE',
-          location: {
-            id: 1,
-            name: 'Location 1',
-            address: 'Address 1',
-            area: {
-              id: 1,
-              name: 'Area 1',
-            },
-          },
-          pic: {
-            id: 1,
-            id_user: 1,
-            email: 'pic@example.com',
-            name: 'PIC User',
-          },
-          created_at: '2024-01-01',
-          updated_at: '2024-01-01',
-          created_user: {
-            id: 1,
-            id_user: 1,
-            email: 'admin@example.com',
-            name: 'Admin',
-          },
-        },
-      ],
+      name: 'Flock Recording 1',
       created_at: '2024-01-01',
       updated_at: '2024-01-01',
       created_user: {
@@ -290,9 +207,7 @@ const RecordingTable = () => {
   const paginatedData = useMemo(() => {
     const filteredData = dummyRecordings.filter(
       (recording) =>
-        recording.flock.flock.name
-          .toLowerCase()
-          .includes(search.toLowerCase()) ||
+        recording.flock.name.toLowerCase().includes(search.toLowerCase()) ||
         recording.location.name.toLowerCase().includes(search.toLowerCase()) ||
         recording.coop.name.toLowerCase().includes(search.toLowerCase())
     );
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 306c32f1..7561e9ca 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -1,35 +1,29 @@
-import { Area } from "@/types/api/master-data/area";
-import { Fcr } from "@/types/api/master-data/fcr";
-import { Flock } from "@/types/api/master-data/flock";
-import { Kandang } from "@/types/api/master-data/kandang";
-import { Location } from "@/types/api/master-data/location";
-import { BaseMetadata } from "@/types/api/api-general";
+import { Area } from '@/types/api/master-data/area';
+import { Fcr } from '@/types/api/master-data/fcr';
+import { Flock } from '@/types/api/master-data/flock';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Location } from '@/types/api/master-data/location';
+import { BaseMetadata } from '@/types/api/api-general';
 
 export type BaseProjectFlock = {
   id: number;
   name: string;
   status: string;
   flock: Flock;
-  flock_id: number;
   area: Area;
-  area_id: number;
   category: string;
   fcr: Fcr;
-  fcr_id: number;
   location: Location;
-  location_id: number;
   period: number;
-  kandang_ids: number[];
   kandangs: Kandang[];
-}
+};
 
 export type PeriodFlock = {
   flock: Flock;
   next_period: number;
-}
+};
 
-
-export type ProjectFlock = BaseMetadata & BaseProjectFlock 
+export type ProjectFlock = BaseMetadata & BaseProjectFlock;
 
 export type CreateProjectFlockPayload = {
   flock_id: number;
@@ -39,6 +33,6 @@ export type CreateProjectFlockPayload = {
   location_id: number;
   period: number;
   kandang_ids: number[];
-}
+};
 
-export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
\ No newline at end of file
+export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
diff --git a/src/types/api/production/recording.d.ts b/src/types/api/production/recording.d.ts
index d4bf90ee..6fac0bc8 100644
--- a/src/types/api/production/recording.d.ts
+++ b/src/types/api/production/recording.d.ts
@@ -1,11 +1,11 @@
 import { BaseMetadata } from '@/types/api/api-general';
-import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Location } from '@/types/api/master-data/location';
 import { Kandang } from '@/types/api/master-data/kandang';
+import { Flock } from '@/types/api/master-data/flock';
 
 export type BaseRecording = {
   id: number;
-  flock: ProjectFlock;
+  flock: Flock;
   recording_date: string;
   location: Location;
   coop: Kandang;

From b35d513e44a51c4e63b53caeecec31e9a3f097e4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 09:50:09 +0700
Subject: [PATCH 49/68] refactor(FE-114): update flock accessor key in
 RecordingTable component

---
 src/components/pages/production/recording/RecordingTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index f1dffcea..85ec092f 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -383,7 +383,7 @@ const RecordingTable = () => {
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
           },
           {
-            accessorKey: 'flock.flock.name',
+            accessorKey: 'flock.name',
             header: 'Flock',
           },
           {

From 9c114628c7e749ad2dd108fcf17565f405328f7b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 10:54:20 +0700
Subject: [PATCH 50/68] refactor(FE-114,136): improve form validation handling
 and set touched state asynchronously

---
 .../recording/form/RecordingForm.tsx          | 102 ++++++++++--------
 1 file changed, 56 insertions(+), 46 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 6d4f90a7..98fd0f0b 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -512,44 +512,43 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   };
 
   // HELPER FUNCTIONS
-  const isRepeaterInputError = <T extends keyof CreateRecordingPayload>(
+  const isRepeaterInputError = <
+    T extends 'feed_data' | 'body_weight' | 'vaccination' | 'mortality',
+  >(
     arrayName: T,
-    field: T extends 'feed_data'
-      ? keyof CreateRecordingPayload['feed_data'][0]
+    column: T extends 'feed_data'
+      ? keyof RecordingFormValues['feed_data'][0]
       : T extends 'body_weight'
-        ? keyof CreateRecordingPayload['body_weight'][0]
+        ? keyof RecordingFormValues['body_weight'][0]
         : T extends 'vaccination'
-          ? keyof CreateRecordingPayload['vaccination'][0]
+          ? keyof RecordingFormValues['vaccination'][0]
           : T extends 'mortality'
-            ? keyof CreateRecordingPayload['mortality'][0]
+            ? keyof RecordingFormValues['mortality'][0]
             : never,
     idx: number
   ) => {
-    const touched = formik.touched[arrayName] as
-      | {
-          [key: string]: boolean | undefined;
-        }[]
-      | undefined;
-
-    const errors = formik.errors[arrayName] as
-      | {
-          [key: string]: string | undefined;
-        }[]
-      | undefined;
-
-    if (!touched || !Array.isArray(touched)) {
+    if (
+      !formik.touched[arrayName] ||
+      !Array.isArray(formik.touched[arrayName])
+    ) {
       return {
         isError: false,
-        errorMessage: undefined,
+        errorMessage: '',
       };
     }
 
-    const touchedField = touched[idx]?.[field as string];
-    const errorField = errors?.[idx]?.[field as string];
+    const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
+    const errorField = formik.errors[arrayName]?.[idx] as Record<
+      string,
+      string
+    >;
 
     return {
-      isError: touchedField && Boolean(errorField),
-      errorMessage: touchedField ? errorField : undefined,
+      isError: touchedField && Boolean(errorField?.[column as string]),
+      errorMessage:
+        touchedField && errorField?.[column as string]
+          ? errorField[column as string]
+          : '',
     };
   };
 
@@ -576,9 +575,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   label='Lokasi'
                   value={formik.values.location ?? undefined}
                   onChange={(val) => {
-                    formik.setFieldTouched('location', true);
-                    formik.setFieldTouched('location_id', true);
                     locationChangeHandler(val);
+                    setTimeout(() => {
+                      formik.setFieldTouched('location', true);
+                      formik.setFieldTouched('location_id', true);
+                    }, 0);
                   }}
                   options={locationOptions}
                   onInputChange={setLocationSelectInputValue}
@@ -625,9 +626,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   label='Flock'
                   value={formik.values.flock ?? undefined}
                   onChange={(val) => {
-                    formik.setFieldTouched('flock', true);
-                    formik.setFieldTouched('flock_id', true);
                     flockChangeHandler(val);
+                    setTimeout(() => {
+                      formik.setFieldTouched('flock', true);
+                      formik.setFieldTouched('flock_id', true);
+                    }, 0);
                   }}
                   options={flockOptions}
                   onInputChange={setFlockSelectInputValue}
@@ -651,9 +654,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   label='Kandang'
                   value={formik.values.coop ?? undefined}
                   onChange={(val) => {
-                    formik.setFieldTouched('coop', true);
-                    formik.setFieldTouched('coop_id', true);
                     coopChangeHandler(val);
+                    setTimeout(() => {
+                      formik.setFieldTouched('coop', true);
+                      formik.setFieldTouched('coop_id', true);
+                    }, 0);
                   }}
                   options={coopOptions}
                   isError={
@@ -756,14 +761,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   ) ?? '')
                                 : '';
 
-                              formik.setFieldTouched(
-                                `feed_data.${idx}.feed`,
-                                true
-                              );
-                              formik.setFieldTouched(
-                                `feed_data.${idx}.feed_id`,
-                                true
-                              );
                               formik.setFieldValue(
                                 `feed_data.${idx}.feed`,
                                 val
@@ -780,6 +777,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 `feed_data.${idx}.feed_stock`,
                                 0
                               );
+                              setTimeout(() => {
+                                formik.setFieldTouched(
+                                  `feed_data.${idx}.feed`,
+                                  true
+                                );
+                                formik.setFieldTouched(
+                                  `feed_data.${idx}.feed_id`,
+                                  true
+                                );
+                              }, 0);
                             }}
                             options={pakanOptions}
                             isLoading={isLoadingPakan}
@@ -1220,14 +1227,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     productWarehouseId as number
                                   ) ?? '')
                                 : '';
-                              formik.setFieldTouched(
-                                `vaccination.${idx}.vaccine`,
-                                true
-                              );
-                              formik.setFieldTouched(
-                                `vaccination.${idx}.vaccine_id`,
-                                true
-                              );
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine`,
                                 val
@@ -1244,6 +1243,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 `vaccination.${idx}.used_stock`,
                                 0
                               );
+                              // Set touched after setting values to trigger validation
+                              setTimeout(() => {
+                                formik.setFieldTouched(
+                                  `vaccination.${idx}.vaccine`,
+                                  true
+                                );
+                                formik.setFieldTouched(
+                                  `vaccination.${idx}.vaccine_id`,
+                                  true
+                                );
+                              }, 0);
                             }}
                             options={ovkOptions}
                             isLoading={isLoadingOvk}

From c249585bc292571ff3c0abc8d1a41a207f555c6c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 13:55:12 +0700
Subject: [PATCH 51/68] refactor(FE-114): enhance form UI by adding required
 field indicators for multiple inputs

---
 .../inventory/movement/form/MovementForm.tsx  |  92 +++++++-
 .../recording/form/RecordingForm.tsx          | 217 ++++++++++++++----
 2 files changed, 254 insertions(+), 55 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 8f432700..662eaca8 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -864,8 +864,24 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Produk</th>
-                      <th>Qty</th>
+                      <th>
+                        Produk
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Qty
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       {type !== 'detail' && <th>Aksi</th>}
                     </tr>
                   </thead>
@@ -1032,7 +1048,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           {/* Deliveries table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Pengiriman</h2>
+              <h2 className='card-title mb-8'>Pengiriman</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -1064,14 +1080,70 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Produk</th>
-                      <th>Qty</th>
-                      <th>Supplier</th>
-                      <th>Plat Nomor</th>
+                      <th>
+                        Produk
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Qty
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Supplier
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Plat Nomor
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       <th>Dokumen</th>
-                      <th>Biaya Pengiriman (Rp.)</th>
-                      <th>Biaya Per Item (Rp.)</th>
-                      <th>Nama Sopir</th>
+                      <th>
+                        Biaya Pengiriman (Rp.)
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Biaya Per Item (Rp.)
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Nama Sopir
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       {type !== 'detail' && <th>Aksi</th>}
                     </tr>
                   </thead>
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 98fd0f0b..bcf3a0cf 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -418,27 +418,96 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('body_weight', newBodyWeight);
   };
 
-  const handleBodyWeightChange =
-    (fieldName: string, idx: number) =>
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      formik.handleChange(e);
-      setTimeout(() => {
-        const currentWeight = formik.values.body_weight?.[idx];
-        if (currentWeight) {
-          const newAverage =
-            currentWeight.chicken_count > 0
-              ? Math.round(
-                  currentWeight.chicken_weight / currentWeight.chicken_count
-                )
-              : 0;
+  // Handle calculation when chicken_weight changes
+  const handleChickenWeightChange = useCallback(
+    (idx: number, value: number) => {
+      formik.setFieldValue(`body_weight.${idx}.chicken_weight`, value);
 
+      const currentWeight = formik.values.body_weight?.[idx];
+      if (currentWeight) {
+        const chickenCount = currentWeight.chicken_count;
+        if (chickenCount > 0 && value > 0) {
+          const averageWeight = Math.round(value / chickenCount);
           formik.setFieldValue(
             `body_weight.${idx}.average_chicken_weight`,
-            newAverage
+            averageWeight
           );
+        } else {
+          formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, '');
         }
-      }, 0);
-    };
+      }
+    },
+    [formik]
+  );
+
+  // Handle calculation when chicken_count changes
+  const handleChickenCountChange = useCallback(
+    (idx: number, value: number) => {
+      formik.setFieldValue(`body_weight.${idx}.chicken_count`, value);
+
+      const currentWeight = formik.values.body_weight?.[idx];
+      if (currentWeight) {
+        const chickenWeight = currentWeight.chicken_weight;
+        if (chickenWeight > 0 && value > 0) {
+          const averageWeight = Math.round(chickenWeight / value);
+          formik.setFieldValue(
+            `body_weight.${idx}.average_chicken_weight`,
+            averageWeight
+          );
+        } else {
+          formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, '');
+        }
+      }
+    },
+    [formik]
+  );
+
+  // Handle calculation when average_weight changes
+  const handleAverageWeightChange = useCallback(
+    (idx: number, value: number) => {
+      formik.setFieldValue(`body_weight.${idx}.average_chicken_weight`, value);
+
+      const currentWeight = formik.values.body_weight?.[idx];
+      if (currentWeight) {
+        const chickenCount = currentWeight.chicken_count;
+        if (chickenCount > 0 && value > 0) {
+          const totalWeight = value * chickenCount;
+          formik.setFieldValue(
+            `body_weight.${idx}.chicken_weight`,
+            totalWeight
+          );
+        } else if (value === 0) {
+          formik.setFieldValue(`body_weight.${idx}.chicken_weight`, '');
+        }
+      }
+    },
+    [formik]
+  );
+
+  // Create wrapper handlers that match NumberInput's onChange signature
+  const handleChickenWeightChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleChickenWeightChange(idx, value);
+    },
+    [handleChickenWeightChange]
+  );
+
+  const handleChickenCountChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleChickenCountChange(idx, value);
+    },
+    [handleChickenCountChange]
+  );
+
+  const handleAverageWeightChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleAverageWeightChange(idx, value);
+    },
+    [handleAverageWeightChange]
+  );
 
   const removeBodyWeight = (idx: number) => {
     const updatedBodyWeight = formik.values.body_weight?.filter(
@@ -712,9 +781,25 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Nama Pakan</th>
+                      <th>
+                        Nama Pakan
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       <th>Total Stock pada saat ini</th>
-                      <th>Jumlah Stock yang digunakan</th>
+                      <th>
+                        Jumlah Stock yang digunakan
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
@@ -945,9 +1030,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Berat (Gram)</th>
-                      <th>Jumlah Ayam</th>
-                      <th>Rata-rata berat Ayam</th>
+                      <th>
+                        Berat (Gram)
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Jumlah Ayam
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Rata-rata berat Ayam
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
@@ -981,10 +1090,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             required
                             name={`body_weight.${idx}.chicken_weight`}
                             value={weight.chicken_weight}
-                            onChange={handleBodyWeightChange(
-                              'chicken_weight',
-                              idx
-                            )}
+                            onChange={handleChickenWeightChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
                             maskType='weight'
                             weightUnit='gram'
@@ -1015,10 +1121,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             required
                             name={`body_weight.${idx}.chicken_count`}
                             value={weight.chicken_count}
-                            onChange={handleBodyWeightChange(
-                              'chicken_count',
-                              idx
-                            )}
+                            onChange={handleChickenCountChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
                             maskType='number'
                             decimals={0}
@@ -1048,15 +1151,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <NumberInput
                               required
                               name={`body_weight.${idx}.average_chicken_weight`}
-                              value={
-                                weight.chicken_count > 0
-                                  ? Math.round(
-                                      weight.chicken_weight /
-                                        weight.chicken_count
-                                    )
-                                  : 0
-                              }
-                              onChange={formik.handleChange}
+                              value={weight.average_chicken_weight || ''}
+                              onChange={handleAverageWeightChangeWrapper(idx)}
                               onBlur={formik.handleBlur}
                               maskType='weight'
                               weightUnit='gram'
@@ -1076,12 +1172,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   idx
                                 ).errorMessage
                               }
-                              readOnly={true}
-                              disabled={true}
+                              readOnly={type === 'detail'}
                               className={{
                                 wrapper: 'w-full min-w-24',
                               }}
-                              placeholder='0'
+                              placeholder=''
                             />
                           </div>
                         </td>
@@ -1175,9 +1270,25 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Name Vaksin</th>
+                      <th>
+                        Name Vaksin
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       <th>Total Stock pada saat ini</th>
-                      <th>Jumlah Stock yang digunakan</th>
+                      <th>
+                        Jumlah Stock yang digunakan
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>
@@ -1418,8 +1529,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </div>
                         </th>
                       )}
-                      <th>Kondisi/Alasan Mortalitas</th>
-                      <th>Jumlah</th>
+                      <th>
+                        Kondisi/Alasan Mortalitas
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
+                      <th>
+                        Jumlah
+                        <span
+                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                          data-tip='required'
+                        >
+                          <span className='text-error'>*</span>
+                        </span>
+                      </th>
                       {type !== 'detail' && <th>Action</th>}
                     </tr>
                   </thead>

From 58b4204aabcc64b3f3c751dcb969a0c078a3f460 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 14:10:35 +0700
Subject: [PATCH 52/68] refactor(FE-62): enhance MovementForm by integrating
 NumberInput for delivery cost fields and improving layout

---
 .../inventory/movement/form/MovementForm.tsx  | 69 +++++++++++--------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 662eaca8..57d0a585 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -7,6 +7,7 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import { FormActions } from '@/components/helper/form/FormActions';
@@ -1299,27 +1300,35 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         </td>
                         <td>
                           {type === 'detail' ? (
-                            <Button
-                              color='primary'
-                              className='w-full min-w-52 flex items-center justify-center gap-2'
-                              disabled={!delivery.document_path}
-                              href={delivery.document_path ?? undefined}
-                              target='_blank'
-                              rel='noopener noreferrer'
-                            >
-                              {delivery.document_path ? (
-                                <>
-                                  <Icon
-                                    icon='material-symbols:file-open-outline'
-                                    width={20}
-                                    height={20}
-                                  />
-                                  Lihat Dokumen
-                                </>
-                              ) : (
-                                '-'
-                              )}
-                            </Button>
+                            <>
+                              <div className='flex flex-col items-start gap-2'>
+                                <Button
+                                  color='primary'
+                                  className='w-full min-w-52 flex items-center justify-center gap-2'
+                                  disabled={!delivery.document_path}
+                                  href={delivery.document_path ?? undefined}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                >
+                                  {delivery.document_path ? (
+                                    <>
+                                      <Icon
+                                        icon='material-symbols:file-open-outline'
+                                        width={20}
+                                        height={20}
+                                      />
+                                      Lihat Dokumen
+                                    </>
+                                  ) : (
+                                    '-'
+                                  )}
+                                </Button>
+                                <FieldMessage
+                                  message={null}
+                                  isVisible={false}
+                                />
+                              </div>
+                            </>
                           ) : (
                             <FileInput
                               name={`deliveries.${idx}.document`}
@@ -1352,15 +1361,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           )}
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`deliveries.${idx}.delivery_cost`}
                             value={delivery.delivery_cost || ''}
                             onChange={(e) =>
                               handleDeliveryCostChange(idx, e.target.value)
                             }
                             onBlur={formik.handleBlur}
+                            maskType='currency'
+                            decimals={0}
+                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1368,14 +1379,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             )}
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-48',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`deliveries.${idx}.delivery_cost_per_item`}
                             value={delivery.delivery_cost_per_item || ''}
                             onChange={(e) =>
@@ -1385,6 +1396,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               )
                             }
                             onBlur={formik.handleBlur}
+                            maskType='currency'
+                            decimals={0}
+                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',
@@ -1392,7 +1406,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             )}
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-48',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>

From f486a659d08ce90ed525a012b117841582c4ceca Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 14:49:05 +0700
Subject: [PATCH 53/68] feat(FE-114): add Card component with customizable
 layout and styling options

---
 src/components/Card.tsx | 150 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 src/components/Card.tsx

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 00000000..ba573dfb
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import {
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  title?: string;
+  subtitle?: string;
+  image?: string;
+  imageAlt?: string;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  className?: {
+    wrapper?: string;
+    image?: string;
+    body?: string;
+    title?: string;
+    subtitle?: string;
+    actions?: string;
+    footer?: string;
+  };
+  variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Card = ({
+  title,
+  subtitle,
+  image,
+  imageAlt,
+  actions,
+  footer,
+  className,
+  variant = 'default',
+  size = 'md',
+  children,
+  ...props
+}: CardProps) => {
+  const getCardClasses = () => {
+    const baseClasses = 'card bg-base-100';
+
+    const variantClasses = {
+      'default': '',
+      'compact': 'card-compact',
+      'bordered': 'border border-base-300',
+      'shadow': 'shadow-xl',
+      'image-full': 'card-side card-compact shadow-xl',
+    };
+
+    const sizeClasses = {
+      'sm': 'w-64',
+      'md': 'w-96',
+      'lg': 'w-[28rem]',
+    };
+
+    return cn(
+      baseClasses,
+      variantClasses[variant],
+      variant !== 'image-full' ? sizeClasses[size] : '',
+      className?.wrapper
+    );
+  };
+
+  const getImageClasses = () => {
+    if (variant === 'image-full') {
+      return cn('w-32 h-32 object-cover', className?.image);
+    }
+    return cn('h-48 object-cover', className?.image);
+  };
+
+  const getBodyClasses = () => {
+    const baseClasses = 'card-body';
+
+    if (variant === 'compact' || variant === 'image-full') {
+      return cn(baseClasses, 'p-4', className?.body);
+    }
+
+    return cn(baseClasses, 'p-6', className?.body);
+  };
+
+  const getTitleClasses = () => {
+    const sizeClasses = {
+      'sm': 'text-lg',
+      'md': 'text-xl',
+      'lg': 'text-2xl',
+    };
+
+    return cn('card-title font-bold', sizeClasses[size], className?.title);
+  };
+
+  const getSubtitleClasses = () => {
+    return cn('text-base-content/70 text-sm mt-1', className?.subtitle);
+  };
+
+  const getActionsClasses = () => {
+    return cn('card-actions justify-end mt-4', className?.actions);
+  };
+
+  const getFooterClasses = () => {
+    return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
+  };
+
+  if (variant === 'image-full' && image) {
+    return (
+      <div className={getCardClasses()} {...props}>
+        <figure>
+          <img
+            src={image}
+            alt={imageAlt || title || 'Card image'}
+            className={getImageClasses()}
+          />
+        </figure>
+        <div className={getBodyClasses()}>
+          {title && <h2 className={getTitleClasses()}>{title}</h2>}
+          {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+          {children}
+          {actions && <div className={getActionsClasses()}>{actions}</div>}
+        </div>
+        {footer && <div className={getFooterClasses()}>{footer}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className={getCardClasses()} {...props}>
+      {image && (
+        <figure>
+          <img
+            src={image}
+            alt={imageAlt || title || 'Card image'}
+            className={getImageClasses()}
+          />
+        </figure>
+      )}
+      <div className={getBodyClasses()}>
+        {title && <h2 className={getTitleClasses()}>{title}</h2>}
+        {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+        {children}
+        {actions && <div className={getActionsClasses()}>{actions}</div>}
+      </div>
+      {footer && <div className={getFooterClasses()}>{footer}</div>}
+    </div>
+  );
+};
+
+export default Card;
\ No newline at end of file

From bdb3ab1a50e6ce4c8fe85b7b4a07ccfb7e9cecad Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 14:49:38 +0700
Subject: [PATCH 54/68] refactor(FE-114): refactor card native to card
 component

---
 .../recording/form/RecordingForm.tsx          | 1912 ++++++++---------
 1 file changed, 951 insertions(+), 961 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index bcf3a0cf..8c166700 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -31,6 +31,7 @@ import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { LocationApi } from '@/services/api/master-data';
 import FieldMessage from '@/components/helper/FieldMessage';
+import Card from '@/components/Card';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -634,463 +635,521 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           className='w-full mt-8 flex flex-col gap-6'
         >
           {/* Basic Info Card */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body flex flex-col gap-6'>
-              <h2 className='card-title'>Informasi Recording</h2>
+          <Card
+            title='Informasi Recording'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              body: 'flex flex-col gap-6',
+            }}
+          >
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+              <SelectInput
+                required
+                label='Lokasi'
+                value={formik.values.location ?? undefined}
+                onChange={(val) => {
+                  locationChangeHandler(val);
+                  setTimeout(() => {
+                    formik.setFieldTouched('location', true);
+                    formik.setFieldTouched('location_id', true);
+                  }, 0);
+                }}
+                options={locationOptions}
+                onInputChange={setLocationSelectInputValue}
+                isLoading={isLoadingLocations}
+                isError={
+                  formik.touched.location_id &&
+                  Boolean(formik.errors.location_id)
+                }
+                errorMessage={formik.errors.location_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                placeholder='Pilih lokasi terlebih dahulu'
+              />
 
-              <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-                <SelectInput
-                  required
-                  label='Lokasi'
-                  value={formik.values.location ?? undefined}
-                  onChange={(val) => {
-                    locationChangeHandler(val);
-                    setTimeout(() => {
-                      formik.setFieldTouched('location', true);
-                      formik.setFieldTouched('location_id', true);
-                    }, 0);
-                  }}
-                  options={locationOptions}
-                  onInputChange={setLocationSelectInputValue}
-                  isLoading={isLoadingLocations}
-                  isError={
-                    formik.touched.location_id &&
-                    Boolean(formik.errors.location_id)
-                  }
-                  errorMessage={formik.errors.location_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
-                  placeholder='Pilih lokasi terlebih dahulu'
-                />
+              <TextInput
+                required
+                label='Tanggal Recording'
+                type='date'
+                name='recording_date'
+                value={
+                  formik.values.recording_date instanceof Date
+                    ? formik.values.recording_date
+                        .toISOString()
+                        .substring(0, 10)
+                    : ''
+                }
+                onChange={(e) => {
+                  const date = e.target.value ? new Date(e.target.value) : null;
+                  formik.setFieldValue('recording_date', date);
+                }}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.recording_date &&
+                  Boolean(formik.errors.recording_date)
+                }
+                errorMessage={formik.errors.recording_date as string}
+                readOnly={type === 'detail'}
+              />
 
-                <TextInput
-                  required
-                  label='Tanggal Recording'
-                  type='date'
-                  name='recording_date'
-                  value={
-                    formik.values.recording_date instanceof Date
-                      ? formik.values.recording_date
-                          .toISOString()
-                          .substring(0, 10)
-                      : ''
-                  }
-                  onChange={(e) => {
-                    const date = e.target.value
-                      ? new Date(e.target.value)
-                      : null;
-                    formik.setFieldValue('recording_date', date);
-                  }}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.recording_date &&
-                    Boolean(formik.errors.recording_date)
-                  }
-                  errorMessage={formik.errors.recording_date as string}
-                  readOnly={type === 'detail'}
-                />
+              <SelectInput
+                required
+                label='Flock'
+                value={formik.values.flock ?? undefined}
+                onChange={(val) => {
+                  flockChangeHandler(val);
+                  setTimeout(() => {
+                    formik.setFieldTouched('flock', true);
+                    formik.setFieldTouched('flock_id', true);
+                  }, 0);
+                }}
+                options={flockOptions}
+                onInputChange={setFlockSelectInputValue}
+                isLoading={isLoadingFlocks}
+                isError={
+                  formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                }
+                errorMessage={formik.errors.flock_id as string}
+                isDisabled={type === 'detail' || !formik.values.location_id}
+                isClearable
+                placeholder={
+                  !formik.values.location_id
+                    ? 'Pilih lokasi terlebih dahulu'
+                    : 'Pilih Flock'
+                }
+              />
 
-                <SelectInput
-                  required
-                  label='Flock'
-                  value={formik.values.flock ?? undefined}
-                  onChange={(val) => {
-                    flockChangeHandler(val);
-                    setTimeout(() => {
-                      formik.setFieldTouched('flock', true);
-                      formik.setFieldTouched('flock_id', true);
-                    }, 0);
-                  }}
-                  options={flockOptions}
-                  onInputChange={setFlockSelectInputValue}
-                  isLoading={isLoadingFlocks}
-                  isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                  }
-                  errorMessage={formik.errors.flock_id as string}
-                  isDisabled={type === 'detail' || !formik.values.location_id}
-                  isClearable
-                  placeholder={
-                    !formik.values.location_id
-                      ? 'Pilih lokasi terlebih dahulu'
-                      : 'Pilih Flock'
-                  }
-                />
-
-                <SelectInput
-                  key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
-                  required
-                  label='Kandang'
-                  value={formik.values.coop ?? undefined}
-                  onChange={(val) => {
-                    coopChangeHandler(val);
-                    setTimeout(() => {
-                      formik.setFieldTouched('coop', true);
-                      formik.setFieldTouched('coop_id', true);
-                    }, 0);
-                  }}
-                  options={coopOptions}
-                  isError={
-                    formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                  }
-                  errorMessage={formik.errors.coop_id as string}
-                  isDisabled={type === 'detail' || !selectedProjectFlock}
-                  isClearable
-                  placeholder={
-                    !selectedProjectFlock
-                      ? 'Pilih flock terlebih dahulu'
-                      : 'Pilih Kandang'
-                  }
-                />
-              </div>
+              <SelectInput
+                key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
+                required
+                label='Kandang'
+                value={formik.values.coop ?? undefined}
+                onChange={(val) => {
+                  coopChangeHandler(val);
+                  setTimeout(() => {
+                    formik.setFieldTouched('coop', true);
+                    formik.setFieldTouched('coop_id', true);
+                  }, 0);
+                }}
+                options={coopOptions}
+                isError={
+                  formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                }
+                errorMessage={formik.errors.coop_id as string}
+                isDisabled={type === 'detail' || !selectedProjectFlock}
+                isClearable
+                placeholder={
+                  !selectedProjectFlock
+                    ? 'Pilih flock terlebih dahulu'
+                    : 'Pilih Kandang'
+                }
+              />
             </div>
-          </div>
+          </Card>
 
           {/* Feed Data Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Data Pakan</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-feed'
-                              checked={
-                                formik.values.feed_data?.length ===
-                                  selectedFeed.length &&
-                                formik.values.feed_data?.length > 0
+          <Card
+            title='Data Pakan'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-feed'
+                            checked={
+                              formik.values.feed_data?.length ===
+                                selectedFeed.length &&
+                              formik.values.feed_data?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedFeed(
+                                  formik.values.feed_data?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedFeed([]);
                               }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Nama Pakan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Total Stock pada saat ini</th>
+                    <th>
+                      Jumlah Stock yang digunakan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.feed_data?.map((feed, idx) => (
+                    <tr key={`feed-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`feed-${idx}`}
+                              checked={selectedFeed.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedFeed(
-                                    formik.values.feed_data?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
+                                  setSelectedFeed([...selectedFeed, idx]);
                                 } else {
-                                  setSelectedFeed([]);
+                                  setSelectedFeed(
+                                    selectedFeed.filter((i) => i !== idx)
+                                  );
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
+                            <FieldMessage message={null} isVisible={false} />
                           </div>
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Nama Pakan
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>Total Stock pada saat ini</th>
-                      <th>
-                        Jumlah Stock yang digunakan
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.feed_data?.map((feed, idx) => (
-                      <tr key={`feed-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`feed-${idx}`}
-                                checked={selectedFeed.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedFeed([...selectedFeed, idx]);
-                                  } else {
-                                    setSelectedFeed(
-                                      selectedFeed.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={
-                              pakanOptions.find(
-                                (opt: OptionType) =>
-                                  Number(opt.value) === Number(feed.feed_id)
-                              ) ?? null
-                            }
-                            onChange={(val) => {
-                              const productWarehouseId =
-                                (val as OptionType)?.value ?? 0;
-                              const stock = productWarehouseId
-                                ? (pakanStockMap.get(
-                                    productWarehouseId as number
-                                  ) ?? '')
-                                : '';
+                      <td>
+                        <SelectInput
+                          required
+                          value={
+                            pakanOptions.find(
+                              (opt: OptionType) =>
+                                Number(opt.value) === Number(feed.feed_id)
+                            ) ?? null
+                          }
+                          onChange={(val) => {
+                            const productWarehouseId =
+                              (val as OptionType)?.value ?? 0;
+                            const stock = productWarehouseId
+                              ? (pakanStockMap.get(
+                                  productWarehouseId as number
+                                ) ?? '')
+                              : '';
 
-                              formik.setFieldValue(
+                            formik.setFieldValue(`feed_data.${idx}.feed`, val);
+                            formik.setFieldValue(
+                              `feed_data.${idx}.feed_id`,
+                              productWarehouseId || ''
+                            );
+                            formik.setFieldValue(
+                              `feed_data.${idx}.feed_qty`,
+                              stock
+                            );
+                            formik.setFieldValue(
+                              `feed_data.${idx}.feed_stock`,
+                              0
+                            );
+                            setTimeout(() => {
+                              formik.setFieldTouched(
                                 `feed_data.${idx}.feed`,
-                                val
+                                true
                               );
-                              formik.setFieldValue(
+                              formik.setFieldTouched(
                                 `feed_data.${idx}.feed_id`,
-                                productWarehouseId || ''
+                                true
                               );
-                              formik.setFieldValue(
-                                `feed_data.${idx}.feed_qty`,
-                                stock
-                              );
-                              formik.setFieldValue(
-                                `feed_data.${idx}.feed_stock`,
-                                0
-                              );
-                              setTimeout(() => {
-                                formik.setFieldTouched(
-                                  `feed_data.${idx}.feed`,
-                                  true
-                                );
-                                formik.setFieldTouched(
-                                  `feed_data.${idx}.feed_id`,
-                                  true
-                                );
-                              }, 0);
-                            }}
-                            options={pakanOptions}
-                            isLoading={isLoadingPakan}
-                            isError={
-                              isRepeaterInputError('feed_data', 'feed_id', idx)
-                                .isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError('feed_data', 'feed_id', idx)
-                                .errorMessage
-                            }
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
+                            }, 0);
+                          }}
+                          options={pakanOptions}
+                          isLoading={isLoadingPakan}
+                          isError={
+                            isRepeaterInputError('feed_data', 'feed_id', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('feed_data', 'feed_id', idx)
+                              .errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          type='text'
+                          name={`feed_data.${idx}.feed_qty`}
+                          value={
+                            feed.feed_qty === '' || feed.feed_qty === undefined
+                              ? ''
+                              : String(feed.feed_qty)
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          readOnly={true}
+                          placeholder='Pilih pakan terlebih dahulu'
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`feed_data.${idx}.feed_stock`}
+                          value={feed.feed_stock}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError('feed_data', 'feed_stock', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('feed_data', 'feed_stock', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
                         <td>
-                          <TextInput
-                            type='text'
-                            name={`feed_data.${idx}.feed_qty`}
-                            value={
-                              feed.feed_qty === '' ||
-                              feed.feed_qty === undefined
-                                ? ''
-                                : String(feed.feed_qty)
-                            }
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            readOnly={true}
-                            placeholder='Pilih pakan terlebih dahulu'
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeFeedData(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                            <FieldMessage message={null} isVisible={false} />
+                          </div>
                         </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`feed_data.${idx}.feed_stock`}
-                            value={feed.feed_stock}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'feed_data',
-                                'feed_stock',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'feed_data',
-                                'feed_stock',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeFeedData(idx)}
-                              >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
-                              </Button>
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedFeed.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedFeedData}
-                      disabled={selectedFeed.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Feed Data ({selectedFeed.length})
-                    </Button>
-                  )}
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedFeed.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addFeedData}
+                    color='error'
+                    onClick={removeSelectedFeedData}
+                    disabled={selectedFeed.length === 0}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Feed Data
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Feed Data ({selectedFeed.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addFeedData}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Feed Data
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Body Weight Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Berat Ayam</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-weight'
-                              checked={
-                                formik.values.body_weight?.length ===
-                                  selectedWeight.length &&
-                                formik.values.body_weight?.length > 0
+          <Card
+            title='Berat Ayam'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-weight'
+                            checked={
+                              formik.values.body_weight?.length ===
+                                selectedWeight.length &&
+                              formik.values.body_weight?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedWeight(
+                                  formik.values.body_weight?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedWeight([]);
                               }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Berat (Gram)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah Ayam
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Rata-rata berat Ayam
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.body_weight?.map((weight, idx) => (
+                    <tr key={`weight-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`weight-${idx}`}
+                              checked={selectedWeight.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedWeight(
-                                    formik.values.body_weight?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
+                                  setSelectedWeight([...selectedWeight, idx]);
                                 } else {
-                                  setSelectedWeight([]);
+                                  setSelectedWeight(
+                                    selectedWeight.filter((i) => i !== idx)
+                                  );
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
+                            <FieldMessage message={null} isVisible={false} />
                           </div>
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Berat (Gram)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Jumlah Ayam
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Rata-rata berat Ayam
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.body_weight?.map((weight, idx) => (
-                      <tr key={`weight-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`weight-${idx}`}
-                                checked={selectedWeight.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedWeight([...selectedWeight, idx]);
-                                  } else {
-                                    setSelectedWeight(
-                                      selectedWeight.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weight.${idx}.chicken_weight`}
+                          value={weight.chicken_weight}
+                          onChange={handleChickenWeightChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          maskType='weight'
+                          weightUnit='gram'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_weight',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_weight',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`body_weight.${idx}.chicken_count`}
+                          value={weight.chicken_count}
+                          onChange={handleChickenCountChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_count',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'body_weight',
+                              'chicken_count',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <div className='relative'>
                           <NumberInput
                             required
-                            name={`body_weight.${idx}.chicken_weight`}
-                            value={weight.chicken_weight}
-                            onChange={handleChickenWeightChangeWrapper(idx)}
+                            name={`body_weight.${idx}.average_chicken_weight`}
+                            value={weight.average_chicken_weight || ''}
+                            onChange={handleAverageWeightChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
                             maskType='weight'
                             weightUnit='gram'
@@ -1099,14 +1158,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isError={
                               isRepeaterInputError(
                                 'body_weight',
-                                'chicken_weight',
+                                'average_chicken_weight',
                                 idx
                               ).isError
                             }
                             errorMessage={
                               isRepeaterInputError(
                                 'body_weight',
-                                'chicken_weight',
+                                'average_chicken_weight',
                                 idx
                               ).errorMessage
                             }
@@ -1114,587 +1173,518 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             className={{
                               wrapper: 'w-full min-w-24',
                             }}
+                            placeholder=''
                           />
-                        </td>
+                        </div>
+                      </td>
+                      {type !== 'detail' && (
                         <td>
-                          <NumberInput
-                            required
-                            name={`body_weight.${idx}.chicken_count`}
-                            value={weight.chicken_count}
-                            onChange={handleChickenCountChangeWrapper(idx)}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'chicken_count',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'chicken_count',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <div className='relative'>
-                            <NumberInput
-                              required
-                              name={`body_weight.${idx}.average_chicken_weight`}
-                              value={weight.average_chicken_weight || ''}
-                              onChange={handleAverageWeightChangeWrapper(idx)}
-                              onBlur={formik.handleBlur}
-                              maskType='weight'
-                              weightUnit='gram'
-                              decimals={0}
-                              min={0}
-                              isError={
-                                isRepeaterInputError(
-                                  'body_weight',
-                                  'average_chicken_weight',
-                                  idx
-                                ).isError
-                              }
-                              errorMessage={
-                                isRepeaterInputError(
-                                  'body_weight',
-                                  'average_chicken_weight',
-                                  idx
-                                ).errorMessage
-                              }
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'w-full min-w-24',
-                              }}
-                              placeholder=''
-                            />
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeBodyWeight(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeBodyWeight(idx)}
-                              >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
-                              </Button>
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedWeight.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedBodyWeight}
-                      disabled={selectedWeight.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Body Weight ({selectedWeight.length})
-                    </Button>
-                  )}
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedWeight.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addBodyWeight}
+                    color='error'
+                    onClick={removeSelectedBodyWeight}
+                    disabled={selectedWeight.length === 0}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Body Weight Data
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Body Weight ({selectedWeight.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addBodyWeight}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Body Weight Data
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Vaccination Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Vaccination</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-vaccine'
-                              checked={
-                                formik.values.vaccination?.length ===
-                                  selectedVaccine.length &&
-                                formik.values.vaccination?.length > 0
+          <Card
+            title='Vaccination'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-vaccine'
+                            checked={
+                              formik.values.vaccination?.length ===
+                                selectedVaccine.length &&
+                              formik.values.vaccination?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedVaccine(
+                                  formik.values.vaccination?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedVaccine([]);
                               }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Name Vaksin
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Total Stock pada saat ini</th>
+                    <th>
+                      Jumlah Stock yang digunakan
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.vaccination?.map((vaccine, idx) => (
+                    <tr key={`vaccine-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`vaccine-${idx}`}
+                              checked={selectedVaccine.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
+                                  setSelectedVaccine([...selectedVaccine, idx]);
+                                } else {
                                   setSelectedVaccine(
-                                    formik.values.vaccination?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
+                                    selectedVaccine.filter((i) => i !== idx)
                                   );
-                                } else {
-                                  setSelectedVaccine([]);
                                 }
                               }}
                               naked={true}
                               size='sm'
                             />
+                            <FieldMessage message={null} isVisible={false} />
                           </div>
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Name Vaksin
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>Total Stock pada saat ini</th>
-                      <th>
-                        Jumlah Stock yang digunakan
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.vaccination?.map((vaccine, idx) => (
-                      <tr key={`vaccine-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`vaccine-${idx}`}
-                                checked={selectedVaccine.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedVaccine([
-                                      ...selectedVaccine,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedVaccine(
-                                      selectedVaccine.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={
-                              ovkOptions.find(
-                                (opt: OptionType) =>
-                                  Number(opt.value) ===
-                                  Number(vaccine.vaccine_id)
-                              ) ?? null
-                            }
-                            onChange={(val) => {
-                              const productWarehouseId =
-                                (val as OptionType)?.value ?? 0;
-                              const stock = productWarehouseId
-                                ? (ovkStockMap.get(
-                                    productWarehouseId as number
-                                  ) ?? '')
-                                : '';
-                              formik.setFieldValue(
-                                `vaccination.${idx}.vaccine`,
-                                val
-                              );
-                              formik.setFieldValue(
-                                `vaccination.${idx}.vaccine_id`,
-                                productWarehouseId || ''
-                              );
-                              formik.setFieldValue(
-                                `vaccination.${idx}.total_stock`,
-                                stock
-                              );
-                              formik.setFieldValue(
-                                `vaccination.${idx}.used_stock`,
-                                0
-                              );
-                              // Set touched after setting values to trigger validation
-                              setTimeout(() => {
-                                formik.setFieldTouched(
-                                  `vaccination.${idx}.vaccine`,
-                                  true
-                                );
-                                formik.setFieldTouched(
-                                  `vaccination.${idx}.vaccine_id`,
-                                  true
-                                );
-                              }, 0);
-                            }}
-                            options={ovkOptions}
-                            isLoading={isLoadingOvk}
-                            isError={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'vaccine_id',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'vaccine_id',
-                                idx
-                              ).errorMessage
-                            }
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            type='text'
-                            name={`vaccination.${idx}.total_stock`}
-                            value={
-                              vaccine.total_stock === '' ||
-                              vaccine.total_stock === undefined
-                                ? ''
-                                : String(vaccine.total_stock)
-                            }
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            readOnly={true}
-                            placeholder='Pilih vaksin terlebih dahulu'
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`vaccination.${idx}.used_stock`}
-                            value={vaccine.used_stock}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'used_stock',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'vaccination',
-                                'used_stock',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeVaccination(idx)}
-                              >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
-                              </Button>
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedVaccine.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedVaccination}
-                      disabled={selectedVaccine.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Vaccination ({selectedVaccine.length})
-                    </Button>
-                  )}
-                  <Button
-                    type='button'
-                    color='success'
-                    onClick={addVaccination}
-                    className='w-fit'
-                  >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Vaccination Data
-                  </Button>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Mortality Table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-4'>Mortalitas</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <div className='flex justify-center'>
-                            <CheckboxInput
-                              name='select-all-mortality'
-                              checked={
-                                formik.values.mortality?.length ===
-                                  selectedMortality.length &&
-                                formik.values.mortality?.length > 0
-                              }
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  setSelectedMortality(
-                                    formik.values.mortality?.map(
-                                      (_, idx) => idx
-                                    ) ?? []
-                                  );
-                                } else {
-                                  setSelectedMortality([]);
-                                }
-                              }}
-                              naked={true}
-                              size='sm'
-                            />
-                          </div>
-                        </th>
-                      )}
-                      <th>
-                        Kondisi/Alasan Mortalitas
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Jumlah
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Action</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.mortality?.map((mortality, idx) => (
-                      <tr key={`mortality-${idx}`}>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-center gap-2'>
-                              <CheckboxInput
-                                name={`mortality-${idx}`}
-                                checked={selectedMortality.includes(idx)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedMortality([
-                                      ...selectedMortality,
-                                      idx,
-                                    ]);
-                                  } else {
-                                    setSelectedMortality(
-                                      selectedMortality.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                naked={true}
-                                size='sm'
-                              />
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={RECORDING_FLAG_OPTIONS.find(
-                              (opt) => opt.value === mortality.condition
-                            )}
-                            onChange={(val) => {
+                      <td>
+                        <SelectInput
+                          required
+                          value={
+                            ovkOptions.find(
+                              (opt: OptionType) =>
+                                Number(opt.value) === Number(vaccine.vaccine_id)
+                            ) ?? null
+                          }
+                          onChange={(val) => {
+                            const productWarehouseId =
+                              (val as OptionType)?.value ?? 0;
+                            const stock = productWarehouseId
+                              ? (ovkStockMap.get(
+                                  productWarehouseId as number
+                                ) ?? '')
+                              : '';
+                            formik.setFieldValue(
+                              `vaccination.${idx}.vaccine`,
+                              val
+                            );
+                            formik.setFieldValue(
+                              `vaccination.${idx}.vaccine_id`,
+                              productWarehouseId || ''
+                            );
+                            formik.setFieldValue(
+                              `vaccination.${idx}.total_stock`,
+                              stock
+                            );
+                            formik.setFieldValue(
+                              `vaccination.${idx}.used_stock`,
+                              0
+                            );
+                            // Set touched after setting values to trigger validation
+                            setTimeout(() => {
                               formik.setFieldTouched(
-                                `mortality.${idx}.condition`,
+                                `vaccination.${idx}.vaccine`,
                                 true
                               );
-                              formik.setFieldValue(
-                                `mortality.${idx}.condition`,
-                                (val as OptionType)?.value
+                              formik.setFieldTouched(
+                                `vaccination.${idx}.vaccine_id`,
+                                true
                               );
-                            }}
-                            isError={
-                              isRepeaterInputError(
-                                'mortality',
-                                'condition',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'mortality',
-                                'condition',
-                                idx
-                              ).errorMessage
-                            }
-                            options={RECORDING_FLAG_OPTIONS}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
+                            }, 0);
+                          }}
+                          options={ovkOptions}
+                          isLoading={isLoadingOvk}
+                          isError={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'vaccine_id',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'vaccine_id',
+                              idx
+                            ).errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          type='text'
+                          name={`vaccination.${idx}.total_stock`}
+                          value={
+                            vaccine.total_stock === '' ||
+                            vaccine.total_stock === undefined
+                              ? ''
+                              : String(vaccine.total_stock)
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          readOnly={true}
+                          placeholder='Pilih vaksin terlebih dahulu'
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`vaccination.${idx}.used_stock`}
+                          value={vaccine.used_stock}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'used_stock',
+                              idx
+                            ).isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(
+                              'vaccination',
+                              'used_stock',
+                              idx
+                            ).errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
                         <td>
-                          <NumberInput
-                            required
-                            name={`mortality.${idx}.count`}
-                            value={mortality.count}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            maskType='number'
-                            decimals={0}
-                            min={0}
-                            isError={
-                              isRepeaterInputError('mortality', 'count', idx)
-                                .isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError('mortality', 'count', idx)
-                                .errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeVaccination(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                            <FieldMessage message={null} isVisible={false} />
+                          </div>
                         </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeMortality(idx)}
-                              >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
-                              </Button>
-                              <FieldMessage message={null} isVisible={false} />
-                            </div>
-                          </td>
-                        )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedMortality.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={removeSelectedMortality}
-                      disabled={selectedMortality.length === 0}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Delete Selected Mortality ({selectedMortality.length})
-                    </Button>
-                  )}
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedVaccine.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addMortality}
+                    color='error'
+                    onClick={removeSelectedVaccination}
+                    disabled={selectedVaccine.length === 0}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Add Mortality Data
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Vaccination ({selectedVaccine.length})
                   </Button>
-                </div>
-              )}
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addVaccination}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Vaccination Data
+                </Button>
+              </div>
+            )}
+          </Card>
+
+          {/* Mortality Table */}
+          <Card
+            title='Mortalitas'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <div className='flex justify-center'>
+                          <CheckboxInput
+                            name='select-all-mortality'
+                            checked={
+                              formik.values.mortality?.length ===
+                                selectedMortality.length &&
+                              formik.values.mortality?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedMortality(
+                                  formik.values.mortality?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedMortality([]);
+                              }
+                            }}
+                            naked={true}
+                            size='sm'
+                          />
+                        </div>
+                      </th>
+                    )}
+                    <th>
+                      Kondisi/Alasan Mortalitas
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Jumlah
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.mortality?.map((mortality, idx) => (
+                    <tr key={`mortality-${idx}`}>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-center gap-2'>
+                            <CheckboxInput
+                              name={`mortality-${idx}`}
+                              checked={selectedMortality.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedMortality([
+                                    ...selectedMortality,
+                                    idx,
+                                  ]);
+                                } else {
+                                  setSelectedMortality(
+                                    selectedMortality.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                            <FieldMessage message={null} isVisible={false} />
+                          </div>
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          required
+                          value={RECORDING_FLAG_OPTIONS.find(
+                            (opt) => opt.value === mortality.condition
+                          )}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `mortality.${idx}.condition`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `mortality.${idx}.condition`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          isError={
+                            isRepeaterInputError('mortality', 'condition', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('mortality', 'condition', idx)
+                              .errorMessage
+                          }
+                          options={RECORDING_FLAG_OPTIONS}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`mortality.${idx}.count`}
+                          value={mortality.count}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          maskType='number'
+                          decimals={0}
+                          min={0}
+                          isError={
+                            isRepeaterInputError('mortality', 'count', idx)
+                              .isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError('mortality', 'count', idx)
+                              .errorMessage
+                          }
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-24',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeMortality(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                            <FieldMessage message={null} isVisible={false} />
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
             </div>
-          </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedMortality.length > 0 && (
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={removeSelectedMortality}
+                    disabled={selectedMortality.length === 0}
+                    className='w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Delete Selected Mortality ({selectedMortality.length})
+                  </Button>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addMortality}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Add Mortality Data
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Action buttons */}
           <FormActions<RecordingFormValues>

From 575a317eed1e34c896d847f1901b258dc6766346 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 22 Oct 2025 15:31:59 +0700
Subject: [PATCH 55/68] refactor(FE-Storyless): update input components to
 ensure consistent background styling

---
 src/components/input/NumberInput.tsx | 58 ++++++++++++++++------------
 src/components/input/TextArea.tsx    |  2 +-
 src/components/input/TextInput.tsx   |  2 +-
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 1b5559ed..4d6a7393 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -397,20 +397,24 @@ const NumberInput = ({
       <div className='relative flex'>
         {/* Prefix Block */}
         {inputPrefix && (
-          <div className={cn(
-            'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
-            {
-              'bg-gray-100 border-gray-300': !disabled,
-              'bg-gray-50 border-gray-200': disabled,
-            }
-          )}>
-            <span className={cn(
-              'text-sm font-medium select-none whitespace-nowrap',
+          <div
+            className={cn(
+              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
               {
-                'text-gray-600': !disabled,
-                'text-gray-400': disabled,
+                'bg-gray-100 border-gray-300': !disabled,
+                'bg-gray-50 border-gray-200': disabled,
               }
-            )}>
+            )}
+          >
+            <span
+              className={cn(
+                'text-sm font-medium select-none whitespace-nowrap',
+                {
+                  'text-gray-600': !disabled,
+                  'text-gray-400': disabled,
+                }
+              )}
+            >
               {inputPrefix}
             </span>
           </div>
@@ -419,7 +423,7 @@ const NumberInput = ({
         {/* Input Wrapper */}
         <div
           className={cn(
-            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center',
+            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
             {
               'border-error': isError,
               'border-success!': isValid,
@@ -505,20 +509,24 @@ const NumberInput = ({
 
         {/* Suffix Block */}
         {inputSuffix && (
-          <div className={cn(
-            'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
-            {
-              'bg-gray-100 border-gray-300': !disabled,
-              'bg-gray-50 border-gray-200': disabled,
-            }
-          )}>
-            <span className={cn(
-              'text-sm font-medium select-none whitespace-nowrap',
+          <div
+            className={cn(
+              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
               {
-                'text-gray-600': !disabled,
-                'text-gray-400': disabled,
+                'bg-gray-100 border-gray-300': !disabled,
+                'bg-gray-50 border-gray-200': disabled,
               }
-            )}>
+            )}
+          >
+            <span
+              className={cn(
+                'text-sm font-medium select-none whitespace-nowrap',
+                {
+                  'text-gray-600': !disabled,
+                  'text-gray-400': disabled,
+                }
+              )}
+            >
               {inputSuffix}
             </span>
           </div>
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 802e469c..34644021 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -87,7 +87,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 20d99af2..1bd154b6 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -91,7 +91,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,

From 6687f4af987c038a5161f9c046aa4c641a415503 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 11:18:57 +0700
Subject: [PATCH 56/68] feat(FE-Storyless): add Badge component with
 customizable variants, colors, and sizes

---
 src/components/Badge.tsx | 80 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/components/Badge.tsx

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 00000000..5dc5022d
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface BadgeProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
+  children?: ReactNode;
+  className?: {
+    badge?: string;
+  };
+  variant?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
+  color?:
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const Badge = ({
+  children,
+  className,
+  variant = 'default',
+  color,
+  size = 'md',
+  ...props
+}: BadgeProps) => {
+  const getBadgeClasses = () => {
+    const baseClasses = 'badge';
+
+    const variantClasses = {
+      default: '',
+      outline: 'badge-outline',
+      ghost: 'badge-ghost',
+      soft: 'badge-soft',
+      dash: 'badge-dash',
+    };
+
+    const colorClasses = {
+      neutral: 'badge-neutral',
+      primary: 'badge-primary',
+      secondary: 'badge-secondary',
+      accent: 'badge-accent',
+      info: 'badge-info',
+      success: 'badge-success',
+      warning: 'badge-warning',
+      error: 'badge-error',
+    };
+
+    const sizeClasses = {
+      xs: 'badge-xs',
+      sm: 'badge-sm',
+      md: 'badge-md',
+      lg: 'badge-lg',
+      xl: 'badge-xl',
+    };
+
+    return cn(
+      baseClasses,
+      variantClasses[variant],
+      color && colorClasses[color],
+      sizeClasses[size],
+      className?.badge
+    );
+  };
+
+  return (
+    <span className={getBadgeClasses()} {...props}>
+      {children}
+    </span>
+  );
+};
+
+export default Badge;

From 7e53743b070d0b68e876e5fe77baa6e2fc2dbdf1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 13:14:16 +0700
Subject: [PATCH 57/68] refactor(FE-114): remove FieldMessage component usage
 and streamline error message handling in form inputs

---
 src/components/input/CheckboxInput.tsx        |  13 +-
 src/components/input/FileInput.tsx            |  14 +-
 src/components/input/NumberInput.tsx          | 376 +++++++-----------
 src/components/input/RadioInput.tsx           |  17 +-
 src/components/input/SelectInput.tsx          |  13 +-
 src/components/input/TagInput.tsx             |  14 +-
 src/components/input/TextArea.tsx             |  15 +-
 src/components/input/TextInput.tsx            |  17 +-
 .../inventory/movement/form/MovementForm.tsx  |   9 -
 .../recording/form/RecordingForm.tsx          |   9 -
 src/styles/daisyui.css                        |   4 +
 11 files changed, 196 insertions(+), 305 deletions(-)

diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
index 8ee202db..c3c5be0a 100644
--- a/src/components/input/CheckboxInput.tsx
+++ b/src/components/input/CheckboxInput.tsx
@@ -267,12 +267,13 @@ const CheckboxInput = ({
         </p>
       )}
 
-      {/* Field Message */}
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {/* Error Message or Bottom Label */}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 285a3f42..6218970c 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -2,7 +2,6 @@ import { Ref } from 'react';
 
 import { cn } from '@/lib/helper';
 import { TextInputProps } from '@/components/input/TextInput';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 interface FileInputProps
   extends Omit<
@@ -38,9 +37,6 @@ const FileInput = ({
   onBlur,
   readOnly = false,
 }: FileInputProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-
   return (
     <div
       className={cn(
@@ -80,11 +76,11 @@ const FileInput = ({
         readOnly={readOnly}
       />
 
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 4d6a7393..5710e932 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -11,67 +11,8 @@ import {
 
 import { Icon } from '@iconify/react';
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
-
-export interface NumberInputProps {
-  // Basic Props
-  label?: string;
-  bottomLabel?: string;
-  name: string;
-  value?: number | string;
-  placeholder?: string;
-
-  // Styling Props
-  className?: {
-    wrapper?: string;
-    label?: string;
-    inputWrapper?: string;
-    input?: string;
-  };
-
-  // State Props
-  isError?: boolean;
-  isValid?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  // Adornment Props
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  // Event Handlers
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  // Masking Options
-  maskType?: MaskType;
-  decimals?: number;
-  thousandSeparator?: string;
-  decimalSeparator?: string;
-  currencyPrefix?: string;
-  weightUnit?: string;
-
-  // Validation Props
-  min?: number;
-  max?: number;
-  allowNegative?: boolean;
-
-  // Stepper Options
-  showSteppers?: boolean;
-  step?: number;
-}
-
-// UTILITY FUNCTIONS
-/**
- * Core number formatting function
- * Formats number with thousand separator and decimal separator
- */
+// Utility Functions
 const formatNumber = (
   value: number | string,
   decimals: number = 0,
@@ -95,10 +36,6 @@ const formatNumber = (
     : integerPart;
 };
 
-/**
- * Parse formatted string to number
- * Converts formatted input back to raw number for processing
- */
 const parseNumber = (
   value: string,
   thousandSeparator: string = '.',
@@ -115,10 +52,26 @@ const parseNumber = (
   return isNaN(parsed) ? 0 : parsed;
 };
 
-/**
- * Clean and validate numeric input while typing
- * Ensures only valid characters are allowed
- */
+const formatCurrency = (
+  value: number | string,
+  prefix: string = 'Rp ',
+  decimals: number = 0
+): string => {
+  if (value === '' || value === null || value === undefined) return '';
+  const formatted = formatNumber(value, decimals);
+  return formatted ? `${prefix}${formatted}` : '';
+};
+
+const formatWeight = (
+  value: number | string,
+  unit: string = 'kg',
+  decimals: number = 2
+): string => {
+  if (value === '' || value === null || value === undefined) return '';
+  const formatted = formatNumber(value, decimals);
+  return formatted ? `${formatted} ${unit}` : '';
+};
+
 const cleanNumericInput = (
   value: string,
   allowDecimal: boolean = false,
@@ -146,6 +99,56 @@ const cleanNumericInput = (
   return cleaned;
 };
 
+// Types
+export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
+
+export interface NumberInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: number | string;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+
+  // Masking Options
+  maskType?: MaskType;
+  decimals?: number;
+  thousandSeparator?: string;
+  decimalSeparator?: string;
+
+  // Currency specific
+  currencyPrefix?: string;
+
+  // Weight specific
+  weightUnit?: string;
+
+  // Validation
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+
+  // Stepper (Increment/Decrement buttons)
+  showSteppers?: boolean;
+  step?: number;
+}
+
 const NumberInput = ({
   label,
   bottomLabel,
@@ -179,35 +182,20 @@ const NumberInput = ({
 }: NumberInputProps) => {
   const [displayValue, setDisplayValue] = useState<string>('');
 
-  // CONFIG & HELPERS
+  // Determine if decimals are allowed based on maskType
   const allowDecimal =
     maskType === 'decimal' || maskType === 'weight' || decimals > 0;
 
-  const getInputPrefix = (): string => {
-    switch (maskType) {
-      case 'currency':
-        return currencyPrefix;
-      default:
-        return '';
-    }
-  };
-
-  const getInputSuffix = (): string => {
-    switch (maskType) {
-      case 'weight':
-        return weightUnit;
-      default:
-        return '';
-    }
-  };
-
+  // Format value for display based on maskType
   const getFormattedValue = (rawValue: number | string): string => {
     if (rawValue === '' || rawValue === null || rawValue === undefined)
       return '';
 
     switch (maskType) {
       case 'currency':
+        return formatCurrency(rawValue, currencyPrefix, decimals);
       case 'weight':
+        return formatWeight(rawValue, weightUnit, decimals);
       case 'decimal':
       case 'number':
         return formatNumber(
@@ -221,14 +209,21 @@ const NumberInput = ({
     }
   };
 
-  // EFFECTS
+  // Initialize display value when value prop changes
   useEffect(() => {
     setDisplayValue(getFormattedValue(value || ''));
   }, [value]);
 
-  // EVENT HANDLERS
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
+    let inputValue = e.target.value;
+
+    // Remove prefix/suffix for editing
+    if (maskType === 'currency' && inputValue.startsWith(currencyPrefix)) {
+      inputValue = inputValue.slice(currencyPrefix.length);
+    }
+    if (maskType === 'weight' && inputValue.endsWith(` ${weightUnit}`)) {
+      inputValue = inputValue.slice(0, -weightUnit.length - 1);
+    }
 
     // Clean input
     const cleaned = cleanNumericInput(
@@ -267,6 +262,7 @@ const NumberInput = ({
 
     // Call onChange with modified event
     if (onChange) {
+      // Create a synthetic event with the numeric value
       const syntheticEvent = {
         ...e,
         target: {
@@ -280,6 +276,7 @@ const NumberInput = ({
     }
   };
 
+  // Handle Increment
   const handleIncrement = () => {
     if (disabled || readOnly) return;
 
@@ -317,6 +314,7 @@ const NumberInput = ({
     }
   };
 
+  // Handle Decrement
   const handleDecrement = () => {
     if (disabled || readOnly) return;
 
@@ -357,12 +355,6 @@ const NumberInput = ({
     }
   };
 
-  // RENDER CALCULATIONS
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-  const inputPrefix = getInputPrefix();
-  const inputSuffix = getInputSuffix();
-
   return (
     <div
       className={cn(
@@ -393,152 +385,84 @@ const NumberInput = ({
         </label>
       )}
 
-      {/* Input Container */}
-      <div className='relative flex'>
-        {/* Prefix Block */}
-        {inputPrefix && (
-          <div
+      <div
+        className={cn(
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
+        )}
+      >
+        {/* Decrement Button */}
+        {showSteppers && (
+          <button
+            type='button'
+            onClick={handleDecrement}
+            disabled={disabled || readOnly}
             className={cn(
-              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
               {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
+                'opacity-50 cursor-not-allowed': disabled || readOnly,
               }
             )}
+            tabIndex={-1}
           >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputPrefix}
-            </span>
+            <Icon icon='ic:round-minus' width={20} height={20} />
+          </button>
+        )}
+
+        {startAdornment && startAdornment}
+
+        <input
+          type='text'
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={displayValue}
+          onChange={handleInputChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          disabled={disabled}
+          className={cn('grow', className?.input)}
+          readOnly={readOnly}
+          inputMode='decimal'
+        />
+
+        {(isLoading || endAdornment) && (
+          <div className='flex flex-row gap-2'>
+            {isLoading && <span className='loading loading-spinner' />}
+
+            {endAdornment && endAdornment}
           </div>
         )}
 
-        {/* Input Wrapper */}
-        <div
-          className={cn(
-            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-              'rounded-l-none!': inputPrefix,
-              'rounded-r-none!': inputSuffix,
-              'input-disabled': disabled,
-              'cursor-not-allowed': disabled,
-              'bg-gray-50': disabled,
-            },
-            className?.inputWrapper
-          )}
-        >
-          {/* Stepper Buttons */}
-          {showSteppers && (
-            <button
-              type='button'
-              onClick={handleDecrement}
-              disabled={disabled || readOnly}
-              className={cn(
-                'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
-                {
-                  'opacity-50 cursor-not-allowed': disabled || readOnly,
-                }
-              )}
-              tabIndex={-1}
-            >
-              <Icon icon='ic:round-minus' width={20} height={20} />
-            </button>
-          )}
-
-          {/* Start Adornment */}
-          {startAdornment && startAdornment}
-
-          {/* Main Input */}
-          <input
-            type='text'
-            id={name}
-            name={name}
-            placeholder={placeholder}
-            value={displayValue}
-            onChange={handleInputChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            disabled={disabled}
+        {/* Increment Button */}
+        {showSteppers && (
+          <button
+            type='button'
+            onClick={handleIncrement}
+            disabled={disabled || readOnly}
             className={cn(
-              'grow bg-transparent outline-none',
+              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
               {
-                'cursor-not-allowed': disabled,
-                'text-gray-500': disabled,
-              },
-              className?.input
-            )}
-            readOnly={readOnly}
-            inputMode='decimal'
-          />
-
-          {/* End Adornment & Loading */}
-          {(isLoading || endAdornment) && (
-            <div className='flex flex-row gap-2'>
-              {isLoading && <span className='loading loading-spinner' />}
-              {endAdornment && endAdornment}
-            </div>
-          )}
-
-          {/* Increment Button */}
-          {showSteppers && (
-            <button
-              type='button'
-              onClick={handleIncrement}
-              disabled={disabled || readOnly}
-              className={cn(
-                'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
-                {
-                  'opacity-50 cursor-not-allowed': disabled || readOnly,
-                }
-              )}
-              tabIndex={-1}
-            >
-              <Icon icon='ic:round-plus' width={20} height={20} />
-            </button>
-          )}
-        </div>
-
-        {/* Suffix Block */}
-        {inputSuffix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
+                'opacity-50 cursor-not-allowed': disabled || readOnly,
               }
             )}
+            tabIndex={-1}
           >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputSuffix}
-            </span>
-          </div>
+            <Icon icon='ic:round-plus' width={20} height={20} />
+          </button>
         )}
       </div>
 
-      {/* Field Message */}
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/input/RadioInput.tsx b/src/components/input/RadioInput.tsx
index 65589258..71a731aa 100644
--- a/src/components/input/RadioInput.tsx
+++ b/src/components/input/RadioInput.tsx
@@ -2,7 +2,6 @@
 
 import { ChangeEventHandler, ReactNode } from 'react';
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface RadioOption {
   label: string;
@@ -48,8 +47,6 @@ const RadioInput = ({
   onChange,
   onBlur,
 }: RadioInputProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
   return (
     <div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
       {/* Label atas */}
@@ -100,11 +97,15 @@ const RadioInput = ({
         ))}
       </div>
 
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {/* Label bawah */}
+      {!isError && bottomLabel && (
+        <p className='text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {/* Pesan error */}
+      {isError && errorMessage && (
+        <p className='text-sm text-error'>{errorMessage}</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 9caf2e17..28eb9786 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -12,7 +12,6 @@ import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface OptionType {
   value: string | number;
@@ -118,9 +117,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     }
   };
 
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-
   return (
     <div
       className={cn(
@@ -218,11 +214,10 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/input/TagInput.tsx b/src/components/input/TagInput.tsx
index 11407ada..a14b2f63 100644
--- a/src/components/input/TagInput.tsx
+++ b/src/components/input/TagInput.tsx
@@ -2,7 +2,6 @@
 
 import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TagInputProps {
   label?: string;
@@ -74,9 +73,6 @@ const TagInput: React.FC<TagInputProps> = ({
     setInputValue(e.target.value);
   };
 
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-
   return (
     <div
       className={cn(
@@ -161,11 +157,11 @@ const TagInput: React.FC<TagInputProps> = ({
         )}
       </div>
 
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {/* Bottom label or error message */}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 34644021..6e93811c 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -3,7 +3,6 @@
 import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TextAreaProps {
   label?: string;
@@ -51,9 +50,6 @@ const TextArea = ({
   isLoading = false,
   rows = 3,
 }: TextAreaProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-
   return (
     <div
       className={cn(
@@ -87,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
           {
             'border-error': isError,
             'border-success!': isValid,
@@ -113,11 +109,10 @@ const TextArea = ({
         </div>
       )}
 
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 1bd154b6..eec312c1 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -8,7 +8,6 @@ import {
 } from 'react';
 
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TextInputProps {
   type?: HTMLInputTypeAttribute;
@@ -56,9 +55,6 @@ const TextInput = ({
   readOnly = false,
   isLoading = false,
 }: TextInputProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-
   return (
     <div
       className={cn(
@@ -91,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,
@@ -123,11 +119,12 @@ const TextInput = ({
         )}
       </div>
 
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 57d0a585..711b7d20 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -29,7 +29,6 @@ import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
-import FieldMessage from '@/components/helper/FieldMessage';
 import CheckboxInput from '@/components/input/CheckboxInput';
 
 interface MovementFormProps {
@@ -910,7 +909,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 naked={true}
                                 size='sm'
                               />
-                              <FieldMessage message={null} isVisible={false} />
                             </div>
                           </td>
                         )}
@@ -1006,7 +1004,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   height={24}
                                 />
                               </Button>
-                              <FieldMessage message={null} isVisible={false} />
                             </div>
                           </td>
                         )}
@@ -1174,7 +1171,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 naked={true}
                                 size='sm'
                               />
-                              <FieldMessage message={null} isVisible={false} />
                             </div>
                           </td>
                         )}
@@ -1323,10 +1319,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     '-'
                                   )}
                                 </Button>
-                                <FieldMessage
-                                  message={null}
-                                  isVisible={false}
-                                />
                               </div>
                             </>
                           ) : (
@@ -1444,7 +1436,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   height={24}
                                 />
                               </Button>
-                              <FieldMessage message={null} isVisible={false} />
                             </div>
                           </td>
                         )}
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 8c166700..c654f2ba 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -30,7 +30,6 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { LocationApi } from '@/services/api/master-data';
-import FieldMessage from '@/components/helper/FieldMessage';
 import Card from '@/components/Card';
 
 interface RecordingFormProps {
@@ -829,7 +828,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               naked={true}
                               size='sm'
                             />
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
@@ -948,7 +946,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 height={24}
                               />
                             </Button>
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
@@ -1078,7 +1075,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               naked={true}
                               size='sm'
                             />
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
@@ -1191,7 +1187,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 height={24}
                               />
                             </Button>
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
@@ -1313,7 +1308,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               naked={true}
                               size='sm'
                             />
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
@@ -1448,7 +1442,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 height={24}
                               />
                             </Button>
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
@@ -1572,7 +1565,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               naked={true}
                               size='sm'
                             />
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
@@ -1646,7 +1638,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 height={24}
                               />
                             </Button>
-                            <FieldMessage message={null} isVisible={false} />
                           </div>
                         </td>
                       )}
diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css
index 9a148fb4..dadaa2fa 100644
--- a/src/styles/daisyui.css
+++ b/src/styles/daisyui.css
@@ -8,4 +8,8 @@
     --step-bg: var(--color-error);
     --step-fg: var(--color-error-content);
   }
+
+  .table :where(th, td) {
+    vertical-align: top;
+  }
 }

From 2de32dc944f29053e8895b5b6453831ecc8ab868 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 13:49:43 +0700
Subject: [PATCH 58/68] refactor(FE-114): simplify CheckboxInput component and
 enhance styling options

---
 src/components/input/CheckboxInput.tsx        | 294 +++---------------
 .../inventory/movement/form/MovementForm.tsx  |  44 ++-
 .../recording/form/RecordingForm.tsx          | 123 +++++---
 3 files changed, 157 insertions(+), 304 deletions(-)

diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
index c3c5be0a..fb0c95c7 100644
--- a/src/components/input/CheckboxInput.tsx
+++ b/src/components/input/CheckboxInput.tsx
@@ -1,279 +1,87 @@
 'use client';
 
-import { ChangeEventHandler, FocusEventHandler, ReactNode, useId } from 'react';
-
+import { HTMLProps, useEffect, useRef } from 'react';
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
-export interface CheckboxInputProps {
-  // Basic Props
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
   name: string;
   label?: string;
-  bottomLabel?: string;
-  checked?: boolean;
-  value?: string | number;
   indeterminate?: boolean;
-  naked?: boolean; // New prop for checkbox-only mode
-
-  // Styling Props
-  className?: {
+  classNames?: {
     wrapper?: string;
-    label?: string;
+    inputWrapper?: string;
     checkbox?: string;
-    input?: string;
+    label?: string;
   };
-
-  // State Props
   isError?: boolean;
   isValid?: boolean;
   errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  // Adornment Props
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  // Event Handlers
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  // Additional Props
-  tooltip?: string;
-  description?: string;
-  size?: 'sm' | 'md' | 'lg';
-  variant?:
-    | 'default'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'warning'
-    | 'info'
-    | 'error';
 }
 
 const CheckboxInput = ({
+  indeterminate,
   name,
   label,
-  bottomLabel,
-  checked = false,
-  value,
-  indeterminate = false,
-  naked = false,
   className,
+  classNames,
+  isValid,
   isError,
   errorMessage,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  isLoading = false,
-  startAdornment,
-  endAdornment,
-  onChange,
-  onBlur,
-  onFocus,
-  tooltip,
-  description,
-  size = 'md',
-  variant = 'default',
+  ...rest
 }: CheckboxInputProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+  const ref = useRef<HTMLInputElement>(null!);
 
-  // Size classes
-  const sizeClasses = {
-    sm: 'checkbox-sm',
-    md: 'checkbox-md',
-    lg: 'checkbox-lg',
-  };
-
-  // Variant classes
-  const variantClasses = {
-    default: '',
-    primary: 'checkbox-primary',
-    secondary: 'checkbox-secondary',
-    success: 'checkbox-success',
-    warning: 'checkbox-warning',
-    info: 'checkbox-info',
-    error: 'checkbox-error',
-  };
-
-  // Generate unique ID for accessibility using React's useId hook for SSR compatibility
-  const generatedId = useId();
-  const checkboxId = `checkbox-${name}-${generatedId}`;
-
-  // Naked mode - only checkbox, no wrapper structure
-  if (naked) {
-    return (
-      <div className='relative'>
-        <input
-          type='checkbox'
-          id={checkboxId}
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={onChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          disabled={disabled}
-          readOnly={readOnly}
-          className={cn(
-            'checkbox',
-            sizeClasses[size],
-            variantClasses[variant],
-            {
-              'opacity-50 cursor-not-allowed': disabled,
-              'cursor-pointer': !disabled && !readOnly,
-            },
-            className?.checkbox
-          )}
-          ref={(input) => {
-            if (input) {
-              input.indeterminate = indeterminate;
-            }
-          }}
-        />
-
-        {/* Loading State */}
-        {isLoading && (
-          <div className='absolute inset-0 flex items-center justify-center'>
-            <span className='loading loading-spinner loading-xs opacity-50' />
-          </div>
-        )}
-      </div>
-    );
-  }
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
 
   return (
     <div
-      className={cn(
-        'w-full flex flex-col gap-2 text-start',
-        className?.wrapper
-      )}
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
     >
-      {/* Label with Tooltip Support */}
-      {label && (
-        <label
-          htmlFor={checkboxId}
+      <div
+        className={cn(
+          'flex flex-row justify-center items-center gap-2',
+          classNames?.inputWrapper
+        )}
+      >
+        <input
+          type='checkbox'
+          ref={ref}
+          id={name}
+          name={name}
           className={cn(
-            'w-full text-sm font-normal leading-5 flex items-start gap-2',
+            'checkbox cursor-pointer',
             {
-              'text-error': isError,
-              'text-gray-500': disabled,
+              'border-error': isError,
+              'border-success': isValid,
             },
-            className?.label
+            className,
+            classNames?.checkbox
           )}
-        >
-          {/* Checkbox */}
-          <div className='flex items-center gap-2'>
-            {/* Start Adornment */}
-            {startAdornment && (
-              <span className={cn({ 'opacity-50': disabled })}>
-                {startAdornment}
-              </span>
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
             )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
 
-            {/* Checkbox Input */}
-            <div className='relative'>
-              <input
-                type='checkbox'
-                id={checkboxId}
-                name={name}
-                value={value}
-                checked={checked}
-                onChange={onChange}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                disabled={disabled}
-                readOnly={readOnly}
-                className={cn(
-                  'checkbox',
-                  sizeClasses[size],
-                  variantClasses[variant],
-                  {
-                    'opacity-50 cursor-not-allowed': disabled,
-                    'cursor-pointer': !disabled && !readOnly,
-                  },
-                  className?.checkbox
-                )}
-                ref={(input) => {
-                  if (input) {
-                    input.indeterminate = indeterminate;
-                  }
-                }}
-              />
-
-              {/* Loading State */}
-              {isLoading && (
-                <div className='absolute inset-0 flex items-center justify-center'>
-                  <span className='loading loading-spinner loading-xs opacity-50' />
-                </div>
-              )}
-            </div>
-
-            {/* Label Text */}
-            <span
-              className={cn('flex-1', {
-                'line-through opacity-50': disabled,
-              })}
-            >
-              {label}
-              {required && (
-                <>
-                  {' '}
-                  <span
-                    className={cn('tooltip', {
-                      'tooltip-error': isError,
-                      'tooltip-base': !isError,
-                    })}
-                    data-tip={tooltip || 'required'}
-                  >
-                    <span
-                      className={cn('text-xs font-bold', {
-                        'text-error': isError,
-                        'text-base-content/70': !isError,
-                      })}
-                    >
-                      *
-                    </span>
-                  </span>
-                </>
-              )}
-            </span>
-
-            {/* End Adornment */}
-            {endAdornment && (
-              <span className={cn({ 'opacity-50': disabled })}>
-                {endAdornment}
-              </span>
-            )}
-          </div>
-        </label>
-      )}
-
-      {/* Description */}
-      {description && (
-        <p
-          className={cn('text-xs leading-4', {
-            'text-gray-500': !isError,
-            'text-error': isError,
-            'opacity-50': disabled,
-          })}
-        >
-          {description}
-        </p>
-      )}
-
-      {/* Error Message or Bottom Label */}
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
     </div>
   );
 };
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 711b7d20..d2c91168 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -847,7 +847,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   selectedProducts.length &&
                                 formik.values.products?.length > 0
                               }
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedProducts(
                                     formik.values.products?.map(
@@ -858,8 +860,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   setSelectedProducts([]);
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </th>
@@ -890,11 +894,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-center gap-2'>
+                            <div className='flex justify-center'>
                               <CheckboxInput
                                 name={`product-${idx}`}
                                 checked={selectedProducts.includes(idx)}
-                                onChange={(e) => {
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>
+                                ) => {
                                   if (e.target.checked) {
                                     setSelectedProducts([
                                       ...selectedProducts,
@@ -906,8 +912,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
-                                naked={true}
-                                size='sm'
+                                classNames={{
+                                  wrapper: 'flex justify-center',
+                                  checkbox: 'checkbox checkbox-sm',
+                                }}
                               />
                             </div>
                           </td>
@@ -1061,7 +1069,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   selectedDeliveries.length &&
                                 formik.values.deliveries?.length > 0
                               }
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedDeliveries(
                                     formik.values.deliveries?.map(
@@ -1072,8 +1082,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   setSelectedDeliveries([]);
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </th>
@@ -1150,11 +1162,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
+                            <div className='flex justify-center'>
                               <CheckboxInput
                                 name={`delivery-${idx}`}
                                 checked={selectedDeliveries.includes(idx)}
-                                onChange={(e) => {
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>
+                                ) => {
                                   if (e.target.checked) {
                                     setSelectedDeliveries([
                                       ...selectedDeliveries,
@@ -1168,8 +1182,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
-                                naked={true}
-                                size='sm'
+                                classNames={{
+                                  wrapper: 'flex justify-center',
+                                  checkbox: 'checkbox checkbox-sm',
+                                }}
                               />
                             </div>
                           </td>
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index c654f2ba..2735a7e9 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -760,29 +760,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
-                          <CheckboxInput
-                            name='select-all-feed'
-                            checked={
-                              formik.values.feed_data?.length ===
-                                selectedFeed.length &&
-                              formik.values.feed_data?.length > 0
+                        <CheckboxInput
+                          name='select-all-feed'
+                          checked={
+                            formik.values.feed_data?.length ===
+                              selectedFeed.length &&
+                            formik.values.feed_data?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedFeed(
+                                formik.values.feed_data?.map((_, idx) => idx) ??
+                                  []
+                              );
+                            } else {
+                              setSelectedFeed([]);
                             }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedFeed(
-                                  formik.values.feed_data?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedFeed([]);
-                              }
-                            }}
-                            naked={true}
-                            size='sm'
-                          />
-                        </div>
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
                       </th>
                     )}
                     <th>
@@ -812,11 +813,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`feed-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`feed-${idx}`}
                               checked={selectedFeed.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedFeed([...selectedFeed, idx]);
                                 } else {
@@ -825,8 +828,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>
@@ -1007,7 +1012,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedWeight.length &&
                               formik.values.body_weight?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
                               if (e.target.checked) {
                                 setSelectedWeight(
                                   formik.values.body_weight?.map(
@@ -1018,8 +1025,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedWeight([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </div>
                       </th>
@@ -1059,11 +1068,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`weight-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`weight-${idx}`}
                               checked={selectedWeight.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedWeight([...selectedWeight, idx]);
                                 } else {
@@ -1072,8 +1083,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>
@@ -1248,7 +1261,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedVaccine.length &&
                               formik.values.vaccination?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
                               if (e.target.checked) {
                                 setSelectedVaccine(
                                   formik.values.vaccination?.map(
@@ -1259,8 +1274,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedVaccine([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </div>
                       </th>
@@ -1292,11 +1309,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`vaccine-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`vaccine-${idx}`}
                               checked={selectedVaccine.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedVaccine([...selectedVaccine, idx]);
                                 } else {
@@ -1305,8 +1324,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>
@@ -1503,7 +1524,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedMortality.length &&
                               formik.values.mortality?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
                               if (e.target.checked) {
                                 setSelectedMortality(
                                   formik.values.mortality?.map(
@@ -1514,8 +1537,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedMortality([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </div>
                       </th>
@@ -1546,11 +1571,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`mortality-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`mortality-${idx}`}
                               checked={selectedMortality.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedMortality([
                                     ...selectedMortality,
@@ -1562,8 +1589,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>

From e6f5b2493bd13566fc11e2ab151625a1fd9b1b33 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 13:51:34 +0700
Subject: [PATCH 59/68] refactor(FE-Storyless): update input components to
 include consistent background styling

---
 src/components/input/NumberInput.tsx | 2 +-
 src/components/input/TextArea.tsx    | 2 +-
 src/components/input/TextInput.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 5710e932..2afe7e55 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -387,7 +387,7 @@ const NumberInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 6e93811c..03bf7c0b 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -83,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index eec312c1..43797637 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -87,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,

From e801ba08ad7b7274e2f303ddfa58567aaf0f2aa0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 15:09:39 +0700
Subject: [PATCH 60/68] chore(FE-114): add inputmask and its type definitions
 to package.json

---
 package-lock.json | 27 ++++++++++++++++++++++++++-
 package.json      |  2 ++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index a39060ef..4a583dbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "axios": "^1.12.2",
         "clsx": "^2.1.1",
         "formik": "^2.4.6",
+        "inputmask": "^5.0.9",
         "moment": "^2.30.1",
         "next": "15.5.3",
         "react": "19.1.0",
@@ -29,6 +30,7 @@
         "@eslint/eslintrc": "^3",
         "@iconify/react": "^6.0.2",
         "@tailwindcss/postcss": "^4",
+        "@types/inputmask": "^5.0.7",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1640,6 +1642,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/inputmask": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@types/inputmask/-/inputmask-5.0.7.tgz",
+      "integrity": "sha512-uojbVPWzBQ/n/0jc/d16fLqmGasFIptbrLD2WrCPWArlk+5PgblOqH4EDkI3AoobXLAlOK5yF01V8jMmvMG5qg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1675,6 +1684,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
       "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1744,6 +1754,7 @@
       "integrity": "sha512-B7RIQiTsCBBmY+yW4+ILd6mF5h1FUwJsVvpqkrgpszYifetQ2Ke+Z4u6aZh0CblkUGIdR59iYVyXqqZGkZ3aBw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.43.0",
         "@typescript-eslint/types": "8.43.0",
@@ -2261,6 +2272,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2829,7 +2841,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/daisyui": {
       "version": "5.1.12",
@@ -3263,6 +3276,7 @@
       "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3437,6 +3451,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4229,6 +4244,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inputmask": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/inputmask/-/inputmask-5.0.9.tgz",
+      "integrity": "sha512-s0lUfqcEbel+EQXtehXqwCJGShutgieOaIImFKC/r4reYNvX3foyrChl6LOEvaEgxEbesePIrw1Zi2jhZaDZbQ==",
+      "license": "MIT"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -5766,6 +5787,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5775,6 +5797,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -6591,6 +6614,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6758,6 +6782,7 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index e970499c..70e5737f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "formik": "^2.4.6",
+    "inputmask": "^5.0.9",
     "moment": "^2.30.1",
     "next": "15.5.3",
     "react": "19.1.0",
@@ -31,6 +32,7 @@
     "@eslint/eslintrc": "^3",
     "@iconify/react": "^6.0.2",
     "@tailwindcss/postcss": "^4",
+    "@types/inputmask": "^5.0.7",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

From ae967c5ddb863582c6ce7db8aa5b271c4df2050e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 16:00:24 +0700
Subject: [PATCH 61/68] refactor(FE-114): integrate inputmask for enhanced
 numeric input handling and validation

---
 src/components/input/NumberInput.tsx | 617 ++++++++++++---------------
 1 file changed, 281 insertions(+), 336 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 2afe7e55..96c7f446 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -6,101 +6,47 @@ import {
   FocusEventHandler,
   ReactNode,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 
-import { Icon } from '@iconify/react';
 import { cn } from '@/lib/helper';
+import Inputmask from 'inputmask';
 
-// Utility Functions
-const formatNumber = (
-  value: number | string,
-  decimals: number = 0,
-  thousandSeparator: string = '.',
-  decimalSeparator: string = ','
-): string => {
-  if (value === '' || value === null || value === undefined) return '';
+const createInputMask = (
+  maskType: MaskType,
+  decimals: number,
+  thousandSeparator: string,
+  decimalSeparator: string,
+  allowNegative: boolean,
+  oncomplete?: () => void,
+  onincomplete?: () => void,
+  oncleared?: () => void
+): Inputmask.Instance => {
+  const options: Inputmask.Options = {
+    alias: 'numeric',
+    groupSeparator: thousandSeparator,
+    radixPoint: decimalSeparator,
+    digits: decimals,
+    allowMinus: allowNegative,
+    rightAlign: false,
+    insertMode: true,
+    autoUnmask: false,
+    clearMaskOnLostFocus: false,
+    digitsOptional: decimals > 0,
+    placeholder: '0',
+    numericInput: false,
+    positionCaretOnClick: 'radixFocus',
+    greedy: true,
+    oncomplete,
+    onincomplete,
+    oncleared
+  };
 
-  const numValue = typeof value === 'string' ? parseFloat(value) : value;
-  if (isNaN(numValue)) return '';
-
-  const parts = numValue.toFixed(decimals).split('.');
-  const integerPart = parts[0].replace(
-    /\B(?=(\d{3})+(?!\d))/g,
-    thousandSeparator
-  );
-  const decimalPart = parts[1];
-
-  return decimals > 0 && decimalPart
-    ? `${integerPart}${decimalSeparator}${decimalPart}`
-    : integerPart;
+  return new Inputmask(options);
 };
 
-const parseNumber = (
-  value: string,
-  thousandSeparator: string = '.',
-  decimalSeparator: string = ','
-): number => {
-  if (!value) return 0;
-
-  // Remove thousand separators and replace decimal separator with dot
-  const cleaned = value
-    .replace(new RegExp(`\\${thousandSeparator}`, 'g'), '')
-    .replace(decimalSeparator, '.');
-
-  const parsed = parseFloat(cleaned);
-  return isNaN(parsed) ? 0 : parsed;
-};
-
-const formatCurrency = (
-  value: number | string,
-  prefix: string = 'Rp ',
-  decimals: number = 0
-): string => {
-  if (value === '' || value === null || value === undefined) return '';
-  const formatted = formatNumber(value, decimals);
-  return formatted ? `${prefix}${formatted}` : '';
-};
-
-const formatWeight = (
-  value: number | string,
-  unit: string = 'kg',
-  decimals: number = 2
-): string => {
-  if (value === '' || value === null || value === undefined) return '';
-  const formatted = formatNumber(value, decimals);
-  return formatted ? `${formatted} ${unit}` : '';
-};
-
-const cleanNumericInput = (
-  value: string,
-  allowDecimal: boolean = false,
-  decimalSeparator: string = ','
-): string => {
-  // Only allow numbers, decimal separator (if allowed), and minus sign at the start
-  let cleaned = value.replace(/[^\d,.-]/g, '');
-
-  // Handle decimal separator
-  if (allowDecimal) {
-    const parts = cleaned.split(decimalSeparator);
-    if (parts.length > 2) {
-      // Keep only first decimal separator
-      cleaned = parts[0] + decimalSeparator + parts.slice(1).join('');
-    }
-  } else {
-    cleaned = cleaned.replace(new RegExp(decimalSeparator, 'g'), '');
-  }
-
-  // Handle minus sign (only at start)
-  const hasMinusAtStart = cleaned.startsWith('-');
-  cleaned = cleaned.replace(/-/g, '');
-  if (hasMinusAtStart) cleaned = '-' + cleaned;
-
-  return cleaned;
-};
-
-// Types
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number';
+export type MaskType = 'currency' | 'weight' | 'decimal' | 'number' | 'text';
 
 export interface NumberInputProps {
   label?: string;
@@ -108,252 +54,188 @@ export interface NumberInputProps {
   name: string;
   value?: number | string;
   placeholder?: string;
+
   className?: {
     wrapper?: string;
     label?: string;
     inputWrapper?: string;
     input?: string;
   };
+
   isError?: boolean;
   isValid?: boolean;
+  errorMessage?: string;
   disabled?: boolean;
   readOnly?: boolean;
   required?: boolean;
   isLoading?: boolean;
-  errorMessage?: string;
+
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
+
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
 
-  // Masking Options
   maskType?: MaskType;
   decimals?: number;
   thousandSeparator?: string;
   decimalSeparator?: string;
-
-  // Currency specific
   currencyPrefix?: string;
-
-  // Weight specific
   weightUnit?: string;
 
-  // Validation
   min?: number;
   max?: number;
   allowNegative?: boolean;
 
-  // Stepper (Increment/Decrement buttons)
-  showSteppers?: boolean;
-  step?: number;
+  oncomplete?: () => void;
+  onincomplete?: () => void;
+  oncleared?: () => void;
 }
 
 const NumberInput = ({
-  label,
-  bottomLabel,
-  name,
-  value,
-  placeholder,
-  className,
-  isError,
-  isValid,
-  errorMessage,
-  startAdornment,
-  endAdornment,
-  disabled = false,
-  required = false,
-  onChange,
-  onBlur,
-  onFocus,
-  readOnly = false,
-  isLoading = false,
-  maskType = 'number',
-  decimals = 0,
-  thousandSeparator = '.',
-  decimalSeparator = ',',
-  currencyPrefix = 'Rp ',
-  weightUnit = 'kg',
-  min,
-  max,
-  allowNegative = false,
-  showSteppers = false,
-  step = 1,
-}: NumberInputProps) => {
-  const [displayValue, setDisplayValue] = useState<string>('');
-
-  // Determine if decimals are allowed based on maskType
-  const allowDecimal =
-    maskType === 'decimal' || maskType === 'weight' || decimals > 0;
-
-  // Format value for display based on maskType
-  const getFormattedValue = (rawValue: number | string): string => {
-    if (rawValue === '' || rawValue === null || rawValue === undefined)
-      return '';
+                       label,
+                       bottomLabel,
+                       name,
+                       value,
+                       placeholder,
+                       className,
+                       isError,
+                       isValid,
+                       errorMessage,
+                       startAdornment,
+                       endAdornment,
+                       disabled = false,
+                       required = false,
+                       onChange,
+                       onBlur,
+                       onFocus,
+                       readOnly = false,
+                       isLoading = false,
+                       maskType = 'number',
+                       decimals = 0,
+                       thousandSeparator = '.',
+                       decimalSeparator = ',',
+                       currencyPrefix = 'Rp ',
+                       weightUnit = 'kg',
+                       allowNegative = false,
+                       oncomplete,
+                       onincomplete,
+                       oncleared,
+                     }: NumberInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputmaskRef = useRef<Inputmask.Instance | null>(null);
+  const [maskComplete, setMaskComplete] = useState<boolean>(false);
+  const [maskIncomplete, setMaskIncomplete] = useState<boolean>(false);
+  const [maskCleared, setMaskCleared] = useState<boolean>(false);
 
+  const getInputPrefix = (): string => {
     switch (maskType) {
       case 'currency':
-        return formatCurrency(rawValue, currencyPrefix, decimals);
-      case 'weight':
-        return formatWeight(rawValue, weightUnit, decimals);
-      case 'decimal':
-      case 'number':
-        return formatNumber(
-          rawValue,
-          decimals,
-          thousandSeparator,
-          decimalSeparator
-        );
+        return currencyPrefix;
       default:
-        return String(rawValue);
+        return '';
+    }
+  };
+
+  const getInputSuffix = (): string => {
+    switch (maskType) {
+      case 'weight':
+        return weightUnit;
+      default:
+        return '';
     }
   };
 
-  // Initialize display value when value prop changes
   useEffect(() => {
-    setDisplayValue(getFormattedValue(value || ''));
+    if (inputRef.current && !readOnly && !disabled) {
+      if (inputmaskRef.current) {
+        try {
+          inputmaskRef.current.remove();
+        } catch (error) {
+          console.warn('Error removing Inputmask:', error);
+        }
+      }
+
+      const handleComplete = () => {
+        setMaskComplete(true);
+        setMaskIncomplete(false);
+        setMaskCleared(false);
+        if (oncomplete) oncomplete();
+      };
+
+      const handleIncomplete = () => {
+        setMaskIncomplete(true);
+        setMaskComplete(false);
+        setMaskCleared(false);
+        if (onincomplete) onincomplete();
+      };
+
+      const handleCleared = () => {
+        setMaskCleared(true);
+        setMaskComplete(false);
+        setMaskIncomplete(false);
+        if (oncleared) oncleared();
+      };
+
+      const im = createInputMask(
+        maskType,
+        decimals,
+        thousandSeparator,
+        decimalSeparator,
+        allowNegative,
+        handleComplete,
+        handleIncomplete,
+        handleCleared
+      );
+
+      try {
+        im.mask(inputRef.current);
+        inputmaskRef.current = im;
+      } catch (error) {
+        console.warn('Error applying Inputmask:', error);
+        inputmaskRef.current = null;
+      }
+    }
+
+    return () => {
+      if (inputmaskRef.current) {
+        try {
+          inputmaskRef.current.remove();
+        } catch (error) {
+          console.warn('Error removing Inputmask on cleanup:', error);
+        }
+      }
+    };
+  }, [maskType, decimals, thousandSeparator, decimalSeparator, allowNegative, readOnly, disabled, oncomplete, onincomplete, oncleared]);
+
+  useEffect(() => {
+    if (inputRef.current && value !== undefined) {
+      if (value === null || value === '') {
+        inputRef.current.value = '';
+      } else {
+        inputRef.current.value = String(value);
+      }
+    }
   }, [value]);
 
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    let inputValue = e.target.value;
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const currentValue = (e.currentTarget as HTMLInputElement).value;
+    console.log('✅ After format:', currentValue);
 
-    // Remove prefix/suffix for editing
-    if (maskType === 'currency' && inputValue.startsWith(currencyPrefix)) {
-      inputValue = inputValue.slice(currencyPrefix.length);
-    }
-    if (maskType === 'weight' && inputValue.endsWith(` ${weightUnit}`)) {
-      inputValue = inputValue.slice(0, -weightUnit.length - 1);
-    }
-
-    // Clean input
-    const cleaned = cleanNumericInput(
-      inputValue,
-      allowDecimal,
-      decimalSeparator
-    );
-
-    // Parse to number
-    let numericValue = parseNumber(
-      cleaned,
-      thousandSeparator,
-      decimalSeparator
-    );
-
-    // Apply validation
-    if (!allowNegative && numericValue < 0) {
-      numericValue = 0;
-    }
-    if (min !== undefined && numericValue < min) {
-      numericValue = min;
-    }
-    if (max !== undefined && numericValue > max) {
-      numericValue = max;
-    }
-
-    // Update display value
-    const formattedForDisplay = formatNumber(
-      numericValue,
-      decimals,
-      thousandSeparator,
-      decimalSeparator
-    );
-
-    setDisplayValue(formattedForDisplay);
-
-    // Call onChange with modified event
-    if (onChange) {
-      // Create a synthetic event with the numeric value
-      const syntheticEvent = {
-        ...e,
-        target: {
-          ...e.target,
-          name,
-          value: numericValue.toString(),
-        },
-      } as ChangeEvent<HTMLInputElement>;
-
-      onChange(syntheticEvent);
-    }
-  };
-
-  // Handle Increment
-  const handleIncrement = () => {
-    if (disabled || readOnly) return;
-
-    const currentValue = parseNumber(
-      displayValue,
-      thousandSeparator,
-      decimalSeparator
-    );
-    let newValue = currentValue + step;
-
-    // Apply max validation
-    if (max !== undefined && newValue > max) {
-      newValue = max;
-    }
-
-    // Update display
-    const formattedForDisplay = formatNumber(
-      newValue,
-      decimals,
-      thousandSeparator,
-      decimalSeparator
-    );
-    setDisplayValue(formattedForDisplay);
-
-    // Call onChange with synthetic event
     if (onChange) {
       const syntheticEvent = {
         target: {
           name,
-          value: newValue.toString(),
+          value: currentValue,
         },
       } as ChangeEvent<HTMLInputElement>;
-
       onChange(syntheticEvent);
     }
   };
 
-  // Handle Decrement
-  const handleDecrement = () => {
-    if (disabled || readOnly) return;
-
-    const currentValue = parseNumber(
-      displayValue,
-      thousandSeparator,
-      decimalSeparator
-    );
-    let newValue = currentValue - step;
-
-    // Apply min validation (prevent negative if not allowed)
-    if (!allowNegative && newValue < 0) {
-      newValue = 0;
-    }
-    if (min !== undefined && newValue < min) {
-      newValue = min;
-    }
-
-    // Update display
-    const formattedForDisplay = formatNumber(
-      newValue,
-      decimals,
-      thousandSeparator,
-      decimalSeparator
-    );
-    setDisplayValue(formattedForDisplay);
-
-    // Call onChange with synthetic event
-    if (onChange) {
-      const syntheticEvent = {
-        target: {
-          name,
-          value: newValue.toString(),
-        },
-      } as ChangeEvent<HTMLInputElement>;
-
-      onChange(syntheticEvent);
-    }
-  };
+  const inputPrefix = getInputPrefix();
+  const inputSuffix = getInputSuffix();
 
   return (
     <div
@@ -385,78 +267,140 @@ const NumberInput = ({
         </label>
       )}
 
-      <div
-        className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
-          {
-            'border-error': isError,
-            'border-success!': isValid,
-          },
-          className?.inputWrapper
-        )}
-      >
-        {/* Decrement Button */}
-        {showSteppers && (
-          <button
-            type='button'
-            onClick={handleDecrement}
-            disabled={disabled || readOnly}
+      <div className='relative flex'>
+        {inputPrefix && (
+          <div
             className={cn(
-              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
+              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
               {
-                'opacity-50 cursor-not-allowed': disabled || readOnly,
+                'bg-gray-100 border-gray-300': !disabled,
+                'bg-gray-50 border-gray-200': disabled,
               }
             )}
-            tabIndex={-1}
           >
-            <Icon icon='ic:round-minus' width={20} height={20} />
-          </button>
-        )}
-
-        {startAdornment && startAdornment}
-
-        <input
-          type='text'
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={displayValue}
-          onChange={handleInputChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={disabled}
-          className={cn('grow', className?.input)}
-          readOnly={readOnly}
-          inputMode='decimal'
-        />
-
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-
-            {endAdornment && endAdornment}
+            <span
+              className={cn(
+                'text-sm font-medium select-none whitespace-nowrap',
+                {
+                  'text-gray-600': !disabled,
+                  'text-gray-400': disabled,
+                }
+              )}
+            >
+              {inputPrefix}
+            </span>
           </div>
         )}
 
-        {/* Increment Button */}
-        {showSteppers && (
-          <button
-            type='button'
-            onClick={handleIncrement}
-            disabled={disabled || readOnly}
+        <div
+          className={cn(
+            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
+            {
+              'border-error': isError,
+              'border-success!': isValid,
+              'rounded-l-none!': inputPrefix,
+              'rounded-r-none!': inputSuffix,
+              'input-disabled': disabled,
+              'cursor-not-allowed': disabled,
+              'bg-gray-50': disabled,
+            },
+            className?.inputWrapper
+          )}
+        >
+          {startAdornment && startAdornment}
+
+          <input
+            type='text'
+            id={name}
+            name={name}
+            ref={inputRef}
+            placeholder={placeholder || '0'}
+            onKeyUp={handleKeyUp}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            disabled={disabled}
             className={cn(
-              'btn btn-ghost btn-sm h-8 w-8 min-h-0 p-0 rounded-md',
+              'grow bg-transparent outline-none',
               {
-                'opacity-50 cursor-not-allowed': disabled || readOnly,
+                'cursor-not-allowed': disabled,
+                'text-gray-500': disabled,
+              },
+              className?.input
+            )}
+            readOnly={readOnly}
+            inputMode='text'
+            autoComplete='off'
+            spellCheck={false}
+          />
+
+          {(isLoading || endAdornment) && (
+            <div className='flex flex-row gap-2'>
+              {isLoading && <span className='loading loading-spinner' />}
+              {endAdornment && endAdornment}
+            </div>
+          )}
+        </div>
+
+        {inputSuffix && (
+          <div
+            className={cn(
+              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
+              {
+                'bg-gray-100 border-gray-300': !disabled,
+                'bg-gray-50 border-gray-200': disabled,
               }
             )}
-            tabIndex={-1}
           >
-            <Icon icon='ic:round-plus' width={20} height={20} />
-          </button>
+            <span
+              className={cn(
+                'text-sm font-medium select-none whitespace-nowrap',
+                {
+                  'text-gray-600': !disabled,
+                  'text-gray-400': disabled,
+                }
+              )}
+            >
+              {inputSuffix}
+            </span>
+          </div>
         )}
       </div>
 
+      {(maskType === 'text' || (oncomplete || onincomplete || oncleared)) && (
+        <div className='flex gap-2 text-xs'>
+          <span
+            className={cn(
+              'px-2 py-1 rounded transition-all duration-200',
+              maskComplete
+                ? 'bg-green-100 text-green-700 border border-green-200'
+                : 'bg-gray-50 text-gray-400 border border-gray-200'
+            )}
+          >
+            Complete
+          </span>
+          <span
+            className={cn(
+              'px-2 py-1 rounded transition-all duration-200',
+              maskIncomplete
+                ? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
+                : 'bg-gray-50 text-gray-400 border border-gray-200'
+            )}
+          >
+            Incomplete
+          </span>
+          <span
+            className={cn(
+              'px-2 py-1 rounded transition-all duration-200',
+              maskCleared
+                ? 'bg-blue-100 text-blue-700 border border-blue-200'
+                : 'bg-gray-50 text-gray-400 border border-gray-200'
+            )}
+          >
+            Cleared
+          </span>
+        </div>
+      )}
+
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
@@ -468,3 +412,4 @@ const NumberInput = ({
 };
 
 export default NumberInput;
+

From 90ae7c469a9cfbc81b071a03a26c82f4153d6ba4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 16:48:55 +0700
Subject: [PATCH 62/68] refactor(FE-114): swap thousand and decimal separators
 for improved usability

---
 src/components/input/NumberInput.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 96c7f446..5b2188ee 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -114,8 +114,8 @@ const NumberInput = ({
                        isLoading = false,
                        maskType = 'number',
                        decimals = 0,
-                       thousandSeparator = '.',
-                       decimalSeparator = ',',
+                       thousandSeparator = ',',
+                       decimalSeparator = '.',
                        currencyPrefix = 'Rp ',
                        weightUnit = 'kg',
                        allowNegative = false,
@@ -178,11 +178,11 @@ const NumberInput = ({
         if (oncleared) oncleared();
       };
 
-      const im = createInputMask(
+          const im = createInputMask(
         maskType,
         decimals,
-        thousandSeparator,
-        decimalSeparator,
+        ',',
+        '.',
         allowNegative,
         handleComplete,
         handleIncomplete,

From 3cf8f4c89b35dd8b0ba52978e5eee5ea94bb7aba Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 16:49:32 +0700
Subject: [PATCH 63/68] refactor(FE-114): enhance numeric input handling for
 chicken weight and count with improved formatting

---
 .../production/recording/form/RecordingForm.tsx    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 2735a7e9..120cddb8 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -487,7 +487,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // Create wrapper handlers that match NumberInput's onChange signature
   const handleChickenWeightChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value) || 0;
+      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
       handleChickenWeightChange(idx, value);
     },
     [handleChickenWeightChange]
@@ -495,7 +495,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleChickenCountChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value) || 0;
+      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
       handleChickenCountChange(idx, value);
     },
     [handleChickenCountChange]
@@ -503,7 +503,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleAverageWeightChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value) || 0;
+      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
       handleAverageWeightChange(idx, value);
     },
     [handleAverageWeightChange]
@@ -1100,8 +1100,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           onBlur={formik.handleBlur}
                           maskType='weight'
                           weightUnit='gram'
-                          decimals={0}
+                          decimals={2}
                           min={0}
+                          thousandSeparator=','
+                          decimalSeparator='.'
                           isError={
                             isRepeaterInputError(
                               'body_weight',
@@ -1162,8 +1164,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             onBlur={formik.handleBlur}
                             maskType='weight'
                             weightUnit='gram'
-                            decimals={0}
+                            decimals={2}
                             min={0}
+                            thousandSeparator=','
+                            decimalSeparator='.'
                             isError={
                               isRepeaterInputError(
                                 'body_weight',

From 3f76cb58fe5edbf3edc62de8a8a9a911463e7e6a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 17:15:17 +0700
Subject: [PATCH 64/68] refactor(FE-114): improve alignment and styling of
 checkbox inputs in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 48 ++++++++-----------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 120cddb8..45f0cbf5 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -812,19 +812,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.feed_data?.map((feed, idx) => (
                     <tr key={`feed-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className="!align-middle">
                             <CheckboxInput
                               name={`feed-${idx}`}
                               checked={selectedFeed.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
+                                e: React.ChangeEvent<HTMLInputElement>,
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedFeed([...selectedFeed, idx]);
                                 } else {
                                   setSelectedFeed(
-                                    selectedFeed.filter((i) => i !== idx)
+                                    selectedFeed.filter((i) => i !== idx),
                                   );
                                 }
                               }}
@@ -833,11 +832,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
-                        <SelectInput
+                      <SelectInput
                           required
                           value={
                             pakanOptions.find(
@@ -1004,7 +1002,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
+                        <div className='flex justify-center items-center h-full'>
                           <CheckboxInput
                             name='select-all-weight'
                             checked={
@@ -1026,7 +1024,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               }
                             }}
                             classNames={{
-                              wrapper: 'flex justify-center',
+                              wrapper: 'flex justify-center items-center h-full',
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
@@ -1067,8 +1065,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.body_weight?.map((weight, idx) => (
                     <tr key={`weight-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className='!align-middle'>
                             <CheckboxInput
                               name={`weight-${idx}`}
                               checked={selectedWeight.includes(idx)}
@@ -1084,11 +1081,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 }
                               }}
                               classNames={{
-                                wrapper: 'flex justify-center',
+                                wrapper: 'flex justify-center items-center',
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
@@ -1257,7 +1253,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
+                        <div className='flex justify-center items-center h-full'>
                           <CheckboxInput
                             name='select-all-vaccine'
                             checked={
@@ -1279,7 +1275,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               }
                             }}
                             classNames={{
-                              wrapper: 'flex justify-center',
+                              wrapper: 'flex justify-center items-center h-full',
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
@@ -1312,19 +1308,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.vaccination?.map((vaccine, idx) => (
                     <tr key={`vaccine-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className="!align-middle">
                             <CheckboxInput
                               name={`vaccine-${idx}`}
                               checked={selectedVaccine.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
+                                e: React.ChangeEvent<HTMLInputElement>,
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedVaccine([...selectedVaccine, idx]);
                                 } else {
                                   setSelectedVaccine(
-                                    selectedVaccine.filter((i) => i !== idx)
+                                    selectedVaccine.filter((i) => i !== idx),
                                   );
                                 }
                               }}
@@ -1333,11 +1328,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
-                        <SelectInput
+                      <SelectInput
                           required
                           value={
                             ovkOptions.find(
@@ -1520,7 +1514,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
+                        <div className='flex justify-center items-center h-full'>
                           <CheckboxInput
                             name='select-all-mortality'
                             checked={
@@ -1542,7 +1536,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               }
                             }}
                             classNames={{
-                              wrapper: 'flex justify-center',
+                              wrapper: 'flex justify-center items-center h-full',
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
@@ -1574,13 +1568,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   {formik.values.mortality?.map((mortality, idx) => (
                     <tr key={`mortality-${idx}`}>
                       {type !== 'detail' && (
-                        <td>
-                          <div className='flex justify-center'>
+                        <td className="!align-middle">
                             <CheckboxInput
                               name={`mortality-${idx}`}
                               checked={selectedMortality.includes(idx)}
                               onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
+                                e: React.ChangeEvent<HTMLInputElement>,
                               ) => {
                                 if (e.target.checked) {
                                   setSelectedMortality([
@@ -1589,7 +1582,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   ]);
                                 } else {
                                   setSelectedMortality(
-                                    selectedMortality.filter((i) => i !== idx)
+                                    selectedMortality.filter((i) => i !== idx),
                                   );
                                 }
                               }}
@@ -1598,11 +1591,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                          </div>
                         </td>
                       )}
                       <td>
-                        <SelectInput
+                      <SelectInput
                           required
                           value={RECORDING_FLAG_OPTIONS.find(
                             (opt) => opt.value === mortality.condition

From e76d881d8a9a699d14e008005fe8e44a6e2daf2d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 23 Oct 2025 20:00:42 +0700
Subject: [PATCH 65/68] refactor(FE-114): add foreign key fields to enhance
 data relationships in project-flock type definitions

---
 src/types/api/production/project-flock.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 7561e9ca..ce4043c4 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -10,11 +10,16 @@ export type BaseProjectFlock = {
   name: string;
   status: string;
   flock: Flock;
+  flock_id: number;
   area: Area;
+  area_id: number;
   category: string;
   fcr: Fcr;
+  fcr_id: number;
   location: Location;
+  location_id: number;
   period: number;
+  kandang_ids: number[];
   kandangs: Kandang[];
 };
 

From 16823fa84a8d4c01a7e361c53a1ebb99d5cddb09 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 09:00:29 +0700
Subject: [PATCH 66/68] refactor(FE-114): implement custom handlers for
 vaccination stock and mortality count input parsing

---
 .../recording/form/RecordingForm.tsx          | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 45f0cbf5..b9136262 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -509,6 +509,22 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     [handleAverageWeightChange]
   );
 
+  const handleVaccinationStockChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+      formik.setFieldValue(`vaccination.${idx}.used_stock`, value);
+    },
+    [formik]
+  );
+
+  const handleMortalityCountChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+      formik.setFieldValue(`mortality.${idx}.count`, value);
+    },
+    [formik]
+  );
+
   const removeBodyWeight = (idx: number) => {
     const updatedBodyWeight = formik.values.body_weight?.filter(
       (_, i) => i !== idx
@@ -1422,7 +1438,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           required
                           name={`vaccination.${idx}.used_stock`}
                           value={vaccine.used_stock}
-                          onChange={formik.handleChange}
+                          onChange={handleVaccinationStockChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
                           maskType='number'
                           decimals={0}
@@ -1630,7 +1646,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           required
                           name={`mortality.${idx}.count`}
                           value={mortality.count}
-                          onChange={formik.handleChange}
+                          onChange={handleMortalityCountChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
                           maskType='number'
                           decimals={0}

From a9b0c084f87f846de8237e37ddd85efca63b1671 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 09:15:01 +0700
Subject: [PATCH 67/68] refactor(FE-114): update input handling for vaccination
 stock, mortality count, and feed stock with improved parsing and formatting

---
 .../recording/form/RecordingForm.tsx          | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index b9136262..99b6ad00 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -511,7 +511,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleVaccinationStockChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
       formik.setFieldValue(`vaccination.${idx}.used_stock`, value);
     },
     [formik]
@@ -519,7 +519,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleMortalityCountChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
       formik.setFieldValue(`mortality.${idx}.count`, value);
     },
     [formik]
@@ -596,6 +596,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     setSelectedMortality([]);
   };
 
+  const handleFeedStockChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      formik.setFieldValue(`feed_data.${idx}.feed_stock`, value);
+    },
+    [formik]
+  );
+
   // HELPER FUNCTIONS
   const isRepeaterInputError = <
     T extends 'feed_data' | 'body_weight' | 'vaccination' | 'mortality',
@@ -916,7 +924,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           value={
                             feed.feed_qty === '' || feed.feed_qty === undefined
                               ? ''
-                              : String(feed.feed_qty)
+                              : Number(feed.feed_qty).toLocaleString('en-US')
                           }
                           onChange={formik.handleChange}
                           onBlur={formik.handleBlur}
@@ -932,11 +940,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           required
                           name={`feed_data.${idx}.feed_stock`}
                           value={feed.feed_stock}
-                          onChange={formik.handleChange}
+                          onChange={handleFeedStockChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
                           maskType='number'
                           decimals={0}
                           min={0}
+                          thousandSeparator=','
+                          decimalSeparator=''
                           isError={
                             isRepeaterInputError('feed_data', 'feed_stock', idx)
                               .isError
@@ -1422,7 +1432,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             vaccine.total_stock === '' ||
                             vaccine.total_stock === undefined
                               ? ''
-                              : String(vaccine.total_stock)
+                              : Number(vaccine.total_stock).toLocaleString('en-US')
                           }
                           onChange={formik.handleChange}
                           onBlur={formik.handleBlur}
@@ -1443,6 +1453,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           maskType='number'
                           decimals={0}
                           min={0}
+                          thousandSeparator=','
+                          decimalSeparator=''
                           isError={
                             isRepeaterInputError(
                               'vaccination',
@@ -1651,6 +1663,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           maskType='number'
                           decimals={0}
                           min={0}
+                          thousandSeparator=','
+                          decimalSeparator=''
                           isError={
                             isRepeaterInputError('mortality', 'count', idx)
                               .isError

From 4381e42aaf66b292bad0189afad8e4a37ebbb4a0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 09:24:28 +0700
Subject: [PATCH 68/68] refactor(FE-114): update input handling for vaccination
 stock, mortality count, and feed stock with improved parsing and formatting

---
 src/components/helper/FieldMessage.tsx        |   65 -
 .../recording/form/RecordingForm.tsx          | 1412 ++++++++---------
 2 files changed, 706 insertions(+), 771 deletions(-)
 delete mode 100644 src/components/helper/FieldMessage.tsx

diff --git a/src/components/helper/FieldMessage.tsx b/src/components/helper/FieldMessage.tsx
deleted file mode 100644
index e43d0a63..00000000
--- a/src/components/helper/FieldMessage.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-
-import { cn } from '@/lib/helper';
-
-type FieldMessageTone = 'error' | 'info' | 'success';
-
-export interface FieldMessageProps {
-  message?: ReactNode;
-  tone?: FieldMessageTone;
-  isVisible?: boolean;
-  persistent?: boolean;
-  className?: string;
-  ariaLive?: 'off' | 'polite' | 'assertive';
-}
-
-const toneClassName: Record<FieldMessageTone, string> = {
-  error: 'text-error',
-  info: 'text-base-content/60',
-  success: 'text-success',
-};
-
-/**
- * Shared helper to render bottom field feedback without causing layout shift.
- * Keeps a minimal slot height, but expands when the content wraps onto multiple lines.
- */
-export const FieldMessage = ({
-  message,
-  tone = 'info',
-  isVisible,
-  persistent = true,
-  className,
-  ariaLive,
-}: FieldMessageProps) => {
-  const hasMessage = Boolean(message);
-  const visible = isVisible ?? hasMessage;
-  const liveRegion = ariaLive ?? (tone === 'error' ? 'assertive' : 'polite');
-
-  return (
-    <div
-      aria-live={liveRegion}
-      aria-hidden={!visible && !hasMessage}
-      className={cn(
-        'relative w-full text-sm leading-5 transition-[opacity,transform] duration-150 ease-out',
-        persistent && 'min-h-[1.25rem]',
-        className
-      )}
-    >
-      <span
-        className={cn(
-          'block whitespace-pre-line',
-          toneClassName[tone],
-          visible
-            ? 'opacity-100 translate-y-0'
-            : 'opacity-0 -translate-y-1 pointer-events-none'
-        )}
-      >
-        {visible || persistent ? (message ?? '\u00A0') : message}
-      </span>
-    </div>
-  );
-};
-
-export default FieldMessage;
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 99b6ad00..4d8ef9ca 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -214,9 +214,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const flockOptions = isResponseSuccess(projectFlocks)
     ? projectFlocks.data.map((flock) => ({
-        value: flock.id,
-        label: flock.flock.name,
-      }))
+      value: flock.id,
+      label: flock.flock.name,
+    }))
     : [];
 
   const coopOptions = useMemo(() => {
@@ -698,8 +698,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 value={
                   formik.values.recording_date instanceof Date
                     ? formik.values.recording_date
-                        .toISOString()
-                        .substring(0, 10)
+                      .toISOString()
+                      .substring(0, 10)
                     : ''
                 }
                 onChange={(e) => {
@@ -781,26 +781,74 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                        <CheckboxInput
-                          name='select-all-feed'
-                          checked={
-                            formik.values.feed_data?.length ===
-                              selectedFeed.length &&
-                            formik.values.feed_data?.length > 0
+                <tr>
+                  {type !== 'detail' && (
+                    <th>
+                      <CheckboxInput
+                        name='select-all-feed'
+                        checked={
+                          formik.values.feed_data?.length ===
+                          selectedFeed.length &&
+                          formik.values.feed_data?.length > 0
+                        }
+                        onChange={(
+                          e: React.ChangeEvent<HTMLInputElement>
+                        ) => {
+                          if (e.target.checked) {
+                            setSelectedFeed(
+                              formik.values.feed_data?.map((_, idx) => idx) ??
+                              []
+                            );
+                          } else {
+                            setSelectedFeed([]);
                           }
+                        }}
+                        classNames={{
+                          wrapper: 'flex justify-center',
+                          checkbox: 'checkbox checkbox-sm',
+                        }}
+                      />
+                    </th>
+                  )}
+                  <th>
+                    Nama Pakan
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
+                        <span className='text-error'>*</span>
+                      </span>
+                  </th>
+                  <th>Total Stock pada saat ini</th>
+                  <th>
+                    Jumlah Stock yang digunakan
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
+                        <span className='text-error'>*</span>
+                      </span>
+                  </th>
+                  {type !== 'detail' && <th>Action</th>}
+                </tr>
+                </thead>
+                <tbody>
+                {formik.values.feed_data?.map((feed, idx) => (
+                  <tr key={`feed-${idx}`}>
+                    {type !== 'detail' && (
+                      <td className="!align-middle">
+                        <CheckboxInput
+                          name={`feed-${idx}`}
+                          checked={selectedFeed.includes(idx)}
                           onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
+                            e: React.ChangeEvent<HTMLInputElement>,
                           ) => {
                             if (e.target.checked) {
-                              setSelectedFeed(
-                                formik.values.feed_data?.map((_, idx) => idx) ??
-                                  []
-                              );
+                              setSelectedFeed([...selectedFeed, idx]);
                             } else {
-                              setSelectedFeed([]);
+                              setSelectedFeed(
+                                selectedFeed.filter((i) => i !== idx),
+                              );
                             }
                           }}
                           classNames={{
@@ -808,178 +856,130 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </th>
+                      </td>
                     )}
-                    <th>
-                      Nama Pakan
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>Total Stock pada saat ini</th>
-                    <th>
-                      Jumlah Stock yang digunakan
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
-                </thead>
-                <tbody>
-                  {formik.values.feed_data?.map((feed, idx) => (
-                    <tr key={`feed-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className="!align-middle">
-                            <CheckboxInput
-                              name={`feed-${idx}`}
-                              checked={selectedFeed.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>,
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedFeed([...selectedFeed, idx]);
-                                } else {
-                                  setSelectedFeed(
-                                    selectedFeed.filter((i) => i !== idx),
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                        </td>
-                      )}
-                      <td>
+                    <td>
                       <SelectInput
-                          required
-                          value={
-                            pakanOptions.find(
-                              (opt: OptionType) =>
-                                Number(opt.value) === Number(feed.feed_id)
-                            ) ?? null
-                          }
-                          onChange={(val) => {
-                            const productWarehouseId =
-                              (val as OptionType)?.value ?? 0;
-                            const stock = productWarehouseId
-                              ? (pakanStockMap.get(
-                                  productWarehouseId as number
-                                ) ?? '')
-                              : '';
+                        required
+                        value={
+                          pakanOptions.find(
+                            (opt: OptionType) =>
+                              Number(opt.value) === Number(feed.feed_id)
+                          ) ?? null
+                        }
+                        onChange={(val) => {
+                          const productWarehouseId =
+                            (val as OptionType)?.value ?? 0;
+                          const stock = productWarehouseId
+                            ? (pakanStockMap.get(
+                              productWarehouseId as number
+                            ) ?? '')
+                            : '';
 
-                            formik.setFieldValue(`feed_data.${idx}.feed`, val);
-                            formik.setFieldValue(
+                          formik.setFieldValue(`feed_data.${idx}.feed`, val);
+                          formik.setFieldValue(
+                            `feed_data.${idx}.feed_id`,
+                            productWarehouseId || ''
+                          );
+                          formik.setFieldValue(
+                            `feed_data.${idx}.feed_qty`,
+                            stock
+                          );
+                          formik.setFieldValue(
+                            `feed_data.${idx}.feed_stock`,
+                            0
+                          );
+                          setTimeout(() => {
+                            formik.setFieldTouched(
+                              `feed_data.${idx}.feed`,
+                              true
+                            );
+                            formik.setFieldTouched(
                               `feed_data.${idx}.feed_id`,
-                              productWarehouseId || ''
+                              true
                             );
-                            formik.setFieldValue(
-                              `feed_data.${idx}.feed_qty`,
-                              stock
-                            );
-                            formik.setFieldValue(
-                              `feed_data.${idx}.feed_stock`,
-                              0
-                            );
-                            setTimeout(() => {
-                              formik.setFieldTouched(
-                                `feed_data.${idx}.feed`,
-                                true
-                              );
-                              formik.setFieldTouched(
-                                `feed_data.${idx}.feed_id`,
-                                true
-                              );
-                            }, 0);
-                          }}
-                          options={pakanOptions}
-                          isLoading={isLoadingPakan}
-                          isError={
-                            isRepeaterInputError('feed_data', 'feed_id', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('feed_data', 'feed_id', idx)
-                              .errorMessage
-                          }
-                          isDisabled={type === 'detail'}
-                          isClearable
-                          className={{
-                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                          }}
-                        />
-                      </td>
+                          }, 0);
+                        }}
+                        options={pakanOptions}
+                        isLoading={isLoadingPakan}
+                        isError={
+                          isRepeaterInputError('feed_data', 'feed_id', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('feed_data', 'feed_id', idx)
+                            .errorMessage
+                        }
+                        isDisabled={type === 'detail'}
+                        isClearable
+                        className={{
+                          wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        type='text'
+                        name={`feed_data.${idx}.feed_qty`}
+                        value={
+                          feed.feed_qty === '' || feed.feed_qty === undefined
+                            ? ''
+                            : Number(feed.feed_qty).toLocaleString('en-US')
+                        }
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        readOnly={true}
+                        placeholder='Pilih pakan terlebih dahulu'
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`feed_data.${idx}.feed_stock`}
+                        value={feed.feed_stock}
+                        onChange={handleFeedStockChangeWrapper(idx)}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator=''
+                        isError={
+                          isRepeaterInputError('feed_data', 'feed_stock', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('feed_data', 'feed_stock', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    {type !== 'detail' && (
                       <td>
-                        <TextInput
-                          type='text'
-                          name={`feed_data.${idx}.feed_qty`}
-                          value={
-                            feed.feed_qty === '' || feed.feed_qty === undefined
-                              ? ''
-                              : Number(feed.feed_qty).toLocaleString('en-US')
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          readOnly={true}
-                          placeholder='Pilih pakan terlebih dahulu'
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
+                        <div className='flex flex-col items-start gap-2'>
+                          <Button
+                            type='button'
+                            color='error'
+                            onClick={() => removeFeedData(idx)}
+                          >
+                            <Icon
+                              icon='material-symbols:delete-outline-rounded'
+                              width={24}
+                              height={24}
+                            />
+                          </Button>
+                        </div>
                       </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`feed_data.${idx}.feed_stock`}
-                          value={feed.feed_stock}
-                          onChange={handleFeedStockChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
-                          thousandSeparator=','
-                          decimalSeparator=''
-                          isError={
-                            isRepeaterInputError('feed_data', 'feed_stock', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('feed_data', 'feed_stock', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeFeedData(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
+                    )}
+                  </tr>
+                ))}
                 </tbody>
               </table>
             </div>
@@ -1025,100 +1025,164 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                        <div className='flex justify-center items-center h-full'>
-                          <CheckboxInput
-                            name='select-all-weight'
-                            checked={
-                              formik.values.body_weight?.length ===
-                                selectedWeight.length &&
-                              formik.values.body_weight?.length > 0
+                <tr>
+                  {type !== 'detail' && (
+                    <th>
+                      <div className='flex justify-center items-center h-full'>
+                        <CheckboxInput
+                          name='select-all-weight'
+                          checked={
+                            formik.values.body_weight?.length ===
+                            selectedWeight.length &&
+                            formik.values.body_weight?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedWeight(
+                                formik.values.body_weight?.map(
+                                  (_, idx) => idx
+                                ) ?? []
+                              );
+                            } else {
+                              setSelectedWeight([]);
                             }
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              if (e.target.checked) {
-                                setSelectedWeight(
-                                  formik.values.body_weight?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedWeight([]);
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center items-center h-full',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </div>
-                      </th>
-                    )}
-                    <th>
-                      Berat (Gram)
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center items-center h-full',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </div>
+                    </th>
+                  )}
+                  <th>
+                    Berat (Gram)
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>
-                      Jumlah Ayam
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                  </th>
+                  <th>
+                    Jumlah Ayam
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>
-                      Rata-rata berat Ayam
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                  </th>
+                  <th>
+                    Rata-rata berat Ayam
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
+                  </th>
+                  {type !== 'detail' && <th>Action</th>}
+                </tr>
                 </thead>
                 <tbody>
-                  {formik.values.body_weight?.map((weight, idx) => (
-                    <tr key={`weight-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className='!align-middle'>
-                            <CheckboxInput
-                              name={`weight-${idx}`}
-                              checked={selectedWeight.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedWeight([...selectedWeight, idx]);
-                                } else {
-                                  setSelectedWeight(
-                                    selectedWeight.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center items-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                        </td>
-                      )}
-                      <td>
+                {formik.values.body_weight?.map((weight, idx) => (
+                  <tr key={`weight-${idx}`}>
+                    {type !== 'detail' && (
+                      <td className='!align-middle'>
+                        <CheckboxInput
+                          name={`weight-${idx}`}
+                          checked={selectedWeight.includes(idx)}
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedWeight([...selectedWeight, idx]);
+                            } else {
+                              setSelectedWeight(
+                                selectedWeight.filter((i) => i !== idx)
+                              );
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center items-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </td>
+                    )}
+                    <td>
+                      <NumberInput
+                        required
+                        name={`body_weight.${idx}.chicken_weight`}
+                        value={weight.chicken_weight}
+                        onChange={handleChickenWeightChangeWrapper(idx)}
+                        onBlur={formik.handleBlur}
+                        maskType='weight'
+                        weightUnit='gram'
+                        decimals={2}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          isRepeaterInputError(
+                            'body_weight',
+                            'chicken_weight',
+                            idx
+                          ).isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(
+                            'body_weight',
+                            'chicken_weight',
+                            idx
+                          ).errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`body_weight.${idx}.chicken_count`}
+                        value={weight.chicken_count}
+                        onChange={handleChickenCountChangeWrapper(idx)}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        isError={
+                          isRepeaterInputError(
+                            'body_weight',
+                            'chicken_count',
+                            idx
+                          ).isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(
+                            'body_weight',
+                            'chicken_count',
+                            idx
+                          ).errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <div className='relative'>
                         <NumberInput
                           required
-                          name={`body_weight.${idx}.chicken_weight`}
-                          value={weight.chicken_weight}
-                          onChange={handleChickenWeightChangeWrapper(idx)}
+                          name={`body_weight.${idx}.average_chicken_weight`}
+                          value={weight.average_chicken_weight || ''}
+                          onChange={handleAverageWeightChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
                           maskType='weight'
                           weightUnit='gram'
@@ -1129,14 +1193,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           isError={
                             isRepeaterInputError(
                               'body_weight',
-                              'chicken_weight',
+                              'average_chicken_weight',
                               idx
                             ).isError
                           }
                           errorMessage={
                             isRepeaterInputError(
                               'body_weight',
-                              'chicken_weight',
+                              'average_chicken_weight',
                               idx
                             ).errorMessage
                           }
@@ -1144,93 +1208,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           className={{
                             wrapper: 'w-full min-w-24',
                           }}
+                          placeholder=''
                         />
-                      </td>
+                      </div>
+                    </td>
+                    {type !== 'detail' && (
                       <td>
-                        <NumberInput
-                          required
-                          name={`body_weight.${idx}.chicken_count`}
-                          value={weight.chicken_count}
-                          onChange={handleChickenCountChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
-                          isError={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'chicken_count',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'body_weight',
-                              'chicken_count',
-                              idx
-                            ).errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <div className='relative'>
-                          <NumberInput
-                            required
-                            name={`body_weight.${idx}.average_chicken_weight`}
-                            value={weight.average_chicken_weight || ''}
-                            onChange={handleAverageWeightChangeWrapper(idx)}
-                            onBlur={formik.handleBlur}
-                            maskType='weight'
-                            weightUnit='gram'
-                            decimals={2}
-                            min={0}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            isError={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).isError
-                            }
-                            errorMessage={
-                              isRepeaterInputError(
-                                'body_weight',
-                                'average_chicken_weight',
-                                idx
-                              ).errorMessage
-                            }
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                            placeholder=''
-                          />
+                        <div className='flex flex-col items-start gap-2'>
+                          <Button
+                            type='button'
+                            color='error'
+                            onClick={() => removeBodyWeight(idx)}
+                          >
+                            <Icon
+                              icon='material-symbols:delete-outline-rounded'
+                              width={24}
+                              height={24}
+                            />
+                          </Button>
                         </div>
                       </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeBodyWeight(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
+                    )}
+                  </tr>
+                ))}
                 </tbody>
               </table>
             </div>
@@ -1276,224 +1276,224 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                        <div className='flex justify-center items-center h-full'>
-                          <CheckboxInput
-                            name='select-all-vaccine'
-                            checked={
-                              formik.values.vaccination?.length ===
-                                selectedVaccine.length &&
-                              formik.values.vaccination?.length > 0
+                <tr>
+                  {type !== 'detail' && (
+                    <th>
+                      <div className='flex justify-center items-center h-full'>
+                        <CheckboxInput
+                          name='select-all-vaccine'
+                          checked={
+                            formik.values.vaccination?.length ===
+                            selectedVaccine.length &&
+                            formik.values.vaccination?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedVaccine(
+                                formik.values.vaccination?.map(
+                                  (_, idx) => idx
+                                ) ?? []
+                              );
+                            } else {
+                              setSelectedVaccine([]);
                             }
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              if (e.target.checked) {
-                                setSelectedVaccine(
-                                  formik.values.vaccination?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedVaccine([]);
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center items-center h-full',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </div>
-                      </th>
-                    )}
-                    <th>
-                      Name Vaksin
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center items-center h-full',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </div>
+                    </th>
+                  )}
+                  <th>
+                    Name Vaksin
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>Total Stock pada saat ini</th>
-                    <th>
-                      Jumlah Stock yang digunakan
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                  </th>
+                  <th>Total Stock pada saat ini</th>
+                  <th>
+                    Jumlah Stock yang digunakan
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
+                  </th>
+                  {type !== 'detail' && <th>Action</th>}
+                </tr>
                 </thead>
                 <tbody>
-                  {formik.values.vaccination?.map((vaccine, idx) => (
-                    <tr key={`vaccine-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className="!align-middle">
-                            <CheckboxInput
-                              name={`vaccine-${idx}`}
-                              checked={selectedVaccine.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>,
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedVaccine([...selectedVaccine, idx]);
-                                } else {
-                                  setSelectedVaccine(
-                                    selectedVaccine.filter((i) => i !== idx),
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                        </td>
-                      )}
-                      <td>
+                {formik.values.vaccination?.map((vaccine, idx) => (
+                  <tr key={`vaccine-${idx}`}>
+                    {type !== 'detail' && (
+                      <td className="!align-middle">
+                        <CheckboxInput
+                          name={`vaccine-${idx}`}
+                          checked={selectedVaccine.includes(idx)}
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedVaccine([...selectedVaccine, idx]);
+                            } else {
+                              setSelectedVaccine(
+                                selectedVaccine.filter((i) => i !== idx),
+                              );
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </td>
+                    )}
+                    <td>
                       <SelectInput
-                          required
-                          value={
-                            ovkOptions.find(
-                              (opt: OptionType) =>
-                                Number(opt.value) === Number(vaccine.vaccine_id)
-                            ) ?? null
-                          }
-                          onChange={(val) => {
-                            const productWarehouseId =
-                              (val as OptionType)?.value ?? 0;
-                            const stock = productWarehouseId
-                              ? (ovkStockMap.get(
-                                  productWarehouseId as number
-                                ) ?? '')
-                              : '';
-                            formik.setFieldValue(
+                        required
+                        value={
+                          ovkOptions.find(
+                            (opt: OptionType) =>
+                              Number(opt.value) === Number(vaccine.vaccine_id)
+                          ) ?? null
+                        }
+                        onChange={(val) => {
+                          const productWarehouseId =
+                            (val as OptionType)?.value ?? 0;
+                          const stock = productWarehouseId
+                            ? (ovkStockMap.get(
+                              productWarehouseId as number
+                            ) ?? '')
+                            : '';
+                          formik.setFieldValue(
+                            `vaccination.${idx}.vaccine`,
+                            val
+                          );
+                          formik.setFieldValue(
+                            `vaccination.${idx}.vaccine_id`,
+                            productWarehouseId || ''
+                          );
+                          formik.setFieldValue(
+                            `vaccination.${idx}.total_stock`,
+                            stock
+                          );
+                          formik.setFieldValue(
+                            `vaccination.${idx}.used_stock`,
+                            0
+                          );
+                          // Set touched after setting values to trigger validation
+                          setTimeout(() => {
+                            formik.setFieldTouched(
                               `vaccination.${idx}.vaccine`,
-                              val
+                              true
                             );
-                            formik.setFieldValue(
+                            formik.setFieldTouched(
                               `vaccination.${idx}.vaccine_id`,
-                              productWarehouseId || ''
+                              true
                             );
-                            formik.setFieldValue(
-                              `vaccination.${idx}.total_stock`,
-                              stock
-                            );
-                            formik.setFieldValue(
-                              `vaccination.${idx}.used_stock`,
-                              0
-                            );
-                            // Set touched after setting values to trigger validation
-                            setTimeout(() => {
-                              formik.setFieldTouched(
-                                `vaccination.${idx}.vaccine`,
-                                true
-                              );
-                              formik.setFieldTouched(
-                                `vaccination.${idx}.vaccine_id`,
-                                true
-                              );
-                            }, 0);
-                          }}
-                          options={ovkOptions}
-                          isLoading={isLoadingOvk}
-                          isError={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'vaccine_id',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'vaccine_id',
-                              idx
-                            ).errorMessage
-                          }
-                          isDisabled={type === 'detail'}
-                          isClearable
-                          className={{
-                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                          }}
-                        />
-                      </td>
+                          }, 0);
+                        }}
+                        options={ovkOptions}
+                        isLoading={isLoadingOvk}
+                        isError={
+                          isRepeaterInputError(
+                            'vaccination',
+                            'vaccine_id',
+                            idx
+                          ).isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(
+                            'vaccination',
+                            'vaccine_id',
+                            idx
+                          ).errorMessage
+                        }
+                        isDisabled={type === 'detail'}
+                        isClearable
+                        className={{
+                          wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        type='text'
+                        name={`vaccination.${idx}.total_stock`}
+                        value={
+                          vaccine.total_stock === '' ||
+                          vaccine.total_stock === undefined
+                            ? ''
+                            : Number(vaccine.total_stock).toLocaleString('en-US')
+                        }
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        readOnly={true}
+                        placeholder='Pilih vaksin terlebih dahulu'
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`vaccination.${idx}.used_stock`}
+                        value={vaccine.used_stock}
+                        onChange={handleVaccinationStockChangeWrapper(idx)}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator=''
+                        isError={
+                          isRepeaterInputError(
+                            'vaccination',
+                            'used_stock',
+                            idx
+                          ).isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError(
+                            'vaccination',
+                            'used_stock',
+                            idx
+                          ).errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    {type !== 'detail' && (
                       <td>
-                        <TextInput
-                          type='text'
-                          name={`vaccination.${idx}.total_stock`}
-                          value={
-                            vaccine.total_stock === '' ||
-                            vaccine.total_stock === undefined
-                              ? ''
-                              : Number(vaccine.total_stock).toLocaleString('en-US')
-                          }
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          readOnly={true}
-                          placeholder='Pilih vaksin terlebih dahulu'
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
+                        <div className='flex flex-col items-start gap-2'>
+                          <Button
+                            type='button'
+                            color='error'
+                            onClick={() => removeVaccination(idx)}
+                          >
+                            <Icon
+                              icon='material-symbols:delete-outline-rounded'
+                              width={24}
+                              height={24}
+                            />
+                          </Button>
+                        </div>
                       </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`vaccination.${idx}.used_stock`}
-                          value={vaccine.used_stock}
-                          onChange={handleVaccinationStockChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
-                          thousandSeparator=','
-                          decimalSeparator=''
-                          isError={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'used_stock',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'vaccination',
-                              'used_stock',
-                              idx
-                            ).errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
-                      </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeVaccination(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
+                    )}
+                  </tr>
+                ))}
                 </tbody>
               </table>
             </div>
@@ -1539,165 +1539,165 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
-                  <tr>
-                    {type !== 'detail' && (
-                      <th>
-                        <div className='flex justify-center items-center h-full'>
-                          <CheckboxInput
-                            name='select-all-mortality'
-                            checked={
-                              formik.values.mortality?.length ===
-                                selectedMortality.length &&
-                              formik.values.mortality?.length > 0
+                <tr>
+                  {type !== 'detail' && (
+                    <th>
+                      <div className='flex justify-center items-center h-full'>
+                        <CheckboxInput
+                          name='select-all-mortality'
+                          checked={
+                            formik.values.mortality?.length ===
+                            selectedMortality.length &&
+                            formik.values.mortality?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedMortality(
+                                formik.values.mortality?.map(
+                                  (_, idx) => idx
+                                ) ?? []
+                              );
+                            } else {
+                              setSelectedMortality([]);
                             }
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              if (e.target.checked) {
-                                setSelectedMortality(
-                                  formik.values.mortality?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedMortality([]);
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center items-center h-full',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </div>
-                      </th>
-                    )}
-                    <th>
-                      Kondisi/Alasan Mortalitas
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center items-center h-full',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </div>
+                    </th>
+                  )}
+                  <th>
+                    Kondisi/Alasan Mortalitas
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    <th>
-                      Jumlah
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                        data-tip='required'
-                      >
+                  </th>
+                  <th>
+                    Jumlah
+                    <span
+                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                      data-tip='required'
+                    >
                         <span className='text-error'>*</span>
                       </span>
-                    </th>
-                    {type !== 'detail' && <th>Action</th>}
-                  </tr>
+                  </th>
+                  {type !== 'detail' && <th>Action</th>}
+                </tr>
                 </thead>
                 <tbody>
-                  {formik.values.mortality?.map((mortality, idx) => (
-                    <tr key={`mortality-${idx}`}>
-                      {type !== 'detail' && (
-                        <td className="!align-middle">
-                            <CheckboxInput
-                              name={`mortality-${idx}`}
-                              checked={selectedMortality.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>,
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedMortality([
-                                    ...selectedMortality,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedMortality(
-                                    selectedMortality.filter((i) => i !== idx),
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                        </td>
-                      )}
-                      <td>
+                {formik.values.mortality?.map((mortality, idx) => (
+                  <tr key={`mortality-${idx}`}>
+                    {type !== 'detail' && (
+                      <td className="!align-middle">
+                        <CheckboxInput
+                          name={`mortality-${idx}`}
+                          checked={selectedMortality.includes(idx)}
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedMortality([
+                                ...selectedMortality,
+                                idx,
+                              ]);
+                            } else {
+                              setSelectedMortality(
+                                selectedMortality.filter((i) => i !== idx),
+                              );
+                            }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </td>
+                    )}
+                    <td>
                       <SelectInput
-                          required
-                          value={RECORDING_FLAG_OPTIONS.find(
-                            (opt) => opt.value === mortality.condition
-                          )}
-                          onChange={(val) => {
-                            formik.setFieldTouched(
-                              `mortality.${idx}.condition`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `mortality.${idx}.condition`,
-                              (val as OptionType)?.value
-                            );
-                          }}
-                          isError={
-                            isRepeaterInputError('mortality', 'condition', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('mortality', 'condition', idx)
-                              .errorMessage
-                          }
-                          options={RECORDING_FLAG_OPTIONS}
-                          isDisabled={type === 'detail'}
-                          isClearable
-                          className={{
-                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                          }}
-                        />
-                      </td>
+                        required
+                        value={RECORDING_FLAG_OPTIONS.find(
+                          (opt) => opt.value === mortality.condition
+                        )}
+                        onChange={(val) => {
+                          formik.setFieldTouched(
+                            `mortality.${idx}.condition`,
+                            true
+                          );
+                          formik.setFieldValue(
+                            `mortality.${idx}.condition`,
+                            (val as OptionType)?.value
+                          );
+                        }}
+                        isError={
+                          isRepeaterInputError('mortality', 'condition', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('mortality', 'condition', idx)
+                            .errorMessage
+                        }
+                        options={RECORDING_FLAG_OPTIONS}
+                        isDisabled={type === 'detail'}
+                        isClearable
+                        className={{
+                          wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`mortality.${idx}.count`}
+                        value={mortality.count}
+                        onChange={handleMortalityCountChangeWrapper(idx)}
+                        onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator=''
+                        isError={
+                          isRepeaterInputError('mortality', 'count', idx)
+                            .isError
+                        }
+                        errorMessage={
+                          isRepeaterInputError('mortality', 'count', idx)
+                            .errorMessage
+                        }
+                        readOnly={type === 'detail'}
+                        className={{
+                          wrapper: 'w-full min-w-24',
+                        }}
+                      />
+                    </td>
+                    {type !== 'detail' && (
                       <td>
-                        <NumberInput
-                          required
-                          name={`mortality.${idx}.count`}
-                          value={mortality.count}
-                          onChange={handleMortalityCountChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          maskType='number'
-                          decimals={0}
-                          min={0}
-                          thousandSeparator=','
-                          decimalSeparator=''
-                          isError={
-                            isRepeaterInputError('mortality', 'count', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('mortality', 'count', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                        />
+                        <div className='flex flex-col items-start gap-2'>
+                          <Button
+                            type='button'
+                            color='error'
+                            onClick={() => removeMortality(idx)}
+                          >
+                            <Icon
+                              icon='material-symbols:delete-outline-rounded'
+                              width={24}
+                              height={24}
+                            />
+                          </Button>
+                        </div>
                       </td>
-                      {type !== 'detail' && (
-                        <td>
-                          <div className='flex flex-col items-start gap-2'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeMortality(idx)}
-                            >
-                              <Icon
-                                icon='material-symbols:delete-outline-rounded'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
+                    )}
+                  </tr>
+                ))}
                 </tbody>
               </table>
             </div>