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] 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,
+  };
+};