From 7ceb25ea71dc421b68bcc24a7d006a16e23c52ee Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 8 Oct 2025 15:26:45 +0700
Subject: [PATCH 001/212] feat(FE-62,65): add inventory movement management
 with API and form validation

---
 .../movement/form/MovementForm.schema.ts      |  67 +++++
 src/config/constant.ts                        | 241 ++++++++++--------
 src/services/api/inventory.ts                 |  12 +
 src/types/api/inventory/movement.d.ts         |  51 ++++
 4 files changed, 262 insertions(+), 109 deletions(-)
 create mode 100644 src/components/pages/inventory/movement/form/MovementForm.schema.ts
 create mode 100644 src/services/api/inventory.ts
 create mode 100644 src/types/api/inventory/movement.d.ts

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
new file mode 100644
index 00000000..cdabe355
--- /dev/null
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -0,0 +1,67 @@
+import * as Yup from 'yup';
+
+export const MovementFormSchema = Yup.object({
+    alasan_transfer: Yup.string()
+        .required('Alasan Transfer wajib diisi!'),
+    tanggal_transfer: Yup.date()
+        .required('Tanggal Transfer wajib diisi!')
+        .typeError('Tanggal Transfer tidak valid!'),
+    warehouse_asal: Yup.object({
+        value: Yup.number().min(1).required(),
+        label: Yup.string().required(),
+    }).nullable(),
+    warehouse_asal_id: Yup.number()
+        .required('Gudang Asal wajib diisi!'),
+    warehouse_tujuan: Yup.object({
+        value: Yup.number().min(1).required(),
+        label: Yup.string().required(),
+    }).nullable(),
+    warehouse_tujuan_id: Yup.number()
+        .required('Gudang Tujuan wajib diisi!'),
+    alasan: Yup.string()
+        .required('Alasan wajib diisi!'),
+    product: Yup.object({
+        value: Yup.number().min(1).required(),
+        label: Yup.string().required(),
+    }).nullable(),
+    product_id: Yup.array()
+        .of(Yup.number()).min(1, 'Pilih minimal 1 produk')
+        .required('Produk wajib diisi!'),
+    qty_product: Yup.array()
+        .of(Yup.number().min(1, 'Kuantitas minimal 1'))
+        .min(1, 'Pilih minimal 1 produk')
+        .required('Kuantitas wajib diisi!'),
+    ekspedisi: Yup.array().of(
+        Yup.object({
+            product: Yup.object({
+                value: Yup.number().min(1).required(),
+                label: Yup.string().required(),
+            }).nullable(),
+            product_id: Yup.number()
+                .required('Produk wajib diisi!'),
+            qty: Yup.number().min(1, 'Kuantitas minimal 1')
+                .required('Kuantitas wajib diisi!'),
+            supplier: Yup.object({
+                value: Yup.number().min(1).required(),
+                label: Yup.string().required(),
+            }).nullable(),
+            supplier_id: Yup.number()
+                .required('Supplier wajib diisi!'),
+            plat_nomor: Yup.string()
+                .required('Plat Nomor wajib diisi!'),
+            no_surat_jalan: Yup.string()
+                .required('No Surat Jalan wajib diisi!'),
+            dokumen: Yup.mixed()
+                .required('Dokumen wajib diisi!'),
+            biaya_ekspedisi: Yup.number()
+                .min(0, 'Biaya Ekspedisi minimal 0')
+                .required('Biaya Ekspedisi wajib diisi!'),
+            nama_sopir: Yup.string()
+                .required('Nama Sopir wajib diisi!'),
+        })
+    ).min(1, 'Pilih minimal 1 ekspedisi').required('Ekspedisi wajib diisi!'),
+});
+
+export const UpdateMovementFormSchema = MovementFormSchema;
+
+export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
\ No newline at end of file
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 1fbef81f..870002bf 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -1,122 +1,145 @@
 export const MAIN_DRAWER_LINKS = [
-  {
-    title: 'Dashboard',
-    link: '/dashboard',
-    icon: 'gg:chart',
-  },
+    {
+        title: 'Dashboard',
+        link: '/dashboard',
+        icon: 'gg:chart',
+    },
 
-  {
-    title: 'Master Data',
-    link: '/master-data',
-    icon: 'majesticons:data-line',
-    submenu: [
-      {
-        title: 'Product',
-        link: '/master-data/product',
-        icon: 'fluent-mdl2:product-variant',
-      },
-      {
-        title: 'Product Category',
-        link: '/master-data/product-category',
-        icon: 'carbon:categories',
-      },
-      {
-        title: 'Bank',
-        link: '/master-data/bank',
-        icon: 'mdi:bank-outline',
-      },
-      {
-        title: 'Area',
-        link: '/master-data/area',
-        icon: 'majesticons:map-marker-area-line',
-      },
-      {
-        title: 'Location',
-        link: '/master-data/location',
-        icon: 'mingcute:location-line',
-      },
-      {
-        title: 'Kandang',
-        link: '/master-data/kandang',
-        icon: 'mdi:farm-home-outline',
-      },
-      {
-        title: 'Warehouse',
-        link: '/master-data/warehouse',
-        icon: 'hugeicons:warehouse',
-      },
-      {
-        title: 'Customer',
-        link: '/master-data/customer',
-        icon: 'ix:customer',
-      },
-      {
-        title: 'UOM',
-        link: '/master-data/uom',
-        icon: 'lsicon:measure-outline',
-      },
-      {
-        title: 'Non-Stock',
-        link: '/master-data/nonstock',
-        icon: 'fluent:box-32-regular',
-      },
-      {
-        title: 'FCR',
-        link: '/master-data/FCR',
-        icon: 'fluent:food-chicken-leg-16-regular',
-      },
-      {
-        title: 'Supplier',
-        link: '/master-data/supplier',
-        icon: 'material-symbols:add-business-outline-rounded',
-      },
-    ],
-  },
+    {
+        title: 'Persediaan',
+        link: '/inventory',
+        icon: 'mdi:warehouse',
+        submenu: [
+            {
+                title: 'Product',
+                link: '/inventory/product',
+                icon: 'mdi:package-variant-closed',
+            },
+            {
+                title: 'Penyesuaian Stok',
+                link: '/inventory/adjustment',
+                icon: 'mdi:database-edit',
+            },
+            {
+                title: 'Transfer Stok',
+                link: '/inventory/movement',
+                icon: 'mdi:swap-horizontal',
+            },
+        ],
+    },
+
+    {
+        title: 'Master Data',
+        link: '/master-data',
+        icon: 'majesticons:data-line',
+        submenu: [
+            {
+                title: 'Product',
+                link: '/master-data/product',
+                icon: 'fluent-mdl2:product-variant',
+            },
+            {
+                title: 'Product Category',
+                link: '/master-data/product-category',
+                icon: 'carbon:categories',
+            },
+            {
+                title: 'Bank',
+                link: '/master-data/bank',
+                icon: 'mdi:bank-outline',
+            },
+            {
+                title: 'Area',
+                link: '/master-data/area',
+                icon: 'majesticons:map-marker-area-line',
+            },
+            {
+                title: 'Location',
+                link: '/master-data/location',
+                icon: 'mingcute:location-line',
+            },
+            {
+                title: 'Kandang',
+                link: '/master-data/kandang',
+                icon: 'mdi:farm-home-outline',
+            },
+            {
+                title: 'Warehouse',
+                link: '/master-data/warehouse',
+                icon: 'hugeicons:warehouse',
+            },
+            {
+                title: 'Customer',
+                link: '/master-data/customer',
+                icon: 'ix:customer',
+            },
+            {
+                title: 'UOM',
+                link: '/master-data/uom',
+                icon: 'lsicon:measure-outline',
+            },
+            {
+                title: 'Non-Stock',
+                link: '/master-data/nonstock',
+                icon: 'fluent:box-32-regular',
+            },
+            {
+                title: 'FCR',
+                link: '/master-data/FCR',
+                icon: 'fluent:food-chicken-leg-16-regular',
+            },
+            {
+                title: 'Supplier',
+                link: '/master-data/supplier',
+                icon: 'material-symbols:add-business-outline-rounded',
+            },
+        ],
+    },
 ] as const;
 
 export const ROWS_OPTIONS = [
-  {
-    label: '10',
-    value: 10,
-  },
-  {
-    label: '20',
-    value: 20,
-  },
-  {
-    label: '50',
-    value: 50,
-  },
-  {
-    label: '100',
-    value: 100,
-  },
+    {
+        label: '10',
+        value: 10,
+    },
+    {
+        label: '20',
+        value: 20,
+    },
+    {
+        label: '50',
+        value: 50,
+    },
+    {
+        label: '100',
+        value: 100,
+    },
 ];
 
 export const WAREHOUSE_TYPE_OPTIONS = [
-  {
-    label: 'AREA',
-    value: 'AREA',
-  },
-  {
-    label: 'LOKASI',
-    value: 'LOKASI',
-  },
-  {
-    label: 'KANDANG',
-    value: 'KANDANG',
-  },
+    {
+        label: 'AREA',
+        value: 'AREA',
+    },
+    {
+        label: 'LOKASI',
+        value: 'LOKASI',
+    },
+    {
+        label: 'KANDANG',
+        value: 'KANDANG',
+    },
 ];
 
 export const PRODUCT_FLAG_OPTIONS = [
-  { label: 'DOC', value: 'DOC' },
-  { label: 'PAKAN', value: 'PAKAN' },
-  { label: 'PRE-STARTER', value: 'PRE-STARTER' },
-  { label: 'STARTER', value: 'STARTER' },
-  { label: 'FINISHER', value: 'FINISHER' },
-  { label: 'OVK', value: 'OVK' },
-  { label: 'OBAT', value: 'OBAT' },
-  { label: 'VITAMIN', value: 'VITAMIN' },
-  { label: 'KIMIA', value: 'KIMIA' },
+    {label: 'DOC', value: 'DOC'},
+    {label: 'PAKAN', value: 'PAKAN'},
+    {label: 'PRE-STARTER', value: 'PRE-STARTER'},
+    {label: 'STARTER', value: 'STARTER'},
+    {label: 'FINISHER', value: 'FINISHER'},
+    {label: 'OVK', value: 'OVK'},
+    {label: 'OBAT', value: 'OBAT'},
+    {label: 'VITAMIN', value: 'VITAMIN'},
+    {label: 'KIMIA', value: 'KIMIA'},
 ];
 
diff --git a/src/services/api/inventory.ts b/src/services/api/inventory.ts
new file mode 100644
index 00000000..3e3115e2
--- /dev/null
+++ b/src/services/api/inventory.ts
@@ -0,0 +1,12 @@
+import {
+    CreateMovementPayload,
+    Movement,
+    UpdateMovementPayload,
+} from "@/types/api/inventory/movement";
+import {BaseApiService} from "@/services/api/base";
+
+export const MovementApi = new BaseApiService<
+    Movement,
+    CreateMovementPayload,
+    UpdateMovementPayload
+>('/inventory/movements');
\ No newline at end of file
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
new file mode 100644
index 00000000..fe2996ba
--- /dev/null
+++ b/src/types/api/inventory/movement.d.ts
@@ -0,0 +1,51 @@
+import {BaseMetadata} from '@/types/api/api-general';
+import {Product} from "@/types/api/master-data/product";
+import {Supplier} from "@/types/api/master-data/supplier";
+import {Warehouse} from "@/types/api/master-data/warehouse";
+
+export type BaseMovement = {
+    id: number;
+    alasan_transfer: string;
+    tanggal_transfer: string;
+    warehouse_asal: Warehouse;
+    warehouse_tujuan: Warehouse;
+    product: Array<{
+        product: Product;
+        qty_product: number;
+    }>;
+    ekspedisi: Array<{
+        product_id: number;
+        qty: number;
+        supplier: Supplier;
+        plat_nomor: string;
+        no_surat_jalan: string;
+        dokumen: string;
+        biaya_ekspedisi: number;
+        nama_sopir: string;
+    }>;
+    name: string;
+};
+
+export type Movement = BaseMetadata & BaseMovement;
+
+export type CreateMovementPayload = {
+    alasan: string;
+    warehouse_asal_id: number;
+    warehouse_tujuan_id: number;
+    product: Array<{
+        product_id: number;
+        qty_product: number;
+    }>;
+    ekspedisi: Array<{
+        product_id: number;
+        qty: number;
+        supplier_id: number;
+        plat_nomor: string;
+        no_surat_jalan: string;
+        dokumen: string;
+        biaya_ekspedisi: number;
+        nama_sopir: string;
+    }>;
+}
+
+export type UpdateMovementPayload = CreateMovementPayload;
\ No newline at end of file

From 3f97ec45f8b14d8c77347ad5104540c647b4d926 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 8 Oct 2025 16:02:52 +0700
Subject: [PATCH 002/212] feat(FE-64): add MovementTable component for
 inventory movement management

---
 src/app/inventory/movement/page.tsx           |  11 +
 .../inventory/movement/MovementTable.tsx      | 651 ++++++++++++++++++
 2 files changed, 662 insertions(+)
 create mode 100644 src/app/inventory/movement/page.tsx
 create mode 100644 src/components/pages/inventory/movement/MovementTable.tsx

diff --git a/src/app/inventory/movement/page.tsx b/src/app/inventory/movement/page.tsx
new file mode 100644
index 00000000..12fe795b
--- /dev/null
+++ b/src/app/inventory/movement/page.tsx
@@ -0,0 +1,11 @@
+import MovementTable from '@/components/pages/inventory/movement/MovementTable';
+
+const Product = () => {
+  return (
+    <section className='w-full p-4'>
+      <MovementTable />
+    </section>
+  );
+};
+
+export default Product;
diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
new file mode 100644
index 00000000..288cb2a6
--- /dev/null
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -0,0 +1,651 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import { cn } from '@/lib/helper';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Movement } from '@/types/api/inventory/movement';
+import { BaseMetadata } from '@/types/api/api-general';
+
+// Dummy data
+const baseMetadata: BaseMetadata = {
+  created_user: {
+    id: 1,
+    id_user: 1,
+    email: 'user@example.com',
+    name: 'User',
+  },
+  created_at: '2024-06-01T00:00:00Z',
+  updated_at: '2024-06-01T00:00:00Z',
+};
+
+const dummyMovements: Movement[] = [
+  {
+    ...baseMetadata,
+    id: 1,
+    alasan_transfer: 'Restock',
+    tanggal_transfer: '2024-06-01',
+    warehouse_asal: {
+      ...baseMetadata,
+      id: 1,
+      name: 'Warehouse A',
+      type: 'AREA',
+      area: { id: 1, name: 'Area 1' },
+    },
+    warehouse_tujuan: {
+      ...baseMetadata,
+      id: 2,
+      name: 'Warehouse B',
+      type: 'AREA',
+      area: { id: 2, name: 'Area 2' },
+    },
+    product: [
+      {
+        product: {
+          ...baseMetadata,
+          id: 1,
+          name: 'Product X',
+          brand: 'Brand X',
+          sku: 'SKU-X',
+          product_price: 10000,
+          selling_price: 12000,
+          tax: 10,
+          expiry_period: 365,
+          uom: {
+            ...baseMetadata,
+            id: 1,
+            name: 'PCS',
+          },
+          product_category: {
+            ...baseMetadata,
+            id: 1,
+            code: 'CAT-1',
+            name: 'Category 1',
+          },
+          suppliers: [],
+          flags: [],
+        },
+        qty_product: 10,
+      },
+    ],
+    ekspedisi: [
+      {
+        product_id: 1,
+        qty: 10,
+        supplier: {
+          ...baseMetadata,
+          id: 1,
+          name: 'Supplier 1',
+          alias: 'S1',
+          category: 'General',
+          pic: 'PIC 1',
+          type: 'Type 1',
+          phone: '08123456789',
+          email: 'supplier1@example.com',
+          address: 'Address 1',
+          account_number: '1234567890',
+          balance: 0,
+          due_date: 30,
+        },
+        plat_nomor: 'B 1234 CD',
+        no_surat_jalan: 'SJ-001',
+        dokumen: 'doc1.pdf',
+        biaya_ekspedisi: 50000,
+        nama_sopir: 'Andi',
+      },
+    ],
+    name: 'Movement 1',
+  },
+  {
+    ...baseMetadata,
+    id: 2,
+    alasan_transfer: 'Mutasi Stok',
+    tanggal_transfer: '2024-06-02',
+    warehouse_asal: {
+      ...baseMetadata,
+      id: 2,
+      name: 'Warehouse B',
+      type: 'AREA',
+      area: { id: 2, name: 'Area 2' },
+    },
+    warehouse_tujuan: {
+      ...baseMetadata,
+      id: 3,
+      name: 'Warehouse C',
+      type: 'AREA',
+      area: { id: 3, name: 'Area 3' },
+    },
+    product: [
+      {
+        product: {
+          ...baseMetadata,
+          id: 2,
+          name: 'Product Y',
+          brand: 'Brand Y',
+          sku: 'SKU-Y',
+          product_price: 20000,
+          selling_price: 25000,
+          tax: 5,
+          expiry_period: 180,
+          uom: {
+            ...baseMetadata,
+            id: 2,
+            name: 'BOX',
+          },
+          product_category: {
+            ...baseMetadata,
+            id: 2,
+            code: 'CAT-2',
+            name: 'Category 2',
+          },
+          suppliers: [],
+          flags: [],
+        },
+        qty_product: 5,
+      },
+    ],
+    ekspedisi: [
+      {
+        product_id: 2,
+        qty: 5,
+        supplier: {
+          ...baseMetadata,
+          id: 2,
+          name: 'Supplier 2',
+          alias: 'S2',
+          category: 'Special',
+          pic: 'PIC 2',
+          type: 'Type 2',
+          phone: '08123456780',
+          email: 'supplier2@example.com',
+          address: 'Address 2',
+          account_number: '1234567891',
+          balance: 1000,
+          due_date: 15,
+        },
+        plat_nomor: 'D 5678 EF',
+        no_surat_jalan: 'SJ-002',
+        dokumen: 'doc2.pdf',
+        biaya_ekspedisi: 60000,
+        nama_sopir: 'Budi',
+      },
+    ],
+    name: 'Movement 2',
+  },
+  {
+    ...baseMetadata,
+    id: 3,
+    alasan_transfer: 'Pengembalian',
+    tanggal_transfer: '2024-06-03',
+    warehouse_asal: {
+      ...baseMetadata,
+      id: 3,
+      name: 'Warehouse C',
+      type: 'AREA',
+      area: { id: 3, name: 'Area 3' },
+    },
+    warehouse_tujuan: {
+      ...baseMetadata,
+      id: 1,
+      name: 'Warehouse A',
+      type: 'AREA',
+      area: { id: 1, name: 'Area 1' },
+    },
+    product: [
+      {
+        product: {
+          ...baseMetadata,
+          id: 3,
+          name: 'Product Z',
+          brand: 'Brand Z',
+          sku: 'SKU-Z',
+          product_price: 15000,
+          selling_price: 18000,
+          tax: 8,
+          expiry_period: 90,
+          uom: {
+            ...baseMetadata,
+            id: 3,
+            name: 'KG',
+          },
+          product_category: {
+            ...baseMetadata,
+            id: 3,
+            code: 'CAT-3',
+            name: 'Category 3',
+          },
+          suppliers: [],
+          flags: [],
+        },
+        qty_product: 8,
+      },
+    ],
+    ekspedisi: [
+      {
+        product_id: 3,
+        qty: 8,
+        supplier: {
+          ...baseMetadata,
+          id: 3,
+          name: 'Supplier 3',
+          alias: 'S3',
+          category: 'Return',
+          pic: 'PIC 3',
+          type: 'Type 3',
+          phone: '08123456781',
+          email: 'supplier3@example.com',
+          address: 'Address 3',
+          account_number: '1234567892',
+          balance: 500,
+          due_date: 10,
+        },
+        plat_nomor: 'F 9101 GH',
+        no_surat_jalan: 'SJ-003',
+        dokumen: 'doc3.pdf',
+        biaya_ekspedisi: 40000,
+        nama_sopir: 'Cici',
+      },
+    ],
+    name: 'Movement 3',
+  },
+  {
+    ...baseMetadata,
+    id: 4,
+    alasan_transfer: 'Transfer Internal',
+    tanggal_transfer: '2024-06-04',
+    warehouse_asal: {
+      ...baseMetadata,
+      id: 4,
+      name: 'Warehouse D',
+      type: 'AREA',
+      area: { id: 4, name: 'Area 4' },
+    },
+    warehouse_tujuan: {
+      ...baseMetadata,
+      id: 5,
+      name: 'Warehouse E',
+      type: 'AREA',
+      area: { id: 5, name: 'Area 5' },
+    },
+    product: [
+      {
+        product: {
+          ...baseMetadata,
+          id: 4,
+          name: 'Product A',
+          brand: 'Brand A',
+          sku: 'SKU-A',
+          product_price: 5000,
+          selling_price: 7000,
+          tax: 0,
+          expiry_period: 60,
+          uom: {
+            ...baseMetadata,
+            id: 4,
+            name: 'LITER',
+          },
+          product_category: {
+            ...baseMetadata,
+            id: 4,
+            code: 'CAT-4',
+            name: 'Category 4',
+          },
+          suppliers: [],
+          flags: [],
+        },
+        qty_product: 20,
+      },
+    ],
+    ekspedisi: [
+      {
+        product_id: 4,
+        qty: 20,
+        supplier: {
+          ...baseMetadata,
+          id: 4,
+          name: 'Supplier 4',
+          alias: 'S4',
+          category: 'Internal',
+          pic: 'PIC 4',
+          type: 'Type 4',
+          phone: '08123456782',
+          email: 'supplier4@example.com',
+          address: 'Address 4',
+          account_number: '1234567893',
+          balance: 200,
+          due_date: 20,
+        },
+        plat_nomor: 'H 2345 IJ',
+        no_surat_jalan: 'SJ-004',
+        dokumen: 'doc4.pdf',
+        biaya_ekspedisi: 30000,
+        nama_sopir: 'Dedi',
+      },
+    ],
+    name: 'Movement 4',
+  },
+  {
+    ...baseMetadata,
+    id: 5,
+    alasan_transfer: 'Distribusi',
+    tanggal_transfer: '2024-06-05',
+    warehouse_asal: {
+      ...baseMetadata,
+      id: 5,
+      name: 'Warehouse E',
+      type: 'AREA',
+      area: { id: 5, name: 'Area 5' },
+    },
+    warehouse_tujuan: {
+      ...baseMetadata,
+      id: 1,
+      name: 'Warehouse A',
+      type: 'AREA',
+      area: { id: 1, name: 'Area 1' },
+    },
+    product: [
+      {
+        product: {
+          ...baseMetadata,
+          id: 5,
+          name: 'Product B',
+          brand: 'Brand B',
+          sku: 'SKU-B',
+          product_price: 8000,
+          selling_price: 9500,
+          tax: 2,
+          expiry_period: 120,
+          uom: {
+            ...baseMetadata,
+            id: 5,
+            name: 'PAK',
+          },
+          product_category: {
+            ...baseMetadata,
+            id: 5,
+            code: 'CAT-5',
+            name: 'Category 5',
+          },
+          suppliers: [],
+          flags: [],
+        },
+        qty_product: 15,
+      },
+    ],
+    ekspedisi: [
+      {
+        product_id: 5,
+        qty: 15,
+        supplier: {
+          ...baseMetadata,
+          id: 5,
+          name: 'Supplier 5',
+          alias: 'S5',
+          category: 'Distribusi',
+          pic: 'PIC 5',
+          type: 'Type 5',
+          phone: '08123456783',
+          email: 'supplier5@example.com',
+          address: 'Address 5',
+          account_number: '1234567894',
+          balance: 300,
+          due_date: 25,
+        },
+        plat_nomor: 'K 6789 KL',
+        no_surat_jalan: 'SJ-005',
+        dokumen: 'doc5.pdf',
+        biaya_ekspedisi: 70000,
+        nama_sopir: 'Eka',
+      },
+    ],
+    name: 'Movement 5',
+  },
+];
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Movement, unknown>;
+  deleteClickHandler: () => void;
+}) => (
+  <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={`/inventory/movement/detail/?movementId=${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={`/inventory/movement/detail/edit/?movementId=${props.row.original.id}`}
+      variant='ghost'
+      color='warning'
+      className='justify-start text-sm'
+    >
+      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+      Edit
+    </Button>
+    <Button
+      onClick={deleteClickHandler}
+      variant='ghost'
+      color='error'
+      className='text-error hover:text-inherit'
+    >
+      <Icon
+        icon='material-symbols:delete-outline-rounded'
+        width={16}
+        height={16}
+        className='justify-start text-sm'
+      />
+      Delete
+    </Button>
+  </div>
+);
+
+const MovementTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedMovement, setSelectedMovement] = useState<
+    Movement | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return dummyMovements.slice(start, start + pageSize);
+  }, [page, pageSize]);
+
+  const movementsColumns: ColumnDef<Movement>[] = [
+    {
+      header: '#',
+      cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+    },
+    {
+      accessorKey: 'warehouse_asal',
+      header: 'Gudang Asal',
+      cell: (props) => props.row.original.warehouse_asal.name,
+    },
+    {
+      accessorKey: 'warehouse_tujuan',
+      header: 'Gudang Tujuan',
+      cell: (props) => props.row.original.warehouse_tujuan.name,
+    },
+    {
+      accessorKey: 'product',
+      header: 'Nama Produk',
+      cell: (props) => props.row.original.product.map((p) => p.product.name),
+    },
+    {
+      accessorKey: 'alasan_transfer',
+      header: 'Catatan',
+    },
+    {
+      accessorKey: 'biaya_ekspedisi',
+      header: 'Biaya Ekspedisi',
+      cell: (props) =>
+        props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        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 = () => {
+          setSelectedMovement(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const deleteModal = useModal();
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      deleteModal.closeModal();
+    }, 1000);
+  };
+
+  const searchChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    setSearch(e.target.value);
+    setPage(1);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+    setPage(1);
+  };
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/inventory/movement/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Movement
+              </Button>
+            </div>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Movement'
+              value={search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(pageSize),
+                value: pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
+          </div>
+        </div>
+        <Table<Movement>
+          data={paginatedData}
+          columns={movementsColumns}
+          pageSize={pageSize}
+          page={page}
+          totalItems={dummyMovements.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',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Movement ini (${selectedMovement?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default MovementTable;

From ddbf8b0896618e5810108f4dde360ceaa69f7707 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 8 Oct 2025 16:16:12 +0700
Subject: [PATCH 003/212] refactor(FE-62): rename Product component to Movement
 for clarity

---
 src/app/inventory/movement/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/inventory/movement/page.tsx b/src/app/inventory/movement/page.tsx
index 12fe795b..a2c25612 100644
--- a/src/app/inventory/movement/page.tsx
+++ b/src/app/inventory/movement/page.tsx
@@ -1,6 +1,6 @@
 import MovementTable from '@/components/pages/inventory/movement/MovementTable';
 
-const Product = () => {
+const Movement = () => {
   return (
     <section className='w-full p-4'>
       <MovementTable />
@@ -8,4 +8,4 @@ const Product = () => {
   );
 };
 
-export default Product;
+export default Movement;

From 1ea9ee30695459fb5c0eac38e564235fb1732a1d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 14:30:05 +0700
Subject: [PATCH 004/212] feat(FE-62,63,65): implement MovementForm component
 for managing inventory movements

---
 src/app/inventory/movement/add/page.tsx       |  11 +
 .../movement/form/MovementForm.schema.ts      | 121 +--
 .../inventory/movement/form/MovementForm.tsx  | 751 ++++++++++++++++++
 src/types/api/inventory/movement.d.ts         |  86 +-
 4 files changed, 866 insertions(+), 103 deletions(-)
 create mode 100644 src/app/inventory/movement/add/page.tsx
 create mode 100644 src/components/pages/inventory/movement/form/MovementForm.tsx

diff --git a/src/app/inventory/movement/add/page.tsx b/src/app/inventory/movement/add/page.tsx
new file mode 100644
index 00000000..f883de95
--- /dev/null
+++ b/src/app/inventory/movement/add/page.tsx
@@ -0,0 +1,11 @@
+import MovementForm from '@/components/pages/inventory/movement/form/MovementForm';
+
+const AddMovement = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <MovementForm />
+    </div>
+  );
+};
+
+export default AddMovement;
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index cdabe355..11c40fe5 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -1,67 +1,68 @@
 import * as Yup from 'yup';
 
 export const MovementFormSchema = Yup.object({
-    alasan_transfer: Yup.string()
-        .required('Alasan Transfer wajib diisi!'),
-    tanggal_transfer: Yup.date()
-        .required('Tanggal Transfer wajib diisi!')
-        .typeError('Tanggal Transfer tidak valid!'),
-    warehouse_asal: Yup.object({
-        value: Yup.number().min(1).required(),
-        label: Yup.string().required(),
-    }).nullable(),
-    warehouse_asal_id: Yup.number()
-        .required('Gudang Asal wajib diisi!'),
-    warehouse_tujuan: Yup.object({
-        value: Yup.number().min(1).required(),
-        label: Yup.string().required(),
-    }).nullable(),
-    warehouse_tujuan_id: Yup.number()
-        .required('Gudang Tujuan wajib diisi!'),
-    alasan: Yup.string()
-        .required('Alasan wajib diisi!'),
-    product: Yup.object({
-        value: Yup.number().min(1).required(),
-        label: Yup.string().required(),
-    }).nullable(),
-    product_id: Yup.array()
-        .of(Yup.number()).min(1, 'Pilih minimal 1 produk')
-        .required('Produk wajib diisi!'),
-    qty_product: Yup.array()
-        .of(Yup.number().min(1, 'Kuantitas minimal 1'))
-        .min(1, 'Pilih minimal 1 produk')
-        .required('Kuantitas wajib diisi!'),
-    ekspedisi: Yup.array().of(
-        Yup.object({
-            product: Yup.object({
-                value: Yup.number().min(1).required(),
-                label: Yup.string().required(),
-            }).nullable(),
-            product_id: Yup.number()
-                .required('Produk wajib diisi!'),
-            qty: Yup.number().min(1, 'Kuantitas minimal 1')
-                .required('Kuantitas wajib diisi!'),
-            supplier: Yup.object({
-                value: Yup.number().min(1).required(),
-                label: Yup.string().required(),
-            }).nullable(),
-            supplier_id: Yup.number()
-                .required('Supplier wajib diisi!'),
-            plat_nomor: Yup.string()
-                .required('Plat Nomor wajib diisi!'),
-            no_surat_jalan: Yup.string()
-                .required('No Surat Jalan wajib diisi!'),
-            dokumen: Yup.mixed()
-                .required('Dokumen wajib diisi!'),
-            biaya_ekspedisi: Yup.number()
-                .min(0, 'Biaya Ekspedisi minimal 0')
-                .required('Biaya Ekspedisi wajib diisi!'),
-            nama_sopir: Yup.string()
-                .required('Nama Sopir wajib diisi!'),
-        })
-    ).min(1, 'Pilih minimal 1 ekspedisi').required('Ekspedisi wajib diisi!'),
+  alasan_transfer: Yup.string().required('Alasan transfer wajib diisi!'),
+  tanggal_transfer: Yup.string().required('Tanggal transfer wajib diisi!'),
+  warehouse_asal: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  warehouse_asal_id: Yup.number()
+    .required('Gudang asal wajib diisi!')
+    .typeError('Gudang asal wajib diisi!'),
+  warehouse_tujuan: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  warehouse_tujuan_id: Yup.number()
+    .required('Gudang tujuan wajib diisi!')
+    .typeError('Gudang tujuan wajib diisi!'),
+  product: Yup.array()
+    .of(
+      Yup.object({
+        product: Yup.object({
+          value: Yup.number().min(1).required(),
+          label: Yup.string().required(),
+        }).nullable(),
+        product_id: Yup.number().required('Produk wajib diisi!'),
+        qty_product: Yup.number()
+          .required('Qty wajib diisi!')
+          .min(1, 'Qty minimal 1!')
+          .typeError('Qty harus berupa angka!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 produk!'),
+  ekspedisi: Yup.array()
+    .of(
+      Yup.object({
+        product: Yup.object({
+          value: Yup.number().min(1).required(),
+          label: Yup.string().required(),
+        }).nullable(),
+        product_id: Yup.number().required('Produk wajib diisi!'),
+        qty: Yup.number()
+          .required('Qty wajib diisi!')
+          .min(1, 'Qty minimal 1!')
+          .typeError('Qty harus berupa angka!'),
+        supplier: Yup.object({
+          value: Yup.number().min(1).required(),
+          label: Yup.string().required(),
+        }).nullable(),
+        supplier_id: Yup.number().required('Supplier wajib diisi!'),
+        plat_nomor: Yup.string().required('Plat nomor wajib diisi!'),
+        no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
+        dokumen: Yup.mixed().required('Dokumen wajib diisi!'),
+        biaya_ekspedisi: Yup.number()
+          .required('Biaya ekspedisi wajib diisi!')
+          .min(0, 'Biaya minimal 0!')
+          .typeError('Biaya harus berupa angka!'),
+        nama_sopir: Yup.string().required('Nama sopir wajib diisi!'),
+      })
+    )
+    .optional()
+    .default([]),
 });
 
 export const UpdateMovementFormSchema = MovementFormSchema;
 
-export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
\ No newline at end of file
+export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
new file mode 100644
index 00000000..0105768d
--- /dev/null
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -0,0 +1,751 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { FieldArray, FormikProvider, useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  MovementFormSchema,
+  MovementFormValues,
+  UpdateMovementFormSchema,
+} from '@/components/pages/inventory/movement/form/MovementForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  Movement,
+  CreateMovementPayload,
+  UpdateMovementPayload,
+} from '@/types/api/inventory/movement';
+import {
+  ProductApi,
+  WarehouseApi,
+  SupplierApi,
+} from '@/services/api/master-data';
+import { MovementApi } from '@/services/api/inventory';
+import { cn } from '@/lib/helper';
+
+interface MovementFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Movement;
+}
+
+const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createMovementHandler = useCallback(
+    async (payload: CreateMovementPayload) => {
+      const res = await MovementApi.create(payload);
+      if (isResponseError(res)) {
+        setMovementFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/inventory/movement');
+    },
+    [router]
+  );
+
+  const updateMovementHandler = useCallback(
+    async (movementId: number, payload: UpdateMovementPayload) => {
+      const res = await MovementApi.update(movementId, payload);
+      if (res?.status === 'error') {
+        setMovementFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/inventory/movement');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<MovementFormValues>(
+    () => ({
+      alasan_transfer: initialValues?.alasan_transfer ?? '',
+      tanggal_transfer: initialValues?.tanggal_transfer ?? '',
+      warehouse_asal: initialValues?.warehouse_asal
+        ? {
+            value: initialValues.warehouse_asal.id,
+            label: initialValues.warehouse_asal.name,
+          }
+        : null,
+      warehouse_asal_id: initialValues?.warehouse_asal?.id ?? 0,
+      warehouse_tujuan: initialValues?.warehouse_tujuan
+        ? {
+            value: initialValues.warehouse_tujuan.id,
+            label: initialValues.warehouse_tujuan.name,
+          }
+        : null,
+      warehouse_tujuan_id: initialValues?.warehouse_tujuan?.id ?? 0,
+      product:
+        initialValues?.product?.map((p) => ({
+          product: { value: p.product.id, label: p.product.name },
+          product_id: p.product.id,
+          qty_product: p.qty_product,
+        })) ?? [],
+      ekspedisi:
+        initialValues?.ekspedisi?.map((e) => ({
+          product: { value: e.product_id, label: '' }, // Need to fetch product details
+          product_id: e.product_id,
+          qty: e.qty,
+          supplier: { value: e.supplier.id, label: e.supplier.name },
+          supplier_id: e.supplier.id,
+          plat_nomor: e.plat_nomor,
+          no_surat_jalan: e.no_surat_jalan,
+          dokumen: e.dokumen,
+          biaya_ekspedisi: e.biaya_ekspedisi,
+          nama_sopir: e.nama_sopir,
+        })) ?? [],
+    }),
+    [initialValues]
+  );
+
+  const formik = useFormik<MovementFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
+    onSubmit: async (values) => {
+      setMovementFormErrorMessage('');
+      const payload: CreateMovementPayload = {
+        alasan_transfer: values.alasan_transfer,
+        tanggal_transfer: values.tanggal_transfer,
+        warehouse_asal_id: values.warehouse_asal_id,
+        warehouse_tujuan_id: values.warehouse_tujuan_id,
+        product: (values.product ?? []).map((p) => ({
+          product_id: p.product_id,
+          qty_product: p.qty_product,
+        })),
+        ekspedisi: (values.ekspedisi ?? []).map((e) => ({
+          product_id: e.product_id,
+          qty: e.qty,
+          supplier_id: e.supplier_id,
+          plat_nomor: e.plat_nomor,
+          no_surat_jalan: e.no_surat_jalan,
+          dokumen:
+            e.dokumen instanceof File ? e.dokumen : (e.dokumen as string),
+          biaya_ekspedisi: e.biaya_ekspedisi,
+          nama_sopir: e.nama_sopir,
+        })),
+      };
+
+      switch (type) {
+        case 'add':
+          await createMovementHandler(payload);
+          break;
+        case 'edit':
+          await updateMovementHandler(initialValues?.id as number, payload);
+          break;
+      }
+    },
+  });
+
+  // Warehouse selection
+  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
+    useState('');
+  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
+  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+    warehousesUrl,
+    WarehouseApi.getAllFetcher
+  );
+  const warehouseOptions = isResponseSuccess(warehouses)
+    ? warehouses?.data.map((w) => ({ value: w.id, label: w.name }))
+    : [];
+
+  // Product selection
+  const [productSelectInputValue, setProductSelectInputValue] = useState('');
+  const productsUrl = `${ProductApi.basePath}?${new URLSearchParams({ search: productSelectInputValue }).toString()}`;
+  const { data: products, isLoading: isLoadingProducts } = useSWR(
+    productsUrl,
+    ProductApi.getAllFetcher
+  );
+  const productOptions = isResponseSuccess(products)
+    ? products?.data.map((p) => ({ value: p.id, label: p.name }))
+    : [];
+
+  // Supplier selection
+  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
+  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    suppliersUrl,
+    SupplierApi.getAllFetcher
+  );
+  const supplierOptions = isResponseSuccess(suppliers)
+    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
+    : [];
+
+  const deleteMovementClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    await MovementApi.delete(initialValues?.id as number);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Movement!');
+    setIsDeleteLoading(false);
+    router.push('/inventory/movement');
+  };
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/inventory/movement'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Movement'}
+            {type === 'edit' && 'Edit Movement'}
+            {type === 'detail' && 'Detail Movement'}
+          </h1>
+        </header>
+
+        <FormikProvider value={formik}>
+          <form
+            onSubmit={formik.handleSubmit}
+            onReset={formik.handleReset}
+            className='w-full mt-8 flex flex-col gap-6'
+          >
+            {/* Top card - Movement details */}
+            <div className='card bg-base-100 shadow mb-4'>
+              <div className='card-body'>
+                <div className='flex gap-4'>
+                  <TextInput
+                    required
+                    label='Alasan Transfer'
+                    name='alasan_transfer'
+                    value={formik.values.alasan_transfer}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    isError={
+                      formik.touched.alasan_transfer &&
+                      Boolean(formik.errors.alasan_transfer)
+                    }
+                    errorMessage={formik.errors.alasan_transfer}
+                    readOnly={type === 'detail'}
+                  />
+                  <TextInput
+                    required
+                    label='Tanggal Transfer'
+                    type='date'
+                    name='tanggal_transfer'
+                    value={formik.values.tanggal_transfer}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    isError={
+                      formik.touched.tanggal_transfer &&
+                      Boolean(formik.errors.tanggal_transfer)
+                    }
+                    errorMessage={formik.errors.tanggal_transfer}
+                    readOnly={type === 'detail'}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Warehouse cards */}
+            <div className='grid grid-cols-2 gap-4 mb-4'>
+              <div className='card bg-base-100 shadow'>
+                <div className='card-body'>
+                  <SelectInput
+                    required
+                    label='Gudang Asal'
+                    value={formik.values.warehouse_asal ?? undefined}
+                    onChange={(val) => {
+                      formik.setFieldValue('warehouse_asal', val);
+                      formik.setFieldValue(
+                        'warehouse_asal_id',
+                        (val as OptionType)?.value
+                      );
+                    }}
+                    options={warehouseOptions}
+                    onInputChange={setWarehouseSelectInputValue}
+                    isLoading={isLoadingWarehouses}
+                    isError={
+                      formik.touched.warehouse_asal_id &&
+                      Boolean(formik.errors.warehouse_asal_id)
+                    }
+                    errorMessage={formik.errors.warehouse_asal_id as string}
+                    isDisabled={type === 'detail'}
+                    isClearable
+                  />
+                </div>
+              </div>
+
+              <div className='card bg-base-100 shadow'>
+                <div className='card-body'>
+                  <SelectInput
+                    required
+                    label='Gudang Tujuan'
+                    value={formik.values.warehouse_tujuan ?? undefined}
+                    onChange={(val) => {
+                      formik.setFieldValue('warehouse_tujuan', val);
+                      formik.setFieldValue(
+                        'warehouse_tujuan_id',
+                        (val as OptionType)?.value
+                      );
+                    }}
+                    options={warehouseOptions}
+                    onInputChange={setWarehouseSelectInputValue}
+                    isLoading={isLoadingWarehouses}
+                    isError={
+                      formik.touched.warehouse_tujuan_id &&
+                      Boolean(formik.errors.warehouse_tujuan_id)
+                    }
+                    errorMessage={formik.errors.warehouse_tujuan_id as string}
+                    isDisabled={type === 'detail'}
+                    isClearable
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Products table */}
+            <div className='card bg-base-100 shadow mb-4'>
+              <div className='card-body'>
+                <h2 className='card-title mb-4'>Produk</h2>
+                <FieldArray name='product'>
+                  {({ push, remove }) => (
+                    <>
+                      {typeof formik.errors.product === 'string' && (
+                        <div className='text-error'>
+                          {formik.errors.product}
+                        </div>
+                      )}
+                      <table className='table'>
+                        <thead>
+                          <tr>
+                            <th>Produk</th>
+                            <th>Qty</th>
+                            <th>Aksi</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {formik.values.product?.map((_, index) => (
+                            <tr key={index}>
+                              <td>
+                                <SelectInput
+                                  required
+                                  value={
+                                    formik.values.product?.[index]?.product ??
+                                    undefined
+                                  }
+                                  onChange={(val) => {
+                                    formik.setFieldValue(
+                                      `product.${index}.product`,
+                                      val
+                                    );
+                                    formik.setFieldValue(
+                                      `product.${index}.product_id`,
+                                      (val as OptionType)?.value
+                                    );
+                                  }}
+                                  options={productOptions}
+                                  onInputChange={setProductSelectInputValue}
+                                  isLoading={isLoadingProducts}
+                                  isDisabled={type === 'detail'}
+                                  isClearable
+                                />
+                              </td>
+                              <td>
+                                <TextInput
+                                  required
+                                  name={`product.${index}.qty_product`}
+                                  type='number'
+                                  value={
+                                    formik.values.product?.[index]
+                                      ?.qty_product ?? ''
+                                  }
+                                  onChange={(e) =>
+                                    formik.setFieldValue(
+                                      `product.${index}.qty_product`,
+                                      e.target.value
+                                    )
+                                  }
+                                  readOnly={type === 'detail'}
+                                />
+                              </td>
+                              <td>
+                                {type !== 'detail' && (
+                                  <Button
+                                    type='button'
+                                    color='error'
+                                    onClick={() => remove(index)}
+                                  >
+                                    <Icon icon='material-symbols:delete-outline' />
+                                  </Button>
+                                )}
+                              </td>
+                            </tr>
+                          )) ?? []}
+                        </tbody>
+                      </table>
+                      {type !== 'detail' && (
+                        <Button
+                          type='button'
+                          color='primary'
+                          onClick={() =>
+                            push({
+                              product: null,
+                              product_id: 0,
+                              qty_product: 0,
+                            })
+                          }
+                          className='mt-4'
+                        >
+                          <Icon icon='ic:round-plus' />
+                          Tambah Produk
+                        </Button>
+                      )}
+                    </>
+                  )}
+                </FieldArray>
+              </div>
+            </div>
+
+            {/* Ekspedisi table */}
+            <div className='card bg-base-100 shadow mb-4'>
+              <div className='card-body'>
+                <h2 className='card-title mb-4'>Ekspedisi</h2>
+                <FieldArray name='ekspedisi'>
+                  {({ push, remove }) => (
+                    <>
+                      {typeof formik.errors.ekspedisi === 'string' && (
+                        <div className='text-error'>
+                          {formik.errors.ekspedisi}
+                        </div>
+                      )}
+                      <table className='table'>
+                        <thead>
+                          <tr>
+                            <th>Produk</th>
+                            <th>Qty</th>
+                            <th>Supplier</th>
+                            <th>Plat Nomor</th>
+                            <th>No Surat Jalan</th>
+                            <th>Dokumen</th>
+                            <th>Biaya Ekspedisi</th>
+                            <th>Nama Sopir</th>
+                            <th>Aksi</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {formik.values.ekspedisi?.map((ekspedisi, index) => (
+                            <tr key={index}>
+                              <td>
+                                <SelectInput
+                                  required
+                                  value={
+                                    formik.values.ekspedisi?.[index]?.product ??
+                                    undefined
+                                  }
+                                  onChange={(val) => {
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.product`,
+                                      val
+                                    );
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.product_id`,
+                                      (val as OptionType)?.value
+                                    );
+                                  }}
+                                  options={productOptions}
+                                  onInputChange={setProductSelectInputValue}
+                                  isLoading={isLoadingProducts}
+                                  isDisabled={type === 'detail'}
+                                  isClearable
+                                />
+                              </td>
+                              <td>
+                                <TextInput
+                                  name={`ekspedisi.${index}.qty`}
+                                  required
+                                  type='number'
+                                  value={
+                                    formik.values.ekspedisi?.[index]?.qty ?? ''
+                                  }
+                                  onChange={(e) =>
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.qty`,
+                                      e.target.value
+                                    )
+                                  }
+                                  readOnly={type === 'detail'}
+                                />
+                              </td>
+                              <td>
+                                <SelectInput
+                                  required
+                                  value={
+                                    formik.values.ekspedisi?.[index]
+                                      ?.supplier ?? undefined
+                                  }
+                                  onChange={(val) => {
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.supplier`,
+                                      val
+                                    );
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.supplier_id`,
+                                      (val as OptionType)?.value
+                                    );
+                                  }}
+                                  options={supplierOptions}
+                                  onInputChange={setSupplierSelectInputValue}
+                                  isLoading={isLoadingSuppliers}
+                                  isDisabled={type === 'detail'}
+                                  isClearable
+                                />
+                              </td>
+                              <td>
+                                <TextInput
+                                  name={`ekspedisi.${index}.plat_nomor`}
+                                  required
+                                  value={
+                                    formik.values.ekspedisi?.[index]
+                                      ?.plat_nomor ?? ''
+                                  }
+                                  onChange={(e) =>
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.plat_nomor`,
+                                      e.target.value
+                                    )
+                                  }
+                                  readOnly={type === 'detail'}
+                                />
+                              </td>
+                              <td>
+                                <TextInput
+                                  name={`ekspedisi.${index}.no_surat_jalan`}
+                                  required
+                                  value={
+                                    formik.values.ekspedisi?.[index]
+                                      ?.no_surat_jalan ?? ''
+                                  }
+                                  onChange={(e) =>
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.no_surat_jalan`,
+                                      e.target.value
+                                    )
+                                  }
+                                  readOnly={type === 'detail'}
+                                />
+                              </td>
+                              <td>
+                                <TextInput
+                                  name={`ekspedisi.${index}.dokumen`}
+                                  required
+                                  type='file'
+                                  onChange={(e) => {
+                                    const file = e.target.files?.[0];
+                                    if (file) {
+                                      formik.setFieldValue(
+                                        `ekspedisi.${index}.dokumen`,
+                                        file
+                                      );
+                                    }
+                                  }}
+                                  readOnly={type === 'detail'}
+                                />
+                              </td>
+                              <td>
+                                <TextInput
+                                  name={`ekspedisi.${index}.biaya_ekspedisi`}
+                                  required
+                                  type='number'
+                                  value={
+                                    formik.values.ekspedisi?.[index]
+                                      ?.biaya_ekspedisi ?? ''
+                                  }
+                                  onChange={(e) =>
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.biaya_ekspedisi`,
+                                      e.target.value
+                                    )
+                                  }
+                                  readOnly={type === 'detail'}
+                                />
+                              </td>
+                              <td>
+                                <TextInput
+                                  name={`ekspedisi.${index}.nama_sopir`}
+                                  required
+                                  value={
+                                    formik.values.ekspedisi?.[index]
+                                      ?.nama_sopir ?? ''
+                                  }
+                                  onChange={(e) =>
+                                    formik.setFieldValue(
+                                      `ekspedisi.${index}.nama_sopir`,
+                                      e.target.value
+                                    )
+                                  }
+                                  readOnly={type === 'detail'}
+                                />
+                              </td>
+                              <td>
+                                {type !== 'detail' && (
+                                  <Button
+                                    type='button'
+                                    color='error'
+                                    onClick={() => remove(index)}
+                                  >
+                                    <Icon icon='material-symbols:delete-outline' />
+                                  </Button>
+                                )}
+                              </td>
+                            </tr>
+                          )) ?? []}
+                        </tbody>
+                      </table>
+                      {type !== 'detail' && (
+                        <Button
+                          type='button'
+                          color='primary'
+                          onClick={() =>
+                            push({
+                              product: null,
+                              product_id: 0,
+                              qty: 0,
+                              supplier: null,
+                              supplier_id: 0,
+                              plat_nomor: '',
+                              no_surat_jalan: '',
+                              dokumen: '',
+                              biaya_ekspedisi: 0,
+                              nama_sopir: '',
+                            })
+                          }
+                          className='mt-4'
+                        >
+                          <Icon icon='ic:round-plus' />
+                          Tambah Ekspedisi
+                        </Button>
+                      )}
+                    </>
+                  )}
+                </FieldArray>
+              </div>
+            </div>
+
+            {/* Action buttons */}
+            <div className='flex flex-row justify-between gap-2 flex-wrap'>
+              {type !== 'add' && (
+                <div className='flex flex-row justify-start gap-2'>
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={deleteMovementClickHandler}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Delete
+                  </Button>
+                  {type !== 'edit' && (
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/inventory/movement/detail/edit/?movementId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  )}
+                </div>
+              )}
+              {type !== 'detail' && (
+                <div
+                  className={cn('flex flex-row justify-end gap-2', {
+                    'w-full': type === 'add',
+                  })}
+                >
+                  <Button
+                    type='reset'
+                    color='warning'
+                    className='px-4'
+                    onClick={formik.handleReset}
+                  >
+                    Reset
+                  </Button>
+                  <Button
+                    type='submit'
+                    color='primary'
+                    className='px-4'
+                    isLoading={formik.isSubmitting}
+                    disabled={!formik.isValid || formik.isSubmitting}
+                  >
+                    Submit
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            {movementFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{movementFormErrorMessage}</span>
+              </div>
+            )}
+          </form>
+        </FormikProvider>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Movement ini?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default MovementForm;
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index fe2996ba..0d58b8e1 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -1,51 +1,51 @@
-import {BaseMetadata} from '@/types/api/api-general';
-import {Product} from "@/types/api/master-data/product";
-import {Supplier} from "@/types/api/master-data/supplier";
-import {Warehouse} from "@/types/api/master-data/warehouse";
+import { BaseMetadata } from '@/types/api/api-general';
+import { Product } from '@/types/api/master-data/product';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Warehouse } from '@/types/api/master-data/warehouse';
 
 export type BaseMovement = {
-    id: number;
-    alasan_transfer: string;
-    tanggal_transfer: string;
-    warehouse_asal: Warehouse;
-    warehouse_tujuan: Warehouse;
-    product: Array<{
-        product: Product;
-        qty_product: number;
-    }>;
-    ekspedisi: Array<{
-        product_id: number;
-        qty: number;
-        supplier: Supplier;
-        plat_nomor: string;
-        no_surat_jalan: string;
-        dokumen: string;
-        biaya_ekspedisi: number;
-        nama_sopir: string;
-    }>;
-    name: string;
+  id: number;
+  alasan_transfer: string;
+  tanggal_transfer: string;
+  warehouse_asal: Warehouse;
+  warehouse_tujuan: Warehouse;
+  product: {
+    product: Product;
+    qty_product: number;
+  }[];
+  ekspedisi: {
+    product_id: number;
+    qty: number;
+    supplier: Supplier;
+    plat_nomor: string;
+    no_surat_jalan: string;
+    dokumen: string;
+    biaya_ekspedisi: number;
+    nama_sopir: string;
+  }[];
 };
 
 export type Movement = BaseMetadata & BaseMovement;
 
 export type CreateMovementPayload = {
-    alasan: string;
-    warehouse_asal_id: number;
-    warehouse_tujuan_id: number;
-    product: Array<{
-        product_id: number;
-        qty_product: number;
-    }>;
-    ekspedisi: Array<{
-        product_id: number;
-        qty: number;
-        supplier_id: number;
-        plat_nomor: string;
-        no_surat_jalan: string;
-        dokumen: string;
-        biaya_ekspedisi: number;
-        nama_sopir: string;
-    }>;
-}
+  alasan_transfer: string;
+  tanggal_transfer: string;
+  warehouse_asal_id: number;
+  warehouse_tujuan_id: number;
+  product: {
+    product_id: number;
+    qty_product: number;
+  }[];
+  ekspedisi: {
+    product_id: number;
+    qty: number;
+    supplier_id: number;
+    plat_nomor: string;
+    no_surat_jalan: string;
+    dokumen: string | File;
+    biaya_ekspedisi: number;
+    nama_sopir: string;
+  }[];
+};
 
-export type UpdateMovementPayload = CreateMovementPayload;
\ No newline at end of file
+export type UpdateMovementPayload = CreateMovementPayload;

From c17ffc6aff22bc2dd58e9aba7fe88e6e2b1d55dc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 9 Oct 2025 14:34:25 +0700
Subject: [PATCH 005/212] feat(FE-62): add MovementEdit and MovementDetail
 components for inventory movement management

---
 .../inventory/movement/detail/edit/page.tsx   | 48 +++++++++++++++++++
 src/app/inventory/movement/detail/layout.tsx  | 11 +++++
 src/app/inventory/movement/detail/page.tsx    | 48 +++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 src/app/inventory/movement/detail/edit/page.tsx
 create mode 100644 src/app/inventory/movement/detail/layout.tsx
 create mode 100644 src/app/inventory/movement/detail/page.tsx

diff --git a/src/app/inventory/movement/detail/edit/page.tsx b/src/app/inventory/movement/detail/edit/page.tsx
new file mode 100644
index 00000000..bde4ece1
--- /dev/null
+++ b/src/app/inventory/movement/detail/edit/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import MovementForm from '@/components/pages/inventory/movement/form/MovementForm';
+import { MovementApi } from '@/services/api/inventory';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const MovementEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const movementId = searchParams.get('movementId');
+
+  const { data: movement, isLoading: isLoadingMovement } = useSWR(
+    movementId,
+    (id: number) => MovementApi.getSingle(id)
+  );
+
+  if (!movementId) {
+    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 (!isLoadingMovement && (!movement || isResponseError(movement))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingMovement && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingMovement && isResponseSuccess(movement) && (
+        <MovementForm type='edit' initialValues={movement.data} />
+      )}
+    </div>
+  );
+};
+
+export default MovementEdit;
diff --git a/src/app/inventory/movement/detail/layout.tsx b/src/app/inventory/movement/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/inventory/movement/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/inventory/movement/detail/page.tsx b/src/app/inventory/movement/detail/page.tsx
new file mode 100644
index 00000000..5947cd1b
--- /dev/null
+++ b/src/app/inventory/movement/detail/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import MovementForm from '@/components/pages/inventory/movement/form/MovementForm';
+import { MovementApi } from '@/services/api/inventory';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const MovementDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const movementId = searchParams.get('movementId');
+
+  const { data: movement, isLoading: isLoadingMovement } = useSWR(
+    movementId,
+    (id: number) => MovementApi.getSingle(id)
+  );
+
+  if (!movementId) {
+    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 (!isLoadingMovement && (!movement || isResponseError(movement))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingMovement && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingMovement && isResponseSuccess(movement) && (
+        <MovementForm type='detail' initialValues={movement.data} />
+      )}
+    </div>
+  );
+};
+
+export default MovementDetail;

From 7dbf8802284755a52318d7d9fdf7ada55965913c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 08:39:34 +0700
Subject: [PATCH 006/212] feat(FE-62): add FormActions and FormHeader
 components for form management

---
 src/components/helper/form/FormActions.tsx    | 82 +++++++++++++++++++
 src/components/helper/form/FormHeader.tsx     | 24 ++++++
 .../movement/form/useMovementFormHandlers.ts  | 69 ++++++++++++++++
 3 files changed, 175 insertions(+)
 create mode 100644 src/components/helper/form/FormActions.tsx
 create mode 100644 src/components/helper/form/FormHeader.tsx
 create mode 100644 src/components/pages/inventory/movement/form/useMovementFormHandlers.ts

diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
new file mode 100644
index 00000000..25b586c3
--- /dev/null
+++ b/src/components/helper/form/FormActions.tsx
@@ -0,0 +1,82 @@
+import { Icon } from '@iconify/react';
+import { FormikContextType } from 'formik';
+import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
+
+interface FormActionsProps<T> {
+  type: 'add' | 'edit' | 'detail';
+  formik: FormikContextType<T>;
+  editUrl?: string;
+  onDelete?: () => void;
+}
+
+export const FormActions = <T,>({
+  type,
+  formik,
+  editUrl,
+  onDelete,
+}: FormActionsProps<T>) => {
+  return (
+    <div className='flex flex-row justify-between gap-2 flex-wrap'>
+      {type !== 'add' && onDelete && (
+        <div className='flex flex-row justify-start gap-2'>
+          <Button
+            type='button'
+            color='error'
+            onClick={onDelete}
+            className='px-4'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={24}
+              height={24}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+          {type !== 'edit' && editUrl && (
+            <Button
+              type='button'
+              color='warning'
+              href={editUrl}
+              className='px-4'
+            >
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={24}
+                height={24}
+                className='justify-start text-sm'
+              />
+              Edit
+            </Button>
+          )}
+        </div>
+      )}
+      {type !== 'detail' && (
+        <div
+          className={cn('flex flex-row justify-end gap-2', {
+            'w-full': type === 'add',
+          })}
+        >
+          <Button
+            type='reset'
+            color='warning'
+            className='px-4'
+            onClick={formik.handleReset}
+          >
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            color='primary'
+            className='px-4'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/helper/form/FormHeader.tsx b/src/components/helper/form/FormHeader.tsx
new file mode 100644
index 00000000..ebc1d7ae
--- /dev/null
+++ b/src/components/helper/form/FormHeader.tsx
@@ -0,0 +1,24 @@
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+
+interface FormHeaderProps {
+  type: 'add' | 'edit' | 'detail';
+  title: string;
+  backUrl: string;
+}
+
+export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
+  return (
+    <header className='flex flex-col gap-4'>
+      <Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
+        <Icon icon='uil:arrow-left' width={24} height={24} />
+        Kembali
+      </Button>
+      <h1 className='text-2xl font-bold text-center'>
+        {type === 'add' && `Tambah ${title}`}
+        {type === 'edit' && `Edit ${title}`}
+        {type === 'detail' && `Detail ${title}`}
+      </h1>
+    </header>
+  );
+};
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
new file mode 100644
index 00000000..f6531bf4
--- /dev/null
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -0,0 +1,69 @@
+import { useCallback, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-hot-toast';
+import { useModal } from '@/components/Modal';
+import { MovementApi } from '@/services/api/inventory';
+import {
+  CreateMovementPayload,
+  UpdateMovementPayload,
+} from '@/types/api/inventory/movement';
+import { isResponseError } from '@/lib/api-helper';
+
+export const useMovementFormHandlers = (initialValuesId?: number) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createMovementHandler = useCallback(
+    async (payload: CreateMovementPayload) => {
+      const res = await MovementApi.create(payload);
+      if (isResponseError(res)) {
+        setMovementFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/inventory/movement');
+    },
+    [router]
+  );
+
+  const updateMovementHandler = useCallback(
+    async (movementId: number, payload: UpdateMovementPayload) => {
+      const res = await MovementApi.update(movementId, payload);
+      if (res?.status === 'error') {
+        setMovementFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/inventory/movement');
+    },
+    [router]
+  );
+
+  const deleteMovementClickHandler = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    if (!initialValuesId) return;
+
+    setIsDeleteLoading(true);
+    await MovementApi.delete(initialValuesId);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Movement!');
+    setIsDeleteLoading(false);
+    router.push('/inventory/movement');
+  }, [deleteModal, initialValuesId, router]);
+
+  return {
+    deleteModal,
+    movementFormErrorMessage,
+    isDeleteLoading,
+    createMovementHandler,
+    updateMovementHandler,
+    deleteMovementClickHandler,
+    confirmationModalDeleteClickHandler,
+  };
+};

From a9cdea73182518bdc81c03bce4825d5b4f2d63fb Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 08:40:17 +0700
Subject: [PATCH 007/212] feat(FE-65): enhance MovementForm with initial values
 handling and refactor components

---
 .../movement/form/MovementForm.schema.ts      |  41 ++++
 .../inventory/movement/form/MovementForm.tsx  | 219 +++---------------
 2 files changed, 78 insertions(+), 182 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 11c40fe5..7a34dfbd 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -1,4 +1,5 @@
 import * as Yup from 'yup';
+import { Movement } from '@/types/api/inventory/movement';
 
 export const MovementFormSchema = Yup.object({
   alasan_transfer: Yup.string().required('Alasan transfer wajib diisi!'),
@@ -66,3 +67,43 @@ export const MovementFormSchema = Yup.object({
 export const UpdateMovementFormSchema = MovementFormSchema;
 
 export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
+
+export const getMovementFormInitialValues = (
+  initialValues?: Movement
+): MovementFormValues => ({
+  alasan_transfer: initialValues?.alasan_transfer ?? '',
+  tanggal_transfer: initialValues?.tanggal_transfer ?? '',
+  warehouse_asal: initialValues?.warehouse_asal
+    ? {
+        value: initialValues.warehouse_asal.id,
+        label: initialValues.warehouse_asal.name,
+      }
+    : null,
+  warehouse_asal_id: initialValues?.warehouse_asal?.id ?? 0,
+  warehouse_tujuan: initialValues?.warehouse_tujuan
+    ? {
+        value: initialValues.warehouse_tujuan.id,
+        label: initialValues.warehouse_tujuan.name,
+      }
+    : null,
+  warehouse_tujuan_id: initialValues?.warehouse_tujuan?.id ?? 0,
+  product:
+    initialValues?.product?.map((p) => ({
+      product: { value: p.product.id, label: p.product.name },
+      product_id: p.product.id,
+      qty_product: p.qty_product,
+    })) ?? [],
+  ekspedisi:
+    initialValues?.ekspedisi?.map((e) => ({
+      product: { value: e.product_id, label: '' },
+      product_id: e.product_id,
+      qty: e.qty,
+      supplier: { value: e.supplier.id, label: e.supplier.name },
+      supplier_id: e.supplier.id,
+      plat_nomor: e.plat_nomor,
+      no_surat_jalan: e.no_surat_jalan,
+      dokumen: e.dokumen,
+      biaya_ekspedisi: e.biaya_ekspedisi,
+      nama_sopir: e.nama_sopir,
+    })) ?? [],
+});
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 0105768d..839b83fe 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1,36 +1,33 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 import { FieldArray, FormikProvider, useFormik } from 'formik';
-import { toast } from 'react-hot-toast';
 import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { FormActions } from '@/components/helper/form/FormActions';
+import {
+  CreateMovementPayload,
+  Movement,
+} from '@/types/api/inventory/movement';
+import { isResponseSuccess } from '@/lib/api-helper';
 import {
   MovementFormSchema,
   MovementFormValues,
   UpdateMovementFormSchema,
+  getMovementFormInitialValues,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import {
-  Movement,
-  CreateMovementPayload,
-  UpdateMovementPayload,
-} from '@/types/api/inventory/movement';
+import { useMovementFormHandlers } from './useMovementFormHandlers';
 import {
   ProductApi,
-  WarehouseApi,
   SupplierApi,
+  WarehouseApi,
 } from '@/services/api/master-data';
-import { MovementApi } from '@/services/api/inventory';
-import { cn } from '@/lib/helper';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -38,77 +35,20 @@ interface MovementFormProps {
 }
 
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
-  const router = useRouter();
-  const deleteModal = useModal();
+  const [, setMovementFormErrorMessage] = useState('');
 
-  const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const createMovementHandler = useCallback(
-    async (payload: CreateMovementPayload) => {
-      const res = await MovementApi.create(payload);
-      if (isResponseError(res)) {
-        setMovementFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.push('/inventory/movement');
-    },
-    [router]
-  );
-
-  const updateMovementHandler = useCallback(
-    async (movementId: number, payload: UpdateMovementPayload) => {
-      const res = await MovementApi.update(movementId, payload);
-      if (res?.status === 'error') {
-        setMovementFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.refresh();
-      router.push('/inventory/movement');
-    },
-    [router]
-  );
+  const {
+    deleteModal,
+    movementFormErrorMessage,
+    isDeleteLoading,
+    createMovementHandler,
+    updateMovementHandler,
+    deleteMovementClickHandler,
+    confirmationModalDeleteClickHandler,
+  } = useMovementFormHandlers(initialValues?.id);
 
   const formikInitialValues = useMemo<MovementFormValues>(
-    () => ({
-      alasan_transfer: initialValues?.alasan_transfer ?? '',
-      tanggal_transfer: initialValues?.tanggal_transfer ?? '',
-      warehouse_asal: initialValues?.warehouse_asal
-        ? {
-            value: initialValues.warehouse_asal.id,
-            label: initialValues.warehouse_asal.name,
-          }
-        : null,
-      warehouse_asal_id: initialValues?.warehouse_asal?.id ?? 0,
-      warehouse_tujuan: initialValues?.warehouse_tujuan
-        ? {
-            value: initialValues.warehouse_tujuan.id,
-            label: initialValues.warehouse_tujuan.name,
-          }
-        : null,
-      warehouse_tujuan_id: initialValues?.warehouse_tujuan?.id ?? 0,
-      product:
-        initialValues?.product?.map((p) => ({
-          product: { value: p.product.id, label: p.product.name },
-          product_id: p.product.id,
-          qty_product: p.qty_product,
-        })) ?? [],
-      ekspedisi:
-        initialValues?.ekspedisi?.map((e) => ({
-          product: { value: e.product_id, label: '' }, // Need to fetch product details
-          product_id: e.product_id,
-          qty: e.qty,
-          supplier: { value: e.supplier.id, label: e.supplier.name },
-          supplier_id: e.supplier.id,
-          plat_nomor: e.plat_nomor,
-          no_surat_jalan: e.no_surat_jalan,
-          dokumen: e.dokumen,
-          biaya_ekspedisi: e.biaya_ekspedisi,
-          nama_sopir: e.nama_sopir,
-        })) ?? [],
-    }),
+    () => getMovementFormInitialValues(initialValues),
     [initialValues]
   );
 
@@ -185,19 +125,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
     : [];
 
-  const deleteMovementClickHandler = () => {
-    deleteModal.openModal();
-  };
-
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-    await MovementApi.delete(initialValues?.id as number);
-    deleteModal.closeModal();
-    toast.success('Successfully delete Movement!');
-    setIsDeleteLoading(false);
-    router.push('/inventory/movement');
-  };
-
   const { setValues: formikSetValues } = formik;
 
   useEffect(() => {
@@ -207,22 +134,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   return (
     <>
       <section className='w-full max-w-xl'>
-        <header className='flex flex-col gap-4'>
-          <Button
-            href='/inventory/movement'
-            variant='link'
-            className='w-fit p-0 text-primary'
-          >
-            <Icon icon='uil:arrow-left' width={24} height={24} />
-            Kembali
-          </Button>
-          <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Movement'}
-            {type === 'edit' && 'Edit Movement'}
-            {type === 'detail' && 'Detail Movement'}
-          </h1>
-        </header>
-
+        <FormHeader
+          type={type}
+          title='Movement'
+          backUrl='/inventory/movement'
+        />
         <FormikProvider value={formik}>
           <form
             onSubmit={formik.handleSubmit}
@@ -330,11 +246,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <FieldArray name='product'>
                   {({ push, remove }) => (
                     <>
-                      {typeof formik.errors.product === 'string' && (
-                        <div className='text-error'>
-                          {formik.errors.product}
-                        </div>
-                      )}
                       <table className='table'>
                         <thead>
                           <tr>
@@ -433,11 +344,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <FieldArray name='ekspedisi'>
                   {({ push, remove }) => (
                     <>
-                      {typeof formik.errors.ekspedisi === 'string' && (
-                        <div className='text-error'>
-                          {formik.errors.ekspedisi}
-                        </div>
-                      )}
                       <table className='table'>
                         <thead>
                           <tr>
@@ -652,67 +558,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
             </div>
 
             {/* Action buttons */}
-            <div className='flex flex-row justify-between gap-2 flex-wrap'>
-              {type !== 'add' && (
-                <div className='flex flex-row justify-start gap-2'>
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={deleteMovementClickHandler}
-                    className='px-4'
-                  >
-                    <Icon
-                      icon='material-symbols:delete-outline-rounded'
-                      width={24}
-                      height={24}
-                      className='justify-start text-sm'
-                    />
-                    Delete
-                  </Button>
-                  {type !== 'edit' && (
-                    <Button
-                      type='button'
-                      color='warning'
-                      href={`/inventory/movement/detail/edit/?movementId=${initialValues?.id}`}
-                      className='px-4'
-                    >
-                      <Icon
-                        icon='material-symbols:edit-outline'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Edit
-                    </Button>
-                  )}
-                </div>
-              )}
-              {type !== 'detail' && (
-                <div
-                  className={cn('flex flex-row justify-end gap-2', {
-                    'w-full': type === 'add',
-                  })}
-                >
-                  <Button
-                    type='reset'
-                    color='warning'
-                    className='px-4'
-                    onClick={formik.handleReset}
-                  >
-                    Reset
-                  </Button>
-                  <Button
-                    type='submit'
-                    color='primary'
-                    className='px-4'
-                    isLoading={formik.isSubmitting}
-                    disabled={!formik.isValid || formik.isSubmitting}
-                  >
-                    Submit
-                  </Button>
-                </div>
-              )}
-            </div>
+            <FormActions<MovementFormValues>
+              type={type}
+              formik={formik}
+              editUrl={
+                initialValues
+                  ? `/inventory/movement/detail/edit/?movementId=${initialValues.id}`
+                  : undefined
+              }
+              onDelete={deleteMovementClickHandler}
+            />
 
             {movementFormErrorMessage && (
               <div role='alert' className='alert alert-error'>

From 095190d75783841e574f742efc8461c2e16838eb Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 10:19:56 +0700
Subject: [PATCH 008/212] refactor(FE-62,65): refactor MovementForm schema and
 component for improved product and ekspedisi handling

---
 .../movement/form/MovementForm.schema.ts      | 110 +-
 .../inventory/movement/form/MovementForm.tsx  | 950 ++++++++++--------
 2 files changed, 577 insertions(+), 483 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 7a34dfbd..230244be 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -1,6 +1,72 @@
 import * as Yup from 'yup';
 import { Movement } from '@/types/api/inventory/movement';
 
+export type ProductSchema = {
+  product: {
+    value: number;
+    label: string;
+  } | null;
+  product_id: number;
+  qty_product: number;
+};
+
+export type EkspedisiSchema = {
+  product: {
+    value: number;
+    label: string;
+  } | null;
+  product_id: number;
+  qty: number;
+  supplier: {
+    value: number;
+    label: string;
+  } | null;
+  supplier_id: number;
+  plat_nomor: string;
+  no_surat_jalan: string;
+  dokumen: string | File;
+  biaya_ekspedisi: number;
+  nama_sopir: string;
+};
+
+// Define schemas for nested objects
+const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
+  product: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  product_id: Yup.number().required('Produk wajib diisi!'),
+  qty_product: Yup.number()
+    .required('Qty wajib diisi!')
+    .min(1, 'Qty minimal 1!')
+    .typeError('Qty harus berupa angka!'),
+});
+
+const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
+  product: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  product_id: Yup.number().required('Produk wajib diisi!'),
+  qty: Yup.number()
+    .required('Qty wajib diisi!')
+    .min(1, 'Qty minimal 1!')
+    .typeError('Qty harus berupa angka!'),
+  supplier: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  supplier_id: Yup.number().required('Supplier wajib diisi!'),
+  plat_nomor: Yup.string().required('Plat nomor wajib diisi!'),
+  no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
+  dokumen: Yup.mixed<string | File>().required('Dokumen wajib diisi!'),
+  biaya_ekspedisi: Yup.number()
+    .required('Biaya ekspedisi wajib diisi!')
+    .min(0, 'Biaya minimal 0!')
+    .typeError('Biaya harus berupa angka!'),
+  nama_sopir: Yup.string().required('Nama sopir wajib diisi!'),
+});
+
 export const MovementFormSchema = Yup.object({
   alasan_transfer: Yup.string().required('Alasan transfer wajib diisi!'),
   tanggal_transfer: Yup.string().required('Tanggal transfer wajib diisi!'),
@@ -19,49 +85,9 @@ export const MovementFormSchema = Yup.object({
     .required('Gudang tujuan wajib diisi!')
     .typeError('Gudang tujuan wajib diisi!'),
   product: Yup.array()
-    .of(
-      Yup.object({
-        product: Yup.object({
-          value: Yup.number().min(1).required(),
-          label: Yup.string().required(),
-        }).nullable(),
-        product_id: Yup.number().required('Produk wajib diisi!'),
-        qty_product: Yup.number()
-          .required('Qty wajib diisi!')
-          .min(1, 'Qty minimal 1!')
-          .typeError('Qty harus berupa angka!'),
-      })
-    )
+    .of(ProductObjectSchema)
     .min(1, 'Minimal harus ada 1 produk!'),
-  ekspedisi: Yup.array()
-    .of(
-      Yup.object({
-        product: Yup.object({
-          value: Yup.number().min(1).required(),
-          label: Yup.string().required(),
-        }).nullable(),
-        product_id: Yup.number().required('Produk wajib diisi!'),
-        qty: Yup.number()
-          .required('Qty wajib diisi!')
-          .min(1, 'Qty minimal 1!')
-          .typeError('Qty harus berupa angka!'),
-        supplier: Yup.object({
-          value: Yup.number().min(1).required(),
-          label: Yup.string().required(),
-        }).nullable(),
-        supplier_id: Yup.number().required('Supplier wajib diisi!'),
-        plat_nomor: Yup.string().required('Plat nomor wajib diisi!'),
-        no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
-        dokumen: Yup.mixed().required('Dokumen wajib diisi!'),
-        biaya_ekspedisi: Yup.number()
-          .required('Biaya ekspedisi wajib diisi!')
-          .min(0, 'Biaya minimal 0!')
-          .typeError('Biaya harus berupa angka!'),
-        nama_sopir: Yup.string().required('Nama sopir wajib diisi!'),
-      })
-    )
-    .optional()
-    .default([]),
+  ekspedisi: Yup.array().of(EkspedisiObjectSchema).optional().default([]),
 });
 
 export const UpdateMovementFormSchema = MovementFormSchema;
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 839b83fe..bca69015 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
-import { FieldArray, FormikProvider, useFormik } from 'formik';
+import { useFormik } from 'formik';
 import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
@@ -21,6 +21,8 @@ import {
   MovementFormValues,
   UpdateMovementFormSchema,
   getMovementFormInitialValues,
+  ProductSchema,
+  EkspedisiSchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { useMovementFormHandlers } from './useMovementFormHandlers';
 import {
@@ -91,6 +93,72 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     },
   });
 
+  const addProduct = () => {
+    const newProducts = [
+      ...(formik.values.product || []),
+      {
+        product: null,
+        product_id: 0,
+        qty_product: 0,
+      },
+    ];
+    formik.setFieldValue('product', newProducts);
+  };
+
+  const removeProduct = (index: number) => {
+    const newProducts = formik.values.product?.filter(
+      (_, idx) => idx !== index
+    );
+    formik.setFieldValue('product', newProducts);
+  };
+
+  const addEkspedisi = () => {
+    const newEkspedisi = [
+      ...(formik.values.ekspedisi || []),
+      {
+        product: null,
+        product_id: 0,
+        qty: 0,
+        supplier: null,
+        supplier_id: 0,
+        plat_nomor: '',
+        no_surat_jalan: '',
+        dokumen: '',
+        biaya_ekspedisi: 0,
+        nama_sopir: '',
+      },
+    ];
+    formik.setFieldValue('ekspedisi', newEkspedisi);
+  };
+
+  const removeEkspedisi = (index: number) => {
+    const newEkspedisi = formik.values.ekspedisi?.filter(
+      (_, idx) => idx !== index
+    );
+    formik.setFieldValue('ekspedisi', newEkspedisi);
+  };
+
+  const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
+    arrayName: T,
+    column: T extends 'product' ? keyof ProductSchema : keyof EkspedisiSchema,
+    idx: number
+  ) => {
+    if (
+      !formik.touched[arrayName] ||
+      !Array.isArray(formik.touched[arrayName])
+    ) {
+      return false;
+    }
+
+    const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
+    const errorField = formik.errors[arrayName]?.[idx] as Record<
+      string,
+      unknown
+    >;
+
+    return touchedField && Boolean(errorField?.[column as string]);
+  };
+
   // Warehouse selection
   const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
     useState('');
@@ -139,448 +207,448 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           title='Movement'
           backUrl='/inventory/movement'
         />
-        <FormikProvider value={formik}>
-          <form
-            onSubmit={formik.handleSubmit}
-            onReset={formik.handleReset}
-            className='w-full mt-8 flex flex-col gap-6'
-          >
-            {/* Top card - Movement details */}
-            <div className='card bg-base-100 shadow mb-4'>
-              <div className='card-body'>
-                <div className='flex gap-4'>
-                  <TextInput
-                    required
-                    label='Alasan Transfer'
-                    name='alasan_transfer'
-                    value={formik.values.alasan_transfer}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    isError={
-                      formik.touched.alasan_transfer &&
-                      Boolean(formik.errors.alasan_transfer)
-                    }
-                    errorMessage={formik.errors.alasan_transfer}
-                    readOnly={type === 'detail'}
-                  />
-                  <TextInput
-                    required
-                    label='Tanggal Transfer'
-                    type='date'
-                    name='tanggal_transfer'
-                    value={formik.values.tanggal_transfer}
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    isError={
-                      formik.touched.tanggal_transfer &&
-                      Boolean(formik.errors.tanggal_transfer)
-                    }
-                    errorMessage={formik.errors.tanggal_transfer}
-                    readOnly={type === 'detail'}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Warehouse cards */}
-            <div className='grid grid-cols-2 gap-4 mb-4'>
-              <div className='card bg-base-100 shadow'>
-                <div className='card-body'>
-                  <SelectInput
-                    required
-                    label='Gudang Asal'
-                    value={formik.values.warehouse_asal ?? undefined}
-                    onChange={(val) => {
-                      formik.setFieldValue('warehouse_asal', val);
-                      formik.setFieldValue(
-                        'warehouse_asal_id',
-                        (val as OptionType)?.value
-                      );
-                    }}
-                    options={warehouseOptions}
-                    onInputChange={setWarehouseSelectInputValue}
-                    isLoading={isLoadingWarehouses}
-                    isError={
-                      formik.touched.warehouse_asal_id &&
-                      Boolean(formik.errors.warehouse_asal_id)
-                    }
-                    errorMessage={formik.errors.warehouse_asal_id as string}
-                    isDisabled={type === 'detail'}
-                    isClearable
-                  />
-                </div>
-              </div>
-
-              <div className='card bg-base-100 shadow'>
-                <div className='card-body'>
-                  <SelectInput
-                    required
-                    label='Gudang Tujuan'
-                    value={formik.values.warehouse_tujuan ?? undefined}
-                    onChange={(val) => {
-                      formik.setFieldValue('warehouse_tujuan', val);
-                      formik.setFieldValue(
-                        'warehouse_tujuan_id',
-                        (val as OptionType)?.value
-                      );
-                    }}
-                    options={warehouseOptions}
-                    onInputChange={setWarehouseSelectInputValue}
-                    isLoading={isLoadingWarehouses}
-                    isError={
-                      formik.touched.warehouse_tujuan_id &&
-                      Boolean(formik.errors.warehouse_tujuan_id)
-                    }
-                    errorMessage={formik.errors.warehouse_tujuan_id as string}
-                    isDisabled={type === 'detail'}
-                    isClearable
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Products table */}
-            <div className='card bg-base-100 shadow mb-4'>
-              <div className='card-body'>
-                <h2 className='card-title mb-4'>Produk</h2>
-                <FieldArray name='product'>
-                  {({ push, remove }) => (
-                    <>
-                      <table className='table'>
-                        <thead>
-                          <tr>
-                            <th>Produk</th>
-                            <th>Qty</th>
-                            <th>Aksi</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {formik.values.product?.map((_, index) => (
-                            <tr key={index}>
-                              <td>
-                                <SelectInput
-                                  required
-                                  value={
-                                    formik.values.product?.[index]?.product ??
-                                    undefined
-                                  }
-                                  onChange={(val) => {
-                                    formik.setFieldValue(
-                                      `product.${index}.product`,
-                                      val
-                                    );
-                                    formik.setFieldValue(
-                                      `product.${index}.product_id`,
-                                      (val as OptionType)?.value
-                                    );
-                                  }}
-                                  options={productOptions}
-                                  onInputChange={setProductSelectInputValue}
-                                  isLoading={isLoadingProducts}
-                                  isDisabled={type === 'detail'}
-                                  isClearable
-                                />
-                              </td>
-                              <td>
-                                <TextInput
-                                  required
-                                  name={`product.${index}.qty_product`}
-                                  type='number'
-                                  value={
-                                    formik.values.product?.[index]
-                                      ?.qty_product ?? ''
-                                  }
-                                  onChange={(e) =>
-                                    formik.setFieldValue(
-                                      `product.${index}.qty_product`,
-                                      e.target.value
-                                    )
-                                  }
-                                  readOnly={type === 'detail'}
-                                />
-                              </td>
-                              <td>
-                                {type !== 'detail' && (
-                                  <Button
-                                    type='button'
-                                    color='error'
-                                    onClick={() => remove(index)}
-                                  >
-                                    <Icon icon='material-symbols:delete-outline' />
-                                  </Button>
-                                )}
-                              </td>
-                            </tr>
-                          )) ?? []}
-                        </tbody>
-                      </table>
-                      {type !== 'detail' && (
-                        <Button
-                          type='button'
-                          color='primary'
-                          onClick={() =>
-                            push({
-                              product: null,
-                              product_id: 0,
-                              qty_product: 0,
-                            })
-                          }
-                          className='mt-4'
-                        >
-                          <Icon icon='ic:round-plus' />
-                          Tambah Produk
-                        </Button>
-                      )}
-                    </>
-                  )}
-                </FieldArray>
-              </div>
-            </div>
-
-            {/* Ekspedisi table */}
-            <div className='card bg-base-100 shadow mb-4'>
-              <div className='card-body'>
-                <h2 className='card-title mb-4'>Ekspedisi</h2>
-                <FieldArray name='ekspedisi'>
-                  {({ push, remove }) => (
-                    <>
-                      <table className='table'>
-                        <thead>
-                          <tr>
-                            <th>Produk</th>
-                            <th>Qty</th>
-                            <th>Supplier</th>
-                            <th>Plat Nomor</th>
-                            <th>No Surat Jalan</th>
-                            <th>Dokumen</th>
-                            <th>Biaya Ekspedisi</th>
-                            <th>Nama Sopir</th>
-                            <th>Aksi</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {formik.values.ekspedisi?.map((ekspedisi, index) => (
-                            <tr key={index}>
-                              <td>
-                                <SelectInput
-                                  required
-                                  value={
-                                    formik.values.ekspedisi?.[index]?.product ??
-                                    undefined
-                                  }
-                                  onChange={(val) => {
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.product`,
-                                      val
-                                    );
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.product_id`,
-                                      (val as OptionType)?.value
-                                    );
-                                  }}
-                                  options={productOptions}
-                                  onInputChange={setProductSelectInputValue}
-                                  isLoading={isLoadingProducts}
-                                  isDisabled={type === 'detail'}
-                                  isClearable
-                                />
-                              </td>
-                              <td>
-                                <TextInput
-                                  name={`ekspedisi.${index}.qty`}
-                                  required
-                                  type='number'
-                                  value={
-                                    formik.values.ekspedisi?.[index]?.qty ?? ''
-                                  }
-                                  onChange={(e) =>
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.qty`,
-                                      e.target.value
-                                    )
-                                  }
-                                  readOnly={type === 'detail'}
-                                />
-                              </td>
-                              <td>
-                                <SelectInput
-                                  required
-                                  value={
-                                    formik.values.ekspedisi?.[index]
-                                      ?.supplier ?? undefined
-                                  }
-                                  onChange={(val) => {
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.supplier`,
-                                      val
-                                    );
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.supplier_id`,
-                                      (val as OptionType)?.value
-                                    );
-                                  }}
-                                  options={supplierOptions}
-                                  onInputChange={setSupplierSelectInputValue}
-                                  isLoading={isLoadingSuppliers}
-                                  isDisabled={type === 'detail'}
-                                  isClearable
-                                />
-                              </td>
-                              <td>
-                                <TextInput
-                                  name={`ekspedisi.${index}.plat_nomor`}
-                                  required
-                                  value={
-                                    formik.values.ekspedisi?.[index]
-                                      ?.plat_nomor ?? ''
-                                  }
-                                  onChange={(e) =>
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.plat_nomor`,
-                                      e.target.value
-                                    )
-                                  }
-                                  readOnly={type === 'detail'}
-                                />
-                              </td>
-                              <td>
-                                <TextInput
-                                  name={`ekspedisi.${index}.no_surat_jalan`}
-                                  required
-                                  value={
-                                    formik.values.ekspedisi?.[index]
-                                      ?.no_surat_jalan ?? ''
-                                  }
-                                  onChange={(e) =>
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.no_surat_jalan`,
-                                      e.target.value
-                                    )
-                                  }
-                                  readOnly={type === 'detail'}
-                                />
-                              </td>
-                              <td>
-                                <TextInput
-                                  name={`ekspedisi.${index}.dokumen`}
-                                  required
-                                  type='file'
-                                  onChange={(e) => {
-                                    const file = e.target.files?.[0];
-                                    if (file) {
-                                      formik.setFieldValue(
-                                        `ekspedisi.${index}.dokumen`,
-                                        file
-                                      );
-                                    }
-                                  }}
-                                  readOnly={type === 'detail'}
-                                />
-                              </td>
-                              <td>
-                                <TextInput
-                                  name={`ekspedisi.${index}.biaya_ekspedisi`}
-                                  required
-                                  type='number'
-                                  value={
-                                    formik.values.ekspedisi?.[index]
-                                      ?.biaya_ekspedisi ?? ''
-                                  }
-                                  onChange={(e) =>
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.biaya_ekspedisi`,
-                                      e.target.value
-                                    )
-                                  }
-                                  readOnly={type === 'detail'}
-                                />
-                              </td>
-                              <td>
-                                <TextInput
-                                  name={`ekspedisi.${index}.nama_sopir`}
-                                  required
-                                  value={
-                                    formik.values.ekspedisi?.[index]
-                                      ?.nama_sopir ?? ''
-                                  }
-                                  onChange={(e) =>
-                                    formik.setFieldValue(
-                                      `ekspedisi.${index}.nama_sopir`,
-                                      e.target.value
-                                    )
-                                  }
-                                  readOnly={type === 'detail'}
-                                />
-                              </td>
-                              <td>
-                                {type !== 'detail' && (
-                                  <Button
-                                    type='button'
-                                    color='error'
-                                    onClick={() => remove(index)}
-                                  >
-                                    <Icon icon='material-symbols:delete-outline' />
-                                  </Button>
-                                )}
-                              </td>
-                            </tr>
-                          )) ?? []}
-                        </tbody>
-                      </table>
-                      {type !== 'detail' && (
-                        <Button
-                          type='button'
-                          color='primary'
-                          onClick={() =>
-                            push({
-                              product: null,
-                              product_id: 0,
-                              qty: 0,
-                              supplier: null,
-                              supplier_id: 0,
-                              plat_nomor: '',
-                              no_surat_jalan: '',
-                              dokumen: '',
-                              biaya_ekspedisi: 0,
-                              nama_sopir: '',
-                            })
-                          }
-                          className='mt-4'
-                        >
-                          <Icon icon='ic:round-plus' />
-                          Tambah Ekspedisi
-                        </Button>
-                      )}
-                    </>
-                  )}
-                </FieldArray>
-              </div>
-            </div>
-
-            {/* Action buttons */}
-            <FormActions<MovementFormValues>
-              type={type}
-              formik={formik}
-              editUrl={
-                initialValues
-                  ? `/inventory/movement/detail/edit/?movementId=${initialValues.id}`
-                  : undefined
-              }
-              onDelete={deleteMovementClickHandler}
-            />
-
-            {movementFormErrorMessage && (
-              <div role='alert' className='alert alert-error'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Top card - Movement details */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <div className='flex gap-4'>
+                <TextInput
+                  required
+                  label='Alasan Transfer'
+                  name='alasan_transfer'
+                  value={formik.values.alasan_transfer}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  isError={
+                    formik.touched.alasan_transfer &&
+                    Boolean(formik.errors.alasan_transfer)
+                  }
+                  errorMessage={formik.errors.alasan_transfer}
+                  readOnly={type === 'detail'}
+                />
+                <TextInput
+                  required
+                  label='Tanggal Transfer'
+                  type='date'
+                  name='tanggal_transfer'
+                  value={formik.values.tanggal_transfer}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  isError={
+                    formik.touched.tanggal_transfer &&
+                    Boolean(formik.errors.tanggal_transfer)
+                  }
+                  errorMessage={formik.errors.tanggal_transfer}
+                  readOnly={type === 'detail'}
                 />
-                <span>{movementFormErrorMessage}</span>
               </div>
-            )}
-          </form>
-        </FormikProvider>
+            </div>
+          </div>
+
+          {/* Warehouse cards */}
+          <div className='grid grid-cols-2 gap-4 mb-4'>
+            <div className='card bg-base-100 shadow'>
+              <div className='card-body'>
+                <SelectInput
+                  required
+                  label='Gudang Asal'
+                  value={formik.values.warehouse_asal ?? undefined}
+                  onChange={(val) => {
+                    formik.setFieldValue('warehouse_asal', val);
+                    formik.setFieldValue(
+                      'warehouse_asal_id',
+                      (val as OptionType)?.value
+                    );
+                  }}
+                  options={warehouseOptions}
+                  onInputChange={setWarehouseSelectInputValue}
+                  isLoading={isLoadingWarehouses}
+                  isError={
+                    formik.touched.warehouse_asal_id &&
+                    Boolean(formik.errors.warehouse_asal_id)
+                  }
+                  errorMessage={formik.errors.warehouse_asal_id as string}
+                  isDisabled={type === 'detail'}
+                  isClearable
+                />
+              </div>
+            </div>
+
+            <div className='card bg-base-100 shadow'>
+              <div className='card-body'>
+                <SelectInput
+                  required
+                  label='Gudang Tujuan'
+                  value={formik.values.warehouse_tujuan ?? undefined}
+                  onChange={(val) => {
+                    formik.setFieldValue('warehouse_tujuan', val);
+                    formik.setFieldValue(
+                      'warehouse_tujuan_id',
+                      (val as OptionType)?.value
+                    );
+                  }}
+                  options={warehouseOptions}
+                  onInputChange={setWarehouseSelectInputValue}
+                  isLoading={isLoadingWarehouses}
+                  isError={
+                    formik.touched.warehouse_tujuan_id &&
+                    Boolean(formik.errors.warehouse_tujuan_id)
+                  }
+                  errorMessage={formik.errors.warehouse_tujuan_id as string}
+                  isDisabled={type === 'detail'}
+                  isClearable
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Products table */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <h2 className='card-title mb-4'>Produk</h2>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Produk</th>
+                      <th>Qty</th>
+                      {type !== 'detail' && <th>Aksi</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {formik.values.product?.map((product, idx) => (
+                      <tr key={idx}>
+                        <td>
+                          <SelectInput
+                            required
+                            value={product.product ?? undefined}
+                            onChange={(val) => {
+                              formik.setFieldValue(
+                                `product.${idx}.product`,
+                                val
+                              );
+                              formik.setFieldValue(
+                                `product.${idx}.product_id`,
+                                (val as OptionType)?.value
+                              );
+                            }}
+                            options={productOptions}
+                            onInputChange={setProductSelectInputValue}
+                            isLoading={isLoadingProducts}
+                            isDisabled={type === 'detail'}
+                            isClearable
+                            isError={isRepeaterInputError(
+                              'product',
+                              'product',
+                              idx
+                            )}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`product.${idx}.qty_product`}
+                            value={product.qty_product ?? ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'product',
+                              'qty_product',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        {type !== 'detail' && (
+                          <td>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeProduct(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {type !== 'detail' && (
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addProduct}
+                  className='w-fit mx-auto mt-4'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Produk
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* Ekspedisi table */}
+          <div className='card bg-base-100 shadow mb-4'>
+            <div className='card-body'>
+              <h2 className='card-title mb-4'>Ekspedisi</h2>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Produk</th>
+                      <th>Qty</th>
+                      <th>Supplier</th>
+                      <th>Plat Nomor</th>
+                      <th>No Surat Jalan</th>
+                      <th>Dokumen</th>
+                      <th>Biaya Ekspedisi</th>
+                      <th>Nama Sopir</th>
+                      {type !== 'detail' && <th>Aksi</th>}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {formik.values.ekspedisi?.map((ekspedisi, idx) => (
+                      <tr key={idx}>
+                        <td>
+                          <SelectInput
+                            required
+                            value={ekspedisi.product ?? undefined}
+                            onChange={(val) => {
+                              formik.setFieldValue(
+                                `ekspedisi.${idx}.product`,
+                                val
+                              );
+                              formik.setFieldValue(
+                                `ekspedisi.${idx}.product_id`,
+                                (val as OptionType)?.value
+                              );
+                            }}
+                            options={productOptions}
+                            onInputChange={setProductSelectInputValue}
+                            isLoading={isLoadingProducts}
+                            isDisabled={type === 'detail'}
+                            isClearable
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'product',
+                              idx
+                            )}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`ekspedisi.${idx}.qty`}
+                            value={ekspedisi.qty ?? ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'qty',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <SelectInput
+                            required
+                            value={ekspedisi.supplier ?? undefined}
+                            onChange={(val) => {
+                              formik.setFieldValue(
+                                `ekspedisi.${idx}.supplier`,
+                                val
+                              );
+                              formik.setFieldValue(
+                                `ekspedisi.${idx}.supplier_id`,
+                                (val as OptionType)?.value
+                              );
+                            }}
+                            options={supplierOptions}
+                            onInputChange={setSupplierSelectInputValue}
+                            isLoading={isLoadingSuppliers}
+                            isDisabled={type === 'detail'}
+                            isClearable
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'supplier',
+                              idx
+                            )}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            name={`ekspedisi.${idx}.plat_nomor`}
+                            value={ekspedisi.plat_nomor ?? ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'plat_nomor',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            name={`ekspedisi.${idx}.no_surat_jalan`}
+                            value={ekspedisi.no_surat_jalan ?? ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'no_surat_jalan',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='file'
+                            name={`ekspedisi.${idx}.dokumen`}
+                            onChange={(e) => {
+                              const file = e.target.files?.[0];
+                              if (file) {
+                                formik.setFieldValue(
+                                  `ekspedisi.${idx}.dokumen`,
+                                  file
+                                );
+                              }
+                            }}
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'dokumen',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`ekspedisi.${idx}.biaya_ekspedisi`}
+                            value={ekspedisi.biaya_ekspedisi ?? ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'biaya_ekspedisi',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            name={`ekspedisi.${idx}.nama_sopir`}
+                            value={ekspedisi.nama_sopir ?? ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'nama_sopir',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                          />
+                        </td>
+                        {type !== 'detail' && (
+                          <td>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeEkspedisi(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {type !== 'detail' && (
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addEkspedisi}
+                  className='w-fit mx-auto mt-4'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Ekspedisi
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <FormActions<MovementFormValues>
+            type={type}
+            formik={formik}
+            editUrl={
+              initialValues
+                ? `/inventory/movement/detail/edit/?movementId=${initialValues.id}`
+                : undefined
+            }
+            onDelete={deleteMovementClickHandler}
+          />
+
+          {movementFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{movementFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
       </section>
 
       {type !== 'add' && (

From 57831646d950eeb5b7ddb0b9561083673c93bb29 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 11:14:59 +0700
Subject: [PATCH 009/212] refactor(FE-62): optimize product and ekspedisi
 removal logic in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 53 +++++++++++++------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index bca69015..d9e1102e 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 
@@ -105,12 +105,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formik.setFieldValue('product', newProducts);
   };
 
-  const removeProduct = (index: number) => {
-    const newProducts = formik.values.product?.filter(
-      (_, idx) => idx !== index
-    );
-    formik.setFieldValue('product', newProducts);
-  };
+  const removeProduct = useCallback(
+    (i: number) => {
+      const updatedProducts =
+        formik.values.product?.reduce((acc: ProductSchema[], item, index) => {
+          if (index !== i) {
+            acc.push(item);
+          }
+          return acc;
+        }, []) ?? [];
+
+      formik.setFieldValue('product', updatedProducts);
+    },
+    [formik]
+  );
 
   const addEkspedisi = () => {
     const newEkspedisi = [
@@ -131,12 +139,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formik.setFieldValue('ekspedisi', newEkspedisi);
   };
 
-  const removeEkspedisi = (index: number) => {
-    const newEkspedisi = formik.values.ekspedisi?.filter(
-      (_, idx) => idx !== index
-    );
-    formik.setFieldValue('ekspedisi', newEkspedisi);
-  };
+  const removeEkspedisi = useCallback(
+    (i: number) => {
+      const updatedEkspedisi =
+        formik.values.ekspedisi?.reduce(
+          (acc: EkspedisiSchema[], item, index) => {
+            if (index !== i) {
+              acc.push(item);
+            }
+            return acc;
+          },
+          []
+        ) ?? [];
+
+      formik.setFieldValue('ekspedisi', updatedEkspedisi);
+    },
+    [formik]
+  );
 
   const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
     arrayName: T,
@@ -201,7 +220,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   return (
     <>
-      <section className='w-full max-w-xl'>
+      <section className='w-full max-w-5xl'>
         <FormHeader
           type={type}
           title='Movement'
@@ -321,7 +340,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   </thead>
                   <tbody>
                     {formik.values.product?.map((product, idx) => (
-                      <tr key={idx}>
+                      <tr key={`product-row-${idx}-${product.product_id}`}>
                         <td>
                           <SelectInput
                             required
@@ -422,7 +441,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   </thead>
                   <tbody>
                     {formik.values.ekspedisi?.map((ekspedisi, idx) => (
-                      <tr key={idx}>
+                      <tr
+                        key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
+                      >
                         <td>
                           <SelectInput
                             required

From 157235433eb0ef1ae48496fb24a508c5fcc37114 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 13:14:39 +0700
Subject: [PATCH 010/212] feat(FE-62): implement bulk removal functionality for
 selected products and ekspedisi in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 180 ++++++++++++++++--
 1 file changed, 162 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d9e1102e..14c6fc45 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -38,6 +38,8 @@ interface MovementFormProps {
 
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [, setMovementFormErrorMessage] = useState('');
+  const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
+  const [selectedEkspedisi, setSelectedEkspedisi] = useState<number[]>([]);
 
   const {
     deleteModal,
@@ -120,6 +122,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
+  const bulkRemoveProduct = useCallback(() => {
+    const updatedProducts =
+      formik.values.product?.filter(
+        (_, idx) => !selectedProducts.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('product', updatedProducts);
+    setSelectedProducts([]);
+  }, [formik, selectedProducts]);
+
   const addEkspedisi = () => {
     const newEkspedisi = [
       ...(formik.values.ekspedisi || []),
@@ -157,6 +168,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
+  const bulkRemoveEkspedisi = useCallback(() => {
+    const updatedEkspedisi =
+      formik.values.ekspedisi?.filter(
+        (_, idx) => !selectedEkspedisi.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('ekspedisi', updatedEkspedisi);
+    setSelectedEkspedisi([]);
+  }, [formik, selectedEkspedisi]);
+
   const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
     arrayName: T,
     column: T extends 'product' ? keyof ProductSchema : keyof EkspedisiSchema,
@@ -333,6 +353,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <table className='table'>
                   <thead>
                     <tr>
+                      {type !== 'detail' && (
+                        <th>
+                          <input
+                            type='checkbox'
+                            className='checkbox'
+                            checked={
+                              formik.values.product?.length ===
+                                selectedProducts.length &&
+                              formik.values.product?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedProducts(
+                                  formik.values.product?.map((_, idx) => idx) ??
+                                    []
+                                );
+                              } else {
+                                setSelectedProducts([]);
+                              }
+                            }}
+                          />
+                        </th>
+                      )}
                       <th>Produk</th>
                       <th>Qty</th>
                       {type !== 'detail' && <th>Aksi</th>}
@@ -341,6 +384,27 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   <tbody>
                     {formik.values.product?.map((product, idx) => (
                       <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)
+                                  );
+                                }
+                              }}
+                            />
+                          </td>
+                        )}
                         <td>
                           <SelectInput
                             required
@@ -407,15 +471,32 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 </table>
               </div>
               {type !== 'detail' && (
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={addProduct}
-                  className='w-fit mx-auto mt-4'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah Produk
-                </Button>
+                <div className='flex justify-center items-center mt-4 gap-4'>
+                  {selectedProducts.length > 0 && (
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={bulkRemoveProduct}
+                      className='w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:delete-outline-rounded'
+                        width={24}
+                        height={24}
+                      />
+                      Hapus Produk Terpilih ({selectedProducts.length})
+                    </Button>
+                  )}
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={addProduct}
+                    className='w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah Produk
+                  </Button>
+                </div>
               )}
             </div>
           </div>
@@ -428,6 +509,30 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <table className='table'>
                   <thead>
                     <tr>
+                      {type !== 'detail' && (
+                        <th>
+                          <input
+                            type='checkbox'
+                            className='checkbox'
+                            checked={
+                              formik.values.ekspedisi?.length ===
+                                selectedEkspedisi.length &&
+                              formik.values.ekspedisi?.length > 0
+                            }
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedEkspedisi(
+                                  formik.values.ekspedisi?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
+                                );
+                              } else {
+                                setSelectedEkspedisi([]);
+                              }
+                            }}
+                          />
+                        </th>
+                      )}
                       <th>Produk</th>
                       <th>Qty</th>
                       <th>Supplier</th>
@@ -444,6 +549,27 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr
                         key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
                       >
+                        {type !== 'detail' && (
+                          <td>
+                            <input
+                              type='checkbox'
+                              className='checkbox'
+                              checked={selectedEkspedisi.includes(idx)}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedEkspedisi([
+                                    ...selectedEkspedisi,
+                                    idx,
+                                  ]);
+                                } else {
+                                  setSelectedEkspedisi(
+                                    selectedEkspedisi.filter((i) => i !== idx)
+                                  );
+                                }
+                              }}
+                            />
+                          </td>
+                        )}
                         <td>
                           <SelectInput
                             required
@@ -634,15 +760,33 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 </table>
               </div>
               {type !== 'detail' && (
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={addEkspedisi}
-                  className='w-fit mx-auto mt-4'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah Ekspedisi
-                </Button>
+                <div className='flex justify-center items-center mt-4 gap-4'>
+                  {selectedEkspedisi.length > 0 && (
+                    <Button
+                      type='button'
+                      color='error'
+                      onClick={bulkRemoveEkspedisi}
+                      disabled={selectedEkspedisi.length === 0}
+                      className='w-fit'
+                    >
+                      <Icon
+                        icon='material-symbols:delete-outline-rounded'
+                        width={24}
+                        height={24}
+                      />
+                      Hapus Ekspedisi Terpilih ({selectedEkspedisi.length})
+                    </Button>
+                  )}
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={addEkspedisi}
+                    className='w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah Ekspedisi
+                  </Button>
+                </div>
               )}
             </div>
           </div>

From a1dc13ceb42e9543ad335a7041f630f4ce5df19a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 13:36:22 +0700
Subject: [PATCH 011/212] feat(FE-62): enhance MovementForm with area and
 location display for warehouse selection

---
 .../inventory/movement/form/MovementForm.tsx  | 90 +++++++++++++++++--
 1 file changed, 82 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 14c6fc45..22e39642 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -198,6 +198,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     return touchedField && Boolean(errorField?.[column as string]);
   };
 
+  interface WarehouseOptionType extends OptionType {
+    area?: string;
+    location?: string;
+  }
+
   // Warehouse selection
   const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
     useState('');
@@ -207,7 +212,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     WarehouseApi.getAllFetcher
   );
   const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => ({ value: w.id, label: w.name }))
+    ? warehouses?.data.map((w) => ({
+        value: w.id,
+        label: w.name,
+        area: w.area?.name,
+        location:
+          'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+            ? w.location?.name
+            : undefined,
+      }))
     : [];
 
   // Product selection
@@ -291,16 +304,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           {/* Warehouse cards */}
           <div className='grid grid-cols-2 gap-4 mb-4'>
             <div className='card bg-base-100 shadow'>
-              <div className='card-body'>
+              <div className='card-body space-y-4'>
+                <h3 className='card-title text-lg'>Gudang Asal</h3>
                 <SelectInput
                   required
-                  label='Gudang Asal'
+                  label='Gudang'
                   value={formik.values.warehouse_asal ?? undefined}
                   onChange={(val) => {
                     formik.setFieldValue('warehouse_asal', val);
                     formik.setFieldValue(
                       'warehouse_asal_id',
-                      (val as OptionType)?.value
+                      (val as WarehouseOptionType)?.value
                     );
                   }}
                   options={warehouseOptions}
@@ -314,20 +328,51 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   isDisabled={type === 'detail'}
                   isClearable
                 />
+
+                {/* Area and Location Info */}
+                <div className='space-y-4'>
+                  <TextInput
+                    label='Area'
+                    name='warehouse_asal_area'
+                    value={
+                      (formik.values.warehouse_asal as WarehouseOptionType)
+                        ?.area || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                  <TextInput
+                    label='Lokasi'
+                    name='warehouse_asal_location'
+                    value={
+                      (formik.values.warehouse_asal as WarehouseOptionType)
+                        ?.location || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                </div>
               </div>
             </div>
 
             <div className='card bg-base-100 shadow'>
-              <div className='card-body'>
+              <div className='card-body space-y-4'>
+                <h3 className='card-title text-lg'>Gudang Tujuan</h3>
                 <SelectInput
                   required
-                  label='Gudang Tujuan'
+                  label='Gudang'
                   value={formik.values.warehouse_tujuan ?? undefined}
                   onChange={(val) => {
                     formik.setFieldValue('warehouse_tujuan', val);
                     formik.setFieldValue(
                       'warehouse_tujuan_id',
-                      (val as OptionType)?.value
+                      (val as WarehouseOptionType)?.value
                     );
                   }}
                   options={warehouseOptions}
@@ -341,10 +386,39 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   isDisabled={type === 'detail'}
                   isClearable
                 />
+
+                {/* Area and Location Info */}
+                <div className='space-y-4'>
+                  <TextInput
+                    label='Area'
+                    name='warehouse_tujuan_area'
+                    value={
+                      (formik.values.warehouse_tujuan as WarehouseOptionType)
+                        ?.area || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                  <TextInput
+                    label='Lokasi'
+                    name='warehouse_tujuan_location'
+                    value={
+                      (formik.values.warehouse_tujuan as WarehouseOptionType)
+                        ?.location || '-'
+                    }
+                    readOnly
+                    disabled
+                    className={{
+                      input: 'bg-base-200',
+                    }}
+                  />
+                </div>
               </div>
             </div>
           </div>
-
           {/* Products table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>

From 757893c75789b09ce1d422771d2b71c53885ca48 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 10 Oct 2025 13:43:30 +0700
Subject: [PATCH 012/212] feat(FE-62): add quantity validation for ekspedisi in
 MovementForm and filter product options

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

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 22e39642..a2dd43c8 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -30,6 +30,7 @@ import {
   SupplierApi,
   WarehouseApi,
 } from '@/services/api/master-data';
+import { toast } from 'react-hot-toast';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -251,6 +252,37 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  const getFilteredProductOptions = useCallback(() => {
+    return (
+      formik.values.product
+        ?.filter((p) => p.product)
+        .map((p) => ({
+          value: p.product_id,
+          label: (p.product as OptionType)?.label,
+        })) ?? []
+    );
+  }, [formik.values.product]);
+
+  const validateEkspedisiQty = (ekspedisiIdx: number, qty: number) => {
+    const productId = formik.values.ekspedisi?.[ekspedisiIdx]?.product_id;
+    if (!productId) return true;
+
+    const relatedProduct = formik.values.product?.find(
+      (p) => p.product_id === productId
+    );
+    if (!relatedProduct) return true;
+
+    const totalQtyUsed =
+      formik.values.ekspedisi?.reduce((total, eks, i) => {
+        if (eks.product_id === productId && i !== ekspedisiIdx) {
+          return total + (Number(eks.qty) || 0);
+        }
+        return total;
+      }, 0) || 0;
+
+    return totalQtyUsed + qty <= Number(relatedProduct.qty_product);
+  };
+
   return (
     <>
       <section className='w-full max-w-5xl'>
@@ -419,6 +451,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               </div>
             </div>
           </div>
+
           {/* Products table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
@@ -657,10 +690,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 `ekspedisi.${idx}.product_id`,
                                 (val as OptionType)?.value
                               );
+                              formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
                             }}
-                            options={productOptions}
-                            onInputChange={setProductSelectInputValue}
-                            isLoading={isLoadingProducts}
+                            options={getFilteredProductOptions()}
                             isDisabled={type === 'detail'}
                             isClearable
                             isError={isRepeaterInputError(
@@ -676,7 +708,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             type='number'
                             name={`ekspedisi.${idx}.qty`}
                             value={ekspedisi.qty ?? ''}
-                            onChange={formik.handleChange}
+                            onChange={(e) => {
+                              const newQty = Number(e.target.value);
+                              if (validateEkspedisiQty(idx, newQty)) {
+                                formik.handleChange(e);
+                              } else {
+                                toast.error(
+                                  'Quantity exceeds available product quantity'
+                                );
+                              }
+                            }}
                             onBlur={formik.handleBlur}
                             isError={isRepeaterInputError(
                               'ekspedisi',

From 478f52c94b5b6068f0a71a7ff5714fe99589d289 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 11 Oct 2025 08:33:48 +0700
Subject: [PATCH 013/212] feat(FE-62,65): add biaya_ekspedisi_per_item field
 and calculation in MovementForm

---
 .../movement/form/MovementForm.schema.ts      |  9 +++-
 .../inventory/movement/form/MovementForm.tsx  | 44 ++++++++++++++++++-
 src/types/api/inventory/movement.d.ts         |  1 +
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 230244be..0bc0397c 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -26,10 +26,10 @@ export type EkspedisiSchema = {
   no_surat_jalan: string;
   dokumen: string | File;
   biaya_ekspedisi: number;
+  biaya_ekspedisi_per_item?: number | undefined;
   nama_sopir: string;
 };
 
-// Define schemas for nested objects
 const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
   product: Yup.object({
     value: Yup.number().min(1).required(),
@@ -64,6 +64,12 @@ const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
     .required('Biaya ekspedisi wajib diisi!')
     .min(0, 'Biaya minimal 0!')
     .typeError('Biaya harus berupa angka!'),
+  biaya_ekspedisi_per_item: Yup.number()
+    .transform((value) => (isNaN(value) ? undefined : value))
+    .min(0, 'Biaya per item minimal 0!')
+    .typeError('Biaya per item harus berupa angka!')
+    .optional()
+    .default(undefined),
   nama_sopir: Yup.string().required('Nama sopir wajib diisi!'),
 });
 
@@ -130,6 +136,7 @@ export const getMovementFormInitialValues = (
       no_surat_jalan: e.no_surat_jalan,
       dokumen: e.dokumen,
       biaya_ekspedisi: e.biaya_ekspedisi,
+      biaya_ekspedisi_per_item: e.biaya_ekspedisi,
       nama_sopir: e.nama_sopir,
     })) ?? [],
 });
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index a2dd43c8..db432a4d 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -81,6 +81,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           dokumen:
             e.dokumen instanceof File ? e.dokumen : (e.dokumen as string),
           biaya_ekspedisi: e.biaya_ekspedisi,
+          biaya_ekspedisi_per_item: e.qty
+            ? e.biaya_ekspedisi / e.qty
+            : e.biaya_ekspedisi,
           nama_sopir: e.nama_sopir,
         })),
       };
@@ -145,6 +148,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         no_surat_jalan: '',
         dokumen: '',
         biaya_ekspedisi: 0,
+        biaya_ekspedisi_per_item: 0,
         nama_sopir: '',
       },
     ];
@@ -252,6 +256,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
+  useEffect(() => {
+    formik.values.ekspedisi?.forEach((eks, idx) => {
+      if (eks.qty && eks.biaya_ekspedisi) {
+        const perItem = eks.biaya_ekspedisi / eks.qty;
+        formik.setFieldValue(
+          `ekspedisi.${idx}.biaya_ekspedisi_per_item`,
+          perItem
+        );
+      }
+    });
+  }, [formik.values.ekspedisi]);
+
   const getFilteredProductOptions = useCallback(() => {
     return (
       formik.values.product
@@ -646,7 +662,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <th>Plat Nomor</th>
                       <th>No Surat Jalan</th>
                       <th>Dokumen</th>
-                      <th>Biaya Ekspedisi</th>
+                      <th>Biaya Ekspedisi (Rp.)</th>
+                      <th>Biaya Ekspedisi / Item (Rp.)</th>
                       <th>Nama Sopir</th>
                       {type !== 'detail' && <th>Aksi</th>}
                     </tr>
@@ -836,6 +853,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             }}
                           />
                         </td>
+                        <td>
+                          <TextInput
+                            disabled
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            isError={isRepeaterInputError(
+                              'ekspedisi',
+                              'biaya_ekspedisi_per_item',
+                              idx
+                            )}
+                            name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
+                            value={
+                              ekspedisi.qty && ekspedisi.biaya_ekspedisi
+                                ? (
+                                    ekspedisi.biaya_ekspedisi / ekspedisi.qty
+                                  ).toLocaleString('id-ID')
+                                : '0'
+                            }
+                            readOnly
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                              input: 'bg-base-200',
+                            }}
+                          />
+                        </td>
                         <td>
                           <TextInput
                             required
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index 0d58b8e1..d7f2776a 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -44,6 +44,7 @@ export type CreateMovementPayload = {
     no_surat_jalan: string;
     dokumen: string | File;
     biaya_ekspedisi: number;
+    biaya_ekspedisi_per_item?: number;
     nama_sopir: string;
   }[];
 };

From 754e3d526b61585d603dea9593c4ce064b1c3606 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sun, 12 Oct 2025 19:15:14 +0700
Subject: [PATCH 014/212] feat(FE-64): add hatchery and npwp fields to
 MovementTable data structure

---
 .../inventory/movement/MovementTable.tsx      | 91 ++-----------------
 1 file changed, 10 insertions(+), 81 deletions(-)

diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index 288cb2a6..c863a1a9 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -89,9 +89,11 @@ const dummyMovements: Movement[] = [
           category: 'General',
           pic: 'PIC 1',
           type: 'Type 1',
+          hatchery: 'Hatchery 1',
           phone: '08123456789',
           email: 'supplier1@example.com',
           address: 'Address 1',
+          npwp: '1234567890123456',
           account_number: '1234567890',
           balance: 0,
           due_date: 30,
@@ -103,7 +105,6 @@ const dummyMovements: Movement[] = [
         nama_sopir: 'Andi',
       },
     ],
-    name: 'Movement 1',
   },
   {
     ...baseMetadata,
@@ -165,9 +166,11 @@ const dummyMovements: Movement[] = [
           category: 'Special',
           pic: 'PIC 2',
           type: 'Type 2',
+          hatchery: 'Hatchery 2',
           phone: '08123456780',
           email: 'supplier2@example.com',
           address: 'Address 2',
+          npwp: '1234567890123457',
           account_number: '1234567891',
           balance: 1000,
           due_date: 15,
@@ -179,7 +182,6 @@ const dummyMovements: Movement[] = [
         nama_sopir: 'Budi',
       },
     ],
-    name: 'Movement 2',
   },
   {
     ...baseMetadata,
@@ -241,9 +243,11 @@ const dummyMovements: Movement[] = [
           category: 'Return',
           pic: 'PIC 3',
           type: 'Type 3',
+          hatchery: 'Hatchery 3',
           phone: '08123456781',
           email: 'supplier3@example.com',
           address: 'Address 3',
+          npwp: '1234567890123458',
           account_number: '1234567892',
           balance: 500,
           due_date: 10,
@@ -255,7 +259,6 @@ const dummyMovements: Movement[] = [
         nama_sopir: 'Cici',
       },
     ],
-    name: 'Movement 3',
   },
   {
     ...baseMetadata,
@@ -317,9 +320,11 @@ const dummyMovements: Movement[] = [
           category: 'Internal',
           pic: 'PIC 4',
           type: 'Type 4',
+          hatchery: 'Hatchery 4',
           phone: '08123456782',
           email: 'supplier4@example.com',
           address: 'Address 4',
+          npwp: '1234567890123459',
           account_number: '1234567893',
           balance: 200,
           due_date: 20,
@@ -331,86 +336,10 @@ const dummyMovements: Movement[] = [
         nama_sopir: 'Dedi',
       },
     ],
-    name: 'Movement 4',
-  },
-  {
-    ...baseMetadata,
-    id: 5,
-    alasan_transfer: 'Distribusi',
-    tanggal_transfer: '2024-06-05',
-    warehouse_asal: {
-      ...baseMetadata,
-      id: 5,
-      name: 'Warehouse E',
-      type: 'AREA',
-      area: { id: 5, name: 'Area 5' },
-    },
-    warehouse_tujuan: {
-      ...baseMetadata,
-      id: 1,
-      name: 'Warehouse A',
-      type: 'AREA',
-      area: { id: 1, name: 'Area 1' },
-    },
-    product: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 5,
-          name: 'Product B',
-          brand: 'Brand B',
-          sku: 'SKU-B',
-          product_price: 8000,
-          selling_price: 9500,
-          tax: 2,
-          expiry_period: 120,
-          uom: {
-            ...baseMetadata,
-            id: 5,
-            name: 'PAK',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 5,
-            code: 'CAT-5',
-            name: 'Category 5',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        qty_product: 15,
-      },
-    ],
-    ekspedisi: [
-      {
-        product_id: 5,
-        qty: 15,
-        supplier: {
-          ...baseMetadata,
-          id: 5,
-          name: 'Supplier 5',
-          alias: 'S5',
-          category: 'Distribusi',
-          pic: 'PIC 5',
-          type: 'Type 5',
-          phone: '08123456783',
-          email: 'supplier5@example.com',
-          address: 'Address 5',
-          account_number: '1234567894',
-          balance: 300,
-          due_date: 25,
-        },
-        plat_nomor: 'K 6789 KL',
-        no_surat_jalan: 'SJ-005',
-        dokumen: 'doc5.pdf',
-        biaya_ekspedisi: 70000,
-        nama_sopir: 'Eka',
-      },
-    ],
-    name: 'Movement 5',
   },
 ];
 
+
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
@@ -633,7 +562,7 @@ const MovementTable = () => {
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Movement ini (${selectedMovement?.name})?`}
+        text={`Apakah anda yakin ingin menghapus data Movement ini (ID: ${selectedMovement?.id})?`}
         secondaryButton={{
           text: 'Tidak',
         }}

From a4ff4f7b2aece633f130941db6fa2780b8284886 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sun, 12 Oct 2025 20:32:02 +0700
Subject: [PATCH 015/212] feat: add Layout component to wrap children with
 SuspenseHelper

---
 src/app/master-data/customer/detail/layout.tsx | 11 +++++++++++
 src/app/master-data/supplier/detail/layout.tsx | 11 +++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/app/master-data/customer/detail/layout.tsx
 create mode 100644 src/app/master-data/supplier/detail/layout.tsx

diff --git a/src/app/master-data/customer/detail/layout.tsx b/src/app/master-data/customer/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/customer/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/master-data/supplier/detail/layout.tsx b/src/app/master-data/supplier/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/supplier/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;

From 44e07ddc501335c568e928df72a4a6be3ef3d8e0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 09:26:21 +0700
Subject: [PATCH 016/212] feat(FE-64): refactor MovementTable with new
 TableToolbar and TableRowSizeSelector components

---
 .../inventory/movement/MovementTable.tsx      | 325 +++++++-----------
 src/components/table/TableRowOptions.tsx      |  62 ++++
 src/components/table/TableRowSizeSelector.tsx |  33 ++
 src/components/table/TableToolbar.tsx         |  37 ++
 4 files changed, 249 insertions(+), 208 deletions(-)
 create mode 100644 src/components/table/TableRowOptions.tsx
 create mode 100644 src/components/table/TableRowSizeSelector.tsx
 create mode 100644 src/components/table/TableToolbar.tsx

diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index c863a1a9..b39906d3 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -1,23 +1,22 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import { SortingState } from '@tanstack/react-table';
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import { cn } from '@/lib/helper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Movement } from '@/types/api/inventory/movement';
-import { BaseMetadata } from '@/types/api/api-general';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableRowOptions } from '@/components/table/TableRowOptions';
+import { OptionType } from '@/components/input/SelectInput';
+import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
 
 // Dummy data
-const baseMetadata: BaseMetadata = {
+const baseMetadata = {
   created_user: {
     id: 1,
     id_user: 1,
@@ -339,159 +338,17 @@ const dummyMovements: Movement[] = [
   },
 ];
 
-
-const RowOptionsMenu = ({
-  type = 'dropdown',
-  props,
-  deleteClickHandler,
-}: {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<Movement, unknown>;
-  deleteClickHandler: () => void;
-}) => (
-  <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={`/inventory/movement/detail/?movementId=${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={`/inventory/movement/detail/edit/?movementId=${props.row.original.id}`}
-      variant='ghost'
-      color='warning'
-      className='justify-start text-sm'
-    >
-      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-      Edit
-    </Button>
-    <Button
-      onClick={deleteClickHandler}
-      variant='ghost'
-      color='error'
-      className='text-error hover:text-inherit'
-    >
-      <Icon
-        icon='material-symbols:delete-outline-rounded'
-        width={16}
-        height={16}
-        className='justify-start text-sm'
-      />
-      Delete
-    </Button>
-  </div>
-);
-
 const MovementTable = () => {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedMovement, setSelectedMovement] = useState<
-    Movement | undefined
-  >(undefined);
+  const [, setSelectedMovement] = useState<Movement | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const paginatedData = useMemo(() => {
-    const start = (page - 1) * pageSize;
-    return dummyMovements.slice(start, start + pageSize);
-  }, [page, pageSize]);
-
-  const movementsColumns: ColumnDef<Movement>[] = [
-    {
-      header: '#',
-      cell: (props) => pageSize * (page - 1) + props.row.index + 1,
-    },
-    {
-      accessorKey: 'warehouse_asal',
-      header: 'Gudang Asal',
-      cell: (props) => props.row.original.warehouse_asal.name,
-    },
-    {
-      accessorKey: 'warehouse_tujuan',
-      header: 'Gudang Tujuan',
-      cell: (props) => props.row.original.warehouse_tujuan.name,
-    },
-    {
-      accessorKey: 'product',
-      header: 'Nama Produk',
-      cell: (props) => props.row.original.product.map((p) => p.product.name),
-    },
-    {
-      accessorKey: 'alasan_transfer',
-      header: 'Catatan',
-    },
-    {
-      accessorKey: 'biaya_ekspedisi',
-      header: 'Biaya Ekspedisi',
-      cell: (props) =>
-        props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
-    },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        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 = () => {
-          setSelectedMovement(props.row.original);
-          deleteModal.openModal();
-        };
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
   const deleteModal = useModal();
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      deleteModal.closeModal();
-    }, 1000);
-  };
 
-  const searchChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (
-    e
-  ) => {
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
     setPage(1);
   };
@@ -502,67 +359,119 @@ const MovementTable = () => {
     setPage(1);
   };
 
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      deleteModal.closeModal();
+    }, 1000);
+  };
+
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return dummyMovements.slice(start, start + pageSize);
+  }, [page, pageSize]);
+
   return (
-    <>
-      <div className='w-full p-0 sm:p-4'>
-        <div className='flex flex-col gap-2 mb-4'>
-          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/inventory/movement/add' color='primary'>
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Movement
-              </Button>
-            </div>
-            <DebouncedTextInput
-              name='search'
-              placeholder='Cari Movement'
-              value={search}
-              onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
-            />
-          </div>
-          <div className='flex flex-row justify-end'>
-            <SelectInput
-              label='Baris'
-              options={ROWS_OPTIONS}
-              value={{
-                label: String(pageSize),
-                value: pageSize,
-              }}
-              onChange={pageSizeChangeHandler}
-              className={{ wrapper: 'max-w-28' }}
-            />
-          </div>
-        </div>
-        <Table<Movement>
-          data={paginatedData}
-          columns={movementsColumns}
-          pageSize={pageSize}
-          page={page}
-          totalItems={dummyMovements.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',
+    <div className='flex flex-col gap-4'>
+      <div className='flex flex-col gap-2 mb-4'>
+        <TableToolbar
+          addButton={{
+            href: '/inventory/movement/add',
+            label: 'Tambah Movement',
+          }}
+          search={{
+            value: search,
+            onChange: searchChangeHandler,
+            placeholder: 'Cari Movement',
           }}
         />
+        <TableRowSizeSelector
+          value={pageSize}
+          onChange={pageSizeChangeHandler}
+          options={ROWS_OPTIONS}
+        />
       </div>
+
+      <Table
+        data={paginatedData}
+        columns={[
+          {
+            header: '#',
+            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+          },
+          {
+            accessorKey: 'warehouse_asal',
+            header: 'Gudang Asal',
+            cell: (props) => props.row.original.warehouse_asal.name,
+          },
+          {
+            accessorKey: 'warehouse_tujuan',
+            header: 'Gudang Tujuan',
+            cell: (props) => props.row.original.warehouse_tujuan.name,
+          },
+          {
+            accessorKey: 'product',
+            header: 'Nama Produk',
+            cell: (props) =>
+              props.row.original.product.map((p) => p.product.name),
+          },
+          {
+            accessorKey: 'alasan_transfer',
+            header: 'Catatan',
+          },
+          {
+            accessorKey: 'biaya_ekspedisi',
+            header: 'Biaya Ekspedisi',
+            cell: (props) =>
+              props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
+          },
+          {
+            id: 'actions',
+            cell: (props) => (
+              <div className='dropdown dropdown-end'>
+                <Button tabIndex={0} variant='ghost' className='px-2'>
+                  <Icon icon='carbon:overflow-menu-vertical' />
+                </Button>
+                <TableRowOptions
+                  type='dropdown'
+                  recordId={props.row.original.id}
+                  basePath='/inventory/movement'
+                  onDelete={() => {
+                    setSelectedMovement(props.row.original);
+                    deleteModal.openModal();
+                  }}
+                />
+              </div>
+            ),
+          },
+        ]}
+        pageSize={pageSize}
+        page={page}
+        totalItems={dummyMovements.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 Movement ini (ID: ${selectedMovement?.id})?`}
+        text={`Apakah anda yakin ingin menghapus data Movement ini?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -573,7 +482,7 @@ const MovementTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx
new file mode 100644
index 00000000..61332b4f
--- /dev/null
+++ b/src/components/table/TableRowOptions.tsx
@@ -0,0 +1,62 @@
+import { Icon } from '@iconify/react';
+import Button from '../Button';
+import { cn } from '@/lib/helper';
+
+interface TableRowOptionsProps {
+  type?: 'dropdown' | 'collapse';
+  recordId: string | number;
+  basePath: string;
+  onDelete?: () => void;
+}
+
+export const TableRowOptions = ({
+  type = 'dropdown',
+  recordId,
+  basePath,
+  onDelete,
+}: TableRowOptionsProps) => (
+  <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={`${basePath}/detail/?id=${recordId}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
+    >
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+    <Button
+      href={`${basePath}/detail/edit/?id=${recordId}`}
+      variant='ghost'
+      color='warning'
+      className='justify-start text-sm'
+    >
+      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+      Edit
+    </Button>
+    {onDelete && (
+      <Button
+        onClick={onDelete}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit justify-start text-sm'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+        />
+        Delete
+      </Button>
+    )}
+  </div>
+);
diff --git a/src/components/table/TableRowSizeSelector.tsx b/src/components/table/TableRowSizeSelector.tsx
new file mode 100644
index 00000000..a6fd039d
--- /dev/null
+++ b/src/components/table/TableRowSizeSelector.tsx
@@ -0,0 +1,33 @@
+import SelectInput from '../input/SelectInput';
+
+export interface OptionType {
+  label: string;
+  value: string | number;
+}
+
+interface TableRowSizeSelectorProps {
+  value: number;
+  onChange: (val: OptionType | OptionType[] | null) => void;
+  options: OptionType[];
+}
+
+export const TableRowSizeSelector = ({
+  value,
+  onChange,
+  options,
+}: TableRowSizeSelectorProps) => {
+  return (
+    <div className='flex flex-row justify-end'>
+      <SelectInput
+        label='Baris'
+        options={options}
+        value={{
+          label: String(value),
+          value: value,
+        }}
+        onChange={onChange}
+        className={{ wrapper: 'max-w-28' }}
+      />
+    </div>
+  );
+};
diff --git a/src/components/table/TableToolbar.tsx b/src/components/table/TableToolbar.tsx
new file mode 100644
index 00000000..e3b385b1
--- /dev/null
+++ b/src/components/table/TableToolbar.tsx
@@ -0,0 +1,37 @@
+import { Icon } from '@iconify/react';
+import Button from '../Button';
+import DebouncedTextInput from '../input/DebouncedTextInput';
+
+interface TableToolbarProps {
+  addButton?: {
+    href: string;
+    label: string;
+  };
+  search: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+  };
+}
+
+export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
+  return (
+    <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+      {addButton && (
+        <div className='flex flex-row'>
+          <Button href={addButton.href} color='primary'>
+            <Icon icon='ic:round-plus' width={24} height={24} />
+            {addButton.label}
+          </Button>
+        </div>
+      )}
+      <DebouncedTextInput
+        name='search'
+        placeholder={search.placeholder || 'Cari...'}
+        value={search.value}
+        onChange={search.onChange}
+        className={{ wrapper: 'sm:max-w-3xs' }}
+      />
+    </div>
+  );
+};

From e7085ab4ff31b3e368a47d12f1b36a1cdbbab967 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 10:02:56 +0700
Subject: [PATCH 017/212] feat(FE-65): add file size validation for dokumen in
 MovementForm

---
 .../inventory/movement/form/MovementForm.schema.ts     | 10 +++++++++-
 .../pages/inventory/movement/form/MovementForm.tsx     |  4 ++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 0bc0397c..f606b0c5 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -59,7 +59,15 @@ const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
   supplier_id: Yup.number().required('Supplier wajib diisi!'),
   plat_nomor: Yup.string().required('Plat nomor wajib diisi!'),
   no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
-  dokumen: Yup.mixed<string | File>().required('Dokumen wajib diisi!'),
+  dokumen: Yup.mixed<string | File>()
+    .required('Dokumen wajib diisi!')
+    .test(
+      'fileSize',
+      'Ukuran dokumen maksimal 2 MB!',
+      (value) =>
+        typeof value === 'string' ||
+        (value instanceof File && value.size <= 2 * 1024 * 1024)
+    ),
   biaya_ekspedisi: Yup.number()
     .required('Biaya ekspedisi wajib diisi!')
     .min(0, 'Biaya minimal 0!')
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index db432a4d..772f70d5 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -817,6 +817,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             onChange={(e) => {
                               const file = e.target.files?.[0];
                               if (file) {
+                                if (file.size > 2 * 1024 * 1024) {
+                                  toast.error('Ukuran dokumen maksimal 2 MB!');
+                                  return;
+                                }
                                 formik.setFieldValue(
                                   `ekspedisi.${idx}.dokumen`,
                                   file

From b2f0bd6698e57fc19a3ed9c41dd28594fc6c1d5a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 10:31:34 +0700
Subject: [PATCH 018/212] feat(FE-65): add file type validation for dokumen in
 MovementForm

---
 .../inventory/movement/form/MovementForm.schema.ts    |  8 ++++++++
 .../pages/inventory/movement/form/MovementForm.tsx    | 11 +++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index f606b0c5..aa138cac 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -61,6 +61,14 @@ const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
   no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
   dokumen: Yup.mixed<string | File>()
     .required('Dokumen wajib diisi!')
+    .test(
+      'fileType',
+      'Mohon upload file berformat PDF atau JPEG/JPG.',
+      (value) =>
+        typeof value === 'string' ||
+        (value instanceof File &&
+          ['application/pdf', 'image/jpeg', 'image/jpg'].includes(value.type))
+    )
     .test(
       'fileSize',
       'Ukuran dokumen maksimal 2 MB!',
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 772f70d5..cd81b8a0 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -817,6 +817,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             onChange={(e) => {
                               const file = e.target.files?.[0];
                               if (file) {
+                                const allowedTypes = [
+                                  'application/pdf',
+                                  'image/jpeg',
+                                  'image/jpg',
+                                ];
+                                if (!allowedTypes.includes(file.type)) {
+                                  toast.error(
+                                    'Mohon upload file berformat PDF atau JPEG/JPG.'
+                                  );
+                                  return;
+                                }
                                 if (file.size > 2 * 1024 * 1024) {
                                   toast.error('Ukuran dokumen maksimal 2 MB!');
                                   return;

From 6facfd3d3c2d89e706db63b815e29f66b5a03f20 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 14:00:58 +0700
Subject: [PATCH 019/212] feat(FE-65): enhance MovementForm to support file
 uploads with FormData conversion

---
 .../inventory/movement/form/MovementForm.tsx  | 17 +++++--
 .../movement/form/useMovementFormHandlers.ts  | 13 +++++-
 src/lib/form-data.ts                          | 45 +++++++++++++++++++
 src/services/api/base.ts                      | 26 +++++++----
 4 files changed, 88 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/form-data.ts

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index cd81b8a0..e912a453 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -24,13 +24,17 @@ import {
   ProductSchema,
   EkspedisiSchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
-import { useMovementFormHandlers } from './useMovementFormHandlers';
+import {
+  useMovementFormHandlers,
+  containsFile,
+} from './useMovementFormHandlers';
 import {
   ProductApi,
   SupplierApi,
   WarehouseApi,
 } from '@/services/api/master-data';
 import { toast } from 'react-hot-toast';
+import FileInput from '@/components/input/FileInput';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -62,6 +66,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     validationSchema:
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
     onSubmit: async (values) => {
+      console.log(
+        'Dokumen:',
+        values.ekspedisi?.map((e) => e.dokumen)
+      );
+
       setMovementFormErrorMessage('');
       const payload: CreateMovementPayload = {
         alasan_transfer: values.alasan_transfer,
@@ -88,6 +97,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         })),
       };
 
+      console.log('containsFile:', containsFile(payload));
+      console.log('payload:', payload);
+
       switch (type) {
         case 'add':
           await createMovementHandler(payload);
@@ -810,9 +822,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <FileInput
                             required
-                            type='file'
                             name={`ekspedisi.${idx}.dokumen`}
                             onChange={(e) => {
                               const file = e.target.files?.[0];
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
index f6531bf4..0b6b0962 100644
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -8,6 +8,7 @@ import {
   UpdateMovementPayload,
 } from '@/types/api/inventory/movement';
 import { isResponseError } from '@/lib/api-helper';
+import { containsFile, toFormData } from '@/lib/form-data';
 
 export const useMovementFormHandlers = (initialValuesId?: number) => {
   const router = useRouter();
@@ -17,7 +18,11 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const createMovementHandler = useCallback(
     async (payload: CreateMovementPayload) => {
-      const res = await MovementApi.create(payload);
+      const finalPayload = containsFile(payload)
+        ? (toFormData(payload) as unknown as CreateMovementPayload)
+        : payload;
+
+      const res = await MovementApi.create(finalPayload);
       if (isResponseError(res)) {
         setMovementFormErrorMessage(res.message);
         return;
@@ -30,7 +35,11 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const updateMovementHandler = useCallback(
     async (movementId: number, payload: UpdateMovementPayload) => {
-      const res = await MovementApi.update(movementId, payload);
+      const finalPayload = containsFile(payload)
+        ? (toFormData(payload) as unknown as UpdateMovementPayload)
+        : payload;
+
+      const res = await MovementApi.update(movementId, finalPayload);
       if (res?.status === 'error') {
         setMovementFormErrorMessage(res.message);
         return;
diff --git a/src/lib/form-data.ts b/src/lib/form-data.ts
new file mode 100644
index 00000000..d94e0724
--- /dev/null
+++ b/src/lib/form-data.ts
@@ -0,0 +1,45 @@
+export function toFormData(
+  value: unknown,
+  form = new FormData(),
+  parentKey?: string
+) {
+  if (value === undefined || value === null) {
+    if (parentKey) form.append(parentKey, '');
+    return form;
+  }
+
+  if (value instanceof File) {
+    if (!parentKey) throw new Error('File must have a key');
+    form.append(parentKey, value);
+    return form;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((v, i) => {
+      const key = parentKey ? `${parentKey}[${i}]` : `${i}`;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (typeof value === 'object') {
+    Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
+      const key = parentKey ? `${parentKey}[${k}]` : k;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (parentKey) form.append(parentKey, String(value));
+  return form;
+}
+
+export function containsFile(obj: unknown): boolean {
+  if (!obj) return false;
+  if (obj instanceof File) return true;
+  if (Array.isArray(obj)) return obj.some(containsFile);
+  if (typeof obj === 'object') {
+    return Object.values(obj as Record<string, unknown>).some(containsFile);
+  }
+  return false;
+}
diff --git a/src/services/api/base.ts b/src/services/api/base.ts
index d1ac4729..c4dd826e 100644
--- a/src/services/api/base.ts
+++ b/src/services/api/base.ts
@@ -4,9 +4,11 @@ import { BaseApiResponse } from '@/types/api/api-general';
 
 export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
   basePath: string;
+  header?: Record<string, string>;
 
-  constructor(basePath: string) {
+  constructor(basePath: string, header?: Record<string, string>) {
     this.basePath = basePath;
+    this.header = header;
   }
 
   async getAllFetcher(endpoint: string): Promise<BaseApiResponse<T[]>> {
@@ -23,42 +25,52 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async create(payload: CreatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const createRes = await httpClient<BaseApiResponse<T>>(this.basePath, {
         method: 'POST',
         body: payload,
+        headers,
       });
-
       return createRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async update(id: number, payload: UpdatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
       const updatePath = `${this.basePath}/${id}`;
+
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const updateRes = await httpClient<BaseApiResponse<T>>(updatePath, {
         method: 'PATCH',
         body: payload,
+        headers,
       });
-
       return updateRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
@@ -69,13 +81,11 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       const deleteRes = await httpClient<BaseApiResponse>(deletePath, {
         method: 'DELETE',
       });
-
       return deleteRes;
     } catch (error) {
       if (axios.isAxiosError<BaseApiResponse>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }

From 19bca9ec730438e8831c100ac0d6d56daaa829d3 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 14:00:58 +0700
Subject: [PATCH 020/212] feat(FE-65): enhance MovementForm to support file
 uploads with FormData conversion

---
 .../inventory/movement/form/MovementForm.tsx  | 13 +++++-
 .../movement/form/useMovementFormHandlers.ts  | 13 +++++-
 src/lib/form-data.ts                          | 45 +++++++++++++++++++
 src/services/api/base.ts                      | 26 +++++++----
 4 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/form-data.ts

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index cd81b8a0..89546442 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -31,6 +31,8 @@ import {
   WarehouseApi,
 } from '@/services/api/master-data';
 import { toast } from 'react-hot-toast';
+import FileInput from '@/components/input/FileInput';
+import { containsFile } from '@/lib/form-data';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -62,6 +64,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     validationSchema:
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
     onSubmit: async (values) => {
+      console.log(
+        'Dokumen:',
+        values.ekspedisi?.map((e) => e.dokumen)
+      );
+
       setMovementFormErrorMessage('');
       const payload: CreateMovementPayload = {
         alasan_transfer: values.alasan_transfer,
@@ -88,6 +95,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         })),
       };
 
+      console.log('containsFile:', containsFile(payload));
+      console.log('payload:', payload);
+
       switch (type) {
         case 'add':
           await createMovementHandler(payload);
@@ -810,9 +820,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <FileInput
                             required
-                            type='file'
                             name={`ekspedisi.${idx}.dokumen`}
                             onChange={(e) => {
                               const file = e.target.files?.[0];
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
index f6531bf4..0b6b0962 100644
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -8,6 +8,7 @@ import {
   UpdateMovementPayload,
 } from '@/types/api/inventory/movement';
 import { isResponseError } from '@/lib/api-helper';
+import { containsFile, toFormData } from '@/lib/form-data';
 
 export const useMovementFormHandlers = (initialValuesId?: number) => {
   const router = useRouter();
@@ -17,7 +18,11 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const createMovementHandler = useCallback(
     async (payload: CreateMovementPayload) => {
-      const res = await MovementApi.create(payload);
+      const finalPayload = containsFile(payload)
+        ? (toFormData(payload) as unknown as CreateMovementPayload)
+        : payload;
+
+      const res = await MovementApi.create(finalPayload);
       if (isResponseError(res)) {
         setMovementFormErrorMessage(res.message);
         return;
@@ -30,7 +35,11 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const updateMovementHandler = useCallback(
     async (movementId: number, payload: UpdateMovementPayload) => {
-      const res = await MovementApi.update(movementId, payload);
+      const finalPayload = containsFile(payload)
+        ? (toFormData(payload) as unknown as UpdateMovementPayload)
+        : payload;
+
+      const res = await MovementApi.update(movementId, finalPayload);
       if (res?.status === 'error') {
         setMovementFormErrorMessage(res.message);
         return;
diff --git a/src/lib/form-data.ts b/src/lib/form-data.ts
new file mode 100644
index 00000000..d94e0724
--- /dev/null
+++ b/src/lib/form-data.ts
@@ -0,0 +1,45 @@
+export function toFormData(
+  value: unknown,
+  form = new FormData(),
+  parentKey?: string
+) {
+  if (value === undefined || value === null) {
+    if (parentKey) form.append(parentKey, '');
+    return form;
+  }
+
+  if (value instanceof File) {
+    if (!parentKey) throw new Error('File must have a key');
+    form.append(parentKey, value);
+    return form;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((v, i) => {
+      const key = parentKey ? `${parentKey}[${i}]` : `${i}`;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (typeof value === 'object') {
+    Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
+      const key = parentKey ? `${parentKey}[${k}]` : k;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (parentKey) form.append(parentKey, String(value));
+  return form;
+}
+
+export function containsFile(obj: unknown): boolean {
+  if (!obj) return false;
+  if (obj instanceof File) return true;
+  if (Array.isArray(obj)) return obj.some(containsFile);
+  if (typeof obj === 'object') {
+    return Object.values(obj as Record<string, unknown>).some(containsFile);
+  }
+  return false;
+}
diff --git a/src/services/api/base.ts b/src/services/api/base.ts
index d1ac4729..c4dd826e 100644
--- a/src/services/api/base.ts
+++ b/src/services/api/base.ts
@@ -4,9 +4,11 @@ import { BaseApiResponse } from '@/types/api/api-general';
 
 export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
   basePath: string;
+  header?: Record<string, string>;
 
-  constructor(basePath: string) {
+  constructor(basePath: string, header?: Record<string, string>) {
     this.basePath = basePath;
+    this.header = header;
   }
 
   async getAllFetcher(endpoint: string): Promise<BaseApiResponse<T[]>> {
@@ -23,42 +25,52 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async create(payload: CreatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const createRes = await httpClient<BaseApiResponse<T>>(this.basePath, {
         method: 'POST',
         body: payload,
+        headers,
       });
-
       return createRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async update(id: number, payload: UpdatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
       const updatePath = `${this.basePath}/${id}`;
+
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const updateRes = await httpClient<BaseApiResponse<T>>(updatePath, {
         method: 'PATCH',
         body: payload,
+        headers,
       });
-
       return updateRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
@@ -69,13 +81,11 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       const deleteRes = await httpClient<BaseApiResponse>(deletePath, {
         method: 'DELETE',
       });
-
       return deleteRes;
     } catch (error) {
       if (axios.isAxiosError<BaseApiResponse>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }

From 4b4b74d07cb23cb223df6020a25fc9e97231f6ad Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 14 Oct 2025 18:00:34 +0700
Subject: [PATCH 021/212] feat(FE-65): add validation for quantity and required
 fields in MovementForm

---
 src/components/helper/form/FormActions.tsx    |  4 +-
 .../movement/form/MovementForm.schema.ts      | 20 +++-
 .../inventory/movement/form/MovementForm.tsx  | 98 ++++++++++---------
 3 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 25b586c3..7ced46cd 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/src/components/helper/form/FormActions.tsx
@@ -8,6 +8,7 @@ interface FormActionsProps<T> {
   formik: FormikContextType<T>;
   editUrl?: string;
   onDelete?: () => void;
+  disableSubmit?: boolean;
 }
 
 export const FormActions = <T,>({
@@ -15,6 +16,7 @@ export const FormActions = <T,>({
   formik,
   editUrl,
   onDelete,
+  disableSubmit = false,
 }: FormActionsProps<T>) => {
   return (
     <div className='flex flex-row justify-between gap-2 flex-wrap'>
@@ -71,7 +73,7 @@ export const FormActions = <T,>({
             color='primary'
             className='px-4'
             isLoading={formik.isSubmitting}
-            disabled={!formik.isValid || formik.isSubmitting}
+            disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
           >
             Submit
           </Button>
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index aa138cac..453ca40b 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -51,7 +51,17 @@ const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
   qty: Yup.number()
     .required('Qty wajib diisi!')
     .min(1, 'Qty minimal 1!')
-    .typeError('Qty harus berupa angka!'),
+    .typeError('Qty harus berupa angka!')
+    .test('max-product-qty', 'Qty melebihi stok produk!', function (value) {
+      const { product_id } = this.parent;
+      const products = (this.options.context?.product ?? []) as {
+        product_id: number;
+        qty_product: number;
+      }[];
+      const product = products.find((p) => p.product_id === product_id);
+      if (!product) return true;
+      return (value ?? 0) <= Number(product.qty_product);
+    }),
   supplier: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
@@ -108,8 +118,12 @@ export const MovementFormSchema = Yup.object({
     .typeError('Gudang tujuan wajib diisi!'),
   product: Yup.array()
     .of(ProductObjectSchema)
-    .min(1, 'Minimal harus ada 1 produk!'),
-  ekspedisi: Yup.array().of(EkspedisiObjectSchema).optional().default([]),
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+  ekspedisi: Yup.array()
+    .of(EkspedisiObjectSchema)
+    .min(1, 'Minimal harus ada 1 ekspedisi!')
+    .required('Ekspedisi wajib diisi!'),
 });
 
 export const UpdateMovementFormSchema = MovementFormSchema;
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 89546442..e5c90f4a 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useFormik } from 'formik';
+import { FormikProps, useFormik } from 'formik';
 import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
@@ -32,13 +32,30 @@ import {
 } from '@/services/api/master-data';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
-import { containsFile } from '@/lib/form-data';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
   initialValues?: Movement;
 }
 
+function getEkspedisiFieldError(
+  formik: FormikProps<MovementFormValues>,
+  idx: number,
+  field: keyof EkspedisiSchema
+) {
+  const errorObj = formik.errors.ekspedisi?.[idx];
+  const touched = formik.touched.ekspedisi?.[idx]?.[field];
+  const isError =
+    touched &&
+    typeof errorObj === 'object' &&
+    !!(errorObj as Record<string, unknown>)?.[field];
+  const errorMessage =
+    typeof errorObj === 'object'
+      ? (errorObj as Record<string, string>)?.[field]
+      : undefined;
+  return { isError, errorMessage };
+}
+
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [, setMovementFormErrorMessage] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
@@ -63,12 +80,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     initialValues: formikInitialValues,
     validationSchema:
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
     onSubmit: async (values) => {
-      console.log(
-        'Dokumen:',
-        values.ekspedisi?.map((e) => e.dokumen)
-      );
-
       setMovementFormErrorMessage('');
       const payload: CreateMovementPayload = {
         alasan_transfer: values.alasan_transfer,
@@ -95,9 +109,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         })),
       };
 
-      console.log('containsFile:', containsFile(payload));
-      console.log('payload:', payload);
-
       switch (type) {
         case 'add':
           await createMovementHandler(payload);
@@ -292,12 +303,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const validateEkspedisiQty = (ekspedisiIdx: number, qty: number) => {
     const productId = formik.values.ekspedisi?.[ekspedisiIdx]?.product_id;
     if (!productId) return true;
-
     const relatedProduct = formik.values.product?.find(
       (p) => p.product_id === productId
     );
     if (!relatedProduct) return true;
-
     const totalQtyUsed =
       formik.values.ekspedisi?.reduce((total, eks, i) => {
         if (eks.product_id === productId && i !== ekspedisiIdx) {
@@ -305,10 +314,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         }
         return total;
       }, 0) || 0;
-
     return totalQtyUsed + qty <= Number(relatedProduct.qty_product);
   };
 
+  const invalidQtyRows =
+    formik.values.ekspedisi?.map((eks, idx) => {
+      const qty = Number(eks.qty) || 0;
+      return !validateEkspedisiQty(idx, qty);
+    }) ?? [];
+
   return (
     <>
       <section className='w-full max-w-5xl'>
@@ -735,22 +749,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             type='number'
                             name={`ekspedisi.${idx}.qty`}
                             value={ekspedisi.qty ?? ''}
-                            onChange={(e) => {
-                              const newQty = Number(e.target.value);
-                              if (validateEkspedisiQty(idx, newQty)) {
-                                formik.handleChange(e);
-                              } else {
-                                toast.error(
-                                  'Quantity exceeds available product quantity'
-                                );
-                              }
-                            }}
+                            onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'qty',
-                              idx
-                            )}
+                            {...getEkspedisiFieldError(formik, idx, 'qty')}
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -790,10 +791,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.plat_nomor ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'plat_nomor',
-                              idx
+                            {...getEkspedisiFieldError(
+                              formik,
+                              idx,
+                              'plat_nomor'
                             )}
                             readOnly={type === 'detail'}
                             className={{
@@ -808,10 +809,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.no_surat_jalan ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'no_surat_jalan',
-                              idx
+                            {...getEkspedisiFieldError(
+                              formik,
+                              idx,
+                              'no_surat_jalan'
                             )}
                             readOnly={type === 'detail'}
                             className={{
@@ -866,10 +867,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.biaya_ekspedisi ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'biaya_ekspedisi',
-                              idx
+                            {...getEkspedisiFieldError(
+                              formik,
+                              idx,
+                              'biaya_ekspedisi'
                             )}
                             readOnly={type === 'detail'}
                             className={{
@@ -882,10 +883,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             disabled
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'biaya_ekspedisi_per_item',
-                              idx
+                            {...getEkspedisiFieldError(
+                              formik,
+                              idx,
+                              'biaya_ekspedisi_per_item'
                             )}
                             name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
                             value={
@@ -909,10 +910,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.nama_sopir ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
-                              'ekspedisi',
-                              'nama_sopir',
-                              idx
+                            {...getEkspedisiFieldError(
+                              formik,
+                              idx,
+                              'nama_sopir'
                             )}
                             readOnly={type === 'detail'}
                             className={{
@@ -982,6 +983,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 : undefined
             }
             onDelete={deleteMovementClickHandler}
+            disableSubmit={invalidQtyRows.some(Boolean)}
           />
 
           {movementFormErrorMessage && (

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 022/212] 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 023/212] 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 024/212] 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 025/212] 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 026/212] 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 027/212] 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 028/212] 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 56a9fc2349f8aa20ba56aa6c56e3ef433a516e3b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 10:51:06 +0700
Subject: [PATCH 029/212] refactor(FE-62,65): simplify error handling in
 MovementForm by consolidating error checks

---
 .../inventory/movement/form/MovementForm.tsx  | 90 ++++++++-----------
 1 file changed, 37 insertions(+), 53 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index e5c90f4a..5d69f03e 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -38,24 +38,6 @@ interface MovementFormProps {
   initialValues?: Movement;
 }
 
-function getEkspedisiFieldError(
-  formik: FormikProps<MovementFormValues>,
-  idx: number,
-  field: keyof EkspedisiSchema
-) {
-  const errorObj = formik.errors.ekspedisi?.[idx];
-  const touched = formik.touched.ekspedisi?.[idx]?.[field];
-  const isError =
-    touched &&
-    typeof errorObj === 'object' &&
-    !!(errorObj as Record<string, unknown>)?.[field];
-  const errorMessage =
-    typeof errorObj === 'object'
-      ? (errorObj as Record<string, string>)?.[field]
-      : undefined;
-  return { isError, errorMessage };
-}
-
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [, setMovementFormErrorMessage] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
@@ -212,16 +194,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       !formik.touched[arrayName] ||
       !Array.isArray(formik.touched[arrayName])
     ) {
-      return false;
+      return {
+        isError: false,
+        errorMessage: undefined,
+      };
     }
 
     const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
     const errorField = formik.errors[arrayName]?.[idx] as Record<
       string,
-      unknown
+      string
     >;
 
-    return touchedField && Boolean(errorField?.[column as string]);
+    return {
+      isError: touchedField && Boolean(errorField?.[column as string]),
+      errorMessage: touchedField ? errorField?.[column as string] : undefined,
+    };
   };
 
   interface WarehouseOptionType extends OptionType {
@@ -571,11 +559,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isLoading={isLoadingProducts}
                             isDisabled={type === 'detail'}
                             isClearable
-                            isError={isRepeaterInputError(
-                              'product',
-                              'product',
-                              idx
-                            )}
+                            {...isRepeaterInputError('product', 'product', idx)}
                           />
                         </td>
                         <td>
@@ -586,7 +570,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={product.qty_product ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            isError={isRepeaterInputError(
+                            {...isRepeaterInputError(
                               'product',
                               'qty_product',
                               idx
@@ -734,13 +718,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
                             }}
                             options={getFilteredProductOptions()}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            isError={isRepeaterInputError(
+                            {...isRepeaterInputError(
                               'ekspedisi',
                               'product',
                               idx
                             )}
+                            isDisabled={type === 'detail'}
+                            isClearable
                           />
                         </td>
                         <td>
@@ -751,7 +735,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            {...getEkspedisiFieldError(formik, idx, 'qty')}
+                            {...isRepeaterInputError('ekspedisi', 'qty', idx)}
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -777,7 +761,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isLoading={isLoadingSuppliers}
                             isDisabled={type === 'detail'}
                             isClearable
-                            isError={isRepeaterInputError(
+                            {...isRepeaterInputError(
                               'ekspedisi',
                               'supplier',
                               idx
@@ -791,10 +775,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.plat_nomor ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            {...getEkspedisiFieldError(
-                              formik,
-                              idx,
-                              'plat_nomor'
+                            {...isRepeaterInputError(
+                              'ekspedisi',
+                              'plat_nomor',
+                              idx
                             )}
                             readOnly={type === 'detail'}
                             className={{
@@ -809,10 +793,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.no_surat_jalan ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            {...getEkspedisiFieldError(
-                              formik,
-                              idx,
-                              'no_surat_jalan'
+                            {...isRepeaterInputError(
+                              'ekspedisi',
+                              'no_surat_jalan',
+                              idx
                             )}
                             readOnly={type === 'detail'}
                             className={{
@@ -848,7 +832,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 );
                               }
                             }}
-                            isError={isRepeaterInputError(
+                            {...isRepeaterInputError(
                               'ekspedisi',
                               'dokumen',
                               idx
@@ -867,10 +851,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.biaya_ekspedisi ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            {...getEkspedisiFieldError(
-                              formik,
-                              idx,
-                              'biaya_ekspedisi'
+                            {...isRepeaterInputError(
+                              'ekspedisi',
+                              'biaya_ekspedisi',
+                              idx
                             )}
                             readOnly={type === 'detail'}
                             className={{
@@ -883,10 +867,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             disabled
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            {...getEkspedisiFieldError(
-                              formik,
-                              idx,
-                              'biaya_ekspedisi_per_item'
+                            {...isRepeaterInputError(
+                              'ekspedisi',
+                              'biaya_ekspedisi_per_item',
+                              idx
                             )}
                             name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
                             value={
@@ -910,10 +894,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={ekspedisi.nama_sopir ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            {...getEkspedisiFieldError(
-                              formik,
-                              idx,
-                              'nama_sopir'
+                            {...isRepeaterInputError(
+                              'ekspedisi',
+                              'nama_sopir',
+                              idx
                             )}
                             readOnly={type === 'detail'}
                             className={{

From 3c4333021fb88ffb04130e4742ef272e71a84ee8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 10:54:38 +0700
Subject: [PATCH 030/212] feat(FE-62,65): enhance MovementForm and FormActions
 to improve form validation and reset behavior

---
 src/components/helper/form/FormActions.tsx           | 12 ++++++++++--
 .../pages/inventory/movement/form/MovementForm.tsx   |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 7ced46cd..54600d00 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/src/components/helper/form/FormActions.tsx
@@ -64,7 +64,10 @@ export const FormActions = <T,>({
             type='reset'
             color='warning'
             className='px-4'
-            onClick={formik.handleReset}
+            onClick={() => {
+              formik.handleReset();
+              formik.validateForm();
+            }}
           >
             Reset
           </Button>
@@ -73,7 +76,12 @@ export const FormActions = <T,>({
             color='primary'
             className='px-4'
             isLoading={formik.isSubmitting}
-            disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
+            disabled={
+              disableSubmit ||
+              !formik.isValid ||
+              !formik.dirty ||
+              formik.isSubmitting
+            }
           >
             Submit
           </Button>
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 5d69f03e..f196b242 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -64,6 +64,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
+    validateOnMount: true,
     onSubmit: async (values) => {
       setMovementFormErrorMessage('');
       const payload: CreateMovementPayload = {

From dcd5d2692fdb12baa9eb9a43a53f788ce70ec951 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 10:54:38 +0700
Subject: [PATCH 031/212] feat(FE-62,65): enhance MovementForm and FormActions
 to improve form validation and reset behavior

---
 src/components/helper/form/FormActions.tsx           | 12 ++++++++++--
 .../pages/inventory/movement/form/MovementForm.tsx   |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 7ced46cd..54600d00 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/src/components/helper/form/FormActions.tsx
@@ -64,7 +64,10 @@ export const FormActions = <T,>({
             type='reset'
             color='warning'
             className='px-4'
-            onClick={formik.handleReset}
+            onClick={() => {
+              formik.handleReset();
+              formik.validateForm();
+            }}
           >
             Reset
           </Button>
@@ -73,7 +76,12 @@ export const FormActions = <T,>({
             color='primary'
             className='px-4'
             isLoading={formik.isSubmitting}
-            disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
+            disabled={
+              disableSubmit ||
+              !formik.isValid ||
+              !formik.dirty ||
+              formik.isSubmitting
+            }
           >
             Submit
           </Button>
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 5d69f03e..dd927665 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { FormikProps, useFormik } from 'formik';
+import { useFormik } from 'formik';
 import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
@@ -64,6 +64,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
+    validateOnMount: true,
     onSubmit: async (values) => {
       setMovementFormErrorMessage('');
       const payload: CreateMovementPayload = {

From df73ee1fdfc19bdcf935445b5f6d799c108de191 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 12:00:17 +0700
Subject: [PATCH 032/212] feat(FE-62,63,65): refactor MovementForm and related
 types for improved clarity and consistency

---
 src/components/helper/form/FormActions.tsx    |   7 +-
 .../movement/form/MovementForm.schema.ts      | 164 +++---
 .../inventory/movement/form/MovementForm.tsx  | 476 ++++++++----------
 src/types/api/inventory/movement.d.ts         |  61 +--
 4 files changed, 335 insertions(+), 373 deletions(-)

diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 54600d00..92c2a92c 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/src/components/helper/form/FormActions.tsx
@@ -76,12 +76,7 @@ export const FormActions = <T,>({
             color='primary'
             className='px-4'
             isLoading={formik.isSubmitting}
-            disabled={
-              disableSubmit ||
-              !formik.isValid ||
-              !formik.dirty ||
-              formik.isSubmitting
-            }
+            disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
           >
             Submit
           </Button>
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 453ca40b..cb0d228d 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -7,27 +7,28 @@ export type ProductSchema = {
     label: string;
   } | null;
   product_id: number;
-  qty_product: number;
+  product_qty: number;
 };
 
-export type EkspedisiSchema = {
-  product: {
-    value: number;
-    label: string;
-  } | null;
-  product_id: number;
-  qty: number;
+export type DeliverySchema = {
+  delivery_cost: number;
+  delivery_cost_per_item?: number | undefined;
+  document: string | File;
+  driver_name: string;
+  vehicle_plate: string;
   supplier: {
     value: number;
     label: string;
   } | null;
   supplier_id: number;
-  plat_nomor: string;
-  no_surat_jalan: string;
-  dokumen: string | File;
-  biaya_ekspedisi: number;
-  biaya_ekspedisi_per_item?: number | undefined;
-  nama_sopir: string;
+  products: {
+    product: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    product_qty: number;
+  }[];
 };
 
 const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
@@ -36,40 +37,34 @@ const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
   product_id: Yup.number().required('Produk wajib diisi!'),
-  qty_product: Yup.number()
+  product_qty: Yup.number()
     .required('Qty wajib diisi!')
     .min(1, 'Qty minimal 1!')
     .typeError('Qty harus berupa angka!'),
 });
 
-const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
+const DeliveryProductObjectSchema = Yup.object({
   product: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
   product_id: Yup.number().required('Produk wajib diisi!'),
-  qty: Yup.number()
+  product_qty: Yup.number()
     .required('Qty wajib diisi!')
     .min(1, 'Qty minimal 1!')
-    .typeError('Qty harus berupa angka!')
-    .test('max-product-qty', 'Qty melebihi stok produk!', function (value) {
-      const { product_id } = this.parent;
-      const products = (this.options.context?.product ?? []) as {
-        product_id: number;
-        qty_product: number;
-      }[];
-      const product = products.find((p) => p.product_id === product_id);
-      if (!product) return true;
-      return (value ?? 0) <= Number(product.qty_product);
-    }),
-  supplier: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  supplier_id: Yup.number().required('Supplier wajib diisi!'),
-  plat_nomor: Yup.string().required('Plat nomor wajib diisi!'),
-  no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
-  dokumen: Yup.mixed<string | File>()
+    .typeError('Qty harus berupa angka!'),
+});
+
+const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
+  delivery_cost: Yup.number()
+    .required('Biaya pengiriman wajib diisi!')
+    .min(0, 'Biaya minimal 0!')
+    .typeError('Biaya harus berupa angka!'),
+  delivery_cost_per_item: Yup.number()
+    .transform((value) => (isNaN(value) ? undefined : value))
+    .min(0, 'Biaya per item minimal 0!')
+    .typeError('Biaya per item harus berupa angka!'),
+  document: Yup.mixed<string | File>()
     .required('Dokumen wajib diisi!')
     .test(
       'fileType',
@@ -86,44 +81,44 @@ const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
         typeof value === 'string' ||
         (value instanceof File && value.size <= 2 * 1024 * 1024)
     ),
-  biaya_ekspedisi: Yup.number()
-    .required('Biaya ekspedisi wajib diisi!')
-    .min(0, 'Biaya minimal 0!')
-    .typeError('Biaya harus berupa angka!'),
-  biaya_ekspedisi_per_item: Yup.number()
-    .transform((value) => (isNaN(value) ? undefined : value))
-    .min(0, 'Biaya per item minimal 0!')
-    .typeError('Biaya per item harus berupa angka!')
-    .optional()
-    .default(undefined),
-  nama_sopir: Yup.string().required('Nama sopir wajib diisi!'),
+  driver_name: Yup.string().required('Nama sopir wajib diisi!'),
+  vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
+  supplier: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  supplier_id: Yup.number().required('Supplier wajib diisi!'),
+  products: Yup.array()
+    .of(DeliveryProductObjectSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
 });
 
 export const MovementFormSchema = Yup.object({
-  alasan_transfer: Yup.string().required('Alasan transfer wajib diisi!'),
-  tanggal_transfer: Yup.string().required('Tanggal transfer wajib diisi!'),
-  warehouse_asal: Yup.object({
+  transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+  source_warehouse: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  warehouse_asal_id: Yup.number()
+  source_warehouse_id: Yup.number()
     .required('Gudang asal wajib diisi!')
     .typeError('Gudang asal wajib diisi!'),
-  warehouse_tujuan: Yup.object({
+  destination_warehouse: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  warehouse_tujuan_id: Yup.number()
+  destination_warehouse_id: Yup.number()
     .required('Gudang tujuan wajib diisi!')
     .typeError('Gudang tujuan wajib diisi!'),
-  product: Yup.array()
+  products: Yup.array()
     .of(ProductObjectSchema)
     .min(1, 'Minimal harus ada 1 produk!')
     .required('Produk wajib diisi!'),
-  ekspedisi: Yup.array()
-    .of(EkspedisiObjectSchema)
-    .min(1, 'Minimal harus ada 1 ekspedisi!')
-    .required('Ekspedisi wajib diisi!'),
+  deliveries: Yup.array()
+    .of(DeliveryObjectSchema)
+    .min(1, 'Minimal harus ada 1 pengiriman!')
+    .required('Pengiriman wajib diisi!'),
 });
 
 export const UpdateMovementFormSchema = MovementFormSchema;
@@ -133,40 +128,41 @@ export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 export const getMovementFormInitialValues = (
   initialValues?: Movement
 ): MovementFormValues => ({
-  alasan_transfer: initialValues?.alasan_transfer ?? '',
-  tanggal_transfer: initialValues?.tanggal_transfer ?? '',
-  warehouse_asal: initialValues?.warehouse_asal
+  transfer_reason: initialValues?.transfer_reason ?? '',
+  transfer_date: initialValues?.transfer_date ?? '',
+  source_warehouse: initialValues?.source_warehouse
     ? {
-        value: initialValues.warehouse_asal.id,
-        label: initialValues.warehouse_asal.name,
+        value: initialValues.source_warehouse.id,
+        label: initialValues.source_warehouse.name,
       }
     : null,
-  warehouse_asal_id: initialValues?.warehouse_asal?.id ?? 0,
-  warehouse_tujuan: initialValues?.warehouse_tujuan
+  source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
+  destination_warehouse: initialValues?.destination_warehouse
     ? {
-        value: initialValues.warehouse_tujuan.id,
-        label: initialValues.warehouse_tujuan.name,
+        value: initialValues.destination_warehouse.id,
+        label: initialValues.destination_warehouse.name,
       }
     : null,
-  warehouse_tujuan_id: initialValues?.warehouse_tujuan?.id ?? 0,
-  product:
-    initialValues?.product?.map((p) => ({
+  destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
+  products:
+    initialValues?.products?.map((p) => ({
       product: { value: p.product.id, label: p.product.name },
       product_id: p.product.id,
-      qty_product: p.qty_product,
+      product_qty: p.product_qty,
     })) ?? [],
-  ekspedisi:
-    initialValues?.ekspedisi?.map((e) => ({
-      product: { value: e.product_id, label: '' },
-      product_id: e.product_id,
-      qty: e.qty,
-      supplier: { value: e.supplier.id, label: e.supplier.name },
-      supplier_id: e.supplier.id,
-      plat_nomor: e.plat_nomor,
-      no_surat_jalan: e.no_surat_jalan,
-      dokumen: e.dokumen,
-      biaya_ekspedisi: e.biaya_ekspedisi,
-      biaya_ekspedisi_per_item: e.biaya_ekspedisi,
-      nama_sopir: e.nama_sopir,
+  deliveries:
+    initialValues?.deliveries?.map((d) => ({
+      delivery_cost: d.delivery_cost,
+      delivery_cost_per_item: d.delivery_cost_per_item,
+      document: d.document,
+      driver_name: d.driver_name,
+      vehicle_plate: d.vehicle_plate,
+      supplier: { value: d.supplier.id, label: d.supplier.name },
+      supplier_id: d.supplier.id,
+      products: d.products.map((p) => ({
+        product: { value: p.product.id, label: p.product.name },
+        product_id: p.product.id,
+        product_qty: p.product_qty,
+      })),
     })) ?? [],
 });
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index dd927665..183fe760 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -22,7 +22,7 @@ import {
   UpdateMovementFormSchema,
   getMovementFormInitialValues,
   ProductSchema,
-  EkspedisiSchema,
+  DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { useMovementFormHandlers } from './useMovementFormHandlers';
 import {
@@ -41,7 +41,7 @@ interface MovementFormProps {
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [, setMovementFormErrorMessage] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
-  const [selectedEkspedisi, setSelectedEkspedisi] = useState<number[]>([]);
+  const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
 
   const {
     deleteModal,
@@ -64,31 +64,30 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
-    validateOnMount: true,
+    validateOnMount: false,
+    enableReinitialize: true,
     onSubmit: async (values) => {
       setMovementFormErrorMessage('');
       const payload: CreateMovementPayload = {
-        alasan_transfer: values.alasan_transfer,
-        tanggal_transfer: values.tanggal_transfer,
-        warehouse_asal_id: values.warehouse_asal_id,
-        warehouse_tujuan_id: values.warehouse_tujuan_id,
-        product: (values.product ?? []).map((p) => ({
+        transfer_reason: values.transfer_reason,
+        transfer_date: values.transfer_date,
+        source_warehouse_id: values.source_warehouse_id,
+        destination_warehouse_id: values.destination_warehouse_id,
+        products: values.products.map((p) => ({
           product_id: p.product_id,
-          qty_product: p.qty_product,
+          product_qty: p.product_qty,
         })),
-        ekspedisi: (values.ekspedisi ?? []).map((e) => ({
-          product_id: e.product_id,
-          qty: e.qty,
-          supplier_id: e.supplier_id,
-          plat_nomor: e.plat_nomor,
-          no_surat_jalan: e.no_surat_jalan,
-          dokumen:
-            e.dokumen instanceof File ? e.dokumen : (e.dokumen as string),
-          biaya_ekspedisi: e.biaya_ekspedisi,
-          biaya_ekspedisi_per_item: e.qty
-            ? e.biaya_ekspedisi / e.qty
-            : e.biaya_ekspedisi,
-          nama_sopir: e.nama_sopir,
+        deliveries: values.deliveries.map((d) => ({
+          delivery_cost: d.delivery_cost,
+          delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
+          document: d.document instanceof File ? d.document : d.document,
+          driver_name: d.driver_name,
+          vehicle_plate: d.vehicle_plate,
+          supplier_id: d.supplier_id,
+          products: d.products.map((p) => ({
+            product_id: p.product_id,
+            product_qty: p.product_qty,
+          })),
         })),
       };
 
@@ -105,65 +104,67 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const addProduct = () => {
     const newProducts = [
-      ...(formik.values.product || []),
+      ...(formik.values.products || []),
       {
         product: null,
         product_id: 0,
-        qty_product: 0,
+        product_qty: 0,
       },
     ];
-    formik.setFieldValue('product', newProducts);
+    formik.setFieldValue('products', newProducts);
   };
 
   const removeProduct = useCallback(
     (i: number) => {
       const updatedProducts =
-        formik.values.product?.reduce((acc: ProductSchema[], item, index) => {
+        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
           if (index !== i) {
             acc.push(item);
           }
           return acc;
         }, []) ?? [];
 
-      formik.setFieldValue('product', updatedProducts);
+      formik.setFieldValue('products', updatedProducts);
     },
     [formik]
   );
 
   const bulkRemoveProduct = useCallback(() => {
     const updatedProducts =
-      formik.values.product?.filter(
+      formik.values.products?.filter(
         (_, idx) => !selectedProducts.includes(idx)
       ) ?? [];
-    formik.setFieldValue('product', updatedProducts);
+    formik.setFieldValue('products', updatedProducts);
     setSelectedProducts([]);
   }, [formik, selectedProducts]);
 
-  const addEkspedisi = () => {
-    const newEkspedisi = [
-      ...(formik.values.ekspedisi || []),
+  const addDelivery = () => {
+    formik.setFieldValue('deliveries', [
+      ...(formik.values.deliveries || []),
       {
-        product: null,
-        product_id: 0,
-        qty: 0,
+        delivery_cost: 0,
+        delivery_cost_per_item: 0,
+        document: '',
+        driver_name: '',
+        vehicle_plate: '',
         supplier: null,
         supplier_id: 0,
-        plat_nomor: '',
-        no_surat_jalan: '',
-        dokumen: '',
-        biaya_ekspedisi: 0,
-        biaya_ekspedisi_per_item: 0,
-        nama_sopir: '',
+        products: [
+          {
+            product: null,
+            product_id: 0,
+            product_qty: 0,
+          },
+        ],
       },
-    ];
-    formik.setFieldValue('ekspedisi', newEkspedisi);
+    ]);
   };
 
-  const removeEkspedisi = useCallback(
+  const removeDelivery = useCallback(
     (i: number) => {
-      const updatedEkspedisi =
-        formik.values.ekspedisi?.reduce(
-          (acc: EkspedisiSchema[], item, index) => {
+      const updatedDeliveries =
+        formik.values.deliveries?.reduce(
+          (acc: DeliverySchema[], item, index) => {
             if (index !== i) {
               acc.push(item);
             }
@@ -172,23 +173,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           []
         ) ?? [];
 
-      formik.setFieldValue('ekspedisi', updatedEkspedisi);
+      formik.setFieldValue('deliveries', updatedDeliveries);
     },
     [formik]
   );
 
-  const bulkRemoveEkspedisi = useCallback(() => {
-    const updatedEkspedisi =
-      formik.values.ekspedisi?.filter(
-        (_, idx) => !selectedEkspedisi.includes(idx)
+  const bulkRemoveDelivery = useCallback(() => {
+    const updatedDeliveries =
+      formik.values.deliveries?.filter(
+        (_, idx) => !selectedDeliveries.includes(idx)
       ) ?? [];
-    formik.setFieldValue('ekspedisi', updatedEkspedisi);
-    setSelectedEkspedisi([]);
-  }, [formik, selectedEkspedisi]);
+    formik.setFieldValue('deliveries', updatedDeliveries);
+    setSelectedDeliveries([]);
+  }, [formik, selectedDeliveries]);
 
-  const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
+  const isRepeaterInputError = <T extends 'products' | 'deliveries'>(
     arrayName: T,
-    column: T extends 'product' ? keyof ProductSchema : keyof EkspedisiSchema,
+    column: T extends 'products' ? keyof ProductSchema : keyof DeliverySchema,
     idx: number
   ) => {
     if (
@@ -260,57 +261,80 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
     : [];
 
-  const { setValues: formikSetValues } = formik;
-
   useEffect(() => {
-    formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
-
-  useEffect(() => {
-    formik.values.ekspedisi?.forEach((eks, idx) => {
-      if (eks.qty && eks.biaya_ekspedisi) {
-        const perItem = eks.biaya_ekspedisi / eks.qty;
+    formik.values.deliveries?.forEach((delivery, idx) => {
+      const productQty = delivery.products.reduce(
+        (sum, p) => sum + p.product_qty,
+        0
+      );
+      if (productQty && delivery.delivery_cost) {
+        const perItem = delivery.delivery_cost / productQty;
         formik.setFieldValue(
-          `ekspedisi.${idx}.biaya_ekspedisi_per_item`,
+          `deliveries.${idx}.delivery_cost_per_item`,
           perItem
         );
       }
     });
-  }, [formik.values.ekspedisi]);
+  }, [formik.values.deliveries]);
 
   const getFilteredProductOptions = useCallback(() => {
     return (
-      formik.values.product
+      formik.values.products
         ?.filter((p) => p.product)
         .map((p) => ({
           value: p.product_id,
           label: (p.product as OptionType)?.label,
         })) ?? []
     );
-  }, [formik.values.product]);
+  }, [formik.values.products]);
 
-  const validateEkspedisiQty = (ekspedisiIdx: number, qty: number) => {
-    const productId = formik.values.ekspedisi?.[ekspedisiIdx]?.product_id;
-    if (!productId) return true;
-    const relatedProduct = formik.values.product?.find(
-      (p) => p.product_id === productId
-    );
-    if (!relatedProduct) return true;
-    const totalQtyUsed =
-      formik.values.ekspedisi?.reduce((total, eks, i) => {
-        if (eks.product_id === productId && i !== ekspedisiIdx) {
-          return total + (Number(eks.qty) || 0);
-        }
-        return total;
-      }, 0) || 0;
-    return totalQtyUsed + qty <= Number(relatedProduct.qty_product);
-  };
+  const validateDeliveryQty = useCallback(
+    (deliveryIdx: number, deliveryProductIdx: number, qty: number) => {
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      if (!delivery) return true;
 
-  const invalidQtyRows =
-    formik.values.ekspedisi?.map((eks, idx) => {
-      const qty = Number(eks.qty) || 0;
-      return !validateEkspedisiQty(idx, qty);
-    }) ?? [];
+      const deliveryProduct = delivery.products[deliveryProductIdx];
+      if (!deliveryProduct) return true;
+
+      const productId = deliveryProduct.product_id;
+      if (!productId) return true;
+
+      const relatedProduct = formik.values.products?.find(
+        (p) => p.product_id === productId
+      );
+      if (!relatedProduct) return true;
+
+      const totalQtyUsed =
+        formik.values.deliveries?.reduce((total, d) => {
+          const productQty = d.products.reduce((sum, p, pIdx) => {
+            if (
+              p.product_id === productId &&
+              !(d === delivery && pIdx === deliveryProductIdx)
+            ) {
+              return sum + (Number(p.product_qty) || 0);
+            }
+            return sum;
+          }, 0);
+          return total + productQty;
+        }, 0) || 0;
+
+      return totalQtyUsed + qty <= Number(relatedProduct.product_qty);
+    },
+    [formik.values.deliveries, formik.values.products]
+  );
+
+  const invalidQtyRows = useMemo(
+    () =>
+      formik.values.deliveries?.flatMap((delivery, deliveryIdx) =>
+        delivery.products.map((product, productIdx) => {
+          const qty = Number(product.product_qty) || 0;
+          return !validateDeliveryQty(deliveryIdx, productIdx, qty);
+        })
+      ) ?? [],
+    [formik.values.deliveries, formik.values.products, validateDeliveryQty]
+  );
+
+  const hasInvalidQty = invalidQtyRows.some(Boolean);
 
   return (
     <>
@@ -332,30 +356,30 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <TextInput
                   required
                   label='Alasan Transfer'
-                  name='alasan_transfer'
-                  value={formik.values.alasan_transfer}
+                  name='transfer_reason'
+                  value={formik.values.transfer_reason}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                   isError={
-                    formik.touched.alasan_transfer &&
-                    Boolean(formik.errors.alasan_transfer)
+                    formik.touched.transfer_reason &&
+                    Boolean(formik.errors.transfer_reason)
                   }
-                  errorMessage={formik.errors.alasan_transfer}
+                  errorMessage={formik.errors.transfer_reason}
                   readOnly={type === 'detail'}
                 />
                 <TextInput
                   required
                   label='Tanggal Transfer'
                   type='date'
-                  name='tanggal_transfer'
-                  value={formik.values.tanggal_transfer}
+                  name='transfer_date'
+                  value={formik.values.transfer_date}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                   isError={
-                    formik.touched.tanggal_transfer &&
-                    Boolean(formik.errors.tanggal_transfer)
+                    formik.touched.transfer_date &&
+                    Boolean(formik.errors.transfer_date)
                   }
-                  errorMessage={formik.errors.tanggal_transfer}
+                  errorMessage={formik.errors.transfer_date}
                   readOnly={type === 'detail'}
                 />
               </div>
@@ -370,11 +394,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <SelectInput
                   required
                   label='Gudang'
-                  value={formik.values.warehouse_asal ?? undefined}
+                  value={formik.values.source_warehouse}
                   onChange={(val) => {
-                    formik.setFieldValue('warehouse_asal', val);
+                    formik.setFieldValue('source_warehouse', val);
                     formik.setFieldValue(
-                      'warehouse_asal_id',
+                      'source_warehouse_id',
                       (val as WarehouseOptionType)?.value
                     );
                   }}
@@ -382,10 +406,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   onInputChange={setWarehouseSelectInputValue}
                   isLoading={isLoadingWarehouses}
                   isError={
-                    formik.touched.warehouse_asal_id &&
-                    Boolean(formik.errors.warehouse_asal_id)
+                    formik.touched.source_warehouse_id &&
+                    Boolean(formik.errors.source_warehouse_id)
                   }
-                  errorMessage={formik.errors.warehouse_asal_id as string}
+                  errorMessage={formik.errors.source_warehouse_id as string}
                   isDisabled={type === 'detail'}
                   isClearable
                 />
@@ -394,9 +418,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <div className='space-y-4'>
                   <TextInput
                     label='Area'
-                    name='warehouse_asal_area'
+                    name='source_warehouse_area'
                     value={
-                      (formik.values.warehouse_asal as WarehouseOptionType)
+                      (formik.values.source_warehouse as WarehouseOptionType)
                         ?.area || '-'
                     }
                     readOnly
@@ -407,9 +431,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   />
                   <TextInput
                     label='Lokasi'
-                    name='warehouse_asal_location'
+                    name='source_warehouse_location'
                     value={
-                      (formik.values.warehouse_asal as WarehouseOptionType)
+                      (formik.values.source_warehouse as WarehouseOptionType)
                         ?.location || '-'
                     }
                     readOnly
@@ -428,11 +452,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <SelectInput
                   required
                   label='Gudang'
-                  value={formik.values.warehouse_tujuan ?? undefined}
+                  value={formik.values.destination_warehouse}
                   onChange={(val) => {
-                    formik.setFieldValue('warehouse_tujuan', val);
+                    formik.setFieldValue('destination_warehouse', val);
                     formik.setFieldValue(
-                      'warehouse_tujuan_id',
+                      'destination_warehouse_id',
                       (val as WarehouseOptionType)?.value
                     );
                   }}
@@ -440,10 +464,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   onInputChange={setWarehouseSelectInputValue}
                   isLoading={isLoadingWarehouses}
                   isError={
-                    formik.touched.warehouse_tujuan_id &&
-                    Boolean(formik.errors.warehouse_tujuan_id)
+                    formik.touched.destination_warehouse_id &&
+                    Boolean(formik.errors.destination_warehouse_id)
+                  }
+                  errorMessage={
+                    formik.errors.destination_warehouse_id as string
                   }
-                  errorMessage={formik.errors.warehouse_tujuan_id as string}
                   isDisabled={type === 'detail'}
                   isClearable
                 />
@@ -452,10 +478,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 <div className='space-y-4'>
                   <TextInput
                     label='Area'
-                    name='warehouse_tujuan_area'
+                    name='destination_warehouse_area'
                     value={
-                      (formik.values.warehouse_tujuan as WarehouseOptionType)
-                        ?.area || '-'
+                      (
+                        formik.values
+                          .destination_warehouse as WarehouseOptionType
+                      )?.area || '-'
                     }
                     readOnly
                     disabled
@@ -465,10 +493,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   />
                   <TextInput
                     label='Lokasi'
-                    name='warehouse_tujuan_location'
+                    name='destination_warehouse_location'
                     value={
-                      (formik.values.warehouse_tujuan as WarehouseOptionType)
-                        ?.location || '-'
+                      (
+                        formik.values
+                          .destination_warehouse as WarehouseOptionType
+                      )?.location || '-'
                     }
                     readOnly
                     disabled
@@ -495,15 +525,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.product?.length ===
+                              formik.values.products?.length ===
                                 selectedProducts.length &&
-                              formik.values.product?.length > 0
+                              formik.values.products?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
                                 setSelectedProducts(
-                                  formik.values.product?.map((_, idx) => idx) ??
-                                    []
+                                  formik.values.products?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
                                 );
                               } else {
                                 setSelectedProducts([]);
@@ -518,7 +549,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.product?.map((product, idx) => (
+                    {formik.values.products?.map((product, idx) => (
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
                           <td>
@@ -547,11 +578,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={product.product ?? undefined}
                             onChange={(val) => {
                               formik.setFieldValue(
-                                `product.${idx}.product`,
+                                `products.${idx}.product`,
                                 val
                               );
                               formik.setFieldValue(
-                                `product.${idx}.product_id`,
+                                `products.${idx}.product_id`,
                                 (val as OptionType)?.value
                               );
                             }}
@@ -560,20 +591,24 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isLoading={isLoadingProducts}
                             isDisabled={type === 'detail'}
                             isClearable
-                            {...isRepeaterInputError('product', 'product', idx)}
+                            {...isRepeaterInputError(
+                              'products',
+                              'product',
+                              idx
+                            )}
                           />
                         </td>
                         <td>
                           <TextInput
                             required
                             type='number'
-                            name={`product.${idx}.qty_product`}
-                            value={product.qty_product ?? ''}
+                            name={`products.${idx}.product_qty`}
+                            value={product.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             {...isRepeaterInputError(
-                              'product',
-                              'qty_product',
+                              'products',
+                              'product_qty',
                               idx
                             )}
                             readOnly={type === 'detail'}
@@ -633,10 +668,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
             </div>
           </div>
 
-          {/* Ekspedisi table */}
+          {/* Deliveries table */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <h2 className='card-title mb-4'>Ekspedisi</h2>
+              <h2 className='card-title mb-4'>Pengiriman</h2>
               <div className='overflow-x-auto'>
                 <table className='table'>
                   <thead>
@@ -647,19 +682,19 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             type='checkbox'
                             className='checkbox'
                             checked={
-                              formik.values.ekspedisi?.length ===
-                                selectedEkspedisi.length &&
-                              formik.values.ekspedisi?.length > 0
+                              formik.values.deliveries?.length ===
+                                selectedDeliveries.length &&
+                              formik.values.deliveries?.length > 0
                             }
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedEkspedisi(
-                                  formik.values.ekspedisi?.map(
+                                setSelectedDeliveries(
+                                  formik.values.deliveries?.map(
                                     (_, idx) => idx
                                   ) ?? []
                                 );
                               } else {
-                                setSelectedEkspedisi([]);
+                                setSelectedDeliveries([]);
                               }
                             }}
                           />
@@ -669,34 +704,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <th>Qty</th>
                       <th>Supplier</th>
                       <th>Plat Nomor</th>
-                      <th>No Surat Jalan</th>
                       <th>Dokumen</th>
-                      <th>Biaya Ekspedisi (Rp.)</th>
-                      <th>Biaya Ekspedisi / Item (Rp.)</th>
+                      <th>Biaya Pengiriman (Rp.)</th>
+                      <th>Biaya Per Item (Rp.)</th>
                       <th>Nama Sopir</th>
                       {type !== 'detail' && <th>Aksi</th>}
                     </tr>
                   </thead>
                   <tbody>
-                    {formik.values.ekspedisi?.map((ekspedisi, idx) => (
-                      <tr
-                        key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
-                      >
+                    {formik.values.deliveries?.map((delivery, idx) => (
+                      <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
                           <td>
                             <input
                               type='checkbox'
                               className='checkbox'
-                              checked={selectedEkspedisi.includes(idx)}
+                              checked={selectedDeliveries.includes(idx)}
                               onChange={(e) => {
                                 if (e.target.checked) {
-                                  setSelectedEkspedisi([
-                                    ...selectedEkspedisi,
+                                  setSelectedDeliveries([
+                                    ...selectedDeliveries,
                                     idx,
                                   ]);
                                 } else {
-                                  setSelectedEkspedisi(
-                                    selectedEkspedisi.filter((i) => i !== idx)
+                                  setSelectedDeliveries(
+                                    selectedDeliveries.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -706,24 +738,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <td>
                           <SelectInput
                             required
-                            value={ekspedisi.product ?? undefined}
+                            value={delivery.products[0]?.product ?? undefined}
                             onChange={(val) => {
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.product`,
+                                `deliveries.${idx}.products.0.product`,
                                 val
                               );
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.product_id`,
+                                `deliveries.${idx}.products.0.product_id`,
                                 (val as OptionType)?.value
                               );
-                              formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
                             }}
                             options={getFilteredProductOptions()}
-                            {...isRepeaterInputError(
-                              'ekspedisi',
-                              'product',
-                              idx
-                            )}
                             isDisabled={type === 'detail'}
                             isClearable
                           />
@@ -732,11 +758,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           <TextInput
                             required
                             type='number'
-                            name={`ekspedisi.${idx}.qty`}
-                            value={ekspedisi.qty ?? ''}
+                            name={`deliveries.${idx}.products.0.product_qty`}
+                            value={delivery.products[0]?.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            {...isRepeaterInputError('ekspedisi', 'qty', idx)}
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',
@@ -746,14 +771,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <td>
                           <SelectInput
                             required
-                            value={ekspedisi.supplier ?? undefined}
+                            value={delivery.supplier}
                             onChange={(val) => {
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.supplier`,
+                                `deliveries.${idx}.supplier`,
                                 val
                               );
                               formik.setFieldValue(
-                                `ekspedisi.${idx}.supplier_id`,
+                                `deliveries.${idx}.supplier_id`,
                                 (val as OptionType)?.value
                               );
                             }}
@@ -762,128 +787,75 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isLoading={isLoadingSuppliers}
                             isDisabled={type === 'detail'}
                             isClearable
-                            {...isRepeaterInputError(
-                              'ekspedisi',
-                              'supplier',
-                              idx
-                            )}
                           />
                         </td>
                         <td>
                           <TextInput
                             required
-                            name={`ekspedisi.${idx}.plat_nomor`}
-                            value={ekspedisi.plat_nomor ?? ''}
+                            name={`deliveries.${idx}.vehicle_plate`}
+                            value={delivery.vehicle_plate}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             {...isRepeaterInputError(
-                              'ekspedisi',
-                              'plat_nomor',
+                              'deliveries',
+                              'vehicle_plate',
                               idx
                             )}
                             readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`ekspedisi.${idx}.no_surat_jalan`}
-                            value={ekspedisi.no_surat_jalan ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'ekspedisi',
-                              'no_surat_jalan',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
                           />
                         </td>
                         <td>
                           <FileInput
                             required
-                            name={`ekspedisi.${idx}.dokumen`}
+                            name={`deliveries.${idx}.document`}
                             onChange={(e) => {
                               const file = e.target.files?.[0];
                               if (file) {
-                                const allowedTypes = [
-                                  'application/pdf',
-                                  'image/jpeg',
-                                  'image/jpg',
-                                ];
-                                if (!allowedTypes.includes(file.type)) {
-                                  toast.error(
-                                    'Mohon upload file berformat PDF atau JPEG/JPG.'
-                                  );
-                                  return;
-                                }
                                 if (file.size > 2 * 1024 * 1024) {
                                   toast.error('Ukuran dokumen maksimal 2 MB!');
                                   return;
                                 }
                                 formik.setFieldValue(
-                                  `ekspedisi.${idx}.dokumen`,
+                                  `deliveries.${idx}.document`,
                                   file
                                 );
                               }
                             }}
                             {...isRepeaterInputError(
-                              'ekspedisi',
-                              'dokumen',
+                              'deliveries',
+                              'document',
                               idx
                             )}
                             readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
                           />
                         </td>
                         <td>
                           <TextInput
                             required
                             type='number'
-                            name={`ekspedisi.${idx}.biaya_ekspedisi`}
-                            value={ekspedisi.biaya_ekspedisi ?? ''}
+                            name={`deliveries.${idx}.delivery_cost`}
+                            value={delivery.delivery_cost}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             {...isRepeaterInputError(
-                              'ekspedisi',
-                              'biaya_ekspedisi',
+                              'deliveries',
+                              'delivery_cost',
                               idx
                             )}
                             readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
                           />
                         </td>
                         <td>
                           <TextInput
                             disabled
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'ekspedisi',
-                              'biaya_ekspedisi_per_item',
-                              idx
-                            )}
-                            name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
+                            name={`deliveries.${idx}.delivery_cost_per_item`}
                             value={
-                              ekspedisi.qty && ekspedisi.biaya_ekspedisi
-                                ? (
-                                    ekspedisi.biaya_ekspedisi / ekspedisi.qty
-                                  ).toLocaleString('id-ID')
-                                : '0'
+                              delivery.delivery_cost_per_item?.toLocaleString(
+                                'id-ID'
+                              ) ?? '0'
                             }
                             readOnly
                             className={{
-                              wrapper: 'w-full min-w-24',
                               input: 'bg-base-200',
                             }}
                           />
@@ -891,19 +863,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <td>
                           <TextInput
                             required
-                            name={`ekspedisi.${idx}.nama_sopir`}
-                            value={ekspedisi.nama_sopir ?? ''}
+                            name={`deliveries.${idx}.driver_name`}
+                            value={delivery.driver_name}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                             {...isRepeaterInputError(
-                              'ekspedisi',
-                              'nama_sopir',
+                              'deliveries',
+                              'driver_name',
                               idx
                             )}
                             readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
                           />
                         </td>
                         {type !== 'detail' && (
@@ -911,7 +880,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             <Button
                               type='button'
                               color='error'
-                              onClick={() => removeEkspedisi(idx)}
+                              onClick={() => removeDelivery(idx)}
                             >
                               <Icon
                                 icon='material-symbols:delete-outline-rounded'
@@ -928,12 +897,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               </div>
               {type !== 'detail' && (
                 <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedEkspedisi.length > 0 && (
+                  {selectedDeliveries.length > 0 && (
                     <Button
                       type='button'
                       color='error'
-                      onClick={bulkRemoveEkspedisi}
-                      disabled={selectedEkspedisi.length === 0}
+                      onClick={bulkRemoveDelivery}
                       className='w-fit'
                     >
                       <Icon
@@ -941,17 +909,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         width={24}
                         height={24}
                       />
-                      Hapus Ekspedisi Terpilih ({selectedEkspedisi.length})
+                      Hapus Pengiriman Terpilih ({selectedDeliveries.length})
                     </Button>
                   )}
                   <Button
                     type='button'
                     color='success'
-                    onClick={addEkspedisi}
+                    onClick={addDelivery}
                     className='w-fit'
                   >
                     <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Ekspedisi
+                    Tambah Pengiriman
                   </Button>
                 </div>
               )}
@@ -968,7 +936,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 : undefined
             }
             onDelete={deleteMovementClickHandler}
-            disableSubmit={invalidQtyRows.some(Boolean)}
+            disableSubmit={hasInvalidQty}
           />
 
           {movementFormErrorMessage && (
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index d7f2776a..11da41a5 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -5,47 +5,50 @@ import { Warehouse } from '@/types/api/master-data/warehouse';
 
 export type BaseMovement = {
   id: number;
-  alasan_transfer: string;
-  tanggal_transfer: string;
-  warehouse_asal: Warehouse;
-  warehouse_tujuan: Warehouse;
-  product: {
+  transfer_reason: string;
+  transfer_date: string;
+  source_warehouse: Warehouse;
+  destination_warehouse: Warehouse;
+  products: {
     product: Product;
-    qty_product: number;
+    product_qty: number;
   }[];
-  ekspedisi: {
-    product_id: number;
-    qty: number;
+  deliveries: {
+    delivery_cost: number;
+    delivery_cost_per_item: number;
+    document: string;
+    driver_name: string;
+    vehicle_plate: string;
     supplier: Supplier;
-    plat_nomor: string;
-    no_surat_jalan: string;
-    dokumen: string;
-    biaya_ekspedisi: number;
-    nama_sopir: string;
+    products: {
+      product: Product;
+      product_qty: number;
+    }[];
   }[];
 };
 
 export type Movement = BaseMetadata & BaseMovement;
 
 export type CreateMovementPayload = {
-  alasan_transfer: string;
-  tanggal_transfer: string;
-  warehouse_asal_id: number;
-  warehouse_tujuan_id: number;
-  product: {
+  transfer_reason: string;
+  transfer_date: string;
+  source_warehouse_id: number;
+  destination_warehouse_id: number;
+  products: {
     product_id: number;
-    qty_product: number;
+    product_qty: number;
   }[];
-  ekspedisi: {
-    product_id: number;
-    qty: number;
+  deliveries: {
+    delivery_cost: number;
+    delivery_cost_per_item: number;
+    document: string | File;
+    driver_name: string;
+    vehicle_plate: string;
     supplier_id: number;
-    plat_nomor: string;
-    no_surat_jalan: string;
-    dokumen: string | File;
-    biaya_ekspedisi: number;
-    biaya_ekspedisi_per_item?: number;
-    nama_sopir: string;
+    products: {
+      product_id: number;
+      product_qty: number;
+    }[];
   }[];
 };
 

From 06dc869b846c396d568a58aa1d9cdb695c8be3d5 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 12:08:52 +0700
Subject: [PATCH 033/212] feat(FE-64): update MovementTable structure for
 improved data clarity and consistency

---
 .../inventory/movement/MovementTable.tsx      | 244 +++++++++++++-----
 1 file changed, 178 insertions(+), 66 deletions(-)

diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index b39906d3..a00f7111 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -31,23 +31,23 @@ const dummyMovements: Movement[] = [
   {
     ...baseMetadata,
     id: 1,
-    alasan_transfer: 'Restock',
-    tanggal_transfer: '2024-06-01',
-    warehouse_asal: {
+    transfer_reason: 'Restock',
+    transfer_date: '2024-06-01',
+    source_warehouse: {
       ...baseMetadata,
       id: 1,
       name: 'Warehouse A',
       type: 'AREA',
       area: { id: 1, name: 'Area 1' },
     },
-    warehouse_tujuan: {
+    destination_warehouse: {
       ...baseMetadata,
       id: 2,
       name: 'Warehouse B',
       type: 'AREA',
       area: { id: 2, name: 'Area 2' },
     },
-    product: [
+    products: [
       {
         product: {
           ...baseMetadata,
@@ -73,13 +73,16 @@ const dummyMovements: Movement[] = [
           suppliers: [],
           flags: [],
         },
-        qty_product: 10,
+        product_qty: 10,
       },
     ],
-    ekspedisi: [
+    deliveries: [
       {
-        product_id: 1,
-        qty: 10,
+        delivery_cost: 50000,
+        delivery_cost_per_item: 5000,
+        document: 'doc1.pdf',
+        driver_name: 'Andi',
+        vehicle_plate: 'B 1234 CD',
         supplier: {
           ...baseMetadata,
           id: 1,
@@ -97,34 +100,58 @@ const dummyMovements: Movement[] = [
           balance: 0,
           due_date: 30,
         },
-        plat_nomor: 'B 1234 CD',
-        no_surat_jalan: 'SJ-001',
-        dokumen: 'doc1.pdf',
-        biaya_ekspedisi: 50000,
-        nama_sopir: 'Andi',
+        products: [
+          {
+            product: {
+              ...baseMetadata,
+              id: 1,
+              name: 'Product X',
+              brand: 'Brand X',
+              sku: 'SKU-X',
+              product_price: 10000,
+              selling_price: 12000,
+              tax: 10,
+              expiry_period: 365,
+              uom: {
+                ...baseMetadata,
+                id: 1,
+                name: 'PCS',
+              },
+              product_category: {
+                ...baseMetadata,
+                id: 1,
+                code: 'CAT-1',
+                name: 'Category 1',
+              },
+              suppliers: [],
+              flags: [],
+            },
+            product_qty: 10,
+          },
+        ],
       },
     ],
   },
   {
     ...baseMetadata,
     id: 2,
-    alasan_transfer: 'Mutasi Stok',
-    tanggal_transfer: '2024-06-02',
-    warehouse_asal: {
+    transfer_reason: 'Mutasi Stok',
+    transfer_date: '2024-06-02',
+    source_warehouse: {
       ...baseMetadata,
       id: 2,
       name: 'Warehouse B',
       type: 'AREA',
       area: { id: 2, name: 'Area 2' },
     },
-    warehouse_tujuan: {
+    destination_warehouse: {
       ...baseMetadata,
       id: 3,
       name: 'Warehouse C',
       type: 'AREA',
       area: { id: 3, name: 'Area 3' },
     },
-    product: [
+    products: [
       {
         product: {
           ...baseMetadata,
@@ -150,13 +177,16 @@ const dummyMovements: Movement[] = [
           suppliers: [],
           flags: [],
         },
-        qty_product: 5,
+        product_qty: 5,
       },
     ],
-    ekspedisi: [
+    deliveries: [
       {
-        product_id: 2,
-        qty: 5,
+        delivery_cost: 60000,
+        delivery_cost_per_item: 12000,
+        document: 'doc2.pdf',
+        driver_name: 'Budi',
+        vehicle_plate: 'D 5678 EF',
         supplier: {
           ...baseMetadata,
           id: 2,
@@ -174,34 +204,58 @@ const dummyMovements: Movement[] = [
           balance: 1000,
           due_date: 15,
         },
-        plat_nomor: 'D 5678 EF',
-        no_surat_jalan: 'SJ-002',
-        dokumen: 'doc2.pdf',
-        biaya_ekspedisi: 60000,
-        nama_sopir: 'Budi',
+        products: [
+          {
+            product: {
+              ...baseMetadata,
+              id: 2,
+              name: 'Product Y',
+              brand: 'Brand Y',
+              sku: 'SKU-Y',
+              product_price: 20000,
+              selling_price: 25000,
+              tax: 5,
+              expiry_period: 180,
+              uom: {
+                ...baseMetadata,
+                id: 2,
+                name: 'BOX',
+              },
+              product_category: {
+                ...baseMetadata,
+                id: 2,
+                code: 'CAT-2',
+                name: 'Category 2',
+              },
+              suppliers: [],
+              flags: [],
+            },
+            product_qty: 5,
+          },
+        ],
       },
     ],
   },
   {
     ...baseMetadata,
     id: 3,
-    alasan_transfer: 'Pengembalian',
-    tanggal_transfer: '2024-06-03',
-    warehouse_asal: {
+    transfer_reason: 'Pengembalian',
+    transfer_date: '2024-06-03',
+    source_warehouse: {
       ...baseMetadata,
       id: 3,
       name: 'Warehouse C',
       type: 'AREA',
       area: { id: 3, name: 'Area 3' },
     },
-    warehouse_tujuan: {
+    destination_warehouse: {
       ...baseMetadata,
       id: 1,
       name: 'Warehouse A',
       type: 'AREA',
       area: { id: 1, name: 'Area 1' },
     },
-    product: [
+    products: [
       {
         product: {
           ...baseMetadata,
@@ -227,13 +281,16 @@ const dummyMovements: Movement[] = [
           suppliers: [],
           flags: [],
         },
-        qty_product: 8,
+        product_qty: 8,
       },
     ],
-    ekspedisi: [
+    deliveries: [
       {
-        product_id: 3,
-        qty: 8,
+        delivery_cost: 40000,
+        delivery_cost_per_item: 5000,
+        document: 'doc3.pdf',
+        driver_name: 'Cici',
+        vehicle_plate: 'F 9101 GH',
         supplier: {
           ...baseMetadata,
           id: 3,
@@ -251,34 +308,58 @@ const dummyMovements: Movement[] = [
           balance: 500,
           due_date: 10,
         },
-        plat_nomor: 'F 9101 GH',
-        no_surat_jalan: 'SJ-003',
-        dokumen: 'doc3.pdf',
-        biaya_ekspedisi: 40000,
-        nama_sopir: 'Cici',
+        products: [
+          {
+            product: {
+              ...baseMetadata,
+              id: 3,
+              name: 'Product Z',
+              brand: 'Brand Z',
+              sku: 'SKU-Z',
+              product_price: 15000,
+              selling_price: 18000,
+              tax: 8,
+              expiry_period: 90,
+              uom: {
+                ...baseMetadata,
+                id: 3,
+                name: 'KG',
+              },
+              product_category: {
+                ...baseMetadata,
+                id: 3,
+                code: 'CAT-3',
+                name: 'Category 3',
+              },
+              suppliers: [],
+              flags: [],
+            },
+            product_qty: 8,
+          },
+        ],
       },
     ],
   },
   {
     ...baseMetadata,
     id: 4,
-    alasan_transfer: 'Transfer Internal',
-    tanggal_transfer: '2024-06-04',
-    warehouse_asal: {
+    transfer_reason: 'Transfer Internal',
+    transfer_date: '2024-06-04',
+    source_warehouse: {
       ...baseMetadata,
       id: 4,
       name: 'Warehouse D',
       type: 'AREA',
       area: { id: 4, name: 'Area 4' },
     },
-    warehouse_tujuan: {
+    destination_warehouse: {
       ...baseMetadata,
       id: 5,
       name: 'Warehouse E',
       type: 'AREA',
       area: { id: 5, name: 'Area 5' },
     },
-    product: [
+    products: [
       {
         product: {
           ...baseMetadata,
@@ -304,13 +385,16 @@ const dummyMovements: Movement[] = [
           suppliers: [],
           flags: [],
         },
-        qty_product: 20,
+        product_qty: 20,
       },
     ],
-    ekspedisi: [
+    deliveries: [
       {
-        product_id: 4,
-        qty: 20,
+        delivery_cost: 30000,
+        delivery_cost_per_item: 1500,
+        document: 'doc4.pdf',
+        driver_name: 'Dedi',
+        vehicle_plate: 'H 2345 IJ',
         supplier: {
           ...baseMetadata,
           id: 4,
@@ -328,11 +412,35 @@ const dummyMovements: Movement[] = [
           balance: 200,
           due_date: 20,
         },
-        plat_nomor: 'H 2345 IJ',
-        no_surat_jalan: 'SJ-004',
-        dokumen: 'doc4.pdf',
-        biaya_ekspedisi: 30000,
-        nama_sopir: 'Dedi',
+        products: [
+          {
+            product: {
+              ...baseMetadata,
+              id: 4,
+              name: 'Product A',
+              brand: 'Brand A',
+              sku: 'SKU-A',
+              product_price: 5000,
+              selling_price: 7000,
+              tax: 0,
+              expiry_period: 60,
+              uom: {
+                ...baseMetadata,
+                id: 4,
+                name: 'LITER',
+              },
+              product_category: {
+                ...baseMetadata,
+                id: 4,
+                code: 'CAT-4',
+                name: 'Category 4',
+              },
+              suppliers: [],
+              flags: [],
+            },
+            product_qty: 20,
+          },
+        ],
       },
     ],
   },
@@ -401,30 +509,34 @@ const MovementTable = () => {
             cell: (props) => pageSize * (page - 1) + props.row.index + 1,
           },
           {
-            accessorKey: 'warehouse_asal',
+            accessorKey: 'source_warehouse',
             header: 'Gudang Asal',
-            cell: (props) => props.row.original.warehouse_asal.name,
+            cell: (props) => props.row.original.source_warehouse.name,
           },
           {
-            accessorKey: 'warehouse_tujuan',
+            accessorKey: 'destination_warehouse',
             header: 'Gudang Tujuan',
-            cell: (props) => props.row.original.warehouse_tujuan.name,
+            cell: (props) => props.row.original.destination_warehouse.name,
           },
           {
-            accessorKey: 'product',
+            accessorKey: 'products',
             header: 'Nama Produk',
             cell: (props) =>
-              props.row.original.product.map((p) => p.product.name),
+              props.row.original.products
+                .map((p) => p.product.name)
+                .join(', '),
           },
           {
-            accessorKey: 'alasan_transfer',
+            accessorKey: 'transfer_reason',
             header: 'Catatan',
           },
           {
-            accessorKey: 'biaya_ekspedisi',
-            header: 'Biaya Ekspedisi',
+            accessorKey: 'delivery_cost',
+            header: 'Biaya Pengiriman',
             cell: (props) =>
-              props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
+              props.row.original.deliveries
+                .reduce((sum, d) => sum + d.delivery_cost, 0)
+                .toLocaleString('id-ID'),
           },
           {
             id: 'actions',

From aa21088e99cf25be75961872e1d4d6c795b16af8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 12:30:59 +0700
Subject: [PATCH 034/212] feat(FE-62): enhance MovementForm with delivery
 product input error handling and validation

---
 .../inventory/movement/form/MovementForm.tsx  | 86 ++++++++++++++++++-
 1 file changed, 83 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 183fe760..1af77cf7 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -214,6 +214,32 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     };
   };
 
+  const isDeliveryProductInputError = (
+    deliveryIdx: number,
+    productIdx: number,
+    column: keyof DeliverySchema['products'][number]
+  ) => {
+    const touchedDelivery = formik.touched.deliveries?.[deliveryIdx];
+    const errorDelivery = formik.errors.deliveries?.[deliveryIdx] as
+      | { products: Array<Record<string, string>> }
+      | undefined;
+
+    if (!touchedDelivery?.products || !errorDelivery?.products) {
+      return {
+        isError: false,
+        errorMessage: undefined,
+      };
+    }
+
+    const touchedField = touchedDelivery.products[productIdx]?.[column];
+    const errorField = errorDelivery.products[productIdx]?.[column];
+
+    return {
+      isError: Boolean(touchedField && errorField),
+      errorMessage: touchedField ? errorField : undefined,
+    };
+  };
+
   interface WarehouseOptionType extends OptionType {
     area?: string;
     location?: string;
@@ -305,11 +331,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       if (!relatedProduct) return true;
 
       const totalQtyUsed =
-        formik.values.deliveries?.reduce((total, d) => {
+        formik.values.deliveries?.reduce((total, d, dIdx) => {
           const productQty = d.products.reduce((sum, p, pIdx) => {
             if (
               p.product_id === productId &&
-              !(d === delivery && pIdx === deliveryProductIdx)
+              !(dIdx === deliveryIdx && pIdx === deliveryProductIdx)
             ) {
               return sum + (Number(p.product_qty) || 0);
             }
@@ -323,6 +349,47 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik.values.deliveries, formik.values.products]
   );
 
+  const getDeliveryQtyError = useCallback(
+    (deliveryIdx: number, deliveryProductIdx: number) => {
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      if (!delivery) return null;
+
+      const deliveryProduct = delivery.products[deliveryProductIdx];
+      if (!deliveryProduct || !deliveryProduct.product_id) return null;
+
+      const qty = Number(deliveryProduct.product_qty) || 0;
+      const productId = deliveryProduct.product_id;
+
+      const relatedProduct = formik.values.products?.find(
+        (p) => p.product_id === productId
+      );
+      if (!relatedProduct) return null;
+
+      const totalQtyUsed =
+        formik.values.deliveries?.reduce((total, d, dIdx) => {
+          const productQty = d.products.reduce((sum, p, pIdx) => {
+            if (
+              p.product_id === productId &&
+              !(dIdx === deliveryIdx && pIdx === deliveryProductIdx)
+            ) {
+              return sum + (Number(p.product_qty) || 0);
+            }
+            return sum;
+          }, 0);
+          return total + productQty;
+        }, 0) || 0;
+
+      const availableQty = Number(relatedProduct.product_qty) - totalQtyUsed;
+
+      if (totalQtyUsed + qty > Number(relatedProduct.product_qty)) {
+        return `Qty melebihi stok produk! Tersedia: ${availableQty}, Total digunakan: ${totalQtyUsed + qty}`;
+      }
+
+      return null;
+    },
+    [formik.values.deliveries, formik.values.products]
+  );
+
   const invalidQtyRows = useMemo(
     () =>
       formik.values.deliveries?.flatMap((delivery, deliveryIdx) =>
@@ -334,7 +401,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik.values.deliveries, formik.values.products, validateDeliveryQty]
   );
 
-  const hasInvalidQty = invalidQtyRows.some(Boolean);
+  const hasInvalidQty = useMemo(
+    () => invalidQtyRows.some(Boolean),
+    [invalidQtyRows]
+  );
 
   return (
     <>
@@ -762,6 +832,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             value={delivery.products[0]?.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            isError={
+                              isDeliveryProductInputError(idx, 0, 'product_qty')
+                                .isError || Boolean(getDeliveryQtyError(idx, 0))
+                            }
+                            errorMessage={
+                              isDeliveryProductInputError(idx, 0, 'product_qty')
+                                .errorMessage ||
+                              getDeliveryQtyError(idx, 0) ||
+                              undefined
+                            }
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-24',

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 035/212] 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 036/212] 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 037/212] 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 e2b35e765cf11ba4492a1d4631f51f918edf2ddd Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 15 Oct 2025 20:01:41 +0700
Subject: [PATCH 038/212] feat(FE-102) create master data flock and add LTI
 theme

---
 src/app/globals.css                           |  37 +++
 src/app/layout.tsx                            |   2 +-
 src/app/master-data/flock/add/page.tsx        |  11 +
 .../master-data/flock/detail/edit/page.tsx    |  47 ++++
 src/app/master-data/flock/detail/page.tsx     |  44 +++
 src/app/master-data/flock/page.tsx            |  11 +
 src/components/Button.tsx                     |   2 +-
 .../pages/master-data/flock/FlocksTable.tsx   | 264 ++++++++++++++++++
 .../flock/form/FlockForm.schema.ts            |  14 +
 .../master-data/flock/form/FlockForm.tsx      | 217 ++++++++++++++
 src/config/constant.ts                        |   5 +
 src/services/api/master-data.ts               |  11 +
 src/types/api/master-data/flock.d.ts          |  14 +
 13 files changed, 677 insertions(+), 2 deletions(-)
 create mode 100644 src/app/master-data/flock/add/page.tsx
 create mode 100644 src/app/master-data/flock/detail/edit/page.tsx
 create mode 100644 src/app/master-data/flock/detail/page.tsx
 create mode 100644 src/app/master-data/flock/page.tsx
 create mode 100644 src/components/pages/master-data/flock/FlocksTable.tsx
 create mode 100644 src/components/pages/master-data/flock/form/FlockForm.schema.ts
 create mode 100644 src/components/pages/master-data/flock/form/FlockForm.tsx
 create mode 100644 src/types/api/master-data/flock.d.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index 386e7620..0fb52327 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,43 @@
 @import 'tailwindcss';
 @plugin "daisyui";
 
+@plugin "daisyui/theme" {
+  name: "corporate";
+  default: false;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(98% 0.001 106.423);
+  --color-base-200: oklch(97% 0.001 106.424);
+  --color-base-300: oklch(92% 0.003 48.717);
+  --color-base-content: oklch(22.389% 0.031 278.072);
+  --color-primary: oklch(60% 0.126 221.723);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(52% 0.105 223.128);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(45% 0.085 224.283);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(39% 0.07 227.392);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(58% 0.158 241.966);
+  --color-info-content: oklch(100% 0 0);
+  --color-success: oklch(62% 0.194 149.214);
+  --color-success-content: oklch(100% 0 0);
+  --color-warning: oklch(85% 0.199 91.936);
+  --color-warning-content: oklch(0% 0 0);
+  --color-error: oklch(57% 0.245 27.325);
+  --color-error-content: oklch(100% 0 0);
+  --radius-selector: 0rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.21875rem;
+  --size-field: 0.1875rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+
+
 :root {
   --color-primary: #1f74bf;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ef28da38..c19b8a77 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en'>
+    <html lang='en' data-theme='lti'>
       <body className={`${inter.variable} antialiased font-inter`}>
         <RequireAuth>
           <MainDrawer>{children}</MainDrawer>
diff --git a/src/app/master-data/flock/add/page.tsx b/src/app/master-data/flock/add/page.tsx
new file mode 100644
index 00000000..5ee3958e
--- /dev/null
+++ b/src/app/master-data/flock/add/page.tsx
@@ -0,0 +1,11 @@
+import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+
+const AddFlock = () => {
+  return (
+    <section className="w-full p-4 flex flex-row justify-center">
+      <FlockForm />
+    </section>
+  );
+}
+
+export default AddFlock;
diff --git a/src/app/master-data/flock/detail/edit/page.tsx b/src/app/master-data/flock/detail/edit/page.tsx
new file mode 100644
index 00000000..c3903555
--- /dev/null
+++ b/src/app/master-data/flock/detail/edit/page.tsx
@@ -0,0 +1,47 @@
+import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { FlockApi } from "@/services/api/master-data";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const FlockEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const flockId = searchParams.get('flockId');
+
+  // Fetch Data
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(
+    flockId,
+    (id: number) => FlockApi.getSingle(id)
+  );
+
+  if (!flockId) {
+    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 (!isLoadingFlock && (!flock || isResponseError(flock))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingFlock && isResponseSuccess(flock) && (
+        <FlockForm formType='edit' initialValues={flock.data} />
+      )}
+    </div>
+  );
+}
+
+export default FlockEdit;
\ No newline at end of file
diff --git a/src/app/master-data/flock/detail/page.tsx b/src/app/master-data/flock/detail/page.tsx
new file mode 100644
index 00000000..cedc3243
--- /dev/null
+++ b/src/app/master-data/flock/detail/page.tsx
@@ -0,0 +1,44 @@
+import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { FlockApi } from "@/services/api/master-data";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const FlockDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const flockId = searchParams.get('flockId');
+
+  // Fetch Data
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(flockId, (id: number) => FlockApi.getSingle(id));
+
+  if(!flockId){
+    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(!isLoadingFlock && (!flock || isResponseError(flock))){
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingFlock && (
+        <span className="loading loading-spinner loading-xl" />
+      )}
+      {!isLoadingFlock && isResponseSuccess(flock) && (
+        <FlockForm formType="detail" initialValues={flock.data} />
+      )}
+    </div>
+  );
+}
+
+export default FlockDetail;
\ No newline at end of file
diff --git a/src/app/master-data/flock/page.tsx b/src/app/master-data/flock/page.tsx
new file mode 100644
index 00000000..b317091a
--- /dev/null
+++ b/src/app/master-data/flock/page.tsx
@@ -0,0 +1,11 @@
+import FlockTable from "@/components/pages/master-data/flock/FlocksTable";
+
+const Flock = () => {
+  return (
+    <section className="w-full p-4">
+      <FlockTable/>
+    </section>
+  );   
+}
+
+export default Flock;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c67a29c2..5da6e5ad 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -43,7 +43,7 @@ const Button = ({
       'btn-warning': color === 'warning',
       'btn-error': color === 'error',
     },
-    'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all'
+    'h-fit justify-center items-center gap-2 rounded p-2 text-base transition-all'
   );
 
   return (
diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx
new file mode 100644
index 00000000..817eff40
--- /dev/null
+++ b/src/components/pages/master-data/flock/FlocksTable.tsx
@@ -0,0 +1,264 @@
+'use client';
+
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { Flock } from '@/types/api/master-data/flock';
+import { cn } from '@/lib/helper';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { use, useState } from 'react';
+import useSWR from 'swr';
+import { FlockApi } from '@/services/api/master-data';
+import { useModal } from '@/components/Modal';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import toast from 'react-hot-toast';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { ROWS_OPTIONS } from '@/config/constant';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+const RowsOptions = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Flock, 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={`/master-data/flock/edit/?flockId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='material-symbols:edit-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Edit
+      </Button>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const FlockTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: flocks,
+    isLoading,
+    mutate: refreshFlocks,
+  } = useSWR(
+    `${FlockApi.basePath}${getTableFilterQueryString()}`,
+    FlockApi.getAllFetcher
+  );
+
+  // State
+  const deleteModal = useModal();
+  const [selectedFlock, setSelectedFlock] = useState<Flock | undefined>(
+    undefined
+  );
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns Definition
+  const flocksColumns: ColumnDef<Flock>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'created_at',
+      header: 'Dibuat pada',
+      cell: (props) =>
+        new Date(props.row.original.created_at).toLocaleDateString(),
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        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 = () => {
+          setSelectedFlock(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowsOptions
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowsOptions
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FlockApi.delete(selectedFlock?.id as number);
+    refreshFlocks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Flock!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/master-data/flock/add' color='primary'>
+                Tambah Flock
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Flock'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
+          </div>
+        </div>
+
+        <Table<Flock>
+          data={isResponseSuccess(flocks) ? flocks?.data : []}
+          columns={flocksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(flocks) ? flocks?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(flocks) ? flocks?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(flocks) && flocks?.data?.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',
+          }}
+        />
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Supplier ini (${selectedFlock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default FlockTable;
\ No newline at end of file
diff --git a/src/components/pages/master-data/flock/form/FlockForm.schema.ts b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
new file mode 100644
index 00000000..0a85b0fc
--- /dev/null
+++ b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+
+export const FlockFormSchema = Yup.object({
+  name: Yup.string()
+    .required('Nama wajib diisi!')
+    .matches(
+      /^[a-zA-Z0-9]+$/,
+      'Nama hanya boleh berisi huruf dan angka (tanpa spasi atau simbol)'
+    ),
+});
+
+export const UpdateFlockFormSchema = FlockFormSchema;
+
+export type FlockFormValues = Yup.InferType<typeof FlockFormSchema>;
\ No newline at end of file
diff --git a/src/components/pages/master-data/flock/form/FlockForm.tsx b/src/components/pages/master-data/flock/form/FlockForm.tsx
new file mode 100644
index 00000000..f73d47f0
--- /dev/null
+++ b/src/components/pages/master-data/flock/form/FlockForm.tsx
@@ -0,0 +1,217 @@
+'use client'
+
+import { useModal } from '@/components/Modal';
+import { FlockApi } from '@/services/api/master-data';
+import { Flock } from '@/types/api/master-data/flock';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from './FlockForm.schema';
+import { useFormik } from 'formik';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import TextInput from '@/components/input/TextInput';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+interface FlockCustomProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: Flock;
+}
+
+const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  // State
+  const [flockFormErrorMessage, setFlockFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FlockApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/flock');
+  };
+
+  // Initital Value
+  const formikInitialValue = useMemo<FlockFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<FlockFormValues>({
+    initialValues: formikInitialValue,
+    enableReinitialize: true,
+    validationSchema: formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
+    onSubmit: async (values) => {
+      // reset error message
+      setFlockFormErrorMessage('');
+
+      // create payload
+      const payload = {
+        name: values.name,
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await FlockApi.create(payload);
+          break;
+        case 'edit':
+          await FlockApi.update(initialValues?.id as number, payload);
+          break;
+        default:
+          break;
+      }
+
+      router.push('/master-data/flock');
+    },
+  });
+
+  // Initialize Formik
+  const { setValues: formikSetValues } = formik;
+  useEffect(() => {
+    formikSetValues(formikInitialValue);
+  }, [formikSetValues, formikInitialValue]);
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/flock'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {formType === 'add' && 'Tambah Flock'}
+            {formType === 'edit' && 'Ubah Flock'}
+            {formType === 'detail' && 'Detail Flock'}
+          </h1>
+        </header>
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Fields Form */}
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama Flock'
+              name='name'
+              placeholder='Masukkan nama flock'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={formType === 'detail'}
+            />
+          </div>
+
+          {/* Action Button  */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {formType !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={() => deleteModal.openModal()}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+                {formType !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/flock/edit/?flockId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {formType !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': formType === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {flockFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{flockFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {formType !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Flock ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteClickHandler,
+            isLoading: isDeleteLoading,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default FlockForm;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index ed68adb5..97e4c285 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -77,6 +77,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         link: '/master-data/supplier',
         icon: 'material-symbols:add-business-outline-rounded',
       },
+      {
+        title: 'Flock',
+        link: '/master-data/flock',
+        icon: 'material-symbols:raven-outline-rounded',
+      },
     ],
   },
   {
diff --git a/src/services/api/master-data.ts b/src/services/api/master-data.ts
index dce528e7..854bb8f3 100644
--- a/src/services/api/master-data.ts
+++ b/src/services/api/master-data.ts
@@ -59,6 +59,11 @@ import {
   Fcr,
   UpdateFcrPayload,
 } from '@/types/api/master-data/fcr';
+import {
+  CreateFlockPayload,
+  Flock,
+  UpdateFlockPayload,
+} from '@/types/api/master-data/flock';
 
 export const UomApi = new BaseApiService<
   Uom,
@@ -130,3 +135,9 @@ export const FcrApi = new BaseApiService<
   CreateFcrPayload,
   UpdateFcrPayload
 >('/master-data/fcrs');
+
+export const FlockApi = new BaseApiService<
+  Flock,
+  CreateFlockPayload,
+  UpdateFlockPayload
+>('/master-data/flocks');
\ No newline at end of file
diff --git a/src/types/api/master-data/flock.d.ts b/src/types/api/master-data/flock.d.ts
new file mode 100644
index 00000000..0c59b84c
--- /dev/null
+++ b/src/types/api/master-data/flock.d.ts
@@ -0,0 +1,14 @@
+import { BaseMetadata } from "../api-general";
+
+export type BaseFlock = {
+  id: number;
+  name: string;
+}
+
+export type Flock = BaseMetadata & BaseFlock;
+
+export type CreateFlockPayload = {
+  name: string;
+}
+
+export type UpdateFlockPayload = CreateFlockPayload;
\ No newline at end of file

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 039/212] 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 040/212] 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 041/212] 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 042/212] 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 eb0f04310ebe8f655f192b4d17dae7f17d4abf32 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:00 +0700
Subject: [PATCH 043/212] chore(FE-91): create daisyui.css file for extending
 daisyUI style

---
 src/app/globals.css    |  1 +
 src/styles/daisyui.css | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/styles/daisyui.css

diff --git a/src/app/globals.css b/src/app/globals.css
index 386e7620..79af241b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @plugin "daisyui";
+@import '../styles/daisyui.css';
 
 :root {
   --color-primary: #1f74bf;
diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css
new file mode 100644
index 00000000..9a148fb4
--- /dev/null
+++ b/src/styles/daisyui.css
@@ -0,0 +1,11 @@
+@layer utilities {
+  .step.step-success::before {
+    --step-bg: var(--color-success);
+    --step-fg: var(--color-success-content);
+  }
+
+  .step.step-error::before {
+    --step-bg: var(--color-error);
+    --step-fg: var(--color-error-content);
+  }
+}

From 156de6112bb88d62cf41054b738a764ed024c94a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:14 +0700
Subject: [PATCH 044/212] feat(FE-91): create Tooltip component

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

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
new file mode 100644
index 00000000..02f86dca
--- /dev/null
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface TooltipProps {
+  children?: ReactNode;
+  content?: ReactNode;
+  className?: {
+    wrapper?: string;
+    content?: string;
+  };
+  open?: boolean;
+  color?: Color;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip = ({
+  children,
+  content,
+  className,
+  open,
+  color,
+  position,
+}: TooltipProps) => {
+  const tooltipBaseClassName = cn('tooltip', {
+    'tooltip-open': typeof open === 'boolean' && open,
+
+    'tooltip-top': position === 'top',
+    'tooltip-bottom': position === 'bottom',
+    'tooltip-left': position === 'left',
+    'tooltip-right': position === 'right',
+
+    'tooltip-primary': color === 'primary',
+    'tooltip-secondary': color === 'secondary',
+    'tooltip-accent': color === 'accent',
+    'tooltip-neutral': color === 'neutral',
+    'tooltip-info': color === 'info',
+    'tooltip-success': color === 'success',
+    'tooltip-warning': color === 'warning',
+    'tooltip-error': color === 'error',
+  });
+  return (
+    <div className={cn(tooltipBaseClassName, className?.wrapper)}>
+      <div
+        className={cn(
+          'tooltip-content',
+          'max-w-60 sm:max-w-xs',
+          className?.content
+        )}
+      >
+        {content}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default Tooltip;

From 76dd2e4c54a929103625a20dcc76ceb76d0263ea Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:23 +0700
Subject: [PATCH 045/212] feat(FE-91): create Steps component

---
 src/components/steps/Steps.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/components/steps/Steps.tsx

diff --git a/src/components/steps/Steps.tsx b/src/components/steps/Steps.tsx
new file mode 100644
index 00000000..29d307e1
--- /dev/null
+++ b/src/components/steps/Steps.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface StepsProps {
+  children?: ReactNode;
+  className?: string;
+  direction?: 'horizontal' | 'vertical';
+}
+
+const Steps = ({ children, className, direction }: StepsProps) => {
+  const stepsBaseClassName = cn('steps gap-2', {
+    'steps-horizontal': direction === 'horizontal',
+    'steps-vertical': direction === 'vertical',
+  });
+
+  return (
+    <ul className={cn(stepsBaseClassName, 'overflow-visible!', className)}>
+      {children}
+    </ul>
+  );
+};
+
+export default Steps;

From 0577f6ce1d6875d33af23a691f0d61bf122fef2f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:29 +0700
Subject: [PATCH 046/212] feat(FE-91): create StepItem component

---
 src/components/steps/StepItem.tsx | 34 +++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/steps/StepItem.tsx

diff --git a/src/components/steps/StepItem.tsx b/src/components/steps/StepItem.tsx
new file mode 100644
index 00000000..85ec4f3e
--- /dev/null
+++ b/src/components/steps/StepItem.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface StepItemProps {
+  children?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  color?: Color;
+}
+
+const StepItem = ({ children, icon, className, color }: StepItemProps) => {
+  const stepItemBaseClassName = cn('step', {
+    'step-primary': color === 'primary',
+    'step-secondary': color === 'secondary',
+    'step-accent': color === 'accent',
+    'step-neutral': color === 'neutral',
+    'step-info': color === 'info',
+    'step-success': color === 'success',
+    'step-warning': color === 'warning',
+    'step-error': color === 'error',
+  });
+
+  return (
+    <li className={cn(stepItemBaseClassName, className)}>
+      <span className='step-icon'>{icon}</span>
+
+      <div>{children}</div>
+    </li>
+  );
+};
+
+export default StepItem;

From 93beb86f910fe0bcadecb3c4ded5498893c79af1 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:40 +0700
Subject: [PATCH 047/212] feat(FE-91): create ApprovalSteps component

---
 src/components/pages/ApprovalSteps.tsx | 64 ++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/pages/ApprovalSteps.tsx

diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
new file mode 100644
index 00000000..4022e254
--- /dev/null
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -0,0 +1,64 @@
+import { Icon } from '@iconify/react';
+import Steps from '@/components/steps/Steps';
+import StepItem from '@/components/steps/StepItem';
+import Tooltip from '@/components/Tooltip';
+
+import { formatDate } from '@/lib/helper';
+import { ApprovalsLine } from '@/types/api/api-general';
+
+interface ApprovalStepsProps {
+  approvals: ApprovalsLine;
+}
+
+const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
+  return (
+    <Steps direction='vertical' className='w-full md:steps-horizontal'>
+      {approvals.map((approval, idx) => {
+        const stepItemColor =
+          approval.status === 'approved'
+            ? 'success'
+            : approval.status === 'rejected'
+            ? 'error'
+            : undefined;
+
+        const stepItemIcon =
+          approval.status === 'approved'
+            ? 'material-symbols:check-rounded'
+            : approval.status === 'rejected'
+            ? 'material-symbols:close-rounded'
+            : 'bxs:hourglass';
+
+        return (
+          <StepItem
+            key={idx}
+            color={stepItemColor}
+            icon={
+              approval.status !== 'waiting' && (
+                <Tooltip
+                  color={stepItemColor}
+                  position='right'
+                  className={{
+                    wrapper: 'md:tooltip-bottom',
+                  }}
+                  content={
+                    <div className='flex flex-col text-base'>
+                      <span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
+                      <span>Oleh: {approval.action_by}</span>
+                      <span>Catatan: {approval.notes}</span>
+                    </div>
+                  }
+                >
+                  <Icon icon={stepItemIcon} width={24} height={24} />
+                </Tooltip>
+              )
+            }
+          >
+            {approval.role}
+          </StepItem>
+        );
+      })}
+    </Steps>
+  );
+};
+
+export default ApprovalSteps;

From b7a30cc73adb2f9c874f8d5539cbf5cfe8d8e8b8 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:50 +0700
Subject: [PATCH 048/212] chore(FE-91): create ApprovalsLine type

---
 src/types/api/api-general.d.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index 6a3fc6be..cf3e57f7 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -66,3 +66,11 @@ export type flags =
   | 'STARTER'
   | 'FINISHER'
   | 'OVK';
+
+export type ApprovalsLine = {
+  action_by?: string;
+  date?: string;
+  notes?: string;
+  role?: string;
+  status: 'approved' | 'rejected' | 'waiting';
+}[];

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 049/212] 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 050/212] 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 c6a0c542aad1dcc2c4dc8c5361bfa95a6d9b01cd Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 14:33:49 +0700
Subject: [PATCH 051/212] refactor(FE-62,63,65): refactor Movement and
 ProductWarehouse APIs, update MovementForm schema, and enhance MovementTable
 functionality

---
 .../inventory/movement/MovementTable.tsx      | 622 ++++--------------
 .../movement/form/MovementForm.schema.ts      |  53 +-
 .../movement/form/useMovementFormHandlers.ts  |  80 ++-
 src/components/table/TableRowOptions.tsx      |  11 +-
 src/services/api/inventory.ts                 |  13 +-
 src/types/api/inventory/movement.d.ts         |  32 +-
 .../api/inventory/product-warehouse.d.ts      |  22 +
 7 files changed, 277 insertions(+), 556 deletions(-)
 create mode 100644 src/types/api/inventory/product-warehouse.d.ts

diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index a00f7111..e0bc9541 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -1,463 +1,56 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
+import useSWR from 'swr';
 import { SortingState } from '@tanstack/react-table';
-import { Icon } from '@iconify/react';
+
 import Table from '@/components/Table';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import { ROWS_OPTIONS } from '@/config/constant';
 import { Movement } from '@/types/api/inventory/movement';
+import { MovementApi } from '@/services/api/inventory';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
-import { TableRowOptions } from '@/components/table/TableRowOptions';
 import { OptionType } from '@/components/input/SelectInput';
-import Button from '@/components/Button';
-import { cn } from '@/lib/helper';
-
-// Dummy data
-const baseMetadata = {
-  created_user: {
-    id: 1,
-    id_user: 1,
-    email: 'user@example.com',
-    name: 'User',
-  },
-  created_at: '2024-06-01T00:00:00Z',
-  updated_at: '2024-06-01T00:00:00Z',
-};
-
-const dummyMovements: Movement[] = [
-  {
-    ...baseMetadata,
-    id: 1,
-    transfer_reason: 'Restock',
-    transfer_date: '2024-06-01',
-    source_warehouse: {
-      ...baseMetadata,
-      id: 1,
-      name: 'Warehouse A',
-      type: 'AREA',
-      area: { id: 1, name: 'Area 1' },
-    },
-    destination_warehouse: {
-      ...baseMetadata,
-      id: 2,
-      name: 'Warehouse B',
-      type: 'AREA',
-      area: { id: 2, name: 'Area 2' },
-    },
-    products: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 1,
-          name: 'Product X',
-          brand: 'Brand X',
-          sku: 'SKU-X',
-          product_price: 10000,
-          selling_price: 12000,
-          tax: 10,
-          expiry_period: 365,
-          uom: {
-            ...baseMetadata,
-            id: 1,
-            name: 'PCS',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 1,
-            code: 'CAT-1',
-            name: 'Category 1',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        product_qty: 10,
-      },
-    ],
-    deliveries: [
-      {
-        delivery_cost: 50000,
-        delivery_cost_per_item: 5000,
-        document: 'doc1.pdf',
-        driver_name: 'Andi',
-        vehicle_plate: 'B 1234 CD',
-        supplier: {
-          ...baseMetadata,
-          id: 1,
-          name: 'Supplier 1',
-          alias: 'S1',
-          category: 'General',
-          pic: 'PIC 1',
-          type: 'Type 1',
-          hatchery: 'Hatchery 1',
-          phone: '08123456789',
-          email: 'supplier1@example.com',
-          address: 'Address 1',
-          npwp: '1234567890123456',
-          account_number: '1234567890',
-          balance: 0,
-          due_date: 30,
-        },
-        products: [
-          {
-            product: {
-              ...baseMetadata,
-              id: 1,
-              name: 'Product X',
-              brand: 'Brand X',
-              sku: 'SKU-X',
-              product_price: 10000,
-              selling_price: 12000,
-              tax: 10,
-              expiry_period: 365,
-              uom: {
-                ...baseMetadata,
-                id: 1,
-                name: 'PCS',
-              },
-              product_category: {
-                ...baseMetadata,
-                id: 1,
-                code: 'CAT-1',
-                name: 'Category 1',
-              },
-              suppliers: [],
-              flags: [],
-            },
-            product_qty: 10,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    ...baseMetadata,
-    id: 2,
-    transfer_reason: 'Mutasi Stok',
-    transfer_date: '2024-06-02',
-    source_warehouse: {
-      ...baseMetadata,
-      id: 2,
-      name: 'Warehouse B',
-      type: 'AREA',
-      area: { id: 2, name: 'Area 2' },
-    },
-    destination_warehouse: {
-      ...baseMetadata,
-      id: 3,
-      name: 'Warehouse C',
-      type: 'AREA',
-      area: { id: 3, name: 'Area 3' },
-    },
-    products: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 2,
-          name: 'Product Y',
-          brand: 'Brand Y',
-          sku: 'SKU-Y',
-          product_price: 20000,
-          selling_price: 25000,
-          tax: 5,
-          expiry_period: 180,
-          uom: {
-            ...baseMetadata,
-            id: 2,
-            name: 'BOX',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 2,
-            code: 'CAT-2',
-            name: 'Category 2',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        product_qty: 5,
-      },
-    ],
-    deliveries: [
-      {
-        delivery_cost: 60000,
-        delivery_cost_per_item: 12000,
-        document: 'doc2.pdf',
-        driver_name: 'Budi',
-        vehicle_plate: 'D 5678 EF',
-        supplier: {
-          ...baseMetadata,
-          id: 2,
-          name: 'Supplier 2',
-          alias: 'S2',
-          category: 'Special',
-          pic: 'PIC 2',
-          type: 'Type 2',
-          hatchery: 'Hatchery 2',
-          phone: '08123456780',
-          email: 'supplier2@example.com',
-          address: 'Address 2',
-          npwp: '1234567890123457',
-          account_number: '1234567891',
-          balance: 1000,
-          due_date: 15,
-        },
-        products: [
-          {
-            product: {
-              ...baseMetadata,
-              id: 2,
-              name: 'Product Y',
-              brand: 'Brand Y',
-              sku: 'SKU-Y',
-              product_price: 20000,
-              selling_price: 25000,
-              tax: 5,
-              expiry_period: 180,
-              uom: {
-                ...baseMetadata,
-                id: 2,
-                name: 'BOX',
-              },
-              product_category: {
-                ...baseMetadata,
-                id: 2,
-                code: 'CAT-2',
-                name: 'Category 2',
-              },
-              suppliers: [],
-              flags: [],
-            },
-            product_qty: 5,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    ...baseMetadata,
-    id: 3,
-    transfer_reason: 'Pengembalian',
-    transfer_date: '2024-06-03',
-    source_warehouse: {
-      ...baseMetadata,
-      id: 3,
-      name: 'Warehouse C',
-      type: 'AREA',
-      area: { id: 3, name: 'Area 3' },
-    },
-    destination_warehouse: {
-      ...baseMetadata,
-      id: 1,
-      name: 'Warehouse A',
-      type: 'AREA',
-      area: { id: 1, name: 'Area 1' },
-    },
-    products: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 3,
-          name: 'Product Z',
-          brand: 'Brand Z',
-          sku: 'SKU-Z',
-          product_price: 15000,
-          selling_price: 18000,
-          tax: 8,
-          expiry_period: 90,
-          uom: {
-            ...baseMetadata,
-            id: 3,
-            name: 'KG',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 3,
-            code: 'CAT-3',
-            name: 'Category 3',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        product_qty: 8,
-      },
-    ],
-    deliveries: [
-      {
-        delivery_cost: 40000,
-        delivery_cost_per_item: 5000,
-        document: 'doc3.pdf',
-        driver_name: 'Cici',
-        vehicle_plate: 'F 9101 GH',
-        supplier: {
-          ...baseMetadata,
-          id: 3,
-          name: 'Supplier 3',
-          alias: 'S3',
-          category: 'Return',
-          pic: 'PIC 3',
-          type: 'Type 3',
-          hatchery: 'Hatchery 3',
-          phone: '08123456781',
-          email: 'supplier3@example.com',
-          address: 'Address 3',
-          npwp: '1234567890123458',
-          account_number: '1234567892',
-          balance: 500,
-          due_date: 10,
-        },
-        products: [
-          {
-            product: {
-              ...baseMetadata,
-              id: 3,
-              name: 'Product Z',
-              brand: 'Brand Z',
-              sku: 'SKU-Z',
-              product_price: 15000,
-              selling_price: 18000,
-              tax: 8,
-              expiry_period: 90,
-              uom: {
-                ...baseMetadata,
-                id: 3,
-                name: 'KG',
-              },
-              product_category: {
-                ...baseMetadata,
-                id: 3,
-                code: 'CAT-3',
-                name: 'Category 3',
-              },
-              suppliers: [],
-              flags: [],
-            },
-            product_qty: 8,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    ...baseMetadata,
-    id: 4,
-    transfer_reason: 'Transfer Internal',
-    transfer_date: '2024-06-04',
-    source_warehouse: {
-      ...baseMetadata,
-      id: 4,
-      name: 'Warehouse D',
-      type: 'AREA',
-      area: { id: 4, name: 'Area 4' },
-    },
-    destination_warehouse: {
-      ...baseMetadata,
-      id: 5,
-      name: 'Warehouse E',
-      type: 'AREA',
-      area: { id: 5, name: 'Area 5' },
-    },
-    products: [
-      {
-        product: {
-          ...baseMetadata,
-          id: 4,
-          name: 'Product A',
-          brand: 'Brand A',
-          sku: 'SKU-A',
-          product_price: 5000,
-          selling_price: 7000,
-          tax: 0,
-          expiry_period: 60,
-          uom: {
-            ...baseMetadata,
-            id: 4,
-            name: 'LITER',
-          },
-          product_category: {
-            ...baseMetadata,
-            id: 4,
-            code: 'CAT-4',
-            name: 'Category 4',
-          },
-          suppliers: [],
-          flags: [],
-        },
-        product_qty: 20,
-      },
-    ],
-    deliveries: [
-      {
-        delivery_cost: 30000,
-        delivery_cost_per_item: 1500,
-        document: 'doc4.pdf',
-        driver_name: 'Dedi',
-        vehicle_plate: 'H 2345 IJ',
-        supplier: {
-          ...baseMetadata,
-          id: 4,
-          name: 'Supplier 4',
-          alias: 'S4',
-          category: 'Internal',
-          pic: 'PIC 4',
-          type: 'Type 4',
-          hatchery: 'Hatchery 4',
-          phone: '08123456782',
-          email: 'supplier4@example.com',
-          address: 'Address 4',
-          npwp: '1234567890123459',
-          account_number: '1234567893',
-          balance: 200,
-          due_date: 20,
-        },
-        products: [
-          {
-            product: {
-              ...baseMetadata,
-              id: 4,
-              name: 'Product A',
-              brand: 'Brand A',
-              sku: 'SKU-A',
-              product_price: 5000,
-              selling_price: 7000,
-              tax: 0,
-              expiry_period: 60,
-              uom: {
-                ...baseMetadata,
-                id: 4,
-                name: 'LITER',
-              },
-              product_category: {
-                ...baseMetadata,
-                id: 4,
-                code: 'CAT-4',
-                name: 'Category 4',
-              },
-              suppliers: [],
-              flags: [],
-            },
-            product_qty: 20,
-          },
-        ],
-      },
-    ],
-  },
-];
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import { TableRowOptions } from '@/components/table/TableRowOptions';
 
 const MovementTable = () => {
-  const [search, setSearch] = useState('');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [, setSelectedMovement] = useState<Movement | undefined>(undefined);
+  const [selectedMovement, setSelectedMovement] = useState<
+    Movement | undefined
+  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const deleteModal = useModal();
 
+  const {
+    data: movements,
+    isLoading,
+    mutate: refreshMovements,
+  } = useSWR(
+    `${MovementApi.basePath}${getTableFilterQueryString()}`,
+    MovementApi.getAllFetcher
+  );
+
   const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value);
+    updateFilter('search', e.target.value);
     setPage(1);
   };
 
@@ -469,17 +62,15 @@ const MovementTable = () => {
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
+    try {
+      await MovementApi.delete(selectedMovement?.id as number);
+      refreshMovements();
       deleteModal.closeModal();
-    }, 1000);
+    } finally {
+      setIsDeleteLoading(false);
+    }
   };
 
-  const paginatedData = useMemo(() => {
-    const start = (page - 1) * pageSize;
-    return dummyMovements.slice(start, start + pageSize);
-  }, [page, pageSize]);
-
   return (
     <div className='flex flex-col gap-4'>
       <div className='flex flex-col gap-2 mb-4'>
@@ -489,85 +80,118 @@ const MovementTable = () => {
             label: 'Tambah Movement',
           }}
           search={{
-            value: search,
+            value: tableFilterState.search,
             onChange: searchChangeHandler,
             placeholder: 'Cari Movement',
           }}
         />
         <TableRowSizeSelector
-          value={pageSize}
+          value={tableFilterState.pageSize}
           onChange={pageSizeChangeHandler}
           options={ROWS_OPTIONS}
         />
       </div>
 
-      <Table
-        data={paginatedData}
+      <Table<Movement>
+        data={isResponseSuccess(movements) ? movements?.data : []}
         columns={[
           {
             header: '#',
-            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
-          },
-          {
-            accessorKey: 'source_warehouse',
-            header: 'Gudang Asal',
-            cell: (props) => props.row.original.source_warehouse.name,
-          },
-          {
-            accessorKey: 'destination_warehouse',
-            header: 'Gudang Tujuan',
-            cell: (props) => props.row.original.destination_warehouse.name,
-          },
-          {
-            accessorKey: 'products',
-            header: 'Nama Produk',
             cell: (props) =>
-              props.row.original.products
-                .map((p) => p.product.name)
-                .join(', '),
+              tableFilterState.pageSize * (tableFilterState.page - 1) +
+              props.row.index +
+              1,
+          },
+          {
+            accessorFn: (row) => row.source_warehouse?.name,
+            header: 'Gudang Asal',
+          },
+          {
+            accessorFn: (row) => row.destination_warehouse?.name,
+            header: 'Gudang Tujuan',
           },
           {
             accessorKey: 'transfer_reason',
             header: 'Catatan',
           },
           {
-            accessorKey: 'delivery_cost',
-            header: 'Biaya Pengiriman',
+            accessorKey: 'transfer_date',
+            header: 'Tanggal',
             cell: (props) =>
-              props.row.original.deliveries
-                .reduce((sum, d) => sum + d.delivery_cost, 0)
-                .toLocaleString('id-ID'),
+              new Date(props.row.original.transfer_date).toLocaleDateString(
+                'id-ID'
+              ),
           },
           {
-            id: 'actions',
-            cell: (props) => (
-              <div className='dropdown dropdown-end'>
-                <Button tabIndex={0} variant='ghost' className='px-2'>
-                  <Icon icon='carbon:overflow-menu-vertical' />
-                </Button>
-                <TableRowOptions
-                  type='dropdown'
-                  recordId={props.row.original.id}
-                  basePath='/inventory/movement'
-                  onDelete={() => {
-                    setSelectedMovement(props.row.original);
-                    deleteModal.openModal();
-                  }}
-                />
-              </div>
-            ),
+            accessorFn: (row) => {
+              const totalCost = row.deliveries?.reduce(
+                (sum, d) => sum + (d.shipping_cost_total || 0),
+                0
+              );
+              return totalCost?.toLocaleString('id-ID');
+            },
+            header: 'Biaya Pengiriman',
+          },
+          {
+            header: 'Aksi',
+            cell: (props) => {
+              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 = () => {
+                setSelectedMovement(props.row.original);
+                deleteModal.openModal();
+              };
+
+              return (
+                <>
+                  {currentPageSize > 2 && (
+                    <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                      <TableRowOptions
+                        type='dropdown'
+                        recordId={props.row.original.id}
+                        basePath='/inventory/movement'
+                        onDelete={deleteClickHandler}
+                        queryParam='movementId'
+                      />
+                    </RowDropdownOptions>
+                  )}
+
+                  {currentPageSize <= 2 && (
+                    <RowCollapseOptions>
+                      <TableRowOptions
+                        type='collapse'
+                        recordId={props.row.original.id}
+                        basePath='/inventory/movement'
+                        onDelete={deleteClickHandler}
+                        queryParam='movementId'
+                      />
+                    </RowCollapseOptions>
+                  )}
+                </>
+              );
+            },
           },
         ]}
-        pageSize={pageSize}
-        page={page}
-        totalItems={dummyMovements.length}
+        pageSize={tableFilterState.pageSize}
+        page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
+        totalItems={
+          isResponseSuccess(movements) ? movements?.meta?.total_results : 0
+        }
         onPageChange={setPage}
-        isLoading={false}
+        isLoading={isLoading}
         sorting={sorting}
         setSorting={setSorting}
         className={{
           containerClassName: cn({
-            'mb-20': paginatedData.length === 0,
+            'mb-20':
+              isResponseSuccess(movements) && movements?.data?.length === 0,
           }),
           tableWrapperClassName: 'overflow-x-auto min-h-full!',
           tableClassName: 'font-inter w-full table-auto min-h-full!',
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index cb0d228d..148a7dce 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -13,7 +13,7 @@ export type ProductSchema = {
 export type DeliverySchema = {
   delivery_cost: number;
   delivery_cost_per_item?: number | undefined;
-  document: string | File;
+  document?: File | string | null;
   driver_name: string;
   vehicle_plate: string;
   supplier: {
@@ -64,23 +64,15 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     .transform((value) => (isNaN(value) ? undefined : value))
     .min(0, 'Biaya per item minimal 0!')
     .typeError('Biaya per item harus berupa angka!'),
-  document: Yup.mixed<string | File>()
-    .required('Dokumen wajib diisi!')
-    .test(
-      'fileType',
-      'Mohon upload file berformat PDF atau JPEG/JPG.',
-      (value) =>
-        typeof value === 'string' ||
-        (value instanceof File &&
-          ['application/pdf', 'image/jpeg', 'image/jpg'].includes(value.type))
-    )
-    .test(
-      'fileSize',
-      'Ukuran dokumen maksimal 2 MB!',
-      (value) =>
-        typeof value === 'string' ||
-        (value instanceof File && value.size <= 2 * 1024 * 1024)
-    ),
+  document_index: Yup.number().optional(),
+  document: Yup.mixed<File | string>()
+    .nullable()
+    .test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
+      if (!value) return true;
+      if (typeof value === 'string') return true;
+      if (value instanceof File) return value.size <= 2 * 1024 * 1024;
+      return false;
+    }),
   driver_name: Yup.string().required('Nama sopir wajib diisi!'),
   vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
   supplier: Yup.object({
@@ -145,24 +137,25 @@ export const getMovementFormInitialValues = (
     : null,
   destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
   products:
-    initialValues?.products?.map((p) => ({
-      product: { value: p.product.id, label: p.product.name },
-      product_id: p.product.id,
-      product_qty: p.product_qty,
+    initialValues?.details?.map((p) => ({
+      product: { value: p.product_id, label: '' },
+      product_id: p.product_id,
+      product_qty: p.quantity,
     })) ?? [],
   deliveries:
     initialValues?.deliveries?.map((d) => ({
-      delivery_cost: d.delivery_cost,
-      delivery_cost_per_item: d.delivery_cost_per_item,
-      document: d.document,
+      delivery_cost: d.shipping_cost_total,
+      delivery_cost_per_item: d.shipping_cost_item,
+      document_index: 0,
+      document: d.document_path || null,
       driver_name: d.driver_name,
       vehicle_plate: d.vehicle_plate,
       supplier: { value: d.supplier.id, label: d.supplier.name },
-      supplier_id: d.supplier.id,
-      products: d.products.map((p) => ({
-        product: { value: p.product.id, label: p.product.name },
-        product_id: p.product.id,
-        product_qty: p.product_qty,
+      supplier_id: d.supplier_id,
+      products: d.items.map((p) => ({
+        product: { value: 0, label: '' },
+        product_id: 0,
+        product_qty: p.quantity,
       })),
     })) ?? [],
 });
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
index 0b6b0962..1894b1a7 100644
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -8,7 +8,6 @@ import {
   UpdateMovementPayload,
 } from '@/types/api/inventory/movement';
 import { isResponseError } from '@/lib/api-helper';
-import { containsFile, toFormData } from '@/lib/form-data';
 
 export const useMovementFormHandlers = (initialValuesId?: number) => {
   const router = useRouter();
@@ -17,13 +16,44 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const createMovementHandler = useCallback(
-    async (payload: CreateMovementPayload) => {
-      const finalPayload = containsFile(payload)
-        ? (toFormData(payload) as unknown as CreateMovementPayload)
-        : payload;
+    async (payload: CreateMovementPayload, documents: File[] = []) => {
+      console.log('=== CREATE HANDLER DEBUG ===');
+      console.log('1. Received payload:', payload);
+      console.log('2. Documents count:', documents.length);
+
+      let finalPayload: CreateMovementPayload | FormData;
+
+      if (documents.length > 0) {
+        // Ada dokumen: kirim sebagai FormData dengan "data" field
+        console.log('3. Creating FormData (has documents)');
+        const formData = new FormData();
+        formData.append('data', JSON.stringify(payload));
+        documents.forEach((file, index) => {
+          formData.append(`documents[${index}]`, file);
+        });
+
+        console.log('4. FormData entries:');
+        for (const [key, value] of formData.entries()) {
+          if (value instanceof File) {
+            console.log(`   ${key}: [File] ${value.name} (${value.size} bytes)`);
+          } else {
+            console.log(`   ${key}: ${value}`);
+          }
+        }
+
+        finalPayload = formData as unknown as CreateMovementPayload;
+      } else {
+        // Tidak ada dokumen: kirim sebagai JSON biasa
+        console.log('3. Sending as JSON (no documents)');
+        console.log('4. Payload:', JSON.stringify(payload, null, 2));
+        finalPayload = payload;
+      }
+
+      console.log('=== END CREATE HANDLER DEBUG ===');
 
       const res = await MovementApi.create(finalPayload);
       if (isResponseError(res)) {
+        console.error('API Error:', res);
         setMovementFormErrorMessage(res.message);
         return;
       }
@@ -34,13 +64,45 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
   );
 
   const updateMovementHandler = useCallback(
-    async (movementId: number, payload: UpdateMovementPayload) => {
-      const finalPayload = containsFile(payload)
-        ? (toFormData(payload) as unknown as UpdateMovementPayload)
-        : payload;
+    async (movementId: number, payload: UpdateMovementPayload, documents: File[] = []) => {
+      console.log('=== UPDATE HANDLER DEBUG ===');
+      console.log('1. Received payload:', payload);
+      console.log('2. Movement ID:', movementId);
+      console.log('3. Documents count:', documents.length);
+
+      let finalPayload: UpdateMovementPayload | FormData;
+
+      if (documents.length > 0) {
+        // Ada dokumen: kirim sebagai FormData dengan "data" field
+        console.log('4. Creating FormData (has documents)');
+        const formData = new FormData();
+        formData.append('data', JSON.stringify(payload));
+        documents.forEach((file, index) => {
+          formData.append(`documents[${index}]`, file);
+        });
+
+        console.log('5. FormData entries:');
+        for (const [key, value] of formData.entries()) {
+          if (value instanceof File) {
+            console.log(`   ${key}: [File] ${value.name} (${value.size} bytes)`);
+          } else {
+            console.log(`   ${key}: ${value}`);
+          }
+        }
+
+        finalPayload = formData as unknown as UpdateMovementPayload;
+      } else {
+        // Tidak ada dokumen: kirim sebagai JSON biasa
+        console.log('4. Sending as JSON (no documents)');
+        console.log('5. Payload:', JSON.stringify(payload, null, 2));
+        finalPayload = payload;
+      }
+
+      console.log('=== END UPDATE HANDLER DEBUG ===');
 
       const res = await MovementApi.update(movementId, finalPayload);
       if (res?.status === 'error') {
+        console.error('API Error:', res);
         setMovementFormErrorMessage(res.message);
         return;
       }
diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx
index 61332b4f..e34f2ad4 100644
--- a/src/components/table/TableRowOptions.tsx
+++ b/src/components/table/TableRowOptions.tsx
@@ -7,6 +7,7 @@ interface TableRowOptionsProps {
   recordId: string | number;
   basePath: string;
   onDelete?: () => void;
+  queryParam?: string;
 }
 
 export const TableRowOptions = ({
@@ -14,6 +15,7 @@ export const TableRowOptions = ({
   recordId,
   basePath,
   onDelete,
+  queryParam = 'id',
 }: TableRowOptionsProps) => (
   <div
     tabIndex={type === 'dropdown' ? 0 : undefined}
@@ -26,7 +28,7 @@ export const TableRowOptions = ({
     )}
   >
     <Button
-      href={`${basePath}/detail/?id=${recordId}`}
+      href={`${basePath}/detail/?${queryParam}=${recordId}`}
       variant='ghost'
       color='primary'
       className='justify-start text-sm'
@@ -35,12 +37,12 @@ export const TableRowOptions = ({
       Detail
     </Button>
     <Button
-      href={`${basePath}/detail/edit/?id=${recordId}`}
+      href={`${basePath}/detail/edit/?${queryParam}=${recordId}`}
       variant='ghost'
       color='warning'
       className='justify-start text-sm'
     >
-      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+      <Icon icon='mdi:pencil-outline' width={16} height={16} />
       Edit
     </Button>
     {onDelete && (
@@ -51,9 +53,10 @@ export const TableRowOptions = ({
         className='text-error hover:text-inherit justify-start text-sm'
       >
         <Icon
-          icon='material-symbols:delete-outline-rounded'
+          icon='mdi:delete-outline'
           width={16}
           height={16}
+          className='justify-start text-sm'
         />
         Delete
       </Button>
diff --git a/src/services/api/inventory.ts b/src/services/api/inventory.ts
index cf799442..ec58f6f2 100644
--- a/src/services/api/inventory.ts
+++ b/src/services/api/inventory.ts
@@ -1,4 +1,9 @@
 import { BaseApiService } from '@/services/api/base';
+import {
+  CreateProductWarehousePayload,
+  ProductWarehouse,
+  UpdateProductWarehousePayload,
+} from '@/types/api/inventory/product-warehouse';
 import {
   CreateMovementPayload,
   Movement,
@@ -9,11 +14,17 @@ import {
   InventoryAdjustment,
 } from '@/types/api/inventory/adjustment';
 
+export const ProductWarehouseApi = new BaseApiService<
+  ProductWarehouse,
+  CreateProductWarehousePayload,
+  UpdateProductWarehousePayload
+>('/inventory/product-warehouses');
+
 export const MovementApi = new BaseApiService<
   Movement,
   CreateMovementPayload,
   UpdateMovementPayload
->('/inventory/movements');
+>('/inventory/transfers');
 
 export const inventoryAdjustmentApi = new BaseApiService<
   InventoryAdjustment,
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index 11da41a5..9e156a1e 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -1,5 +1,4 @@
 import { BaseMetadata } from '@/types/api/api-general';
-import { Product } from '@/types/api/master-data/product';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 
@@ -9,20 +8,27 @@ export type BaseMovement = {
   transfer_date: string;
   source_warehouse: Warehouse;
   destination_warehouse: Warehouse;
-  products: {
-    product: Product;
-    product_qty: number;
+  details: {
+    id: number;
+    product_id: number;
+    quantity: number;
+    before_quantity: number;
+    after_quantity: number;
   }[];
   deliveries: {
-    delivery_cost: number;
-    delivery_cost_per_item: number;
-    document: string;
-    driver_name: string;
-    vehicle_plate: string;
+    id: number;
+    supplier_id: number;
     supplier: Supplier;
-    products: {
-      product: Product;
-      product_qty: number;
+    vehicle_plate: string;
+    driver_name: string;
+    document_number: string;
+    document_path: string;
+    shipping_cost_item: number;
+    shipping_cost_total: number;
+    items: {
+      id: number;
+      stock_transfer_detail_id: number;
+      quantity: number;
     }[];
   }[];
 };
@@ -41,7 +47,7 @@ export type CreateMovementPayload = {
   deliveries: {
     delivery_cost: number;
     delivery_cost_per_item: number;
-    document: string | File;
+    document_index?: number;
     driver_name: string;
     vehicle_plate: string;
     supplier_id: number;
diff --git a/src/types/api/inventory/product-warehouse.d.ts b/src/types/api/inventory/product-warehouse.d.ts
new file mode 100644
index 00000000..eda8d1b8
--- /dev/null
+++ b/src/types/api/inventory/product-warehouse.d.ts
@@ -0,0 +1,22 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Product } from '@/types/api/master-data/product';
+
+export type BaseProductWarehouse = {
+  id: number;
+  product_id: number;
+  warehouse_id: number;
+  quantity: number;
+  product: Product;
+  warehouse: Warehouse;
+};
+
+export type ProductWarehouse = BaseMetadata & BaseProductWarehouse;
+
+export type CreateProductWarehousePayload = {
+  product_id: number;
+  warehouse_id: number;
+  quantity: number;
+};
+
+export type UpdateProductWarehousePayload = CreateProductWarehousePayload;

From f5ce898bd2f7ee07e0f12573d7f0fa514cead015 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 15:29:26 +0700
Subject: [PATCH 052/212] feat(FE-62,63,65): enhance MovementForm with product
 warehouse selection, delivery document handling, and stock validation

---
 .../inventory/movement/form/MovementForm.tsx  | 239 ++++++++++++++----
 .../movement/form/useMovementFormHandlers.ts  |  18 +-
 2 files changed, 197 insertions(+), 60 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 1af77cf7..898a1d56 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -25,11 +25,8 @@ import {
   DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { useMovementFormHandlers } from './useMovementFormHandlers';
-import {
-  ProductApi,
-  SupplierApi,
-  WarehouseApi,
-} from '@/services/api/master-data';
+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';
 
@@ -40,6 +37,10 @@ interface MovementFormProps {
 
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [, setMovementFormErrorMessage] = useState('');
+  const [
+    productWarehouseSelectInputValue,
+    setProductWarehouseSelectInputValue,
+  ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
 
@@ -67,7 +68,43 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     validateOnMount: false,
     enableReinitialize: true,
     onSubmit: async (values) => {
+      console.log('=== FORM SUBMIT DEBUG ===');
+      console.log('1. Form values received:', values);
+
       setMovementFormErrorMessage('');
+      const documents: File[] = [];
+      const deliveriesPayload = values.deliveries.map((d, idx) => {
+        let documentIndex = 0;
+
+        console.log(`2. Processing delivery ${idx}:`, {
+          driver_name: d.driver_name,
+          document: d.document,
+          documentType: d.document instanceof File ? 'File' : typeof d.document,
+          documentSize: d.document instanceof File ? d.document.size : 'N/A',
+        });
+
+        if (d.document && d.document instanceof File) {
+          documents.push(d.document);
+          documentIndex = documents.length - 1;
+          console.log(`   → Document added at index ${documentIndex}`);
+        } else {
+          console.log(`   → No document for delivery ${idx}, using index 0`);
+        }
+
+        return {
+          delivery_cost: d.delivery_cost,
+          delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
+          document_index: documentIndex,
+          driver_name: d.driver_name,
+          vehicle_plate: d.vehicle_plate,
+          supplier_id: d.supplier_id,
+          products: d.products.map((p) => ({
+            product_id: p.product_id,
+            product_qty: p.product_qty,
+          })),
+        };
+      });
+
       const payload: CreateMovementPayload = {
         transfer_reason: values.transfer_reason,
         transfer_date: values.transfer_date,
@@ -77,26 +114,34 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           product_id: p.product_id,
           product_qty: p.product_qty,
         })),
-        deliveries: values.deliveries.map((d) => ({
-          delivery_cost: d.delivery_cost,
-          delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
-          document: d.document instanceof File ? d.document : d.document,
-          driver_name: d.driver_name,
-          vehicle_plate: d.vehicle_plate,
-          supplier_id: d.supplier_id,
-          products: d.products.map((p) => ({
-            product_id: p.product_id,
-            product_qty: p.product_qty,
-          })),
-        })),
+        deliveries: deliveriesPayload,
       };
 
+      console.log('3. Final payload structure:', {
+        ...payload,
+      });
+
+      console.log(
+        '4. Document indices in deliveries:',
+        deliveriesPayload.map((d, i) => ({
+          delivery: i,
+          document_index: d.document_index,
+        }))
+      );
+
+      console.log('5. Total documents:', documents.length);
+      console.log('=== END SUBMIT DEBUG ===');
+
       switch (type) {
         case 'add':
-          await createMovementHandler(payload);
+          await createMovementHandler(payload, documents);
           break;
         case 'edit':
-          await updateMovementHandler(initialValues?.id as number, payload);
+          await updateMovementHandler(
+            initialValues?.id as number,
+            payload,
+            documents
+          );
           break;
       }
     },
@@ -144,7 +189,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       {
         delivery_cost: 0,
         delivery_cost_per_item: 0,
-        document: '',
+        document: null,
         driver_name: '',
         vehicle_plate: '',
         supplier: null,
@@ -265,15 +310,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       }))
     : [];
 
-  // Product selection
-  const [productSelectInputValue, setProductSelectInputValue] = useState('');
-  const productsUrl = `${ProductApi.basePath}?${new URLSearchParams({ search: productSelectInputValue }).toString()}`;
-  const { data: products, isLoading: isLoadingProducts } = useSWR(
-    productsUrl,
-    ProductApi.getAllFetcher
-  );
-  const productOptions = isResponseSuccess(products)
-    ? products?.data.map((p) => ({ value: p.id, label: p.name }))
+  // Product Warehouse selection - Filter by source warehouse
+  const productWarehouseParams = new URLSearchParams({
+    search: productWarehouseSelectInputValue,
+  });
+  if (formik.values.source_warehouse_id) {
+    productWarehouseParams.append(
+      'warehouse_id',
+      formik.values.source_warehouse_id.toString()
+    );
+  }
+  const productWarehousesUrl = `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
+  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
+    useSWR(
+      formik.values.source_warehouse_id ? productWarehousesUrl : null,
+      ProductWarehouseApi.getAllFetcher
+    );
+  const productWarehouseOptions = isResponseSuccess(productWarehouses)
+    ? productWarehouses?.data.map((pw) => ({
+        value: pw.id,
+        label: pw.product.name,
+        product_id: pw.product.id,
+        warehouse_id: pw.warehouse.id,
+        warehouse_name: pw.warehouse.name,
+        quantity: pw.quantity,
+      }))
     : [];
 
   // Supplier selection
@@ -303,7 +364,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     });
   }, [formik.values.deliveries]);
 
-  const getFilteredProductOptions = useCallback(() => {
+  useEffect(() => {
+    if (formik.values.source_warehouse_id && type !== 'edit') {
+      formik.setFieldValue('products', []);
+      formik.setFieldValue('deliveries', []);
+    }
+  }, [formik.values.source_warehouse_id]);
+
+  const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
       formik.values.products
         ?.filter((p) => p.product)
@@ -314,6 +382,33 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     );
   }, [formik.values.products]);
 
+  const getAvailableStock = useCallback(
+    (productId: number) => {
+      const productWarehouse = productWarehouseOptions.find(
+        (pw) => pw.product_id === productId
+      );
+      return productWarehouse?.quantity ?? 0;
+    },
+    [productWarehouseOptions]
+  );
+
+  const getProductQtyError = useCallback(
+    (productIdx: number) => {
+      const product = formik.values.products?.[productIdx];
+      if (!product || !product.product_id) return null;
+
+      const availableStock = getAvailableStock(product.product_id);
+      const requestedQty = Number(product.product_qty) || 0;
+
+      if (requestedQty > availableStock) {
+        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
+      }
+
+      return null;
+    },
+    [formik.values.products, getAvailableStock]
+  );
+
   const validateDeliveryQty = useCallback(
     (deliveryIdx: number, deliveryProductIdx: number, qty: number) => {
       const delivery = formik.values.deliveries?.[deliveryIdx];
@@ -406,6 +501,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [invalidQtyRows]
   );
 
+  const hasExceededStock = useMemo(() => {
+    return (
+      formik.values.products?.some((product, idx) => {
+        return getProductQtyError(idx) !== null;
+      }) ?? false
+    );
+  }, [formik.values.products, getProductQtyError]);
+
   return (
     <>
       <section className='w-full max-w-5xl'>
@@ -656,10 +759,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 (val as OptionType)?.value
                               );
                             }}
-                            options={productOptions}
-                            onInputChange={setProductSelectInputValue}
-                            isLoading={isLoadingProducts}
-                            isDisabled={type === 'detail'}
+                            options={productWarehouseOptions}
+                            onInputChange={setProductWarehouseSelectInputValue}
+                            isLoading={isLoadingProductWarehouses}
+                            isDisabled={
+                              type === 'detail' ||
+                              !formik.values.source_warehouse_id
+                            }
+                            placeholder={
+                              !formik.values.source_warehouse_id
+                                ? 'Pilih gudang asal terlebih dahulu'
+                                : 'Pilih produk'
+                            }
                             isClearable
                             {...isRepeaterInputError(
                               'products',
@@ -669,23 +780,46 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
-                            required
-                            type='number'
-                            name={`products.${idx}.product_qty`}
-                            value={product.product_qty ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'products',
-                              'product_qty',
-                              idx
+                          <div className='flex flex-col gap-2'>
+                            <TextInput
+                              required
+                              type='number'
+                              name={`products.${idx}.product_qty`}
+                              value={product.product_qty ?? ''}
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              isError={
+                                isRepeaterInputError(
+                                  'products',
+                                  'product_qty',
+                                  idx
+                                ).isError || Boolean(getProductQtyError(idx))
+                              }
+                              errorMessage={
+                                isRepeaterInputError(
+                                  'products',
+                                  'product_qty',
+                                  idx
+                                ).errorMessage ||
+                                getProductQtyError(idx) ||
+                                undefined
+                              }
+                              readOnly={type === 'detail'}
+                              className={{
+                                wrapper: 'w-full min-w-24',
+                              }}
+                            />
+                            {product.product_id && (
+                              <div className='text-sm text-gray-600'>
+                                <span className='font-semibold'>
+                                  Stok tersedia:
+                                </span>{' '}
+                                {getAvailableStock(
+                                  product.product_id
+                                ).toLocaleString('id-ID')}
+                              </div>
                             )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-24',
-                            }}
-                          />
+                          </div>
                         </td>
                         {type !== 'detail' && (
                           <td>
@@ -819,7 +953,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 (val as OptionType)?.value
                               );
                             }}
-                            options={getFilteredProductOptions()}
+                            options={getFilteredProductWarehouseOptions()}
                             isDisabled={type === 'detail'}
                             isClearable
                           />
@@ -886,7 +1020,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         </td>
                         <td>
                           <FileInput
-                            required
                             name={`deliveries.${idx}.document`}
                             onChange={(e) => {
                               const file = e.target.files?.[0];
@@ -1016,7 +1149,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 : undefined
             }
             onDelete={deleteMovementClickHandler}
-            disableSubmit={hasInvalidQty}
+            disableSubmit={hasInvalidQty || hasExceededStock}
           />
 
           {movementFormErrorMessage && (
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
index 1894b1a7..3f46b71a 100644
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -24,7 +24,6 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
       let finalPayload: CreateMovementPayload | FormData;
 
       if (documents.length > 0) {
-        // Ada dokumen: kirim sebagai FormData dengan "data" field
         console.log('3. Creating FormData (has documents)');
         const formData = new FormData();
         formData.append('data', JSON.stringify(payload));
@@ -35,7 +34,9 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
         console.log('4. FormData entries:');
         for (const [key, value] of formData.entries()) {
           if (value instanceof File) {
-            console.log(`   ${key}: [File] ${value.name} (${value.size} bytes)`);
+            console.log(
+              `   ${key}: [File] ${value.name} (${value.size} bytes)`
+            );
           } else {
             console.log(`   ${key}: ${value}`);
           }
@@ -43,7 +44,6 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
         finalPayload = formData as unknown as CreateMovementPayload;
       } else {
-        // Tidak ada dokumen: kirim sebagai JSON biasa
         console.log('3. Sending as JSON (no documents)');
         console.log('4. Payload:', JSON.stringify(payload, null, 2));
         finalPayload = payload;
@@ -64,7 +64,11 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
   );
 
   const updateMovementHandler = useCallback(
-    async (movementId: number, payload: UpdateMovementPayload, documents: File[] = []) => {
+    async (
+      movementId: number,
+      payload: UpdateMovementPayload,
+      documents: File[] = []
+    ) => {
       console.log('=== UPDATE HANDLER DEBUG ===');
       console.log('1. Received payload:', payload);
       console.log('2. Movement ID:', movementId);
@@ -73,7 +77,6 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
       let finalPayload: UpdateMovementPayload | FormData;
 
       if (documents.length > 0) {
-        // Ada dokumen: kirim sebagai FormData dengan "data" field
         console.log('4. Creating FormData (has documents)');
         const formData = new FormData();
         formData.append('data', JSON.stringify(payload));
@@ -84,7 +87,9 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
         console.log('5. FormData entries:');
         for (const [key, value] of formData.entries()) {
           if (value instanceof File) {
-            console.log(`   ${key}: [File] ${value.name} (${value.size} bytes)`);
+            console.log(
+              `   ${key}: [File] ${value.name} (${value.size} bytes)`
+            );
           } else {
             console.log(`   ${key}: ${value}`);
           }
@@ -92,7 +97,6 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
         finalPayload = formData as unknown as UpdateMovementPayload;
       } else {
-        // Tidak ada dokumen: kirim sebagai JSON biasa
         console.log('4. Sending as JSON (no documents)');
         console.log('5. Payload:', JSON.stringify(payload, null, 2));
         finalPayload = payload;

From 157dfc75ed4317df8b5b1118c7cdbe701342c1a4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 15:47:29 +0700
Subject: [PATCH 053/212] refactor(FE-63): remove debug logging from form
 submission and movement handlers

---
 .../inventory/movement/form/MovementForm.tsx  | 27 ------------
 .../movement/form/useMovementFormHandlers.ts  | 42 -------------------
 src/services/http/client.ts                   |  5 ++-
 3 files changed, 4 insertions(+), 70 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 898a1d56..a6a75394 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -68,27 +68,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     validateOnMount: false,
     enableReinitialize: true,
     onSubmit: async (values) => {
-      console.log('=== FORM SUBMIT DEBUG ===');
-      console.log('1. Form values received:', values);
-
       setMovementFormErrorMessage('');
       const documents: File[] = [];
       const deliveriesPayload = values.deliveries.map((d, idx) => {
         let documentIndex = 0;
 
-        console.log(`2. Processing delivery ${idx}:`, {
-          driver_name: d.driver_name,
-          document: d.document,
-          documentType: d.document instanceof File ? 'File' : typeof d.document,
-          documentSize: d.document instanceof File ? d.document.size : 'N/A',
-        });
-
         if (d.document && d.document instanceof File) {
           documents.push(d.document);
           documentIndex = documents.length - 1;
-          console.log(`   → Document added at index ${documentIndex}`);
         } else {
-          console.log(`   → No document for delivery ${idx}, using index 0`);
         }
 
         return {
@@ -117,21 +105,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         deliveries: deliveriesPayload,
       };
 
-      console.log('3. Final payload structure:', {
-        ...payload,
-      });
-
-      console.log(
-        '4. Document indices in deliveries:',
-        deliveriesPayload.map((d, i) => ({
-          delivery: i,
-          document_index: d.document_index,
-        }))
-      );
-
-      console.log('5. Total documents:', documents.length);
-      console.log('=== END SUBMIT DEBUG ===');
-
       switch (type) {
         case 'add':
           await createMovementHandler(payload, documents);
diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
index 3f46b71a..5c3d80d1 100644
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -17,40 +17,20 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const createMovementHandler = useCallback(
     async (payload: CreateMovementPayload, documents: File[] = []) => {
-      console.log('=== CREATE HANDLER DEBUG ===');
-      console.log('1. Received payload:', payload);
-      console.log('2. Documents count:', documents.length);
-
       let finalPayload: CreateMovementPayload | FormData;
 
       if (documents.length > 0) {
-        console.log('3. Creating FormData (has documents)');
         const formData = new FormData();
         formData.append('data', JSON.stringify(payload));
         documents.forEach((file, index) => {
           formData.append(`documents[${index}]`, file);
         });
 
-        console.log('4. FormData entries:');
-        for (const [key, value] of formData.entries()) {
-          if (value instanceof File) {
-            console.log(
-              `   ${key}: [File] ${value.name} (${value.size} bytes)`
-            );
-          } else {
-            console.log(`   ${key}: ${value}`);
-          }
-        }
-
         finalPayload = formData as unknown as CreateMovementPayload;
       } else {
-        console.log('3. Sending as JSON (no documents)');
-        console.log('4. Payload:', JSON.stringify(payload, null, 2));
         finalPayload = payload;
       }
 
-      console.log('=== END CREATE HANDLER DEBUG ===');
-
       const res = await MovementApi.create(finalPayload);
       if (isResponseError(res)) {
         console.error('API Error:', res);
@@ -69,44 +49,22 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
       payload: UpdateMovementPayload,
       documents: File[] = []
     ) => {
-      console.log('=== UPDATE HANDLER DEBUG ===');
-      console.log('1. Received payload:', payload);
-      console.log('2. Movement ID:', movementId);
-      console.log('3. Documents count:', documents.length);
-
       let finalPayload: UpdateMovementPayload | FormData;
 
       if (documents.length > 0) {
-        console.log('4. Creating FormData (has documents)');
         const formData = new FormData();
         formData.append('data', JSON.stringify(payload));
         documents.forEach((file, index) => {
           formData.append(`documents[${index}]`, file);
         });
 
-        console.log('5. FormData entries:');
-        for (const [key, value] of formData.entries()) {
-          if (value instanceof File) {
-            console.log(
-              `   ${key}: [File] ${value.name} (${value.size} bytes)`
-            );
-          } else {
-            console.log(`   ${key}: ${value}`);
-          }
-        }
-
         finalPayload = formData as unknown as UpdateMovementPayload;
       } else {
-        console.log('4. Sending as JSON (no documents)');
-        console.log('5. Payload:', JSON.stringify(payload, null, 2));
         finalPayload = payload;
       }
 
-      console.log('=== END UPDATE HANDLER DEBUG ===');
-
       const res = await MovementApi.update(movementId, finalPayload);
       if (res?.status === 'error') {
-        console.error('API Error:', res);
         setMovementFormErrorMessage(res.message);
         return;
       }
diff --git a/src/services/http/client.ts b/src/services/http/client.ts
index adba75e9..9dd382ca 100644
--- a/src/services/http/client.ts
+++ b/src/services/http/client.ts
@@ -14,6 +14,9 @@ export async function httpClient<T, B = unknown>(
     (!opts.auth && opts.auth !== 'none' && opts.auth !== 'bearer');
   const isBearerAuth = opts.auth === 'bearer' && !!opts.token;
 
+  const isFormData =
+    typeof FormData !== 'undefined' && opts.body instanceof FormData;
+
   const config: AxiosRequestConfig = {
     url: path,
     method: opts.method ?? 'GET',
@@ -22,7 +25,7 @@ export async function httpClient<T, B = unknown>(
     timeout: opts.timeoutMs ?? 10_000,
     withCredentials: isCookieAuth && !isBearerAuth,
     headers: {
-      'Content-Type': 'application/json',
+      ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
       ...(opts.headers ?? {}),
       ...(isBearerAuth && !isCookieAuth
         ? { Authorization: `Bearer ${opts.token}` }

From a2a57f758c0c7744dd9431aa85dc3e018bf8d5d2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 16:24:42 +0700
Subject: [PATCH 054/212] refactor(FE-63,63,65): enhance MovementForm to fetch
 and display product details from ProductWarehouse

---
 .../movement/form/MovementForm.schema.ts      |  96 +++++----
 .../inventory/movement/form/MovementForm.tsx  | 182 +++++++++++++++++-
 2 files changed, 237 insertions(+), 41 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 148a7dce..d5d660ae 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -119,43 +119,61 @@ export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 
 export const getMovementFormInitialValues = (
   initialValues?: Movement
-): MovementFormValues => ({
-  transfer_reason: initialValues?.transfer_reason ?? '',
-  transfer_date: initialValues?.transfer_date ?? '',
-  source_warehouse: initialValues?.source_warehouse
-    ? {
-        value: initialValues.source_warehouse.id,
-        label: initialValues.source_warehouse.name,
-      }
-    : null,
-  source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
-  destination_warehouse: initialValues?.destination_warehouse
-    ? {
-        value: initialValues.destination_warehouse.id,
-        label: initialValues.destination_warehouse.name,
-      }
-    : null,
-  destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
-  products:
-    initialValues?.details?.map((p) => ({
-      product: { value: p.product_id, label: '' },
-      product_id: p.product_id,
-      product_qty: p.quantity,
-    })) ?? [],
-  deliveries:
-    initialValues?.deliveries?.map((d) => ({
-      delivery_cost: d.shipping_cost_total,
-      delivery_cost_per_item: d.shipping_cost_item,
-      document_index: 0,
-      document: d.document_path || null,
-      driver_name: d.driver_name,
-      vehicle_plate: d.vehicle_plate,
-      supplier: { value: d.supplier.id, label: d.supplier.name },
-      supplier_id: d.supplier_id,
-      products: d.items.map((p) => ({
-        product: { value: 0, label: '' },
-        product_id: 0,
+): MovementFormValues => {
+  const detailIdToProductId = new Map<number, number>();
+  initialValues?.details?.forEach((detail) => {
+    detailIdToProductId.set(detail.id, detail.product_id);
+  });
+
+  return {
+    transfer_reason: initialValues?.transfer_reason ?? '',
+    transfer_date: initialValues?.transfer_date ?? '',
+    source_warehouse: initialValues?.source_warehouse
+      ? {
+          value: initialValues.source_warehouse.id,
+          label: initialValues.source_warehouse.name,
+        }
+      : null,
+    source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
+    destination_warehouse: initialValues?.destination_warehouse
+      ? {
+          value: initialValues.destination_warehouse.id,
+          label: initialValues.destination_warehouse.name,
+        }
+      : null,
+    destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
+    products:
+      initialValues?.details?.map((p) => ({
+        product: { value: p.product_id, label: `Product ID: ${p.product_id}` },
+        product_id: p.product_id,
         product_qty: p.quantity,
-      })),
-    })) ?? [],
-});
+      })) ?? [],
+    deliveries:
+      initialValues?.deliveries?.map((d) => {
+        return {
+          delivery_cost: d.shipping_cost_total,
+          delivery_cost_per_item: d.shipping_cost_item,
+          document_index: 0,
+          document: d.document_path || null,
+          driver_name: d.driver_name,
+          vehicle_plate: d.vehicle_plate,
+          supplier: d.supplier
+            ? { value: d.supplier.id, label: d.supplier.name }
+            : null,
+          supplier_id: d.supplier_id,
+          products: d.items.map((item) => {
+            const productId =
+              detailIdToProductId.get(item.stock_transfer_detail_id) ?? 0;
+            return {
+              product:
+                productId > 0
+                  ? { value: productId, label: `Product ID: ${productId}` }
+                  : null,
+              product_id: productId,
+              product_qty: item.quantity,
+            };
+          }),
+        };
+      }) ?? [],
+  };
+};
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index a6a75394..adf6658d 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -25,7 +25,11 @@ import {
   DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { useMovementFormHandlers } from './useMovementFormHandlers';
-import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
+import {
+  SupplierApi,
+  WarehouseApi,
+  ProductApi,
+} from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
@@ -43,6 +47,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
+  const [fetchedProductIds, setFetchedProductIds] = useState<Set<number>>(
+    new Set()
+  );
 
   const {
     deleteModal,
@@ -338,12 +345,183 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   }, [formik.values.deliveries]);
 
   useEffect(() => {
-    if (formik.values.source_warehouse_id && type !== 'edit') {
+    if (
+      formik.values.source_warehouse_id &&
+      type !== 'edit' &&
+      type !== 'detail'
+    ) {
       formik.setFieldValue('products', []);
       formik.setFieldValue('deliveries', []);
     }
   }, [formik.values.source_warehouse_id]);
 
+  // Effect to populate product labels from ProductWarehouse data
+  useEffect(() => {
+    if (!productWarehouses || !isResponseSuccess(productWarehouses)) return;
+    if (type !== 'edit' && type !== 'detail') return;
+
+    let hasUpdates = false;
+    const updatedProducts = formik.values.products?.map((product) => {
+      if (product.product && product.product.label.startsWith('Product ID:')) {
+        const productWarehouse = productWarehouses.data.find(
+          (pw) => pw.product.id === product.product_id
+        );
+        if (productWarehouse) {
+          hasUpdates = true;
+          return {
+            ...product,
+            product: {
+              value: productWarehouse.product.id,
+              label: productWarehouse.product.name,
+            },
+          };
+        }
+      }
+      return product;
+    });
+
+    if (hasUpdates && updatedProducts) {
+      formik.setFieldValue('products', updatedProducts);
+
+      const updatedDeliveries = formik.values.deliveries?.map((delivery) => {
+        const updatedDeliveryProducts = delivery.products.map(
+          (deliveryProduct) => {
+            if (
+              deliveryProduct.product &&
+              deliveryProduct.product.label.startsWith('Product ID:')
+            ) {
+              const productWarehouse = productWarehouses.data.find(
+                (pw) => pw.product.id === deliveryProduct.product_id
+              );
+              if (productWarehouse) {
+                return {
+                  ...deliveryProduct,
+                  product: {
+                    value: productWarehouse.product.id,
+                    label: productWarehouse.product.name,
+                  },
+                };
+              }
+            }
+            return deliveryProduct;
+          }
+        );
+        return {
+          ...delivery,
+          products: updatedDeliveryProducts,
+        };
+      });
+      formik.setFieldValue('deliveries', updatedDeliveries);
+    }
+  }, [productWarehouses, type]);
+
+  useEffect(() => {
+    if (type !== 'edit' && type !== 'detail') return;
+
+    const productIdsToFetch: number[] = [];
+
+    formik.values.products?.forEach((product) => {
+      if (
+        product.product &&
+        product.product.label.startsWith('Product ID:') &&
+        product.product_id > 0 &&
+        !fetchedProductIds.has(product.product_id)
+      ) {
+        productIdsToFetch.push(product.product_id);
+      }
+    });
+
+    formik.values.deliveries?.forEach((delivery) => {
+      delivery.products.forEach((deliveryProduct) => {
+        if (
+          deliveryProduct.product &&
+          deliveryProduct.product.label.startsWith('Product ID:') &&
+          deliveryProduct.product_id > 0 &&
+          !fetchedProductIds.has(deliveryProduct.product_id)
+        ) {
+          if (!productIdsToFetch.includes(deliveryProduct.product_id)) {
+            productIdsToFetch.push(deliveryProduct.product_id);
+          }
+        }
+      });
+    });
+
+    if (productIdsToFetch.length === 0) return;
+
+    const fetchProducts = async () => {
+      const productMap = new Map<number, { id: number; name: string }>();
+      const newFetchedIds = new Set(fetchedProductIds);
+
+      for (const productId of productIdsToFetch) {
+        try {
+          const response = await ProductApi.getSingle(productId);
+          if (isResponseSuccess(response)) {
+            const product = response.data;
+            productMap.set(product.id, { id: product.id, name: product.name });
+            newFetchedIds.add(productId);
+          }
+        } catch (error) {
+          console.error(`Failed to fetch product ${productId}:`, error);
+          newFetchedIds.add(productId); // Mark as fetched to avoid retry loops
+        }
+      }
+
+      if (productMap.size > 0) {
+        const updatedProducts = formik.values.products?.map((p) => {
+          const productData = productMap.get(p.product_id);
+          if (productData) {
+            return {
+              ...p,
+              product: {
+                value: productData.id,
+                label: productData.name,
+              },
+            };
+          }
+          return p;
+        });
+
+        const updatedDeliveries = formik.values.deliveries?.map((delivery) => {
+          const updatedDeliveryProducts = delivery.products.map(
+            (deliveryProduct) => {
+              const productData = productMap.get(deliveryProduct.product_id);
+              if (productData) {
+                return {
+                  ...deliveryProduct,
+                  product: {
+                    value: productData.id,
+                    label: productData.name,
+                  },
+                };
+              }
+              return deliveryProduct;
+            }
+          );
+          return {
+            ...delivery,
+            products: updatedDeliveryProducts,
+          };
+        });
+
+        if (updatedProducts) {
+          formik.setFieldValue('products', updatedProducts);
+        }
+        if (updatedDeliveries) {
+          formik.setFieldValue('deliveries', updatedDeliveries);
+        }
+      }
+
+      setFetchedProductIds(newFetchedIds);
+    };
+
+    fetchProducts();
+  }, [
+    formik.values.products,
+    formik.values.deliveries,
+    type,
+    fetchedProductIds,
+  ]);
+
   const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
       formik.values.products

From 501a68267e0bbaa820b64fa819d1c601e568a37a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 16:24:42 +0700
Subject: [PATCH 055/212] refactor(FE-63,63,65): enhance MovementForm to fetch
 and display product details from ProductWarehouse

---
 .../movement/form/MovementForm.schema.ts      |  96 +++++----
 .../inventory/movement/form/MovementForm.tsx  | 184 +++++++++++++++++-
 2 files changed, 238 insertions(+), 42 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 148a7dce..d5d660ae 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -119,43 +119,61 @@ export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 
 export const getMovementFormInitialValues = (
   initialValues?: Movement
-): MovementFormValues => ({
-  transfer_reason: initialValues?.transfer_reason ?? '',
-  transfer_date: initialValues?.transfer_date ?? '',
-  source_warehouse: initialValues?.source_warehouse
-    ? {
-        value: initialValues.source_warehouse.id,
-        label: initialValues.source_warehouse.name,
-      }
-    : null,
-  source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
-  destination_warehouse: initialValues?.destination_warehouse
-    ? {
-        value: initialValues.destination_warehouse.id,
-        label: initialValues.destination_warehouse.name,
-      }
-    : null,
-  destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
-  products:
-    initialValues?.details?.map((p) => ({
-      product: { value: p.product_id, label: '' },
-      product_id: p.product_id,
-      product_qty: p.quantity,
-    })) ?? [],
-  deliveries:
-    initialValues?.deliveries?.map((d) => ({
-      delivery_cost: d.shipping_cost_total,
-      delivery_cost_per_item: d.shipping_cost_item,
-      document_index: 0,
-      document: d.document_path || null,
-      driver_name: d.driver_name,
-      vehicle_plate: d.vehicle_plate,
-      supplier: { value: d.supplier.id, label: d.supplier.name },
-      supplier_id: d.supplier_id,
-      products: d.items.map((p) => ({
-        product: { value: 0, label: '' },
-        product_id: 0,
+): MovementFormValues => {
+  const detailIdToProductId = new Map<number, number>();
+  initialValues?.details?.forEach((detail) => {
+    detailIdToProductId.set(detail.id, detail.product_id);
+  });
+
+  return {
+    transfer_reason: initialValues?.transfer_reason ?? '',
+    transfer_date: initialValues?.transfer_date ?? '',
+    source_warehouse: initialValues?.source_warehouse
+      ? {
+          value: initialValues.source_warehouse.id,
+          label: initialValues.source_warehouse.name,
+        }
+      : null,
+    source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
+    destination_warehouse: initialValues?.destination_warehouse
+      ? {
+          value: initialValues.destination_warehouse.id,
+          label: initialValues.destination_warehouse.name,
+        }
+      : null,
+    destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
+    products:
+      initialValues?.details?.map((p) => ({
+        product: { value: p.product_id, label: `Product ID: ${p.product_id}` },
+        product_id: p.product_id,
         product_qty: p.quantity,
-      })),
-    })) ?? [],
-});
+      })) ?? [],
+    deliveries:
+      initialValues?.deliveries?.map((d) => {
+        return {
+          delivery_cost: d.shipping_cost_total,
+          delivery_cost_per_item: d.shipping_cost_item,
+          document_index: 0,
+          document: d.document_path || null,
+          driver_name: d.driver_name,
+          vehicle_plate: d.vehicle_plate,
+          supplier: d.supplier
+            ? { value: d.supplier.id, label: d.supplier.name }
+            : null,
+          supplier_id: d.supplier_id,
+          products: d.items.map((item) => {
+            const productId =
+              detailIdToProductId.get(item.stock_transfer_detail_id) ?? 0;
+            return {
+              product:
+                productId > 0
+                  ? { value: productId, label: `Product ID: ${productId}` }
+                  : null,
+              product_id: productId,
+              product_qty: item.quantity,
+            };
+          }),
+        };
+      }) ?? [],
+  };
+};
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index a6a75394..5c5138bf 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -25,7 +25,11 @@ import {
   DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { useMovementFormHandlers } from './useMovementFormHandlers';
-import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
+import {
+  SupplierApi,
+  WarehouseApi,
+  ProductApi,
+} from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
@@ -43,6 +47,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
+  const [fetchedProductIds, setFetchedProductIds] = useState<Set<number>>(
+    new Set()
+  );
 
   const {
     deleteModal,
@@ -338,12 +345,183 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   }, [formik.values.deliveries]);
 
   useEffect(() => {
-    if (formik.values.source_warehouse_id && type !== 'edit') {
+    if (
+      formik.values.source_warehouse_id &&
+      type !== 'edit' &&
+      type !== 'detail'
+    ) {
       formik.setFieldValue('products', []);
       formik.setFieldValue('deliveries', []);
     }
   }, [formik.values.source_warehouse_id]);
 
+  // Effect to populate product labels from ProductWarehouse data
+  useEffect(() => {
+    if (!productWarehouses || !isResponseSuccess(productWarehouses)) return;
+    if (type !== 'edit' && type !== 'detail') return;
+
+    let hasUpdates = false;
+    const updatedProducts = formik.values.products?.map((product) => {
+      if (product.product && product.product.label.startsWith('Product ID:')) {
+        const productWarehouse = productWarehouses.data.find(
+          (pw) => pw.product.id === product.product_id
+        );
+        if (productWarehouse) {
+          hasUpdates = true;
+          return {
+            ...product,
+            product: {
+              value: productWarehouse.product.id,
+              label: productWarehouse.product.name,
+            },
+          };
+        }
+      }
+      return product;
+    });
+
+    if (hasUpdates && updatedProducts) {
+      formik.setFieldValue('products', updatedProducts);
+
+      const updatedDeliveries = formik.values.deliveries?.map((delivery) => {
+        const updatedDeliveryProducts = delivery.products.map(
+          (deliveryProduct) => {
+            if (
+              deliveryProduct.product &&
+              deliveryProduct.product.label.startsWith('Product ID:')
+            ) {
+              const productWarehouse = productWarehouses.data.find(
+                (pw) => pw.product.id === deliveryProduct.product_id
+              );
+              if (productWarehouse) {
+                return {
+                  ...deliveryProduct,
+                  product: {
+                    value: productWarehouse.product.id,
+                    label: productWarehouse.product.name,
+                  },
+                };
+              }
+            }
+            return deliveryProduct;
+          }
+        );
+        return {
+          ...delivery,
+          products: updatedDeliveryProducts,
+        };
+      });
+      formik.setFieldValue('deliveries', updatedDeliveries);
+    }
+  }, [productWarehouses, type]);
+
+  useEffect(() => {
+    if (type !== 'edit' && type !== 'detail') return;
+
+    const productIdsToFetch: number[] = [];
+
+    formik.values.products?.forEach((product) => {
+      if (
+        product.product &&
+        product.product.label.startsWith('Product ID:') &&
+        product.product_id > 0 &&
+        !fetchedProductIds.has(product.product_id)
+      ) {
+        productIdsToFetch.push(product.product_id);
+      }
+    });
+
+    formik.values.deliveries?.forEach((delivery) => {
+      delivery.products.forEach((deliveryProduct) => {
+        if (
+          deliveryProduct.product &&
+          deliveryProduct.product.label.startsWith('Product ID:') &&
+          deliveryProduct.product_id > 0 &&
+          !fetchedProductIds.has(deliveryProduct.product_id)
+        ) {
+          if (!productIdsToFetch.includes(deliveryProduct.product_id)) {
+            productIdsToFetch.push(deliveryProduct.product_id);
+          }
+        }
+      });
+    });
+
+    if (productIdsToFetch.length === 0) return;
+
+    const fetchProducts = async () => {
+      const productMap = new Map<number, { id: number; name: string }>();
+      const newFetchedIds = new Set(fetchedProductIds);
+
+      for (const productId of productIdsToFetch) {
+        try {
+          const response = await ProductApi.getSingle(productId);
+          if (isResponseSuccess(response)) {
+            const product = response.data;
+            productMap.set(product.id, { id: product.id, name: product.name });
+            newFetchedIds.add(productId);
+          }
+        } catch (error) {
+          console.error(`Failed to fetch product ${productId}:`, error);
+          newFetchedIds.add(productId); // Mark as fetched to avoid retry loops
+        }
+      }
+
+      if (productMap.size > 0) {
+        const updatedProducts = formik.values.products?.map((p) => {
+          const productData = productMap.get(p.product_id);
+          if (productData) {
+            return {
+              ...p,
+              product: {
+                value: productData.id,
+                label: productData.name,
+              },
+            };
+          }
+          return p;
+        });
+
+        const updatedDeliveries = formik.values.deliveries?.map((delivery) => {
+          const updatedDeliveryProducts = delivery.products.map(
+            (deliveryProduct) => {
+              const productData = productMap.get(deliveryProduct.product_id);
+              if (productData) {
+                return {
+                  ...deliveryProduct,
+                  product: {
+                    value: productData.id,
+                    label: productData.name,
+                  },
+                };
+              }
+              return deliveryProduct;
+            }
+          );
+          return {
+            ...delivery,
+            products: updatedDeliveryProducts,
+          };
+        });
+
+        if (updatedProducts) {
+          formik.setFieldValue('products', updatedProducts);
+        }
+        if (updatedDeliveries) {
+          formik.setFieldValue('deliveries', updatedDeliveries);
+        }
+      }
+
+      setFetchedProductIds(newFetchedIds);
+    };
+
+    fetchProducts();
+  }, [
+    formik.values.products,
+    formik.values.deliveries,
+    type,
+    fetchedProductIds,
+  ]);
+
   const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
       formik.values.products
@@ -484,7 +662,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   return (
     <>
-      <section className='w-full max-w-5xl'>
+      <section className='w-full'>
         <FormHeader
           type={type}
           title='Movement'

From 1bdec0c9ae1dbe8a3df34fa11b0f171db4d6e145 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 16:46:33 +0700
Subject: [PATCH 056/212] refactor(FE-62,63): update MovementForm to handle
 'detail' type with appropriate validations and stock checks

---
 .../inventory/movement/form/MovementForm.tsx  | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 5c5138bf..0483b4c1 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -462,7 +462,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           }
         } catch (error) {
           console.error(`Failed to fetch product ${productId}:`, error);
-          newFetchedIds.add(productId); // Mark as fetched to avoid retry loops
+          newFetchedIds.add(productId);
         }
       }
 
@@ -535,16 +535,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const getAvailableStock = useCallback(
     (productId: number) => {
+      if (type === 'detail') return 0;
       const productWarehouse = productWarehouseOptions.find(
         (pw) => pw.product_id === productId
       );
       return productWarehouse?.quantity ?? 0;
     },
-    [productWarehouseOptions]
+    [productWarehouseOptions, type]
   );
 
   const getProductQtyError = useCallback(
     (productIdx: number) => {
+      if (type === 'detail') return null;
       const product = formik.values.products?.[productIdx];
       if (!product || !product.product_id) return null;
 
@@ -557,11 +559,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
       return null;
     },
-    [formik.values.products, getAvailableStock]
+    [formik.values.products, getAvailableStock, type]
   );
 
   const validateDeliveryQty = useCallback(
     (deliveryIdx: number, deliveryProductIdx: number, qty: number) => {
+      if (type === 'detail') return true;
       const delivery = formik.values.deliveries?.[deliveryIdx];
       if (!delivery) return true;
 
@@ -592,11 +595,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
       return totalQtyUsed + qty <= Number(relatedProduct.product_qty);
     },
-    [formik.values.deliveries, formik.values.products]
+    [formik.values.deliveries, formik.values.products, type]
   );
 
   const getDeliveryQtyError = useCallback(
     (deliveryIdx: number, deliveryProductIdx: number) => {
+      if (type === 'detail') return null;
       const delivery = formik.values.deliveries?.[deliveryIdx];
       if (!delivery) return null;
 
@@ -633,32 +637,40 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
       return null;
     },
-    [formik.values.deliveries, formik.values.products]
+    [formik.values.deliveries, formik.values.products, type]
   );
 
   const invalidQtyRows = useMemo(
     () =>
-      formik.values.deliveries?.flatMap((delivery, deliveryIdx) =>
-        delivery.products.map((product, productIdx) => {
-          const qty = Number(product.product_qty) || 0;
-          return !validateDeliveryQty(deliveryIdx, productIdx, qty);
-        })
-      ) ?? [],
-    [formik.values.deliveries, formik.values.products, validateDeliveryQty]
+      type === 'detail'
+        ? []
+        : (formik.values.deliveries?.flatMap((delivery, deliveryIdx) =>
+            delivery.products.map((product, productIdx) => {
+              const qty = Number(product.product_qty) || 0;
+              return !validateDeliveryQty(deliveryIdx, productIdx, qty);
+            })
+          ) ?? []),
+    [
+      formik.values.deliveries,
+      formik.values.products,
+      validateDeliveryQty,
+      type,
+    ]
   );
 
   const hasInvalidQty = useMemo(
-    () => invalidQtyRows.some(Boolean),
-    [invalidQtyRows]
+    () => (type === 'detail' ? false : invalidQtyRows.some(Boolean)),
+    [invalidQtyRows, type]
   );
 
   const hasExceededStock = useMemo(() => {
+    if (type === 'detail') return false;
     return (
       formik.values.products?.some((product, idx) => {
         return getProductQtyError(idx) !== null;
       }) ?? false
     );
-  }, [formik.values.products, getProductQtyError]);
+  }, [formik.values.products, getProductQtyError, type]);
 
   return (
     <>
@@ -960,7 +972,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 wrapper: 'w-full min-w-24',
                               }}
                             />
-                            {product.product_id && (
+                            {type !== 'detail' && product.product_id && (
                               <div className='text-sm text-gray-600'>
                                 <span className='font-semibold'>
                                   Stok tersedia:

From 5113bf4d3f507eea485afb270f9c6f123840eee4 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 16 Oct 2025 16:49:44 +0700
Subject: [PATCH 057/212] feat(84-85-86-87-88-89-102): create feature project
 flocks and adjust master data flock feature

---
 src/app/globals.css                           |   2 +-
 .../master-data/flock/detail/edit/page.tsx    |   2 +
 src/app/master-data/flock/detail/page.tsx     |   2 +
 src/app/production/project-flock/add/page.tsx |  13 +
 .../project-flock/detail/edit/page.tsx        |   0
 .../production/project-flock/detail/page.tsx  |  46 ++
 src/app/production/project-flock/page.tsx     |  12 +
 .../pages/master-data/flock/FlocksTable.tsx   |  16 +-
 .../flock/form/FlockForm.schema.ts            |   6 +-
 .../master-data/flock/form/FlockForm.tsx      |   2 +-
 .../project-flock/ProjectFlockTable.tsx       | 312 +++++++++
 .../form/ProjectFlockForm.schema.ts           |  57 ++
 .../project-flock/form/ProjectFlockForm.tsx   | 646 ++++++++++++++++++
 src/config/constant.ts                        |  61 +-
 src/services/api/production.ts                |  11 +
 src/types/api/production/project-flock.d.ts   |  38 ++
 16 files changed, 1207 insertions(+), 19 deletions(-)
 create mode 100644 src/app/production/project-flock/add/page.tsx
 create mode 100644 src/app/production/project-flock/detail/edit/page.tsx
 create mode 100644 src/app/production/project-flock/detail/page.tsx
 create mode 100644 src/app/production/project-flock/page.tsx
 create mode 100644 src/components/pages/production/project-flock/ProjectFlockTable.tsx
 create mode 100644 src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
 create mode 100644 src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
 create mode 100644 src/services/api/production.ts
 create mode 100644 src/types/api/production/project-flock.d.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index 0fb52327..d2351a24 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,7 +2,7 @@
 @plugin "daisyui";
 
 @plugin "daisyui/theme" {
-  name: "corporate";
+  name: "lti";
   default: false;
   prefersdark: false;
   color-scheme: "light";
diff --git a/src/app/master-data/flock/detail/edit/page.tsx b/src/app/master-data/flock/detail/edit/page.tsx
index c3903555..c9651727 100644
--- a/src/app/master-data/flock/detail/edit/page.tsx
+++ b/src/app/master-data/flock/detail/edit/page.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
 import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
 import { FlockApi } from "@/services/api/master-data";
diff --git a/src/app/master-data/flock/detail/page.tsx b/src/app/master-data/flock/detail/page.tsx
index cedc3243..8a805911 100644
--- a/src/app/master-data/flock/detail/page.tsx
+++ b/src/app/master-data/flock/detail/page.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
 import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
 import { FlockApi } from "@/services/api/master-data";
diff --git a/src/app/production/project-flock/add/page.tsx b/src/app/production/project-flock/add/page.tsx
new file mode 100644
index 00000000..60141d80
--- /dev/null
+++ b/src/app/production/project-flock/add/page.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+
+const AddProjectFlock = () => {
+  return (
+    <section className="w-full p-4 flex flex-row justify-center">
+      <ProjectFlockForm formType="add"/>
+    </section>
+  );
+}
+
+export default AddProjectFlock;
\ No newline at end of file
diff --git a/src/app/production/project-flock/detail/edit/page.tsx b/src/app/production/project-flock/detail/edit/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
new file mode 100644
index 00000000..5efe83d8
--- /dev/null
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+
+import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { ProjectFlockApi } from "@/services/api/production";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const ProjectFlockDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const projectFlockId = searchParams.get("projectFlockId");
+
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+
+  if(!projectFlockId){
+    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(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
+    router.replace("/404");
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
+        <ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
+      )}
+    </div>
+  )
+}
+
+export default ProjectFlockDetail;
\ No newline at end of file
diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx
new file mode 100644
index 00000000..fdb8775d
--- /dev/null
+++ b/src/app/production/project-flock/page.tsx
@@ -0,0 +1,12 @@
+import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
+import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
+
+const ProjectFlock = () => {
+  return (
+    <section className="w-full p-4">
+      <ProjectFlockTable/>
+    </section>
+  );
+}
+
+export default ProjectFlock;
diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx
index 817eff40..60b392de 100644
--- a/src/components/pages/master-data/flock/FlocksTable.tsx
+++ b/src/components/pages/master-data/flock/FlocksTable.tsx
@@ -41,7 +41,7 @@ const RowsOptions = ({
       )}
     >
       <Button
-        href={`/master-data/flock/edit/?flockId=${props.row.original.id}`}
+        href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
         className='justify-start text-sm'
@@ -53,6 +53,20 @@ const RowsOptions = ({
           className='justify-start text-sm'
         />
         Edit
+      </Button>
+       <Button
+        href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='mdi:eye-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Detail
       </Button>
       <Button
         onClick={deleteClickHandler}
diff --git a/src/components/pages/master-data/flock/form/FlockForm.schema.ts b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
index 0a85b0fc..76445610 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.schema.ts
+++ b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
@@ -4,11 +4,11 @@ export const FlockFormSchema = Yup.object({
   name: Yup.string()
     .required('Nama wajib diisi!')
     .matches(
-      /^[a-zA-Z0-9]+$/,
-      'Nama hanya boleh berisi huruf dan angka (tanpa spasi atau simbol)'
+      /^[\p{L}\p{N}\s]+$/u,
+      'Nama tidak boleh mengandung simbol'
     ),
 });
 
 export const UpdateFlockFormSchema = FlockFormSchema;
 
-export type FlockFormValues = Yup.InferType<typeof FlockFormSchema>;
\ No newline at end of file
+export type FlockFormValues = Yup.InferType<typeof FlockFormSchema>;
diff --git a/src/components/pages/master-data/flock/form/FlockForm.tsx b/src/components/pages/master-data/flock/form/FlockForm.tsx
index f73d47f0..0950eef1 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.tsx
+++ b/src/components/pages/master-data/flock/form/FlockForm.tsx
@@ -143,7 +143,7 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
                   <Button
                     type='button'
                     color='warning'
-                    href={`/master-data/flock/edit/?flockId=${initialValues?.id}`}
+                    href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
                     className='px-4'
                   >
                     <Icon
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
new file mode 100644
index 00000000..f890873d
--- /dev/null
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -0,0 +1,312 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<ProjectFlock, 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={`/production/project-flock/detail?projectFlockId=${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
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const ProjectFlockTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: projectFlocks,
+    isLoading,
+    mutate: refreshProjectFlocks,
+  } = useSWR(
+    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
+    ProjectFlockApi.getAllFetcher
+  );
+
+  // State
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<ProjectFlock>();
+  const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns
+  const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'flock.name',
+      header: 'Flock',
+    },
+    {
+      accessorKey: 'area.name',
+      header: 'Area',
+    },
+    {
+      accessorKey: 'location.name',
+      header: 'Lokasi',
+    },
+    {
+      accessorKey: 'fcr.name',
+      header: 'FCR',
+    },
+    {
+      accessorKey: 'product_category.name',
+      header: 'Kategori Produk',
+    },
+    {
+      header: 'Kandang',
+      cell: (props) => {
+        const kandang = props.row.original.kandangs;
+        const kandangNames = kandang.map((k: Kandang) => k.name);
+        console.log('kandang');
+        console.log(kandang);
+        return (
+          <div>
+            {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'period',
+      header: 'Periode',
+    },
+    {
+      accessorKey: 'created_at',
+      header: 'Dibuat pada',
+      cell: (props) =>
+        new Date(props.row.original.created_at).toLocaleDateString(),
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        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 = () => {
+          setSelectedProjectFlock(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await ProjectFlockApi.delete(selectedProjectFlock?.id as number);
+    refreshProjectFlocks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Project Flock!');
+    setIsDeleteLoading(false);
+  };
+
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
+  );
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/production/project-flock/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+            </div>
+            <div className='flex flex-row justify-end'>
+              <SelectInput
+                label='Baris'
+                options={ROWS_OPTIONS}
+                value={{
+                  label: String(tableFilterState.pageSize),
+                  value: tableFilterState.pageSize,
+                }}
+                onChange={pageSizeChangeHandler}
+                className={{ wrapper: 'max-w-28' }}
+              />
+            </div>
+          </div>
+
+          <Table<ProjectFlock>
+            data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
+            columns={projectFlocksColumns}
+            pageSize={tableFilterState.pageSize}
+            page={
+              isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
+            }
+            totalItems={
+              isResponseSuccess(projectFlocks)
+                ? projectFlocks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoading}
+            sorting={sorting}
+            setSorting={setSorting}
+            className={{
+              containerClassName: cn({
+                'mb-20':
+                  isResponseSuccess(projectFlocks) &&
+                  projectFlocks?.data?.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',
+            }}
+          />
+        </div>
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectFlockTable;
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
new file mode 100644
index 00000000..2c00e6ef
--- /dev/null
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -0,0 +1,57 @@
+import * as Yup from 'yup';
+
+export const ProjectFlockFormSchema = Yup.object({
+  name: Yup.string().required('Nama Proyek wajib diisi!'),
+
+  // Flock
+  flock: Yup.object({
+    value: Yup.number().required('ID Flock wajib diisi!'),
+    label: Yup.string().required('Nama Flock wajib diisi!'),
+  }).nullable(),
+  flock_id: Yup.number().required('Flock wajib diisi!'),
+
+  // Area
+  area: Yup.object({
+    value: Yup.number().required('ID Area wajib diisi!'),
+    label: Yup.string().required('Nama Area wajib diisi!'),
+  }).nullable(),
+  area_id: Yup.number().required('Area wajib diisi!'),
+
+  //Product Category
+  product_category: Yup.object({
+    value: Yup.number().required('ID Kategori Produk wajib diisi!'),
+    label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
+  }).nullable(),
+  product_category_id: Yup.number().required('Kategori Produk wajib diisi!'),
+
+  // FCR
+  fcr: Yup.object({
+    value: Yup.number().required('ID FCR wajib diisi!'),
+    label: Yup.string().required('Nama FCR wajib diisi!'),
+  }).nullable(),
+  fcr_id: Yup.number().required('FCR wajib diisi!'),
+
+  // Location
+  location: Yup.object({
+    value: Yup.number().required('ID Lokasi wajib diisi!'),
+    label: Yup.string().required('Nama Lokasi wajib diisi!'),
+  }).nullable(),
+  location_id: Yup.number().required('Lokasi wajib diisi!'),
+
+  period: Yup.number()
+    .required('Periode wajib diisi!')
+    .typeError('Periode harus berupa angka')
+    .min(1, 'Minimal periode adalah 1'),
+
+  kandang_ids: Yup.array()
+    .of(Yup.number().typeError('Kandang tidak valid!'))
+    .min(1, 'Minimal harus ada 1 kandang!')
+    .required('Kandang wajib diisi!'),
+});
+
+export type ProjectFlockFormValues = Yup.InferType<
+  typeof ProjectFlockFormSchema
+>;
+
+export const UpdateProjectFlockFormSchema = ProjectFlockFormSchema;
+
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
new file mode 100644
index 00000000..5ca4c9b6
--- /dev/null
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -0,0 +1,646 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  AreaApi,
+  FcrApi,
+  FlockApi,
+  KandangApi,
+  LocationApi,
+  ProductCategoryApi,
+} from '@/services/api/master-data';
+import { Icon } from '@iconify/react';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import useSWR from 'swr';
+import {
+  ProjectFlockFormSchema,
+  ProjectFlockFormValues,
+  UpdateProjectFlockFormSchema,
+} from './ProjectFlockForm.schema';
+import {
+  CreateProjectFlockPayload,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
+import toast from 'react-hot-toast';
+import TextInput from '@/components/input/TextInput';
+import Table from '@/components/Table';
+import { Kandang } from '@/types/api/master-data/kandang';
+import Collapse from '@/components/Collapse';
+import { ProjectFlockApi } from '@/services/api/production';
+
+interface ProjectFlockFormProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: ProjectFlock;
+}
+
+const ProjectFlockForm = ({
+  formType = 'add',
+  initialValues,
+}: ProjectFlockFormProps) => {
+  // State
+  const router = useRouter();
+  const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
+    useState('');
+  const [selectedArea, setSelectedArea] = useState('');
+
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [disabledLocation, setDisabledLocation] = useState(true);
+  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
+
+  const [openSelectKandangs, setOpenSelectKandangs] = useState(
+    initialValues?.kandangs?.length > 0
+  );
+  const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
+    initialValues?.kandangs ?? []
+  );
+
+  // Fetch Data
+  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
+    flockUrl,
+    FlockApi.getAllFetcher
+  );
+
+  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+    areaUrl,
+    AreaApi.getAllFetcher
+  );
+
+  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    search: '',
+    area_id: selectedArea,
+  }).toString()}`;
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationUrl,
+    LocationApi.getAllFetcher
+  );
+
+  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
+    fcrUrl,
+    FcrApi.getAllFetcher
+  );
+
+  const productCategoryUrl = `${
+    ProductCategoryApi.basePath
+  }?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: productCategories, isLoading: isLoadingProductCategories } =
+    useSWR(productCategoryUrl, ProductCategoryApi.getAllFetcher);
+
+  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
+    search: '',
+    location_id: selectedLocation == '' ? '0' : selectedLocation,
+  }).toString()}`;
+  const { data: kandang, isLoading: isLoadingKandang } = useSWR(
+    kandangUrl,
+    KandangApi.getAllFetcher
+  );
+
+  // Map Data to Options
+  const optionsArea = isResponseSuccess(areas)
+    ? areas?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const optionsFcr = isResponseSuccess(fcrs)
+    ? fcrs?.data.map((fcr) => ({
+        value: fcr.id,
+        label: fcr.name,
+      }))
+    : [];
+  const optionsFlock = isResponseSuccess(flocks)
+    ? flocks?.data.map((flock) => ({
+        value: flock.id,
+        label: flock.name,
+      }))
+    : [];
+  const optionsProductCategory = isResponseSuccess(productCategories)
+    ? productCategories?.data.map((productCategory) => ({
+        value: productCategory.id,
+        label: productCategory.name,
+      }))
+    : [];
+
+  useEffect(() => {
+    if (isResponseSuccess(locations)) {
+      const options = locations.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      }));
+      setOptionsLocation(options);
+    }
+  }, [locations]);
+
+  useEffect(() => {
+    if (isResponseSuccess(kandang)) {
+      if (kandang.data.length > 0 && selectedLocation != '') {
+        setOptionsKandang(kandang.data);
+        setOpenSelectKandangs(true);
+      } else {
+        setOptionsKandang([]);
+        setOpenSelectKandangs(false);
+      }
+    }
+  }, [kandang]);
+
+  // Options Handler
+  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('area_id', true);
+    formik.setFieldValue('area_id', (val as OptionType)?.value);
+
+    formik.setFieldValue('area', val);
+
+    setSelectedArea((val as OptionType)?.value as string);
+    const disabled = (val as OptionType)?.value == null;
+    setDisabledLocation(disabled);
+
+    formik.setFieldValue('location', null);
+    formik.setFieldValue('location_id', 0);
+    formik.setFieldTouched('location', false);
+    formik.setFieldTouched('location_id', false);
+  };
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation((val as OptionType)?.value as string);
+    optionChangeHandler(val, 'location');
+    formik.setFieldValue('kandang_ids', []);
+  };
+
+  const optionChangeHandler = (
+    val: OptionType | OptionType[] | null,
+    inputName: string
+  ) => {
+    formik.setFieldValue(inputName, val);
+
+    formik.setFieldValue(
+      `${inputName}_id`,
+      val ? (val as OptionType)?.value : 0
+    );
+    formik.setFieldTouched(`${inputName}_id`, true);
+  };
+
+  const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value, checked } = event.target;
+    if (checked) {
+      formik.setFieldValue(
+        'kandang_ids',
+        formik.values.kandang_ids.concat(parseInt(value))
+      );
+    } else {
+      formik.setFieldValue(
+        'kandang_ids',
+        formik.values.kandang_ids.filter((id) => id !== parseInt(value))
+      );
+    }
+  };
+  const kandangCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = event.target;
+    if (checked) {
+      formik.setFieldValue(
+        'kandang_ids',
+        optionsKandang.map((kandang) => kandang.id)
+      );
+    } else {
+      formik.setFieldValue('kandang_ids', []);
+    }
+  };
+
+  // Submit Handler
+  const createProjectFlockHandler = async (
+    payload: CreateProjectFlockPayload
+  ) => {
+    const createProjectFlockRes = await ProjectFlockApi.create(payload);
+
+    if (isResponseSuccess(createProjectFlockRes)) {
+      toast.success(createProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(createProjectFlockRes)) {
+      setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
+      // toast.ersror(createProjectFlockRes?.message as string);
+    }
+  };
+
+  // Formik InitialValue
+  const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      flock: initialValues?.flock
+        ? {
+            value: initialValues.flock.id,
+            label: initialValues.flock.name,
+          }
+        : null,
+      area: initialValues?.area
+        ? {
+            value: initialValues.area.id,
+            label: initialValues.area.name,
+          }
+        : null,
+      product_category: initialValues?.product_category
+        ? {
+            value: initialValues.product_category.id,
+            label: initialValues.product_category.name,
+          }
+        : null,
+      fcr: initialValues?.fcr
+        ? {
+            value: initialValues.fcr.id,
+            label: initialValues.fcr.name,
+          }
+        : null,
+      location: initialValues?.location
+        ? {
+            value: initialValues.location.id,
+            label: initialValues.location.name,
+          }
+        : null,
+      flock_id: initialValues?.flock_id ?? 0,
+      area_id: 0,
+      product_category_id: 0,
+      fcr_id: 0,
+      location_id: 0,
+      period: initialValues?.period ?? 0,
+      kandang_ids: [],
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<ProjectFlockFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
+    validateOnBlur: true,
+    validateOnChange: true,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      setProjectFlockFormErrorMessage('');
+      const payload: CreateProjectFlockPayload = {
+        name: values.name as string,
+        flock_id: values.flock_id as number,
+        area_id: values.area_id as number,
+        product_category_id: values.product_category_id as number,
+        fcr_id: values.fcr_id as number,
+        location_id: values.location_id as number,
+        period: values.period as number,
+        kandang_ids: values.kandang_ids as number[],
+      };
+
+      switch (formType) {
+        case 'add':
+          await createProjectFlockHandler(payload);
+          break;
+        case 'detail':
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+  // Effect Initial
+  useEffect(() => {
+    console.log('Initial Value');
+    console.log(initialValues);
+    if(formType == 'detail'){
+      formik.setFieldValue('area', {
+        value: initialValues.area.id,
+        label: initialValues.area.name,
+      });
+      formik.setFieldValue('area_id', initialValues.area_id);
+      setSelectedArea(initialValues.area?.id);
+  
+      formik.setFieldValue('period', initialValues.period);
+    }
+  }, [initialValues, setSelectedArea, formType]);
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+  // Aktifkan lokasi jika formType = 'detail'
+  useEffect(() => {
+    if (formType === 'detail') {
+      setDisabledLocation(false);
+    }
+  }, [formType]);
+
+  // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
+  useEffect(() => {
+    if (formType === 'detail' && initialValues?.location?.id) {
+      setSelectedLocation(initialValues.location?.id.toString());
+      setDisabledLocation(false); // biar dropdown lokasi aktif juga
+    }
+  }, [formType, initialValues]);
+
+  // Setelah data kandang difetch, centang otomatis kandang yang ada di initialValues
+  useEffect(() => {
+    if (formType === 'detail' && isResponseSuccess(kandang)) {
+      setOptionsKandang(kandang.data);
+      setOpenSelectKandangs(true);
+
+      // Ambil ID dari initialValues.kandangs
+      const kandangIds =
+        initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [];
+
+      // Set nilai ke formik
+      formik.setFieldValue('kandang_ids', kandangIds);
+    }
+  }, [formType, kandang, initialValues]);
+
+  return (
+    <>
+      <section className='w-full'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/production/project-flock'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {formType === 'add' && 'Tambah Project Flock'}
+            {formType === 'detail' && 'Detail Project Flock'}
+          </h1>
+        </header>
+        {projectFlockFormErrorMessage && (
+          <div className='my-4'>
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{projectFlockFormErrorMessage}</span>
+              <Button
+                onClick={() => {
+                  setProjectFlockFormErrorMessage('');
+                }}
+                variant='link'
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+              </Button>
+            </div>
+          </div>
+        )}
+        <form
+          className='w-auto h-auto'
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+        >
+          <div className='card bg-base-100 shadow w-full mb-6'>
+            <div className='card-body'>
+              <div className='card-title mb-4'>Informasi Umum</div>
+
+              <div className='grid grid-cols-2 gap-4'>
+                {formType != 'detail' && (
+                  <div className='col-span-2'>
+                    <TextInput
+                      required
+                      name='name'
+                      label='Nama Project Flock'
+                      placeholder='Masukan nama project flock'
+                      value={formik.values.name}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      isError={
+                        formik.touched.name && Boolean(formik.errors.name)
+                      }
+                      errorMessage={formik.errors.name}
+                    />
+                  </div>
+                )}
+                <SelectInput
+                  required
+                  label='Area'
+                  value={formik.values.area as OptionType}
+                  onChange={areaChangeHandler}
+                  options={optionsArea}
+                  isLoading={isLoadingAreas}
+                  isError={formik.touched.area && Boolean(formik.errors.area)}
+                  errorMessage={formik.errors.area as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+                />
+                <SelectInput
+                  required
+                  label='Flock'
+                  value={formik.values.flock as OptionType}
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'flock');
+                  }}
+                  options={optionsFlock}
+                  isLoading={isLoadingFlocks}
+                  isError={formik.touched.flock && Boolean(formik.errors.flock)}
+                  errorMessage={formik.errors.flock as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+
+                />
+                <SelectInput
+                  required
+                  label='Lokasi'
+                  value={formik.values.location as OptionType}
+                  onChange={locationChangeHandler}
+                  options={optionsLocation}
+                  isLoading={isLoadingLocations}
+                  isError={
+                    formik.touched.location && Boolean(formik.errors.location)
+                  }
+                  errorMessage={formik.errors.location as string}
+                  isClearable
+                  isDisabled={formType === 'detail' || disabledLocation}
+                />
+                <SelectInput
+                  required
+                  label='FCR'
+                  value={formik.values.fcr as OptionType}
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'fcr');
+                  }}
+                  options={optionsFcr}
+                  isLoading={isLoadingFcrs}
+                  isError={formik.touched.fcr && Boolean(formik.errors.fcr)}
+                  errorMessage={formik.errors.fcr as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+                />
+                <SelectInput
+                  required
+                  label='Kategori Produk'
+                  value={formik.values.product_category as OptionType}
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'product_category');
+                  }}
+                  options={optionsProductCategory}
+                  isLoading={isLoadingProductCategories}
+                  isError={
+                    formik.touched.product_category &&
+                    Boolean(formik.errors.product_category)
+                  }
+                  errorMessage={formik.errors.product_category as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+
+                />
+                <TextInput
+                  required
+                  type='number'
+                  name='period'
+                  label='Periode'
+                  value={formik.values.period as number}
+                  onChange={formik.handleChange}
+                  isError={
+                    formik.touched.period && Boolean(formik.errors.period)
+                  }
+                  errorMessage={formik.errors.period as string}
+                  readOnly={formType === 'detail'}
+                />
+              </div>
+            </div>
+          </div>
+          <div className='card bg-base-100 shadow w-full'>
+            <div className='card-body'>
+              <Collapse
+                title={
+                  <div className='card-actions justify-between w-full'>
+                    <div className='card-title'>Pilih Kandang</div>
+                    <Button
+                      variant='link'
+                      className='text-primary rotate-0 transition-transform hover:text-inherit'
+                    >
+                      <Icon
+                        icon='material-symbols:keyboard-arrow-down'
+                        width={24}
+                        height={24}
+                      />
+                    </Button>
+                  </div>
+                }
+                className='w-full size-full'
+                titleClassName='w-full p-0!'
+                onOpenChange={setOpenSelectKandangs}
+                open={openSelectKandangs}
+              >
+                <div className='overflow-x-auto'>
+                  <table className='table'>
+                    {/* head */}
+                    <thead>
+                      <tr>
+                        <th>
+                          <label>
+                            <input
+                              type='checkbox'
+                              checked={
+                                formik.values.kandang_ids.length ===
+                                optionsKandang.length
+                              }
+                              className='checkbox'
+                              onChange={
+                                formType === 'detail'
+                                  ? () => {}
+                                  : kandangCheckAll
+                              }
+                            />
+                          </label>
+                        </th>
+                        <th>Kandang</th>
+                        <th>Penanggung Jawab</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {/* rows */}
+                      {selectedLocation != '' &&
+                        optionsKandang.map((kandang) => (
+                          <tr key={kandang.id}>
+                            <th>
+                              <label>
+                                <input
+                                  value={kandang.id}
+                                  type='checkbox'
+                                  className='checkbox'
+                                  checked={formik.values.kandang_ids.includes(
+                                    kandang.id
+                                  )}
+                                  onChange={
+                                    formType === 'detail'
+                                      ? () => {}
+                                      : kandangChangeHandler
+                                  }
+                                />
+                              </label>
+                            </th>
+                            <td>{kandang.name}</td>
+                            <td>{kandang.pic?.name}</td>
+                          </tr>
+                        ))}
+                      {selectedLocation == '' && (
+                        <tr>
+                          <td colSpan={3} className='text-center text-muted'>
+                            Data tidak tersedia
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                    {/* foot */}
+                    {selectedLocation != '' && (
+                      <tfoot>
+                        <tr>
+                          <th></th>
+                          <th>Kandang</th>
+                          <th>Penanggung Jawab</th>
+                        </tr>
+                      </tfoot>
+                    )}
+                  </table>
+                </div>
+              </Collapse>
+            </div>
+          </div>
+
+          <div className='flex flex-row justify-center gap-2 flex-wrap my-6'>
+            {formType !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2'>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={formik.handleReset}
+                >
+                  Reset
+                </Button>
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+        </form>
+      </section>
+    </>
+  );
+};
+
+export default ProjectFlockForm;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 97e4c285..2d15c62d 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -12,6 +12,52 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'gg:chart',
   },
 
+  {
+    title: 'Flock',
+    link: '/production',
+    icon: 'material-symbols:raven-outline-rounded',
+    submenu: [
+      {
+        title: 'List Flock',
+        link: '/production/project-flock',
+        icon: 'material-symbols:list-alt-add-outline-rounded',
+      },
+      {
+        title: 'Chick In',
+        link: '/production/chick-in',
+        icon: 'mdi:home-import-outline',
+      },
+      {
+        title: 'Recording',
+        link: '/production/recording',
+        icon: 'mdi:clipboard-text',
+      },
+    ],
+  },
+
+  {
+    title: 'Persediaan',
+    link: '/inventory',
+    icon: 'mdi:warehouse',
+    submenu: [
+      {
+        title: 'Product',
+        link: '/inventory/product',
+        icon: 'mdi:package-variant-closed',
+      },
+      {
+        title: 'Penyesuaian Stok',
+        link: '/inventory/adjustment',
+        icon: 'mdi:database-edit',
+      },
+      {
+        title: 'Transfer Stok',
+        link: '/inventory/movement',
+        icon: 'mdi:swap-horizontal',
+      },
+    ],
+  },
+
   {
     title: 'Master Data',
     link: '/master-data',
@@ -80,24 +126,13 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
       {
         title: 'Flock',
         link: '/master-data/flock',
-        icon: 'material-symbols:raven-outline-rounded',
+        icon: 'material-symbols:raven-outline-rounded'
       },
     ],
   },
-  {
-    title: 'Persediaan',
-    link: '/inventory',
-    icon: 'material-symbols:box-outline-rounded',
-    submenu: [
-      {
-        title: 'Penyesuaian Persediaan',
-        link: '/inventory/adjustment',
-        icon: 'material-symbols:box-edit-outline-rounded',
-      }
-    ]
-  },
 ] as const;
 
+
 export const ROWS_OPTIONS = [
   {
     label: '10',
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
new file mode 100644
index 00000000..16234161
--- /dev/null
+++ b/src/services/api/production.ts
@@ -0,0 +1,11 @@
+import {
+  ProjectFlock,
+  CreateProjectFlockPayload,
+} from '@/types/api/production/project-flock';
+import { BaseApiService } from './base';
+
+export const ProjectFlockApi = new BaseApiService<
+  ProjectFlock,
+  CreateProjectFlockPayload,
+  unknown
+>('/production/project_flocks');
\ No newline at end of file
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..fd28ab91
--- /dev/null
+++ b/src/types/api/production/project-flock.d.ts
@@ -0,0 +1,38 @@
+import { Area } from "../master-data/area";
+import { Fcr } from "../master-data/fcr";
+import { Flock } from "../master-data/flock";
+import { Kandang } from "../master-data/kandang";
+import { Location } from "../master-data/location";
+import { ProductCategory } from "../master-data/product-category";
+
+export type BaseProjectFlock = {
+  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;
\ No newline at end of file

From 8c662a51528b404f08cc82744600b2edc2e599f8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 09:22:49 +0700
Subject: [PATCH 058/212] refactor(FE-65): update DeliveryObjectSchema to
 enforce minimum delivery costs of 1

---
 .../pages/inventory/movement/form/MovementForm.schema.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index d5d660ae..f33888e2 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -58,11 +58,11 @@ const DeliveryProductObjectSchema = Yup.object({
 const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
   delivery_cost: Yup.number()
     .required('Biaya pengiriman wajib diisi!')
-    .min(0, 'Biaya minimal 0!')
+    .min(1, 'Biaya minimal 1!')
     .typeError('Biaya harus berupa angka!'),
   delivery_cost_per_item: Yup.number()
     .transform((value) => (isNaN(value) ? undefined : value))
-    .min(0, 'Biaya per item minimal 0!')
+    .min(1, 'Biaya per item minimal 1!')
     .typeError('Biaya per item harus berupa angka!'),
   document_index: Yup.number().optional(),
   document: Yup.mixed<File | string>()

From 8bf7603f6652cff01dcbb1ca292fb0e7b9eb7903 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 09:46:07 +0700
Subject: [PATCH 059/212] refactor(FE-64): update MovementTable and
 TableRowOptions to conditionally show edit and delete options

---
 .../inventory/movement/MovementTable.tsx      |  6 +++--
 src/components/table/TableRowOptions.tsx      | 26 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index e0bc9541..61be40f8 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -157,8 +157,9 @@ const MovementTable = () => {
                         type='dropdown'
                         recordId={props.row.original.id}
                         basePath='/inventory/movement'
-                        onDelete={deleteClickHandler}
                         queryParam='movementId'
+                        showEdit={false}
+                        showDelete={false}
                       />
                     </RowDropdownOptions>
                   )}
@@ -169,8 +170,9 @@ const MovementTable = () => {
                         type='collapse'
                         recordId={props.row.original.id}
                         basePath='/inventory/movement'
-                        onDelete={deleteClickHandler}
                         queryParam='movementId'
+                        showEdit={false}
+                        showDelete={false}
                       />
                     </RowCollapseOptions>
                   )}
diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx
index e34f2ad4..4e2e2c93 100644
--- a/src/components/table/TableRowOptions.tsx
+++ b/src/components/table/TableRowOptions.tsx
@@ -8,6 +8,8 @@ interface TableRowOptionsProps {
   basePath: string;
   onDelete?: () => void;
   queryParam?: string;
+  showEdit?: boolean;
+  showDelete?: boolean;
 }
 
 export const TableRowOptions = ({
@@ -16,6 +18,8 @@ export const TableRowOptions = ({
   basePath,
   onDelete,
   queryParam = 'id',
+  showEdit = true,
+  showDelete = true,
 }: TableRowOptionsProps) => (
   <div
     tabIndex={type === 'dropdown' ? 0 : undefined}
@@ -36,16 +40,18 @@ export const TableRowOptions = ({
       <Icon icon='mdi:eye-outline' width={16} height={16} />
       Detail
     </Button>
-    <Button
-      href={`${basePath}/detail/edit/?${queryParam}=${recordId}`}
-      variant='ghost'
-      color='warning'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:pencil-outline' width={16} height={16} />
-      Edit
-    </Button>
-    {onDelete && (
+    {showEdit && (
+      <Button
+        href={`${basePath}/detail/edit/?${queryParam}=${recordId}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:pencil-outline' width={16} height={16} />
+        Edit
+      </Button>
+    )}
+    {showDelete && onDelete && (
       <Button
         onClick={onDelete}
         variant='ghost'

From caac9c20e656237d1f4258f9ff2d78086a085725 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 10:12:53 +0700
Subject: [PATCH 060/212] refactor(FE-62): update MovementForm layout to
 improve responsiveness with grid system

---
 src/components/pages/inventory/movement/form/MovementForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 0483b4c1..3ff448f8 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -688,7 +688,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           {/* Top card - Movement details */}
           <div className='card bg-base-100 shadow mb-4'>
             <div className='card-body'>
-              <div className='flex gap-4'>
+              <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
                 <TextInput
                   required
                   label='Alasan Transfer'
@@ -723,7 +723,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           </div>
 
           {/* Warehouse cards */}
-          <div className='grid grid-cols-2 gap-4 mb-4'>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
             <div className='card bg-base-100 shadow'>
               <div className='card-body space-y-4'>
                 <h3 className='card-title text-lg'>Gudang Asal</h3>

From cfb9b53b5444461a29425869c111d3ce3043ce6f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 10:13:14 +0700
Subject: [PATCH 061/212] refactor(FE-63): simplify createMovementHandler by
 removing unnecessary payload checks

---
 .../movement/form/useMovementFormHandlers.ts  | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
index 5c3d80d1..0ad31e38 100644
--- a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
+++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts
@@ -17,23 +17,16 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const createMovementHandler = useCallback(
     async (payload: CreateMovementPayload, documents: File[] = []) => {
-      let finalPayload: CreateMovementPayload | FormData;
+      const formData = new FormData();
+      formData.append('data', JSON.stringify(payload));
+      documents.forEach((file, index) => {
+        formData.append(`documents[${index}]`, file);
+      });
 
-      if (documents.length > 0) {
-        const formData = new FormData();
-        formData.append('data', JSON.stringify(payload));
-        documents.forEach((file, index) => {
-          formData.append(`documents[${index}]`, file);
-        });
-
-        finalPayload = formData as unknown as CreateMovementPayload;
-      } else {
-        finalPayload = payload;
-      }
-
-      const res = await MovementApi.create(finalPayload);
+      const res = await MovementApi.create(
+        formData as unknown as CreateMovementPayload
+      );
       if (isResponseError(res)) {
-        console.error('API Error:', res);
         setMovementFormErrorMessage(res.message);
         return;
       }

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 062/212] 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 063/212] 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 7abe9b7dc6ac11f806dd5a8aeebd42f1acec643e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 16:48:35 +0700
Subject: [PATCH 064/212] refactor(FE-63,65): update Movement types and schema
 to include area and location for warehouses

---
 .../movement/form/MovementForm.schema.ts      | 42 ++++++++++++-------
 src/types/api/inventory/movement.d.ts         | 24 ++++++++---
 2 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index f33888e2..11404782 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -92,6 +92,8 @@ export const MovementFormSchema = Yup.object({
   source_warehouse: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
+    area: Yup.string().optional(),
+    location: Yup.string().optional(),
   }).nullable(),
   source_warehouse_id: Yup.number()
     .required('Gudang asal wajib diisi!')
@@ -99,6 +101,8 @@ export const MovementFormSchema = Yup.object({
   destination_warehouse: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
+    area: Yup.string().optional(),
+    location: Yup.string().optional(),
   }).nullable(),
   destination_warehouse_id: Yup.number()
     .required('Gudang tujuan wajib diisi!')
@@ -120,9 +124,12 @@ export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 export const getMovementFormInitialValues = (
   initialValues?: Movement
 ): MovementFormValues => {
-  const detailIdToProductId = new Map<number, number>();
+  const detailIdToProductId = new Map<number, { id: number; name: string }>();
   initialValues?.details?.forEach((detail) => {
-    detailIdToProductId.set(detail.id, detail.product_id);
+    detailIdToProductId.set(detail.id, {
+      id: detail.product.id,
+      name: detail.product.name,
+    });
   });
 
   return {
@@ -132,6 +139,8 @@ export const getMovementFormInitialValues = (
       ? {
           value: initialValues.source_warehouse.id,
           label: initialValues.source_warehouse.name,
+          area: initialValues.source_warehouse.area?.name,
+          location: initialValues.source_warehouse.location?.name,
         }
       : null,
     source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
@@ -139,14 +148,19 @@ export const getMovementFormInitialValues = (
       ? {
           value: initialValues.destination_warehouse.id,
           label: initialValues.destination_warehouse.name,
+          area: initialValues.destination_warehouse.area?.name,
+          location: initialValues.destination_warehouse.location?.name,
         }
       : null,
     destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
     products:
-      initialValues?.details?.map((p) => ({
-        product: { value: p.product_id, label: `Product ID: ${p.product_id}` },
-        product_id: p.product_id,
-        product_qty: p.quantity,
+      initialValues?.details?.map((detail) => ({
+        product: {
+          value: detail.product.id,
+          label: detail.product.name,
+        },
+        product_id: detail.product.id,
+        product_qty: detail.quantity,
       })) ?? [],
     deliveries:
       initialValues?.deliveries?.map((d) => {
@@ -160,16 +174,16 @@ export const getMovementFormInitialValues = (
           supplier: d.supplier
             ? { value: d.supplier.id, label: d.supplier.name }
             : null,
-          supplier_id: d.supplier_id,
+          supplier_id: d.supplier?.id ?? 0,
           products: d.items.map((item) => {
-            const productId =
-              detailIdToProductId.get(item.stock_transfer_detail_id) ?? 0;
+            const productData = detailIdToProductId.get(
+              item.stock_transfer_detail_id
+            );
             return {
-              product:
-                productId > 0
-                  ? { value: productId, label: `Product ID: ${productId}` }
-                  : null,
-              product_id: productId,
+              product: productData
+                ? { value: productData.id, label: productData.name }
+                : null,
+              product_id: productData?.id ?? 0,
               product_qty: item.quantity,
             };
           }),
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index 9e156a1e..87a03f95 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -1,23 +1,37 @@
 import { BaseMetadata } from '@/types/api/api-general';
 import { Supplier } from '@/types/api/master-data/supplier';
-import { Warehouse } from '@/types/api/master-data/warehouse';
+
+type MovementWarehouse = {
+  id: number;
+  name: string;
+  location: {
+    id: number;
+    name: string;
+  } | null;
+  area: {
+    id: number;
+    name: string;
+  };
+};
 
 export type BaseMovement = {
   id: number;
   transfer_reason: string;
   transfer_date: string;
-  source_warehouse: Warehouse;
-  destination_warehouse: Warehouse;
+  source_warehouse: MovementWarehouse;
+  destination_warehouse: MovementWarehouse;
   details: {
     id: number;
-    product_id: number;
+    product: {
+      id: number;
+      name: string;
+    };
     quantity: number;
     before_quantity: number;
     after_quantity: number;
   }[];
   deliveries: {
     id: number;
-    supplier_id: number;
     supplier: Supplier;
     vehicle_plate: string;
     driver_name: string;

From edb5f30d6cc673e47479c342aea2cf2866b44c64 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 16:48:52 +0700
Subject: [PATCH 065/212] refactor(FE-62): remove unused product fetching logic
 from MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 171 ------------------
 1 file changed, 171 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 3ff448f8..d29ae851 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -28,7 +28,6 @@ import { useMovementFormHandlers } from './useMovementFormHandlers';
 import {
   SupplierApi,
   WarehouseApi,
-  ProductApi,
 } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
@@ -47,9 +46,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
-  const [fetchedProductIds, setFetchedProductIds] = useState<Set<number>>(
-    new Set()
-  );
 
   const {
     deleteModal,
@@ -355,173 +351,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     }
   }, [formik.values.source_warehouse_id]);
 
-  // Effect to populate product labels from ProductWarehouse data
-  useEffect(() => {
-    if (!productWarehouses || !isResponseSuccess(productWarehouses)) return;
-    if (type !== 'edit' && type !== 'detail') return;
-
-    let hasUpdates = false;
-    const updatedProducts = formik.values.products?.map((product) => {
-      if (product.product && product.product.label.startsWith('Product ID:')) {
-        const productWarehouse = productWarehouses.data.find(
-          (pw) => pw.product.id === product.product_id
-        );
-        if (productWarehouse) {
-          hasUpdates = true;
-          return {
-            ...product,
-            product: {
-              value: productWarehouse.product.id,
-              label: productWarehouse.product.name,
-            },
-          };
-        }
-      }
-      return product;
-    });
-
-    if (hasUpdates && updatedProducts) {
-      formik.setFieldValue('products', updatedProducts);
-
-      const updatedDeliveries = formik.values.deliveries?.map((delivery) => {
-        const updatedDeliveryProducts = delivery.products.map(
-          (deliveryProduct) => {
-            if (
-              deliveryProduct.product &&
-              deliveryProduct.product.label.startsWith('Product ID:')
-            ) {
-              const productWarehouse = productWarehouses.data.find(
-                (pw) => pw.product.id === deliveryProduct.product_id
-              );
-              if (productWarehouse) {
-                return {
-                  ...deliveryProduct,
-                  product: {
-                    value: productWarehouse.product.id,
-                    label: productWarehouse.product.name,
-                  },
-                };
-              }
-            }
-            return deliveryProduct;
-          }
-        );
-        return {
-          ...delivery,
-          products: updatedDeliveryProducts,
-        };
-      });
-      formik.setFieldValue('deliveries', updatedDeliveries);
-    }
-  }, [productWarehouses, type]);
-
-  useEffect(() => {
-    if (type !== 'edit' && type !== 'detail') return;
-
-    const productIdsToFetch: number[] = [];
-
-    formik.values.products?.forEach((product) => {
-      if (
-        product.product &&
-        product.product.label.startsWith('Product ID:') &&
-        product.product_id > 0 &&
-        !fetchedProductIds.has(product.product_id)
-      ) {
-        productIdsToFetch.push(product.product_id);
-      }
-    });
-
-    formik.values.deliveries?.forEach((delivery) => {
-      delivery.products.forEach((deliveryProduct) => {
-        if (
-          deliveryProduct.product &&
-          deliveryProduct.product.label.startsWith('Product ID:') &&
-          deliveryProduct.product_id > 0 &&
-          !fetchedProductIds.has(deliveryProduct.product_id)
-        ) {
-          if (!productIdsToFetch.includes(deliveryProduct.product_id)) {
-            productIdsToFetch.push(deliveryProduct.product_id);
-          }
-        }
-      });
-    });
-
-    if (productIdsToFetch.length === 0) return;
-
-    const fetchProducts = async () => {
-      const productMap = new Map<number, { id: number; name: string }>();
-      const newFetchedIds = new Set(fetchedProductIds);
-
-      for (const productId of productIdsToFetch) {
-        try {
-          const response = await ProductApi.getSingle(productId);
-          if (isResponseSuccess(response)) {
-            const product = response.data;
-            productMap.set(product.id, { id: product.id, name: product.name });
-            newFetchedIds.add(productId);
-          }
-        } catch (error) {
-          console.error(`Failed to fetch product ${productId}:`, error);
-          newFetchedIds.add(productId);
-        }
-      }
-
-      if (productMap.size > 0) {
-        const updatedProducts = formik.values.products?.map((p) => {
-          const productData = productMap.get(p.product_id);
-          if (productData) {
-            return {
-              ...p,
-              product: {
-                value: productData.id,
-                label: productData.name,
-              },
-            };
-          }
-          return p;
-        });
-
-        const updatedDeliveries = formik.values.deliveries?.map((delivery) => {
-          const updatedDeliveryProducts = delivery.products.map(
-            (deliveryProduct) => {
-              const productData = productMap.get(deliveryProduct.product_id);
-              if (productData) {
-                return {
-                  ...deliveryProduct,
-                  product: {
-                    value: productData.id,
-                    label: productData.name,
-                  },
-                };
-              }
-              return deliveryProduct;
-            }
-          );
-          return {
-            ...delivery,
-            products: updatedDeliveryProducts,
-          };
-        });
-
-        if (updatedProducts) {
-          formik.setFieldValue('products', updatedProducts);
-        }
-        if (updatedDeliveries) {
-          formik.setFieldValue('deliveries', updatedDeliveries);
-        }
-      }
-
-      setFetchedProductIds(newFetchedIds);
-    };
-
-    fetchProducts();
-  }, [
-    formik.values.products,
-    formik.values.deliveries,
-    type,
-    fetchedProductIds,
-  ]);
-
   const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
       formik.values.products

From f05d367a5da1a1d4e94365ae7c6aa7c668e0bc46 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 18:51:35 +0700
Subject: [PATCH 066/212] refactor(FE-65): enhance delivery cost validation and
 calculation in MovementForm

---
 .../movement/form/MovementForm.schema.ts      |  32 ++++-
 .../inventory/movement/form/MovementForm.tsx  | 110 ++++++++++++++----
 2 files changed, 117 insertions(+), 25 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 11404782..2cc5d910 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -11,7 +11,7 @@ export type ProductSchema = {
 };
 
 export type DeliverySchema = {
-  delivery_cost: number;
+  delivery_cost?: number | undefined;
   delivery_cost_per_item?: number | undefined;
   document?: File | string | null;
   driver_name: string;
@@ -57,13 +57,35 @@ const DeliveryProductObjectSchema = Yup.object({
 
 const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
   delivery_cost: Yup.number()
-    .required('Biaya pengiriman wajib diisi!')
+    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
     .min(1, 'Biaya minimal 1!')
-    .typeError('Biaya harus berupa angka!'),
+    .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)
+        );
+      }
+    ),
   delivery_cost_per_item: Yup.number()
-    .transform((value) => (isNaN(value) ? undefined : value))
+    .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
     .min(1, 'Biaya per item minimal 1!')
-    .typeError('Biaya per item harus berupa angka!'),
+    .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)
+        );
+      }
+    ),
   document_index: Yup.number().optional(),
   document: Yup.mixed<File | string>()
     .nullable()
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d29ae851..2ec06e66 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -83,7 +83,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         }
 
         return {
-          delivery_cost: d.delivery_cost,
+          delivery_cost: d.delivery_cost ?? 0,
           delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
           document_index: documentIndex,
           driver_name: d.driver_name,
@@ -163,8 +163,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formik.setFieldValue('deliveries', [
       ...(formik.values.deliveries || []),
       {
-        delivery_cost: 0,
-        delivery_cost_per_item: 0,
+        delivery_cost: undefined,
+        delivery_cost_per_item: undefined,
         document: null,
         driver_name: '',
         vehicle_plate: '',
@@ -324,21 +324,86 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
     : [];
 
+  // Handle cost calculation when delivery_cost changes
+  const handleDeliveryCostChange = useCallback(
+    (idx: number, value: string) => {
+      const numValue = parseFloat(value) || 0;
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, numValue);
+
+      const delivery = formik.values.deliveries?.[idx];
+      if (delivery) {
+        const productQty = delivery.products.reduce(
+          (sum, p) => sum + p.product_qty,
+          0
+        );
+        if (productQty > 0 && numValue > 0) {
+          const perItem = numValue / productQty;
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
+        } else if (numValue === 0) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
+        }
+      }
+    },
+    [formik]
+  );
+
+  // Handle cost calculation when delivery_cost_per_item changes
+  const handleDeliveryCostPerItemChange = useCallback(
+    (idx: number, value: string) => {
+      const numValue = parseFloat(value) || 0;
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, numValue);
+
+      const delivery = formik.values.deliveries?.[idx];
+      if (delivery) {
+        const productQty = delivery.products.reduce(
+          (sum, p) => sum + p.product_qty,
+          0
+        );
+        if (productQty > 0 && numValue > 0) {
+          const totalCost = numValue * productQty;
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+        } else if (numValue === 0) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, 0);
+        }
+      }
+    },
+    [formik]
+  );
+
+  // Auto-recalculate when product quantity changes
   useEffect(() => {
     formik.values.deliveries?.forEach((delivery, idx) => {
       const productQty = delivery.products.reduce(
         (sum, p) => sum + p.product_qty,
         0
       );
-      if (productQty && delivery.delivery_cost) {
+
+      // If delivery_cost is set, recalculate delivery_cost_per_item
+      if (delivery.delivery_cost && delivery.delivery_cost > 0 && productQty > 0) {
         const perItem = delivery.delivery_cost / productQty;
-        formik.setFieldValue(
-          `deliveries.${idx}.delivery_cost_per_item`,
-          perItem
-        );
+        if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
+        }
+      }
+      // If delivery_cost_per_item is set, recalculate delivery_cost
+      else if (
+        delivery.delivery_cost_per_item &&
+        delivery.delivery_cost_per_item > 0 &&
+        productQty > 0
+      ) {
+        const totalCost = delivery.delivery_cost_per_item * productQty;
+        if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+        }
       }
     });
-  }, [formik.values.deliveries]);
+  }, [formik.values.deliveries?.map(d => d.products.reduce((sum, p) => sum + p.product_qty, 0)).join(',')]);
 
   useEffect(() => {
     if (
@@ -1039,8 +1104,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             type='number'
                             name={`deliveries.${idx}.delivery_cost`}
-                            value={delivery.delivery_cost}
-                            onChange={formik.handleChange}
+                            value={delivery.delivery_cost || ''}
+                            onChange={(e) =>
+                              handleDeliveryCostChange(idx, e.target.value)
+                            }
                             onBlur={formik.handleBlur}
                             {...isRepeaterInputError(
                               'deliveries',
@@ -1052,17 +1119,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         </td>
                         <td>
                           <TextInput
-                            disabled
+                            required
+                            type='number'
                             name={`deliveries.${idx}.delivery_cost_per_item`}
-                            value={
-                              delivery.delivery_cost_per_item?.toLocaleString(
-                                'id-ID'
-                              ) ?? '0'
+                            value={delivery.delivery_cost_per_item || ''}
+                            onChange={(e) =>
+                              handleDeliveryCostPerItemChange(idx, e.target.value)
                             }
-                            readOnly
-                            className={{
-                              input: 'bg-base-200',
-                            }}
+                            onBlur={formik.handleBlur}
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'delivery_cost_per_item',
+                              idx
+                            )}
+                            readOnly={type === 'detail'}
                           />
                         </td>
                         <td>

From 0676411dd5d65344e5340ef747889d04e5f11327 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 19:23:19 +0700
Subject: [PATCH 067/212] refactor(FE-62,65): enhance product quantity display
 and stock information in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 109 +++++++++++-------
 1 file changed, 66 insertions(+), 43 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 2ec06e66..d77f2de4 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -266,6 +266,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     location?: string;
   }
 
+  interface ProductWarehouseOptionType extends OptionType {
+    product_id: number;
+    warehouse_id: number;
+    warehouse_name: string;
+    quantity: number;
+  }
+
   // Warehouse selection
   const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
     useState('');
@@ -304,8 +311,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     );
   const productWarehouseOptions = isResponseSuccess(productWarehouses)
     ? productWarehouses?.data.map((pw) => ({
-        value: pw.id,
-        label: pw.product.name,
+        value: pw.product.id,
+        label: `${pw.product.name} - ${pw.warehouse.name} (Stock: ${pw.quantity.toLocaleString('id-ID')})`,
         product_id: pw.product.id,
         warehouse_id: pw.warehouse.id,
         warehouse_name: pw.warehouse.name,
@@ -438,6 +445,33 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [productWarehouseOptions, type]
   );
 
+  const getProductQtyAdornment = useCallback(
+    (productIdx: number) => {
+      if (type === 'detail') return null;
+      const product = formik.values.products?.[productIdx];
+      if (!product || !product.product_id) return null;
+
+      const availableStock = getAvailableStock(product.product_id);
+      const requestedQty = Number(product.product_qty) || 0;
+      const remainingStock = availableStock - requestedQty;
+
+      if (requestedQty > 0) {
+        return (
+          <span className='text-sm text-gray-600 whitespace-nowrap'>
+            (sisa: {remainingStock.toLocaleString('id-ID')})
+          </span>
+        );
+      }
+
+      return (
+        <span className='text-sm text-gray-600 whitespace-nowrap'>
+          (tersedia: {availableStock.toLocaleString('id-ID')})
+        </span>
+      );
+    },
+    [formik.values.products, getAvailableStock, type]
+  );
+
   const getProductQtyError = useCallback(
     (productIdx: number) => {
       if (type === 'detail') return null;
@@ -813,7 +847,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               );
                               formik.setFieldValue(
                                 `products.${idx}.product_id`,
-                                (val as OptionType)?.value
+                                (val as ProductWarehouseOptionType)?.value
                               );
                             }}
                             options={productWarehouseOptions}
@@ -837,46 +871,35 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <div className='flex flex-col gap-2'>
-                            <TextInput
-                              required
-                              type='number'
-                              name={`products.${idx}.product_qty`}
-                              value={product.product_qty ?? ''}
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              isError={
-                                isRepeaterInputError(
-                                  'products',
-                                  'product_qty',
-                                  idx
-                                ).isError || Boolean(getProductQtyError(idx))
-                              }
-                              errorMessage={
-                                isRepeaterInputError(
-                                  'products',
-                                  'product_qty',
-                                  idx
-                                ).errorMessage ||
-                                getProductQtyError(idx) ||
-                                undefined
-                              }
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'w-full min-w-24',
-                              }}
-                            />
-                            {type !== 'detail' && product.product_id && (
-                              <div className='text-sm text-gray-600'>
-                                <span className='font-semibold'>
-                                  Stok tersedia:
-                                </span>{' '}
-                                {getAvailableStock(
-                                  product.product_id
-                                ).toLocaleString('id-ID')}
-                              </div>
-                            )}
-                          </div>
+                          <TextInput
+                            required
+                            type='number'
+                            name={`products.${idx}.product_qty`}
+                            value={product.product_qty ?? ''}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            endAdornment={getProductQtyAdornment(idx)}
+                            isError={
+                              isRepeaterInputError(
+                                'products',
+                                'product_qty',
+                                idx
+                              ).isError || Boolean(getProductQtyError(idx))
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'products',
+                                'product_qty',
+                                idx
+                              ).errorMessage ||
+                              getProductQtyError(idx) ||
+                              undefined
+                            }
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-48',
+                            }}
+                          />
                         </td>
                         {type !== 'detail' && (
                           <td>

From c4de085e111f4f3abcd41916ff2bc3a48a1b0d8e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 18 Oct 2025 08:40:06 +0700
Subject: [PATCH 068/212] feat(FE-62,63): enhance warehouse stock information
 display in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 82 +++++++++++++++----
 1 file changed, 65 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d77f2de4..a35937f7 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -25,10 +25,7 @@ import {
   DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { useMovementFormHandlers } from './useMovementFormHandlers';
-import {
-  SupplierApi,
-  WarehouseApi,
-} from '@/services/api/master-data';
+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';
@@ -273,6 +270,36 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     quantity: number;
   }
 
+  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const { data: allProductWarehouses } = useSWR(
+    allProductWarehousesUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  const warehouseStockMap = useMemo(() => {
+    if (!isResponseSuccess(allProductWarehouses)) return new Map();
+
+    const stockMap = new Map<
+      number,
+      { totalQty: number; productCount: number }
+    >();
+
+    allProductWarehouses.data.forEach((pw) => {
+      const warehouseId = pw.warehouse.id;
+      const existing = stockMap.get(warehouseId) || {
+        totalQty: 0,
+        productCount: 0,
+      };
+
+      stockMap.set(warehouseId, {
+        totalQty: existing.totalQty + pw.quantity,
+        productCount: existing.productCount + 1,
+      });
+    });
+
+    return stockMap;
+  }, [allProductWarehouses]);
+
   // Warehouse selection
   const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
     useState('');
@@ -282,15 +309,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     WarehouseApi.getAllFetcher
   );
   const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => ({
-        value: w.id,
-        label: w.name,
-        area: w.area?.name,
-        location:
-          'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
-            ? w.location?.name
-            : undefined,
-      }))
+    ? warehouses?.data.map((w) => {
+        const stockInfo = warehouseStockMap.get(w.id);
+        const stockLabel = stockInfo
+          ? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)`
+          : ' (Kosong)';
+
+        return {
+          value: w.id,
+          label: `${w.name}${stockLabel}`,
+          area: w.area?.name,
+          location:
+            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+              ? w.location?.name
+              : undefined,
+        };
+      })
     : [];
 
   // Product Warehouse selection - Filter by source warehouse
@@ -361,7 +395,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const handleDeliveryCostPerItemChange = useCallback(
     (idx: number, value: string) => {
       const numValue = parseFloat(value) || 0;
-      formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, numValue);
+      formik.setFieldValue(
+        `deliveries.${idx}.delivery_cost_per_item`,
+        numValue
+      );
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
@@ -389,7 +426,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       );
 
       // If delivery_cost is set, recalculate delivery_cost_per_item
-      if (delivery.delivery_cost && delivery.delivery_cost > 0 && productQty > 0) {
+      if (
+        delivery.delivery_cost &&
+        delivery.delivery_cost > 0 &&
+        productQty > 0
+      ) {
         const perItem = delivery.delivery_cost / productQty;
         if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
           formik.setFieldValue(
@@ -410,7 +451,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         }
       }
     });
-  }, [formik.values.deliveries?.map(d => d.products.reduce((sum, p) => sum + p.product_qty, 0)).join(',')]);
+  }, [
+    formik.values.deliveries
+      ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
+      .join(','),
+  ]);
 
   useEffect(() => {
     if (
@@ -1147,7 +1192,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             name={`deliveries.${idx}.delivery_cost_per_item`}
                             value={delivery.delivery_cost_per_item || ''}
                             onChange={(e) =>
-                              handleDeliveryCostPerItemChange(idx, e.target.value)
+                              handleDeliveryCostPerItemChange(
+                                idx,
+                                e.target.value
+                              )
                             }
                             onBlur={formik.handleBlur}
                             {...isRepeaterInputError(

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 069/212] 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 a573551110ca3a69c0d9dfbaf17513a2f3c2e8ca Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 18 Oct 2025 10:46:47 +0700
Subject: [PATCH 070/212] feat(FE-85-87-88): slicing ui and integrate api for
 search and edit

---
 .../project-flock/detail/edit/page.tsx        |  46 +++++
 src/components/input/SelectInput.tsx          |  27 +--
 .../form/InventoryAdjustmentForm.tsx          |   2 +-
 .../customer/form/CustomerForm.tsx            |   2 +-
 .../master-data/flock/form/FlockForm.tsx      |   2 +-
 .../supplier/form/SupplierForm.tsx            |   2 +-
 .../project-flock/ProjectFlockTable.tsx       |  41 +++-
 .../form/ProjectFlockForm.schema.ts           |  22 ++-
 .../project-flock/form/ProjectFlockForm.tsx   | 179 ++++++++++++------
 src/config/constant.ts                        |   4 +-
 src/services/api/base.ts                      |  36 ++++
 src/services/api/inventory.ts                 |   2 +-
 src/services/api/production.ts                |   2 +-
 src/stores/ui/ui.store.ts                     |   2 +-
 src/types/api/inventory/adjustment.d.ts       |   2 +-
 src/types/api/master-data/flock.d.ts          |   2 +-
 src/types/api/master-data/kandang.d.ts        |   1 +
 src/types/api/production/project-flock.d.ts   |  19 +-
 18 files changed, 281 insertions(+), 112 deletions(-)

diff --git a/src/app/production/project-flock/detail/edit/page.tsx b/src/app/production/project-flock/detail/edit/page.tsx
index e69de29b..858d0ca8 100644
--- a/src/app/production/project-flock/detail/edit/page.tsx
+++ b/src/app/production/project-flock/detail/edit/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+
+import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { ProjectFlockApi } from "@/services/api/production";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const ProjectFlockEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const projectFlockId = searchParams.get("projectFlockId");
+
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+
+  if(!projectFlockId){
+    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(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
+    router.replace("/404");
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
+        <ProjectFlockForm formType="edit" initialValues={projectFlock.data} />
+      )}
+    </div>
+  )
+}
+
+export default ProjectFlockEdit;
\ No newline at end of file
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 43a3f622..b35ad7dd 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,
@@ -98,10 +92,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 +104,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> | null): void => {
     if (!val) {
       onChange?.(null);
       return;
@@ -145,15 +134,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,9 +214,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className="w-full text-sm text-error">{errorMessage}</p>}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
-        <p className="w-full text-sm opacity-60">{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
index 1bb1692d..9a19ced1 100644
--- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
@@ -13,7 +13,7 @@ import toast from 'react-hot-toast';
 import {
   InventoryAdjustmentFormSchema,
   InventoryAdjustmentFormValues,
-} from './InventoryAdjustmentForm.schema';
+} from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema';
 import useSWR from 'swr';
 import {
   ProductApi,
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
index 533e0c38..ac848834 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.tsx
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -11,7 +11,7 @@ import {
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
-import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from './CustomerForm.schema';
+import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from '@/components/pages/master-data/customer/form/CustomerForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
diff --git a/src/components/pages/master-data/flock/form/FlockForm.tsx b/src/components/pages/master-data/flock/form/FlockForm.tsx
index 0950eef1..cc227fa6 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.tsx
+++ b/src/components/pages/master-data/flock/form/FlockForm.tsx
@@ -5,7 +5,7 @@ import { FlockApi } from '@/services/api/master-data';
 import { Flock } from '@/types/api/master-data/flock';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from './FlockForm.schema';
+import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from '@/components/pages/master-data/flock/form/FlockForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.tsx b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
index 74c4da27..e400ead2 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.tsx
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
@@ -15,7 +15,7 @@ import {
   SupplierFormSchema,
   SupplierFormValues,
   UpdateSupplierFormSchema,
-} from './SupplierForm.schema';
+} from '@/components/pages/master-data/supplier/form/SupplierForm.schema';
 import { useFormik } from 'formik';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { Icon } from '@iconify/react';
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index f890873d..c8b3f89b 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -21,7 +22,7 @@ import {
   ColumnSort,
   SortingState,
 } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -54,6 +55,15 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
+      <Button
+        href={`/production/project-flock/detail/edit?projectFlockId=${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'
@@ -217,6 +227,10 @@ const ProjectFlockTable = () => {
     setIsDeleteLoading(false);
   };
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   const updateSortingFilter = useCallback(
     (
       sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
@@ -235,14 +249,31 @@ const ProjectFlockTable = () => {
     <>
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
-          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/production/project-flock/add' color='primary'>
+          <div className='w-full flex flex-col justify-between items-end gap-2'>
+            <div className='flex flex-col sm:flex-row gap-3 w-full'>
+              <Button
+                href='/production/project-flock/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
+              <div className='ms-auto w-full sm:w-auto'>
+                <DebouncedTextInput
+                  name='search'
+                  placeholder='Cari Area'
+                  value={tableFilterState.search}
+                  onChange={searchChangeHandler}
+                  className={{ 
+                    wrapper: 'w-full sm:max-w-3xs', 
+                    input: 'w-full',
+                    inputWrapper: 'w-full',
+                  }}
+                />
+              </div>
             </div>
-            <div className='flex flex-row justify-end'>
+            <div className='hidden sm:flex flex-row justify-end'>
               <SelectInput
                 label='Baris'
                 options={ROWS_OPTIONS}
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
index 2c00e6ef..545bd1e1 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -1,42 +1,49 @@
+import { min } from 'moment';
 import * as Yup from 'yup';
 
 export const ProjectFlockFormSchema = Yup.object({
-  name: Yup.string().required('Nama Proyek wajib diisi!'),
-
   // Flock
   flock: Yup.object({
     value: Yup.number().required('ID Flock wajib diisi!'),
     label: Yup.string().required('Nama Flock wajib diisi!'),
   }).nullable(),
-  flock_id: Yup.number().required('Flock wajib diisi!'),
+  flock_id: Yup.number()
+    .min(1, 'Flock wajib diisi!')
+    .required('Flock wajib diisi!'),
 
   // Area
   area: Yup.object({
     value: Yup.number().required('ID Area wajib diisi!'),
     label: Yup.string().required('Nama Area wajib diisi!'),
   }).nullable(),
-  area_id: Yup.number().required('Area wajib diisi!'),
+  area_id: Yup.number()
+    .min(1, 'Area wajib diisi!')
+    .required('Area wajib diisi!'),
 
   //Product Category
   product_category: Yup.object({
     value: Yup.number().required('ID Kategori Produk wajib diisi!'),
     label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
   }).nullable(),
-  product_category_id: Yup.number().required('Kategori Produk wajib diisi!'),
+  product_category_id: Yup.number()
+    .min(1, 'Kategori Produk wajib diisi!')
+    .required('Kategori Produk wajib diisi!'),
 
   // FCR
   fcr: Yup.object({
     value: Yup.number().required('ID FCR wajib diisi!'),
     label: Yup.string().required('Nama FCR wajib diisi!'),
   }).nullable(),
-  fcr_id: Yup.number().required('FCR wajib diisi!'),
+  fcr_id: Yup.number().min(1, 'FCR wajib diisi!').required('FCR wajib diisi!'),
 
   // Location
   location: Yup.object({
     value: Yup.number().required('ID Lokasi wajib diisi!'),
     label: Yup.string().required('Nama Lokasi wajib diisi!'),
   }).nullable(),
-  location_id: Yup.number().required('Lokasi wajib diisi!'),
+  location_id: Yup.number()
+    .min(1, 'Lokasi wajib diisi!')
+    .required('Lokasi wajib diisi!'),
 
   period: Yup.number()
     .required('Periode wajib diisi!')
@@ -54,4 +61,3 @@ export type ProjectFlockFormValues = Yup.InferType<
 >;
 
 export const UpdateProjectFlockFormSchema = ProjectFlockFormSchema;
-
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 5ca4c9b6..903e3105 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -20,17 +20,20 @@ import {
   ProjectFlockFormSchema,
   ProjectFlockFormValues,
   UpdateProjectFlockFormSchema,
-} from './ProjectFlockForm.schema';
+} from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
 import {
   CreateProjectFlockPayload,
+  PeriodFlock,
   ProjectFlock,
 } from '@/types/api/production/project-flock';
 import toast from 'react-hot-toast';
 import TextInput from '@/components/input/TextInput';
-import Table from '@/components/Table';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import axios from 'axios';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -58,6 +61,10 @@ const ProjectFlockForm = ({
     initialValues?.kandangs ?? []
   );
 
+  const [selectedFlock, setSelectedFlock] = useState<number>(
+    initialValues?.flock?.id ?? 0
+  );
+
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
     search: '',
@@ -109,6 +116,17 @@ const ProjectFlockForm = ({
     KandangApi.getAllFetcher
   );
 
+  const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
+
+  const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
+    getPeriodFlocksUrl,
+    () =>
+      ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
+        getPeriodFlocksUrl,
+        { method: 'GET' }
+      )
+  );
+
   // Map Data to Options
   const optionsArea = isResponseSuccess(areas)
     ? areas?.data.map((area) => ({
@@ -147,24 +165,26 @@ const ProjectFlockForm = ({
 
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
-      if (kandang.data.length > 0 && selectedLocation != '') {
+      if (selectedLocation) {
         setOptionsKandang(kandang.data);
         setOpenSelectKandangs(true);
       } else {
         setOptionsKandang([]);
         setOpenSelectKandangs(false);
+        formik.setFieldValue('kandang_ids', []);
       }
     }
   }, [kandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('area_id', true);
     formik.setFieldValue('area_id', (val as OptionType)?.value);
-
     formik.setFieldValue('area', val);
 
+    formik.setFieldTouched('area_id', true);
+
     setSelectedArea((val as OptionType)?.value as string);
+    setSelectedLocation('');
     const disabled = (val as OptionType)?.value == null;
     setDisabledLocation(disabled);
 
@@ -185,11 +205,11 @@ const ProjectFlockForm = ({
     inputName: string
   ) => {
     formik.setFieldValue(inputName, val);
-
     formik.setFieldValue(
       `${inputName}_id`,
       val ? (val as OptionType)?.value : 0
     );
+
     formik.setFieldTouched(`${inputName}_id`, true);
   };
 
@@ -212,7 +232,9 @@ const ProjectFlockForm = ({
     if (checked) {
       formik.setFieldValue(
         'kandang_ids',
-        optionsKandang.map((kandang) => kandang.id)
+        optionsKandang
+          .filter((kandang) => kandang.status === 'NON_ACTIVE')
+          .map((kandang) => kandang.id)
       );
     } else {
       formik.setFieldValue('kandang_ids', []);
@@ -231,7 +253,24 @@ const ProjectFlockForm = ({
     }
     if (isResponseError(createProjectFlockRes)) {
       setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
-      // toast.ersror(createProjectFlockRes?.message as string);
+      toast.error(createProjectFlockRes?.message as string);
+    }
+  };
+  const updateProjectFlockHandler = async (
+    payload: CreateProjectFlockPayload
+  ) => {
+    const updateProjectFlockRes = await ProjectFlockApi.update(
+      initialValues?.id as number,
+      payload
+    );
+
+    if (isResponseSuccess(updateProjectFlockRes)) {
+      toast.success(updateProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(updateProjectFlockRes)) {
+      setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string);
+      toast.error(updateProjectFlockRes?.message as string);
     }
   };
 
@@ -269,12 +308,12 @@ const ProjectFlockForm = ({
             label: initialValues.location.name,
           }
         : null,
-      flock_id: initialValues?.flock_id ?? 0,
-      area_id: 0,
-      product_category_id: 0,
-      fcr_id: 0,
-      location_id: 0,
-      period: initialValues?.period ?? 0,
+      flock_id: initialValues?.flock?.id ?? 0,
+      area_id: initialValues?.area?.id ?? 0,
+      product_category_id: initialValues?.product_category?.id ?? 0,
+      fcr_id: initialValues?.fcr?.id ?? 0,
+      location_id: initialValues?.location?.id ?? 0,
+      period: initialValues?.period ?? '',
       kandang_ids: [],
     };
   }, [initialValues]);
@@ -282,6 +321,7 @@ const ProjectFlockForm = ({
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
     initialValues: formikInitialValues,
+    enableReinitialize: true,
     validationSchema:
       formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
     validateOnBlur: true,
@@ -290,7 +330,6 @@ const ProjectFlockForm = ({
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        name: values.name as string,
         flock_id: values.flock_id as number,
         area_id: values.area_id as number,
         product_category_id: values.product_category_id as number,
@@ -304,7 +343,8 @@ const ProjectFlockForm = ({
         case 'add':
           await createProjectFlockHandler(payload);
           break;
-        case 'detail':
+        case 'edit':
+          await updateProjectFlockHandler(payload);
           break;
         default:
           break;
@@ -315,16 +355,14 @@ const ProjectFlockForm = ({
   const { setValues: formikSetValues } = formik;
   // Effect Initial
   useEffect(() => {
-    console.log('Initial Value');
-    console.log(initialValues);
-    if(formType == 'detail'){
+    if (formType == 'detail') {
       formik.setFieldValue('area', {
         value: initialValues.area.id,
         label: initialValues.area.name,
       });
       formik.setFieldValue('area_id', initialValues.area_id);
       setSelectedArea(initialValues.area?.id);
-  
+
       formik.setFieldValue('period', initialValues.period);
     }
   }, [initialValues, setSelectedArea, formType]);
@@ -340,7 +378,7 @@ const ProjectFlockForm = ({
 
   // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
   useEffect(() => {
-    if (formType === 'detail' && initialValues?.location?.id) {
+    if (formType != 'add' && initialValues?.location?.id) {
       setSelectedLocation(initialValues.location?.id.toString());
       setDisabledLocation(false); // biar dropdown lokasi aktif juga
     }
@@ -348,19 +386,34 @@ const ProjectFlockForm = ({
 
   // Setelah data kandang difetch, centang otomatis kandang yang ada di initialValues
   useEffect(() => {
-    if (formType === 'detail' && isResponseSuccess(kandang)) {
-      setOptionsKandang(kandang.data);
-      setOpenSelectKandangs(true);
-
-      // Ambil ID dari initialValues.kandangs
-      const kandangIds =
-        initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [];
-
-      // Set nilai ke formik
-      formik.setFieldValue('kandang_ids', kandangIds);
+    if (formType != 'add' && isResponseSuccess(kandang)) {
+      if (selectedLocation) {
+        setOptionsKandang(kandang.data);
+        setOpenSelectKandangs(true);
+        const kandangIds =
+          initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [];
+        formik.setFieldValue('kandang_ids', kandangIds);
+        console.log("kandangIds");
+        console.log(kandangIds);
+      } else {
+        setOptionsKandang([]);
+        setOpenSelectKandangs(false);
+        formik.setFieldValue('kandang_ids', []);
+        initialValues.kandangs = [];
+      }
     }
   }, [formType, kandang, initialValues]);
 
+  useEffect(() => {
+    formik.validateForm();
+  }, [formik.values]);
+
+  useEffect(() => {
+    isResponseSuccess(periodFlocks)
+      ? formik.setFieldValue('period', periodFlocks.data.next_period)
+      : formik.setFieldValue('period', '');
+  }, [periodFlocks]);
+
   return (
     <>
       <section className='w-full'>
@@ -408,24 +461,7 @@ const ProjectFlockForm = ({
             <div className='card-body'>
               <div className='card-title mb-4'>Informasi Umum</div>
 
-              <div className='grid grid-cols-2 gap-4'>
-                {formType != 'detail' && (
-                  <div className='col-span-2'>
-                    <TextInput
-                      required
-                      name='name'
-                      label='Nama Project Flock'
-                      placeholder='Masukan nama project flock'
-                      value={formik.values.name}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      isError={
-                        formik.touched.name && Boolean(formik.errors.name)
-                      }
-                      errorMessage={formik.errors.name}
-                    />
-                  </div>
-                )}
+              <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
                   required
                   label='Area'
@@ -433,8 +469,10 @@ const ProjectFlockForm = ({
                   onChange={areaChangeHandler}
                   options={optionsArea}
                   isLoading={isLoadingAreas}
-                  isError={formik.touched.area && Boolean(formik.errors.area)}
-                  errorMessage={formik.errors.area as string}
+                  isError={
+                    formik.touched.area_id && Boolean(formik.errors.area_id)
+                  }
+                  errorMessage={formik.errors.area_id as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -444,14 +482,16 @@ const ProjectFlockForm = ({
                   value={formik.values.flock as OptionType}
                   onChange={(val) => {
                     optionChangeHandler(val, 'flock');
+                    setSelectedFlock((val as OptionType)?.value as number);
                   }}
                   options={optionsFlock}
                   isLoading={isLoadingFlocks}
-                  isError={formik.touched.flock && Boolean(formik.errors.flock)}
-                  errorMessage={formik.errors.flock as string}
+                  isError={
+                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                  }
+                  errorMessage={formik.errors.flock_id as string}
                   isClearable
                   isDisabled={formType === 'detail'}
-
                 />
                 <SelectInput
                   required
@@ -461,9 +501,10 @@ const ProjectFlockForm = ({
                   options={optionsLocation}
                   isLoading={isLoadingLocations}
                   isError={
-                    formik.touched.location && Boolean(formik.errors.location)
+                    formik.touched.location_id &&
+                    Boolean(formik.errors.location_id)
                   }
-                  errorMessage={formik.errors.location as string}
+                  errorMessage={formik.errors.location_id as string}
                   isClearable
                   isDisabled={formType === 'detail' || disabledLocation}
                 />
@@ -476,8 +517,10 @@ const ProjectFlockForm = ({
                   }}
                   options={optionsFcr}
                   isLoading={isLoadingFcrs}
-                  isError={formik.touched.fcr && Boolean(formik.errors.fcr)}
-                  errorMessage={formik.errors.fcr as string}
+                  isError={
+                    formik.touched.fcr_id && Boolean(formik.errors.fcr_id)
+                  }
+                  errorMessage={formik.errors.fcr_id as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -497,13 +540,13 @@ const ProjectFlockForm = ({
                   errorMessage={formik.errors.product_category as string}
                   isClearable
                   isDisabled={formType === 'detail'}
-
                 />
                 <TextInput
                   required
                   type='number'
                   name='period'
                   label='Periode'
+                  placeholder='Masukkan periode yang project'
                   value={formik.values.period as number}
                   onChange={formik.handleChange}
                   isError={
@@ -533,7 +576,7 @@ const ProjectFlockForm = ({
                     </Button>
                   </div>
                 }
-                className='w-full size-full'
+                className='sm:w-full'
                 titleClassName='w-full p-0!'
                 onOpenChange={setOpenSelectKandangs}
                 open={openSelectKandangs}
@@ -548,8 +591,14 @@ const ProjectFlockForm = ({
                             <input
                               type='checkbox'
                               checked={
-                                formik.values.kandang_ids.length ===
-                                optionsKandang.length
+                                optionsKandang
+                                  .filter((k) => k.status === 'NON_ACTIVE')
+                                  .every((k) =>
+                                    formik.values.kandang_ids.includes(k.id)
+                                  ) &&
+                                optionsKandang.filter(
+                                  (k) => k.status === 'NON_ACTIVE'
+                                ).length > 0
                               }
                               className='checkbox'
                               onChange={
@@ -561,6 +610,7 @@ const ProjectFlockForm = ({
                           </label>
                         </th>
                         <th>Kandang</th>
+                        <th>Status</th>
                         <th>Penanggung Jawab</th>
                       </tr>
                     </thead>
@@ -583,10 +633,15 @@ const ProjectFlockForm = ({
                                       ? () => {}
                                       : kandangChangeHandler
                                   }
+                                  disabled={
+                                    formType === 'detail' ||
+                                    kandang.status != 'NON_ACTIVE'
+                                  }
                                 />
                               </label>
                             </th>
                             <td>{kandang.name}</td>
+                            <td>{kandang.status}</td>
                             <td>{kandang.pic?.name}</td>
                           </tr>
                         ))}
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 2d15c62d..ed4386a9 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -13,9 +13,9 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
   },
 
   {
-    title: 'Flock',
+    title: 'Production',
     link: '/production',
-    icon: 'material-symbols:raven-outline-rounded',
+    icon: 'material-symbols:conveyor-belt-outline-rounded',
     submenu: [
       {
         title: 'List Flock',
diff --git a/src/services/api/base.ts b/src/services/api/base.ts
index d1ac4729..af1eaed7 100644
--- a/src/services/api/base.ts
+++ b/src/services/api/base.ts
@@ -79,4 +79,40 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       return undefined;
     }
   }
+
+  async customRequest<ResponseType = T, PayloadType = unknown>(
+    endpoint: string,
+    options?: {
+      method?: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE';
+      payload?: PayloadType;
+      params?: Record<string, string | number | boolean | undefined>;
+    }
+  ): Promise<ResponseType | undefined> {
+    try {
+      const urlBase = endpoint.startsWith('http')
+        ? endpoint
+        : `${this.basePath.replace(/\/$/, '')}/${endpoint.replace(/^\//, '')}`;
+
+      const url = options?.params
+        ? `${urlBase}?${new URLSearchParams(
+            Object.entries(options.params).reduce((acc, [key, value]) => {
+              if (value !== undefined) acc[key] = String(value);
+              return acc;
+            }, {} as Record<string, string>)
+          )}`
+        : urlBase;
+
+      const res = await httpClient<ResponseType>(url, {
+        method: options?.method || 'GET',
+        body: options?.payload,
+      });
+
+      return res;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<ResponseType>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
 }
diff --git a/src/services/api/inventory.ts b/src/services/api/inventory.ts
index 230bb60a..127020f4 100644
--- a/src/services/api/inventory.ts
+++ b/src/services/api/inventory.ts
@@ -2,7 +2,7 @@ import {
     InventoryAdjustment,
     CreateInventoryAdjustmentPayload,
 } from '@/types/api/inventory/adjustment';
-import { BaseApiService } from './base';
+import { BaseApiService } from '@/services/api/base';
 
 export const inventoryAdjustmentApi = new BaseApiService<
     InventoryAdjustment,
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 16234161..06e51c2c 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -2,7 +2,7 @@ import {
   ProjectFlock,
   CreateProjectFlockPayload,
 } from '@/types/api/production/project-flock';
-import { BaseApiService } from './base';
+import { BaseApiService } from '@/services/api/base';
 
 export const ProjectFlockApi = new BaseApiService<
   ProjectFlock,
diff --git a/src/stores/ui/ui.store.ts b/src/stores/ui/ui.store.ts
index 2e64dcc1..49554bc9 100644
--- a/src/stores/ui/ui.store.ts
+++ b/src/stores/ui/ui.store.ts
@@ -4,7 +4,7 @@ import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
 import { UIStore } from '@/types/stores';
-import { createMainUiSlice } from './slices/main.slice';
+import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
 
 export const useUiStore = create<UIStore>()(
   devtools(
diff --git a/src/types/api/inventory/adjustment.d.ts b/src/types/api/inventory/adjustment.d.ts
index 9d995919..852389fe 100644
--- a/src/types/api/inventory/adjustment.d.ts
+++ b/src/types/api/inventory/adjustment.d.ts
@@ -1,5 +1,5 @@
 import { Product } from '@/types/api/master-data/product';
-import { Warehouse } from '../master-data/warehouse';
+import { Warehouse } from '@/types/api/master-data/warehouse';
 
 export type BaseInventoryAdjustment = {
   id: number;
diff --git a/src/types/api/master-data/flock.d.ts b/src/types/api/master-data/flock.d.ts
index 0c59b84c..3ac5d390 100644
--- a/src/types/api/master-data/flock.d.ts
+++ b/src/types/api/master-data/flock.d.ts
@@ -1,4 +1,4 @@
-import { BaseMetadata } from "../api-general";
+import { BaseMetadata } from "@/types/api/api-general";
 
 export type BaseFlock = {
   id: number;
diff --git a/src/types/api/master-data/kandang.d.ts b/src/types/api/master-data/kandang.d.ts
index e05006d1..17cbbee7 100644
--- a/src/types/api/master-data/kandang.d.ts
+++ b/src/types/api/master-data/kandang.d.ts
@@ -5,6 +5,7 @@ import { BaseUser } from '@/types/api/user';
 export type BaseKandang = {
   id: number;
   name: string;
+  status: string;
   location: BaseLocation;
   pic: BaseUser;
 };
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index fd28ab91..1fb71563 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -1,9 +1,9 @@
-import { Area } from "../master-data/area";
-import { Fcr } from "../master-data/fcr";
-import { Flock } from "../master-data/flock";
-import { Kandang } from "../master-data/kandang";
-import { Location } from "../master-data/location";
-import { ProductCategory } from "../master-data/product-category";
+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 { ProductCategory } from "@/types/api/master-data/product-category";
 
 export type BaseProjectFlock = {
   name: string;
@@ -22,10 +22,15 @@ export type BaseProjectFlock = {
   kandangs: Kandang[];
 }
 
+export type PeriodFlock = {
+  flock: Flock;
+  next_period: number;
+}
+
+
 export type ProjectFlock = BaseMetadata & BaseProjectFlock 
 
 export type CreateProjectFlockPayload = {
-  name: string;
   flock_id: number;
   area_id: number;
   product_category_id: number;

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 071/212] 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 072/212] 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 9964e1797aff152aacd3ff5e01213d2561ccf635 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 18 Oct 2025 12:58:18 +0700
Subject: [PATCH 073/212] feat(FE-87): slicing ui multiple approval checkbox
 and approval modal confirmation

---
 .../project-flock/ProjectFlockTable.tsx       | 111 +++++++++++++++---
 src/types/api/production/project-flock.d.ts   |   1 +
 2 files changed, 97 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index c8b3f89b..8fe3ff7f 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -114,17 +114,45 @@ const ProjectFlockTable = () => {
   const [selectedProjectFlock, setSelectedProjectFlock] =
     useState<ProjectFlock>();
   const deleteModal = useModal();
+  const confirmModal = useModal();
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
 
   // Columns
   const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
     {
-      header: '#',
-      cell: (props) =>
-        tableFilterState.pageSize * (tableFilterState.page - 1) +
-        props.row.index +
-        1,
+      id: 'select',
+      header: () => {
+        const allSelected =
+          isResponseSuccess(projectFlocks) &&
+          projectFlocks.data.length > 0 &&
+          selectedIds.length === projectFlocks.data.length;
+
+        return (
+          <input
+            type='checkbox'
+            className='checkbox checkbox-sm'
+            checked={allSelected}
+            onChange={(e) => handleSelectAll(e.target.checked)}
+          />
+        );
+      },
+      cell: (props) => {
+        const id = props.row.original.id;
+        const isChecked = selectedIds.includes(id);
+
+        return (
+          <input
+            type='checkbox'
+            className='checkbox checkbox-sm'
+            checked={isChecked}
+            onChange={(e) => handleSelectRow(id, e.target.checked)}
+          />
+        );
+      },
     },
+
     {
       accessorKey: 'flock.name',
       header: 'Flock',
@@ -226,11 +254,9 @@ const ProjectFlockTable = () => {
     toast.success('Successfully delete Project Flock!');
     setIsDeleteLoading(false);
   };
-
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-
   const updateSortingFilter = useCallback(
     (
       sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
@@ -244,6 +270,34 @@ const ProjectFlockTable = () => {
     },
     [updateFilter]
   );
+  const handleSelectAll = (checked: boolean) => {
+    if (checked && isResponseSuccess(projectFlocks)) {
+      const allIds = projectFlocks.data.map((item) => item.id);
+      setSelectedIds(allIds);
+      setSelectedFlocks(projectFlocks.data);
+    } else {
+      setSelectedIds([]);
+      setSelectedFlocks([]);
+    }
+  };
+
+  const handleSelectRow = (id: number, checked: boolean) => {
+    if (!isResponseSuccess(projectFlocks)) return;
+
+    const targetFlock = projectFlocks.data.find((item) => item.id === id);
+
+    if (!targetFlock) return;
+
+    if (checked) {
+      setSelectedIds((prev) => [...prev, id]);
+      setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
+    } else {
+      setSelectedIds((prev) => prev.filter((val) => val !== id));
+      setSelectedFlocks((prev) =>
+        (prev || []).filter((flock) => flock.id !== id)
+      );
+    }
+  };
 
   return (
     <>
@@ -259,14 +313,28 @@ const ProjectFlockTable = () => {
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={() => {
+                  if (selectedIds.length > 0) {
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!(selectedIds.length > 0)}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
               <div className='ms-auto w-full sm:w-auto'>
                 <DebouncedTextInput
                   name='search'
                   placeholder='Cari Area'
                   value={tableFilterState.search}
                   onChange={searchChangeHandler}
-                  className={{ 
-                    wrapper: 'w-full sm:max-w-3xs', 
+                  className={{
+                    wrapper: 'w-full sm:max-w-3xs',
                     input: 'w-full',
                     inputWrapper: 'w-full',
                   }}
@@ -323,17 +391,30 @@ const ProjectFlockTable = () => {
       </div>
 
       <ConfirmationModal
-        ref={deleteModal.ref}
-        type='error'
-        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock?.name})?`}
+        ref={confirmModal.ref}
+        type='success'
+        text={
+          selectedFlocks.length > 0
+            ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
+                .map(
+                  (flock, index) =>
+                    `${flock.flock?.name ?? '(Tanpa nama)'} - ${
+                      flock.area?.name ?? '-'
+                    }`
+                )
+                .join(', ')})`
+            : 'Tidak ada Project Flock yang dipilih.'
+        }
         secondaryButton={{
           text: 'Tidak',
         }}
         primaryButton={{
           text: 'Ya',
-          color: 'error',
-          isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
+          color: 'success',
+          onClick: async () => {
+            toast.success('Project Flock berhasil di-approve!');
+            confirmModal.closeModal();
+          },
         }}
       />
     </>
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 1fb71563..caaf1844 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -7,6 +7,7 @@ import { ProductCategory } from "@/types/api/master-data/product-category";
 
 export type BaseProjectFlock = {
   name: string;
+  status: string;
   flock: Flock;
   flock_id: number;
   area: Area;

From 6fe85fac137acf25d39b1d35f6f9867e2f647298 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 18 Oct 2025 13:40:08 +0700
Subject: [PATCH 074/212] feat(FE-113): add Client, Permission, Role, and
 RoleWithPermission types

---
 src/types/api/api-general.d.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index cf3e57f7..c118b5a4 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -24,6 +24,36 @@ export type LogoutResponse = BaseApiResponse;
 
 export type GetMeResponse = BaseApiResponse<UserWithRoles>;
 
+export type Client = {
+  id: number;
+  name: stirng;
+  alias: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export type Permission = {
+  id: number;
+  name: string;
+  action: string;
+  client: Omit<Client, 'created_at' | 'updated_at'>;
+  created_at: string;
+  updated_at: string;
+};
+
+export type Role = {
+  id: number;
+  key: string;
+  name: string;
+  client: Omit<Client, 'created_at' | 'updated_at'>;
+  created_at: string;
+  updated_at: string;
+};
+
+export type RoleWithPermissions = Omit<Role, 'created_at' | 'updated_at'> & {
+  permissions: Omit<Permission, 'created_at' | 'updated_at'>[];
+};
+
 export type User = {
   id: number;
   email: string;

From 2b3aa9c3eed4a11593b1d75035acc81be3faf4ee Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 18 Oct 2025 13:40:32 +0700
Subject: [PATCH 075/212] feat(FE-113): create permissionCheck helper function

---
 src/services/hooks/useAuth.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/services/hooks/useAuth.tsx b/src/services/hooks/useAuth.tsx
index 86bf43ed..79fa8981 100644
--- a/src/services/hooks/useAuth.tsx
+++ b/src/services/hooks/useAuth.tsx
@@ -6,22 +6,43 @@ type AuthStore = {
   isLoadingUser?: boolean;
   setUser: (newUserData?: UserWithRoles) => void;
   setIsLoadingUser: (isLoading?: boolean) => void;
+  permissionCheck: (permissionName: string) => boolean;
 };
 
-const useAuthStore = create<AuthStore>()((set) => ({
+const useAuthStore = create<AuthStore>()((set, get) => ({
   user: undefined,
   isLoadingUser: false,
   setUser: (newUserData) => set({ user: newUserData }),
   setIsLoadingUser: (isLoading) => set({ isLoadingUser: Boolean(isLoading) }),
+
+  permissionCheck: (name) => {
+    const { user, isLoadingUser } = get();
+
+    if (!isLoadingUser && user) {
+      const isAllowed = user.roles.some((role) => {
+        const isPermissionNameAllowed = role.permissions.some(
+          (permission) => permission.name === name
+        );
+
+        return isPermissionNameAllowed;
+      });
+
+      return isAllowed;
+    }
+
+    return false;
+  },
 }));
 
 export const useAuth = () => {
-  const { user, setUser, isLoadingUser, setIsLoadingUser } = useAuthStore();
+  const { user, setUser, isLoadingUser, setIsLoadingUser, permissionCheck } =
+    useAuthStore();
 
   return {
     user,
     setUser,
     isLoadingUser,
     setIsLoadingUser,
+    permissionCheck,
   };
 };

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 076/212] 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 376fa29f7edf4da9df926566f270f6053895f6de Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 20 Oct 2025 09:55:08 +0700
Subject: [PATCH 077/212] fix(FE-40): wrap master data detail with
 SuspenseHelper

---
 src/app/master-data/customer/detail/layout.tsx | 11 +++++++++++
 src/app/master-data/supplier/detail/layout.tsx | 11 +++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/app/master-data/customer/detail/layout.tsx
 create mode 100644 src/app/master-data/supplier/detail/layout.tsx

diff --git a/src/app/master-data/customer/detail/layout.tsx b/src/app/master-data/customer/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/customer/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/master-data/supplier/detail/layout.tsx b/src/app/master-data/supplier/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/supplier/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;

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 078/212] 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 079/212] 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 406cfad31a49af235c3f0631d7e2de5eccdd57bf Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 20 Oct 2025 10:14:04 +0700
Subject: [PATCH 080/212] chore(FE-140): adjust border radius

---
 src/components/Button.tsx            |  2 +-
 src/components/input/SelectInput.tsx | 39 +++++++----------
 src/components/input/TextArea.tsx    | 62 +++++++++++++---------------
 src/components/input/TextInput.tsx   |  2 +-
 4 files changed, 45 insertions(+), 60 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c67a29c2..5da6e5ad 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -43,7 +43,7 @@ const Button = ({
       'btn-warning': color === 'warning',
       'btn-error': color === 'error',
     },
-    'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all'
+    'h-fit justify-center items-center gap-2 rounded p-2 text-base transition-all'
   );
 
   return (
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 43a3f622..f6cef527 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,
@@ -98,10 +92,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 +104,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;
@@ -145,15 +134,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}
@@ -171,7 +160,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded! border bg-base-100 transition-shadow cursor-pointer!',
               {
                 'border-red-500! ring-2 ring-red-200': isError,
                 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -187,24 +176,24 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
           menu: () =>
-            cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
+            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
-              'bg-indigo-600 text-white': isFocused,
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
+              'bg-indigo-600 text-base-100': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
             }),
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
@@ -225,9 +214,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className="w-full text-sm text-error">{errorMessage}</p>}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
-        <p className="w-full text-sm opacity-60">{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index e9517277..fbb1637a 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-} from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
@@ -52,7 +48,7 @@ const TextArea = ({
   onBlur,
   readOnly = false,
   isLoading = false,
-  rows = 3
+  rows = 3,
 }: TextAreaProps) => {
   return (
     <div
@@ -83,35 +79,35 @@ 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! 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>
+      )}
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index eec312c1..fa80cb4f 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! outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,

From a088189ed161982b5b83e27bb75e86c826dd055b Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 20 Oct 2025 10:14:22 +0700
Subject: [PATCH 081/212] chore(FE-140): add Produksi and Transfer ke Laying
 menu

---
 src/config/constant.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index ed68adb5..a623fd9e 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -12,6 +12,19 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'gg:chart',
   },
 
+  {
+    title: 'Produksi',
+    link: '/production',
+    icon: 'ix:machine-a',
+    submenu: [
+      {
+        title: 'Transfer ke Laying',
+        link: '/production/transfer-to-laying',
+        icon: 'streamline:transfer-van',
+      },
+    ],
+  },
+
   {
     title: 'Master Data',
     link: '/master-data',
@@ -88,8 +101,8 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         title: 'Penyesuaian Persediaan',
         link: '/inventory/adjustment',
         icon: 'material-symbols:box-edit-outline-rounded',
-      }
-    ]
+      },
+    ],
   },
 ] as const;
 

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 082/212] 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 d76f897840b37331c1eddcd54d90a6ed0c0575e0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 11:32:35 +0700
Subject: [PATCH 083/212] refactor(FE-62): update wrapper class names for
 improved layout in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index a35937f7..034e7b91 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1081,6 +1081,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             options={getFilteredProductWarehouseOptions()}
                             isDisabled={type === 'detail'}
                             isClearable
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>
@@ -1103,7 +1107,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             }
                             readOnly={type === 'detail'}
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper: 'w-full min-w-48',
                             }}
                           />
                         </td>
@@ -1126,6 +1130,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             isLoading={isLoadingSuppliers}
                             isDisabled={type === 'detail'}
                             isClearable
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>
@@ -1141,6 +1149,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               idx
                             )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>
@@ -1165,6 +1177,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               idx
                             )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper:
+                                'w-full min-w-72 md:w-min-80 lg:w-min-96',
+                            }}
                           />
                         </td>
                         <td>
@@ -1183,6 +1199,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               idx
                             )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-48',
+                            }}
                           />
                         </td>
                         <td>
@@ -1204,6 +1223,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               idx
                             )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-48',
+                            }}
                           />
                         </td>
                         <td>
@@ -1219,6 +1241,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               idx
                             )}
                             readOnly={type === 'detail'}
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         {type !== 'detail' && (

From c8db992b17a12b0dca4b667c28a0d1fd545ed2b3 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 11:50:19 +0700
Subject: [PATCH 084/212] feat(FE-62,63,65): add document_path field to
 deliveries in MovementForm

---
 .../movement/form/MovementForm.schema.ts      | 43 +++++++------
 .../inventory/movement/form/MovementForm.tsx  | 63 +++++++++++--------
 2 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 2cc5d910..5df66930 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -14,6 +14,7 @@ export type DeliverySchema = {
   delivery_cost?: number | undefined;
   delivery_cost_per_item?: number | undefined;
   document?: File | string | null;
+  document_path?: string | null;
   driver_name: string;
   vehicle_plate: string;
   supplier: {
@@ -86,6 +87,7 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
         );
       }
     ),
+  document_path: Yup.string().optional(),
   document_index: Yup.number().optional(),
   document: Yup.mixed<File | string>()
     .nullable()
@@ -161,8 +163,8 @@ export const getMovementFormInitialValues = (
       ? {
           value: initialValues.source_warehouse.id,
           label: initialValues.source_warehouse.name,
-          area: initialValues.source_warehouse.area?.name,
-          location: initialValues.source_warehouse.location?.name,
+          area: initialValues.source_warehouse.area?.name ?? undefined,
+          location: initialValues.source_warehouse.location?.name ?? undefined,
         }
       : null,
     source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
@@ -170,8 +172,9 @@ export const getMovementFormInitialValues = (
       ? {
           value: initialValues.destination_warehouse.id,
           label: initialValues.destination_warehouse.name,
-          area: initialValues.destination_warehouse.area?.name,
-          location: initialValues.destination_warehouse.location?.name,
+          area: initialValues.destination_warehouse.area?.name ?? undefined,
+          location:
+            initialValues.destination_warehouse.location?.name ?? undefined,
         }
       : null,
     destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
@@ -185,19 +188,20 @@ export const getMovementFormInitialValues = (
         product_qty: detail.quantity,
       })) ?? [],
     deliveries:
-      initialValues?.deliveries?.map((d) => {
-        return {
-          delivery_cost: d.shipping_cost_total,
-          delivery_cost_per_item: d.shipping_cost_item,
-          document_index: 0,
-          document: d.document_path || null,
-          driver_name: d.driver_name,
-          vehicle_plate: d.vehicle_plate,
-          supplier: d.supplier
-            ? { value: d.supplier.id, label: d.supplier.name }
-            : null,
-          supplier_id: d.supplier?.id ?? 0,
-          products: d.items.map((item) => {
+      initialValues?.deliveries?.map((d) => ({
+        delivery_cost: d.shipping_cost_total ?? undefined,
+        delivery_cost_per_item: d.shipping_cost_item ?? undefined,
+        document_number: d.document_number ?? '',
+        document: d.document_path ?? null,
+        document_path: d.document_path ?? null,
+        driver_name: d.driver_name ?? '',
+        vehicle_plate: d.vehicle_plate ?? '',
+        supplier: d.supplier
+          ? { value: d.supplier.id, label: d.supplier.name }
+          : null,
+        supplier_id: d.supplier?.id ?? 0,
+        products:
+          d.items?.map((item) => {
             const productData = detailIdToProductId.get(
               item.stock_transfer_detail_id
             );
@@ -208,8 +212,7 @@ export const getMovementFormInitialValues = (
               product_id: productData?.id ?? 0,
               product_qty: item.quantity,
             };
-          }),
-        };
-      }) ?? [],
+          }) ?? [],
+      })) ?? [],
   };
 };
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 034e7b91..671615d9 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -83,6 +83,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           delivery_cost: d.delivery_cost ?? 0,
           delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
           document_index: documentIndex,
+          document_path: d.document_path,
           driver_name: d.driver_name,
           vehicle_plate: d.vehicle_plate,
           supplier_id: d.supplier_id,
@@ -1156,32 +1157,44 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <FileInput
-                            name={`deliveries.${idx}.document`}
-                            onChange={(e) => {
-                              const file = e.target.files?.[0];
-                              if (file) {
-                                if (file.size > 2 * 1024 * 1024) {
-                                  toast.error('Ukuran dokumen maksimal 2 MB!');
-                                  return;
+                          {type === 'detail' ? (
+                            <TextInput
+                              readOnly
+                              value={delivery.document_path || '-'}
+                              className={{
+                                wrapper: 'w-full min-w-52 md:w-72 lg:w-80',
+                              }}
+                              name={`deliveries.${idx}.document_path`}
+                            />
+                          ) : (
+                            <FileInput
+                              name={`deliveries.${idx}.document`}
+                              onChange={(e) => {
+                                const file = e.target.files?.[0];
+                                if (file) {
+                                  if (file.size > 2 * 1024 * 1024) {
+                                    toast.error(
+                                      'Ukuran dokumen maksimal 2 MB!'
+                                    );
+                                    return;
+                                  }
+                                  formik.setFieldValue(
+                                    `deliveries.${idx}.document`,
+                                    file
+                                  );
                                 }
-                                formik.setFieldValue(
-                                  `deliveries.${idx}.document`,
-                                  file
-                                );
-                              }
-                            }}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'document',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-72 md:w-min-80 lg:w-min-96',
-                            }}
-                          />
+                              }}
+                              {...isRepeaterInputError(
+                                'deliveries',
+                                'document',
+                                idx
+                              )}
+                              className={{
+                                wrapper:
+                                  'w-full min-w-72 md:w-min-80 lg:w-min-96',
+                              }}
+                            />
+                          )}
                         </td>
                         <td>
                           <TextInput

From f27e34128e0eedf9e9af3c6b58f48857d702f881 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 12:03:58 +0700
Subject: [PATCH 085/212] refactor(FE-62): update layout and remove unused
 delete confirmation in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 671615d9..d5d28f5f 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -914,6 +914,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               'product',
                               idx
                             )}
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>
@@ -943,7 +947,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>
@@ -1315,12 +1320,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           <FormActions<MovementFormValues>
             type={type}
             formik={formik}
-            editUrl={
-              initialValues
-                ? `/inventory/movement/detail/edit/?movementId=${initialValues.id}`
-                : undefined
-            }
-            onDelete={deleteMovementClickHandler}
             disableSubmit={hasInvalidQty || hasExceededStock}
           />
 
@@ -1336,23 +1335,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           )}
         </form>
       </section>
-
-      {type !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text={`Apakah anda yakin ingin menghapus data Movement ini?`}
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: confirmationModalDeleteClickHandler,
-          }}
-        />
-      )}
     </>
   );
 };

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 086/212] 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 c3338d3e05f8fd602fb88fcd3a6f359039f91b6c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 15:23:18 +0700
Subject: [PATCH 087/212] feat(FE-62): add button for document path in
 MovementForm with link functionality

---
 src/components/Button.tsx                     |  8 +++--
 .../inventory/movement/form/MovementForm.tsx  | 29 ++++++++++++++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c67a29c2..e901b765 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,7 +1,5 @@
 import react from 'react';
-
 import Link from 'next/link';
-
 import { cn } from '@/lib/helper';
 import { Color } from '@/types/theme';
 
@@ -10,6 +8,8 @@ interface ButtonProps extends react.ComponentProps<'button'> {
   color?: Color;
   href?: string;
   isLoading?: boolean;
+  target?: string;
+  rel?: string;
 }
 
 const Button = ({
@@ -22,6 +22,8 @@ const Button = ({
   className,
   disabled,
   onClick,
+  target,
+  rel,
   ...props
 }: ButtonProps) => {
   const btnBaseClassName = cn(
@@ -68,6 +70,8 @@ const Button = ({
       {href && (
         <Link
           href={disabled ? '#' : href}
+          target={target}
+          rel={rel}
           aria-disabled={disabled}
           className={cn(
             btnBaseClassName,
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d5d28f5f..34027209 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1163,14 +1163,27 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         </td>
                         <td>
                           {type === 'detail' ? (
-                            <TextInput
-                              readOnly
-                              value={delivery.document_path || '-'}
-                              className={{
-                                wrapper: 'w-full min-w-52 md:w-72 lg:w-80',
-                              }}
-                              name={`deliveries.${idx}.document_path`}
-                            />
+                            <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>
                           ) : (
                             <FileInput
                               name={`deliveries.${idx}.document`}

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 088/212] 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 089/212] 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 090/212] 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 091/212] 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 092/212] 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 093/212] 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 094/212] 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 095/212] 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 096/212] 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 097/212] 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 167270546411c148ba5c791028b31d69c269ef1f Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 21 Oct 2025 10:14:17 +0700
Subject: [PATCH 098/212] fix(FE-88-89) adjust category flock dengan API
 backend & set disabled input period

---
 .../inventory/adjustment/detail/layout.tsx    |  11 ++
 .../master-data/customer/detail/layout.tsx    |  11 ++
 src/app/master-data/flock/detail/layout.tsx   |  11 ++
 .../master-data/supplier/detail/layout.tsx    |  11 ++
 .../project-flock/detail/layout.tsx           |  11 ++
 .../project-flock/ProjectFlockTable.tsx       | 168 ++++++++++++++++--
 .../form/ProjectFlockForm.schema.ts           |  13 +-
 .../project-flock/form/ProjectFlockForm.tsx   |  52 +++---
 src/config/constant.ts                        |  11 ++
 src/types/api/production/project-flock.d.ts   |   5 +-
 10 files changed, 262 insertions(+), 42 deletions(-)
 create mode 100644 src/app/inventory/adjustment/detail/layout.tsx
 create mode 100644 src/app/master-data/customer/detail/layout.tsx
 create mode 100644 src/app/master-data/flock/detail/layout.tsx
 create mode 100644 src/app/master-data/supplier/detail/layout.tsx
 create mode 100644 src/app/production/project-flock/detail/layout.tsx

diff --git a/src/app/inventory/adjustment/detail/layout.tsx b/src/app/inventory/adjustment/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/inventory/adjustment/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;
\ No newline at end of file
diff --git a/src/app/master-data/customer/detail/layout.tsx b/src/app/master-data/customer/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/master-data/customer/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;
\ No newline at end of file
diff --git a/src/app/master-data/flock/detail/layout.tsx b/src/app/master-data/flock/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/master-data/flock/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;
\ No newline at end of file
diff --git a/src/app/master-data/supplier/detail/layout.tsx b/src/app/master-data/supplier/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/master-data/supplier/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;
\ No newline at end of file
diff --git a/src/app/production/project-flock/detail/layout.tsx b/src/app/production/project-flock/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/production/project-flock/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;
\ No newline at end of file
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 8fe3ff7f..d283e46d 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -3,6 +3,7 @@
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
@@ -11,6 +12,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
+import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Kandang } from '@/types/api/master-data/kandang';
@@ -92,12 +94,33 @@ const ProjectFlockTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
+      areaFilter: '',
+      locationFilter: '',
+      kandangFilter: '',
+      periodFilter: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
+      search: 'search',
+      areaFilter: 'area_id',
+      locationFilter: 'location_id',
+      kandangFilter: 'kandang_id',
+      periodFilter: 'period',
     },
   });
+  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
+  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
+  const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
+
+  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+  const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
+    null
+  );
+  const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
 
   // Fetch Data
   const {
@@ -109,6 +132,59 @@ const ProjectFlockTable = () => {
     ProjectFlockApi.getAllFetcher
   );
 
+  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+    search: areaSelectInputValue,
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: areas,
+    isLoading: isLoadingAreas,
+    mutate: refreshAreas,
+  } = useSWR(areaUrl, AreaApi.getAllFetcher);
+
+  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    search: locationSelectInputValue,
+    area_id: selectedArea != null ? selectedArea.value.toString() : '',
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: locations,
+    isLoading: isLoadingLocations,
+    mutate: refreshLocations,
+  } = useSWR(locationUrl, LocationApi.getAllFetcher);
+
+  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
+    search: kandangSelectInputValue,
+    location_id:
+      selectedLocation != null ? selectedLocation.value.toString() : '',
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: kandangs,
+    isLoading: isLoadingKandang,
+    mutate: refreshKandang,
+  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+
+  // Data to Options Mapping
+  const optionsArea = isResponseSuccess(areas)
+    ? areas?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const optionsKandang = isResponseSuccess(kandangs)
+    ? kandangs?.data.map((kandang) => ({
+        value: kandang.id,
+        label: kandang.name,
+      }))
+    : [];
+  const optionsLocation = isResponseSuccess(locations)
+    ? locations?.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      }))
+    : [];
+
   // State
   const [sorting, setSorting] = useState<SortingState>([]);
   const [selectedProjectFlock, setSelectedProjectFlock] =
@@ -170,21 +246,23 @@ const ProjectFlockTable = () => {
       header: 'FCR',
     },
     {
-      accessorKey: 'product_category.name',
-      header: 'Kategori Produk',
+      accessorKey: 'category',
+      header: 'Kategori',
     },
     {
       header: 'Kandang',
       cell: (props) => {
         const kandang = props.row.original.kandangs;
-        const kandangNames = kandang.map((k: Kandang) => k.name);
-        console.log('kandang');
-        console.log(kandang);
-        return (
-          <div>
-            {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
-          </div>
-        );
+        if (kandang) {
+          const kandangNames = kandang.map((k: Kandang) => k.name);
+          return (
+            <div>
+              {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
+            </div>
+          );
+        }else{
+          return '-';
+        }
       },
     },
     {
@@ -341,7 +419,60 @@ const ProjectFlockTable = () => {
                 />
               </div>
             </div>
-            <div className='hidden sm:flex flex-row justify-end'>
+            <div className='hidden sm:flex flex-row justify-end gap-6 w-full'>
+              <SelectInput
+                label='Area'
+                options={optionsArea}
+                isLoading={isLoadingAreas}
+                value={selectedArea}
+                onChange={(val) => {
+                  setSelectedArea(val as OptionType);
+                  updateFilter(
+                    'areaFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                isClearable
+              />
+              <SelectInput
+                label='Lokasi'
+                options={optionsLocation}
+                isLoading={isLoadingLocations}
+                value={selectedLocation}
+                onChange={(val) => {
+                  setSelectedLocation(val as OptionType);
+                  updateFilter(
+                    'locationFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                isClearable
+              />
+              <SelectInput
+                label='Kandang'
+                options={optionsKandang}
+                isLoading={isLoadingKandang}
+                value={selectedKandang}
+                onChange={(val) => {
+                  setSelectedKandang(val as OptionType);
+                  updateFilter(
+                    'kandangFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                isClearable
+              />
+              <DebouncedTextInput
+                name='period'
+                type='number'
+                label='Periode'
+                placeholder='Masukan periode'
+                value={periodInputValue ?? ''}
+                onChange={(e) => {
+                  setPeriodInputValue(parseInt(e.target.value));
+                  updateFilter('periodFilter', e.target.value);
+                }}
+              />
               <SelectInput
                 label='Baris'
                 options={ROWS_OPTIONS}
@@ -390,6 +521,21 @@ const ProjectFlockTable = () => {
         </div>
       </div>
 
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
index 545bd1e1..af305e01 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -20,14 +20,13 @@ export const ProjectFlockFormSchema = Yup.object({
     .min(1, 'Area wajib diisi!')
     .required('Area wajib diisi!'),
 
-  //Product Category
-  product_category: Yup.object({
-    value: Yup.number().required('ID Kategori Produk wajib diisi!'),
-    label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
+  // Kategori
+  category_option: Yup.object({
+    value: Yup.string().required('Nilai Kategori wajib diisi!'),
+    label: Yup.string().required('Label Kategori wajib diisi!'),
   }).nullable(),
-  product_category_id: Yup.number()
-    .min(1, 'Kategori Produk wajib diisi!')
-    .required('Kategori Produk wajib diisi!'),
+  category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
+    .required('Kategori wajib diisi!'),
 
   // FCR
   fcr: Yup.object({
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 903e3105..1573426b 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -34,6 +34,7 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import axios from 'axios';
+import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -202,7 +203,7 @@ const ProjectFlockForm = ({
 
   const optionChangeHandler = (
     val: OptionType | OptionType[] | null,
-    inputName: string
+    inputName: string,
   ) => {
     formik.setFieldValue(inputName, val);
     formik.setFieldValue(
@@ -213,6 +214,12 @@ const ProjectFlockForm = ({
     formik.setFieldTouched(`${inputName}_id`, true);
   };
 
+  const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('category', (val as OptionType)?.value);
+    formik.setFieldValue('category_option', val);
+    formik.setFieldTouched('category', true);
+  }
+
   const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value, checked } = event.target;
     if (checked) {
@@ -233,7 +240,7 @@ const ProjectFlockForm = ({
       formik.setFieldValue(
         'kandang_ids',
         optionsKandang
-          .filter((kandang) => kandang.status === 'NON_ACTIVE')
+          .filter((kandang) => (kandang.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(kandang.id)))
           .map((kandang) => kandang.id)
       );
     } else {
@@ -290,10 +297,10 @@ const ProjectFlockForm = ({
             label: initialValues.area.name,
           }
         : null,
-      product_category: initialValues?.product_category
+      category_option: initialValues?.category
         ? {
-            value: initialValues.product_category.id,
-            label: initialValues.product_category.name,
+            value: initialValues.category,
+            label: initialValues.category,
           }
         : null,
       fcr: initialValues?.fcr
@@ -310,11 +317,11 @@ const ProjectFlockForm = ({
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
       area_id: initialValues?.area?.id ?? 0,
-      product_category_id: initialValues?.product_category?.id ?? 0,
+      category: initialValues?.category,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
       period: initialValues?.period ?? '',
-      kandang_ids: [],
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [],
     };
   }, [initialValues]);
 
@@ -332,7 +339,7 @@ const ProjectFlockForm = ({
       const payload: CreateProjectFlockPayload = {
         flock_id: values.flock_id as number,
         area_id: values.area_id as number,
-        product_category_id: values.product_category_id as number,
+        category: values.category as string,
         fcr_id: values.fcr_id as number,
         location_id: values.location_id as number,
         period: values.period as number,
@@ -526,18 +533,15 @@ const ProjectFlockForm = ({
                 />
                 <SelectInput
                   required
-                  label='Kategori Produk'
-                  value={formik.values.product_category as OptionType}
-                  onChange={(val) => {
-                    optionChangeHandler(val, 'product_category');
-                  }}
-                  options={optionsProductCategory}
-                  isLoading={isLoadingProductCategories}
+                  label='Kategori'
+                  value={formik.values.category_option as OptionType}
+                  onChange={categoryChangeHandler}
+                  options={FLOCK_CATEGORY_OPTIONS}
                   isError={
-                    formik.touched.product_category &&
-                    Boolean(formik.errors.product_category)
+                    formik.touched.category &&
+                    Boolean(formik.errors.category)
                   }
-                  errorMessage={formik.errors.product_category as string}
+                  errorMessage={formik.errors.category as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -554,6 +558,7 @@ const ProjectFlockForm = ({
                   }
                   errorMessage={formik.errors.period as string}
                   readOnly={formType === 'detail'}
+                  disabled={true}
                 />
               </div>
             </div>
@@ -592,19 +597,24 @@ const ProjectFlockForm = ({
                               type='checkbox'
                               checked={
                                 optionsKandang
-                                  .filter((k) => k.status === 'NON_ACTIVE')
+                                  .filter((k) => (k.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(k.id)))
                                   .every((k) =>
                                     formik.values.kandang_ids.includes(k.id)
                                   ) &&
                                 optionsKandang.filter(
-                                  (k) => k.status === 'NON_ACTIVE'
+                                  (k) => (k.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(k.id))
                                 ).length > 0
                               }
                               className='checkbox'
+                              disabled={formType === 'detail' || optionsKandang.filter(
+                                  (k) => (k.status === 'NON_ACTIVE')
+                                ).length == 0}
                               onChange={
                                 formType === 'detail'
                                   ? () => {}
                                   : kandangCheckAll
+                          
+                                
                               }
                             />
                           </label>
@@ -635,7 +645,7 @@ const ProjectFlockForm = ({
                                   }
                                   disabled={
                                     formType === 'detail' ||
-                                    kandang.status != 'NON_ACTIVE'
+                                    (kandang.status != 'NON_ACTIVE')
                                   }
                                 />
                               </label>
diff --git a/src/config/constant.ts b/src/config/constant.ts
index ed4386a9..053a50cc 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -189,6 +189,17 @@ export const CATEGORY_OPTIONS = [
   },
 ];
 
+export const FLOCK_CATEGORY_OPTIONS = [
+  {
+    label: 'GROWING',
+    value: 'GROWING',
+  },
+  {
+    label: 'LAYING',
+    value: 'LAYING',
+  },
+];
+
 export const PRODUCT_FLAG_OPTIONS = [
   { label: 'DOC', value: 'DOC' },
   { label: 'PAKAN', value: 'PAKAN' },
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index caaf1844..07eb5082 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -12,8 +12,7 @@ export type BaseProjectFlock = {
   flock_id: number;
   area: Area;
   area_id: number;
-  product_category: ProductCategory;
-  product_category_id: number;
+  category: string;
   fcr: Fcr;
   fcr_id: number;
   location: Location;
@@ -34,7 +33,7 @@ export type ProjectFlock = BaseMetadata & BaseProjectFlock
 export type CreateProjectFlockPayload = {
   flock_id: number;
   area_id: number;
-  product_category_id: number;
+  category: string;
   fcr_id: number;
   location_id: number;
   period: number;

From 1a5a76c0f171615fd1a0eddcd2798115096de965 Mon Sep 17 00:00:00 2001
From: Adnan Zahir <adnanzaidanz@gmail.com>
Date: Tue, 21 Oct 2025 10:20:09 +0700
Subject: [PATCH 099/212] chore(CI): added build-filter.sh to only deploy
 master and development branch

---
 build-filter.sh | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 build-filter.sh

diff --git a/build-filter.sh b/build-filter.sh
new file mode 100644
index 00000000..ae7081e4
--- /dev/null
+++ b/build-filter.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+
+echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
+
+if [[ "$VERCEL_GIT_COMMIT_REF" == "master" || "$VERCEL_GIT_COMMIT_REF" == "development" ]]; then
+echo "✅ - Build can proceed"
+exit 1
+else
+echo "🛑 - Build cancelled"
+exit 0
+fi

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 100/212] 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 101/212] 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 102/212] 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 e4a1138d8d7c733ab19f3937cc7fbf13b40e5e5a Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 21 Oct 2025 11:37:33 +0700
Subject: [PATCH 103/212] fix(FE-86-87-88) Hapus tombol edit di index, tambah
 tombol approve dan delete di detail, dan hit endpoint approve yang udah ada
 di hoppscocth

---
 .../project-flock/ProjectFlockTable.tsx       |  40 +++-
 .../project-flock/form/ProjectFlockForm.tsx   | 179 ++++++++++++++----
 2 files changed, 172 insertions(+), 47 deletions(-)

diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index d283e46d..b5d91069 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -10,11 +10,12 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
@@ -57,7 +58,7 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
-      <Button
+      {/* <Button
         href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
@@ -65,7 +66,7 @@ const RowOptionsMenu = ({
       >
         <Icon icon='mdi:pencil-outline' width={16} height={16} />
         Edit
-      </Button>
+      </Button> */}
       <Button
         onClick={deleteClickHandler}
         variant='ghost'
@@ -194,6 +195,7 @@ const ProjectFlockTable = () => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Columns
   const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
@@ -260,7 +262,7 @@ const ProjectFlockTable = () => {
               {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
             </div>
           );
-        }else{
+        } else {
           return '-';
         }
       },
@@ -377,6 +379,30 @@ const ProjectFlockTable = () => {
     }
   };
 
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+    const approveProjectFlockRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlock>,
+      'POST'
+    >(`/approve`, {
+      method: 'POST',
+      payload: 'POST',
+      params: {
+        ids: selectedFlocks.map((flock) => flock.id).join(','),
+      },
+    });
+
+    if (isResponseSuccess(approveProjectFlockRes)) {
+      toast.success('Project Flock berhasil di-approve!');
+      confirmModal.closeModal();
+    }
+    if (isResponseError(approveProjectFlockRes)) {
+      toast.error(approveProjectFlockRes?.message as string);
+      confirmModal.closeModal();
+    }
+    setIsApproveLoading(false);
+  };
+
   return (
     <>
       <div className='w-full p-0 sm:p-4'>
@@ -557,10 +583,8 @@ const ProjectFlockTable = () => {
         primaryButton={{
           text: 'Ya',
           color: 'success',
-          onClick: async () => {
-            toast.success('Project Flock berhasil di-approve!');
-            confirmModal.closeModal();
-          },
+          onClick: confirmationModalApproveClickHandler,
+          isLoading: isApproveLoading,
         }}
       />
     </>
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 1573426b..f3101f7d 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -14,7 +14,7 @@ import {
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { use, useEffect, useMemo, useRef, useState } from 'react';
 import useSWR from 'swr';
 import {
   ProjectFlockFormSchema,
@@ -35,6 +35,8 @@ import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import axios from 'axios';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -66,6 +68,12 @@ const ProjectFlockForm = ({
     initialValues?.flock?.id ?? 0
   );
 
+  const deleteModal = useModal();
+  const confirmModal = useModal();
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
     search: '',
@@ -203,7 +211,7 @@ const ProjectFlockForm = ({
 
   const optionChangeHandler = (
     val: OptionType | OptionType[] | null,
-    inputName: string,
+    inputName: string
   ) => {
     formik.setFieldValue(inputName, val);
     formik.setFieldValue(
@@ -218,7 +226,7 @@ const ProjectFlockForm = ({
     formik.setFieldValue('category', (val as OptionType)?.value);
     formik.setFieldValue('category_option', val);
     formik.setFieldTouched('category', true);
-  }
+  };
 
   const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value, checked } = event.target;
@@ -240,7 +248,11 @@ const ProjectFlockForm = ({
       formik.setFieldValue(
         'kandang_ids',
         optionsKandang
-          .filter((kandang) => (kandang.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(kandang.id)))
+          .filter(
+            (kandang) =>
+              kandang.status === 'NON_ACTIVE' ||
+              formik.values.kandang_ids.includes(kandang.id)
+          )
           .map((kandang) => kandang.id)
       );
     } else {
@@ -321,7 +333,7 @@ const ProjectFlockForm = ({
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
       period: initialValues?.period ?? '',
-      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [],
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id),
     };
   }, [initialValues]);
 
@@ -391,26 +403,6 @@ const ProjectFlockForm = ({
     }
   }, [formType, initialValues]);
 
-  // Setelah data kandang difetch, centang otomatis kandang yang ada di initialValues
-  useEffect(() => {
-    if (formType != 'add' && isResponseSuccess(kandang)) {
-      if (selectedLocation) {
-        setOptionsKandang(kandang.data);
-        setOpenSelectKandangs(true);
-        const kandangIds =
-          initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [];
-        formik.setFieldValue('kandang_ids', kandangIds);
-        console.log("kandangIds");
-        console.log(kandangIds);
-      } else {
-        setOptionsKandang([]);
-        setOpenSelectKandangs(false);
-        formik.setFieldValue('kandang_ids', []);
-        initialValues.kandangs = [];
-      }
-    }
-  }, [formType, kandang, initialValues]);
-
   useEffect(() => {
     formik.validateForm();
   }, [formik.values]);
@@ -421,6 +413,43 @@ const ProjectFlockForm = ({
       : formik.setFieldValue('period', '');
   }, [periodFlocks]);
 
+  // Actions handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ProjectFlockApi.delete(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+    const approveProjectFlockRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlock>,
+      'POST'
+    >(`/${initialValues?.id}/approve`, {
+      method: 'POST',
+    });
+
+    if (isResponseSuccess(approveProjectFlockRes)) {
+      toast.success('Project Flock berhasil di-approve!');
+      confirmModal.closeModal();
+    }
+    if (isResponseError(approveProjectFlockRes)) {
+      toast.error(approveProjectFlockRes?.message as string);
+      confirmModal.closeModal();
+    }
+    setIsApproveLoading(false);
+  };
+
   return (
     <>
       <section className='w-full'>
@@ -459,6 +488,22 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
+        <div className='w-full py-4'>
+          <Button
+            variant='outline'
+            color='success'
+            onClick={() => {
+              if (initialValues?.id) {
+                confirmModal.openModal();
+              }
+            }}
+            disabled={!initialValues?.id}
+            className='w-full sm:w-fit'
+          >
+            <Icon icon='material-symbols:check' width={24} height={24} />
+            Approve
+          </Button>
+        </div>
         <form
           className='w-auto h-auto'
           onSubmit={formik.handleSubmit}
@@ -466,7 +511,7 @@ const ProjectFlockForm = ({
         >
           <div className='card bg-base-100 shadow w-full mb-6'>
             <div className='card-body'>
-              <div className='card-title mb-4'>Informasi Umum</div>
+              <div className='card-title mb-4'>Informasi Umum {formik.values.kandang_ids && formik.values.kandang_ids.join(', ')}</div>
 
               <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
@@ -538,8 +583,7 @@ const ProjectFlockForm = ({
                   onChange={categoryChangeHandler}
                   options={FLOCK_CATEGORY_OPTIONS}
                   isError={
-                    formik.touched.category &&
-                    Boolean(formik.errors.category)
+                    formik.touched.category && Boolean(formik.errors.category)
                   }
                   errorMessage={formik.errors.category as string}
                   isClearable
@@ -571,7 +615,9 @@ const ProjectFlockForm = ({
                     <div className='card-title'>Pilih Kandang</div>
                     <Button
                       variant='link'
-                      className='text-primary rotate-0 transition-transform hover:text-inherit'
+                      className={`text-primary rotate-${
+                        openSelectKandangs ? '180' : '0'
+                      } transition-transform hover:text-inherit`}
                     >
                       <Icon
                         icon='material-symbols:keyboard-arrow-down'
@@ -597,24 +643,31 @@ const ProjectFlockForm = ({
                               type='checkbox'
                               checked={
                                 optionsKandang
-                                  .filter((k) => (k.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(k.id)))
+                                  .filter(
+                                    (k) =>
+                                      k.status === 'NON_ACTIVE' ||
+                                      formik.values.kandang_ids.includes(k.id)
+                                  )
                                   .every((k) =>
                                     formik.values.kandang_ids.includes(k.id)
                                   ) &&
                                 optionsKandang.filter(
-                                  (k) => (k.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(k.id))
+                                  (k) =>
+                                    k.status === 'NON_ACTIVE' ||
+                                    formik.values.kandang_ids.includes(k.id)
                                 ).length > 0
                               }
-                              className='checkbox'
-                              disabled={formType === 'detail' || optionsKandang.filter(
-                                  (k) => (k.status === 'NON_ACTIVE')
-                                ).length == 0}
+                              className='checkbox transition-none'
+                              disabled={
+                                formType === 'detail' ||
+                                optionsKandang.filter(
+                                  (k) => k.status === 'NON_ACTIVE'
+                                ).length == 0
+                              }
                               onChange={
                                 formType === 'detail'
                                   ? () => {}
                                   : kandangCheckAll
-                          
-                                
                               }
                             />
                           </label>
@@ -634,7 +687,7 @@ const ProjectFlockForm = ({
                                 <input
                                   value={kandang.id}
                                   type='checkbox'
-                                  className='checkbox'
+                                  className='checkbox transition-none'
                                   checked={formik.values.kandang_ids.includes(
                                     kandang.id
                                   )}
@@ -645,7 +698,7 @@ const ProjectFlockForm = ({
                                   }
                                   disabled={
                                     formType === 'detail' ||
-                                    (kandang.status != 'NON_ACTIVE')
+                                    kandang.status != 'NON_ACTIVE'
                                   }
                                 />
                               </label>
@@ -703,7 +756,55 @@ const ProjectFlockForm = ({
             )}
           </div>
         </form>
+        <div className='w-full'>
+          <Button
+            onClick={() => {
+              if (initialValues?.id) {
+                deleteModal.openModal();
+              }
+            }}
+            color='error'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+        </div>
       </section>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
     </>
   );
 };

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 104/212] 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 105/212] 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 106/212] 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 e5b3af3239ba30987715eeb5565d762ae3e4ffbe Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 21 Oct 2025 13:19:50 +0700
Subject: [PATCH 107/212] fix(FE-88): fix project flock data types

---
 src/app/production/chickin/page.tsx           |  0
 .../project-flock/form/ProjectFlockForm.tsx   | 20 ++++++++++---------
 src/types/api/production/project-flock.d.ts   |  2 ++
 3 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 src/app/production/chickin/page.tsx

diff --git a/src/app/production/chickin/page.tsx b/src/app/production/chickin/page.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index f3101f7d..f80db610 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -58,7 +58,7 @@ const ProjectFlockForm = ({
   const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
 
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
-    initialValues?.kandangs?.length > 0
+    initialValues?.kandangs && initialValues?.kandangs?.length > 0
   );
   const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
     initialValues?.kandangs ?? []
@@ -329,11 +329,11 @@ const ProjectFlockForm = ({
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
       area_id: initialValues?.area?.id ?? 0,
-      category: initialValues?.category,
+      category: initialValues?.category as (NonNullable<"GROWING" | "LAYING" | undefined>),
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? '',
-      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id),
+      period: initialValues?.period ?? 0,
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (number | undefined)[],
     };
   }, [initialValues]);
 
@@ -376,13 +376,15 @@ const ProjectFlockForm = ({
   useEffect(() => {
     if (formType == 'detail') {
       formik.setFieldValue('area', {
-        value: initialValues.area.id,
-        label: initialValues.area.name,
+        value: initialValues?.area.id,
+        label: initialValues?.area.name,
       });
-      formik.setFieldValue('area_id', initialValues.area_id);
-      setSelectedArea(initialValues.area?.id);
+      formik.setFieldValue('area_id', initialValues?.area_id);
+      if(initialValues?.area_id){
+        setSelectedArea(initialValues?.area_id.toString() as string);
+      }
 
-      formik.setFieldValue('period', initialValues.period);
+      formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
   useEffect(() => {
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 07eb5082..12c01c3c 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -4,8 +4,10 @@ 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 { ProductCategory } from "@/types/api/master-data/product-category";
+import { BaseMetadata } from "@/types/api/api-general";
 
 export type BaseProjectFlock = {
+  id: number;
   name: string;
   status: string;
   flock: Flock;

From c8cdb3e77249b7bb7460137acf3f1cb1a5a3eab3 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 21 Oct 2025 13:22:49 +0700
Subject: [PATCH 108/212] fix(FE-88): fix error build

---
 src/app/production/chickin/page.tsx                         | 0
 .../production/project-flock/form/ProjectFlockForm.tsx      | 6 ++----
 src/types/api/production/project-flock.d.ts                 | 1 -
 3 files changed, 2 insertions(+), 5 deletions(-)
 delete mode 100644 src/app/production/chickin/page.tsx

diff --git a/src/app/production/chickin/page.tsx b/src/app/production/chickin/page.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index f80db610..d5de0c3c 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -14,7 +14,7 @@ import {
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { use, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
   ProjectFlockFormSchema,
@@ -31,9 +31,7 @@ import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production';
-import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
-import axios from 'axios';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -389,7 +387,7 @@ const ProjectFlockForm = ({
   }, [initialValues, setSelectedArea, formType]);
   useEffect(() => {
     formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
+  }, [formikSetValues, formikInitialValues, formik]);
   // Aktifkan lokasi jika formType = 'detail'
   useEffect(() => {
     if (formType === 'detail') {
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 12c01c3c..306c32f1 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -3,7 +3,6 @@ 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 { ProductCategory } from "@/types/api/master-data/product-category";
 import { BaseMetadata } from "@/types/api/api-general";
 
 export type BaseProjectFlock = {

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 109/212] 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 9a04724095e1238d9a47af28ff1feb390029f1ef Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 21 Oct 2025 14:11:08 +0700
Subject: [PATCH 110/212] fix(FE-86): fixing approve button and delete button

---
 .../pages/master-data/flock/FlocksTable.tsx   |   2 +-
 .../project-flock/ProjectFlockTable.tsx       |  25 +---
 .../form/ProjectFlockForm.schema.ts           |   1 -
 .../project-flock/form/ProjectFlockForm.tsx   | 118 +++++++++---------
 4 files changed, 66 insertions(+), 80 deletions(-)

diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx
index 60b392de..b0684a1a 100644
--- a/src/components/pages/master-data/flock/FlocksTable.tsx
+++ b/src/components/pages/master-data/flock/FlocksTable.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/lib/helper';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { use, useState } from 'react';
+import { useState } from 'react';
 import useSWR from 'swr';
 import { FlockApi } from '@/services/api/master-data';
 import { useModal } from '@/components/Modal';
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index b5d91069..af057fb8 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -3,7 +3,6 @@
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
@@ -22,10 +21,9 @@ import { Icon } from '@iconify/react';
 import {
   CellContext,
   ColumnDef,
-  ColumnSort,
   SortingState,
 } from '@tanstack/react-table';
-import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -140,7 +138,6 @@ const ProjectFlockTable = () => {
   const {
     data: areas,
     isLoading: isLoadingAreas,
-    mutate: refreshAreas,
   } = useSWR(areaUrl, AreaApi.getAllFetcher);
 
   const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
@@ -151,7 +148,6 @@ const ProjectFlockTable = () => {
   const {
     data: locations,
     isLoading: isLoadingLocations,
-    mutate: refreshLocations,
   } = useSWR(locationUrl, LocationApi.getAllFetcher);
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
@@ -163,7 +159,6 @@ const ProjectFlockTable = () => {
   const {
     data: kandangs,
     isLoading: isLoadingKandang,
-    mutate: refreshKandang,
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
   // Data to Options Mapping
@@ -337,19 +332,6 @@ const ProjectFlockTable = () => {
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-  const updateSortingFilter = useCallback(
-    (
-      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
-      sortFilter: ColumnSort | undefined
-    ) => {
-      if (!sortFilter) {
-        updateFilter(sortName, '');
-      } else {
-        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
-      }
-    },
-    [updateFilter]
-  );
   const handleSelectAll = (checked: boolean) => {
     if (checked && isResponseSuccess(projectFlocks)) {
       const allIds = projectFlocks.data.map((item) => item.id);
@@ -458,6 +440,7 @@ const ProjectFlockTable = () => {
                     (val as OptionType)?.value.toString()
                   );
                 }}
+                onInputChange={setAreaSelectInputValue}
                 isClearable
               />
               <SelectInput
@@ -472,6 +455,7 @@ const ProjectFlockTable = () => {
                     (val as OptionType)?.value.toString()
                   );
                 }}
+                onInputChange={setLocationSelectInputValue}
                 isClearable
               />
               <SelectInput
@@ -486,6 +470,7 @@ const ProjectFlockTable = () => {
                     (val as OptionType)?.value.toString()
                   );
                 }}
+                onInputChange={setKandangSelectInputValue}
                 isClearable
               />
               <DebouncedTextInput
@@ -569,7 +554,7 @@ const ProjectFlockTable = () => {
           selectedFlocks.length > 0
             ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
                 .map(
-                  (flock, index) =>
+                  (flock) =>
                     `${flock.flock?.name ?? '(Tanpa nama)'} - ${
                       flock.area?.name ?? '-'
                     }`
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
index af305e01..162282fb 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -1,4 +1,3 @@
-import { min } from 'moment';
 import * as Yup from 'yup';
 
 export const ProjectFlockFormSchema = Yup.object({
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index d5de0c3c..ccc3fadc 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -9,7 +9,6 @@ import {
   FlockApi,
   KandangApi,
   LocationApi,
-  ProductCategoryApi,
 } from '@/services/api/master-data';
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
@@ -106,14 +105,6 @@ const ProjectFlockForm = ({
     FcrApi.getAllFetcher
   );
 
-  const productCategoryUrl = `${
-    ProductCategoryApi.basePath
-  }?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: productCategories, isLoading: isLoadingProductCategories } =
-    useSWR(productCategoryUrl, ProductCategoryApi.getAllFetcher);
-
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
@@ -153,12 +144,6 @@ const ProjectFlockForm = ({
         label: flock.name,
       }))
     : [];
-  const optionsProductCategory = isResponseSuccess(productCategories)
-    ? productCategories?.data.map((productCategory) => ({
-        value: productCategory.id,
-        label: productCategory.name,
-      }))
-    : [];
 
   useEffect(() => {
     if (isResponseSuccess(locations)) {
@@ -168,7 +153,7 @@ const ProjectFlockForm = ({
       }));
       setOptionsLocation(options);
     }
-  }, [locations]);
+  }, [locations, setSelectedLocation]);
 
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
@@ -327,11 +312,16 @@ const ProjectFlockForm = ({
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
       area_id: initialValues?.area?.id ?? 0,
-      category: initialValues?.category as (NonNullable<"GROWING" | "LAYING" | undefined>),
+      category: initialValues?.category as NonNullable<
+        'GROWING' | 'LAYING' | undefined
+      >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
       period: initialValues?.period ?? 0,
-      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (number | undefined)[],
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+        | number
+        | undefined
+      )[],
     };
   }, [initialValues]);
 
@@ -378,16 +368,18 @@ const ProjectFlockForm = ({
         label: initialValues?.area.name,
       });
       formik.setFieldValue('area_id', initialValues?.area_id);
-      if(initialValues?.area_id){
+      if (initialValues?.area_id) {
         setSelectedArea(initialValues?.area_id.toString() as string);
       }
 
       formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
+  
   useEffect(() => {
     formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues, formik]);
+  }, [formikSetValues, formikInitialValues]);
+
   // Aktifkan lokasi jika formType = 'detail'
   useEffect(() => {
     if (formType === 'detail') {
@@ -408,9 +400,9 @@ const ProjectFlockForm = ({
   }, [formik.values]);
 
   useEffect(() => {
-    isResponseSuccess(periodFlocks)
-      ? formik.setFieldValue('period', periodFlocks.data.next_period)
-      : formik.setFieldValue('period', '');
+    if(isResponseSuccess(periodFlocks)){
+      formik.setFieldValue('period', periodFlocks.data.next_period);
+    }
   }, [periodFlocks]);
 
   // Actions handler
@@ -488,22 +480,24 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
-        <div className='w-full py-4'>
-          <Button
-            variant='outline'
-            color='success'
-            onClick={() => {
-              if (initialValues?.id) {
-                confirmModal.openModal();
-              }
-            }}
-            disabled={!initialValues?.id}
-            className='w-full sm:w-fit'
-          >
-            <Icon icon='material-symbols:check' width={24} height={24} />
-            Approve
-          </Button>
-        </div>
+        {formType == 'detail' && (
+          <div className='w-full py-4'>
+            <Button
+              variant='outline'
+              color='success'
+              onClick={() => {
+                if (initialValues?.id) {
+                  confirmModal.openModal();
+                }
+              }}
+              disabled={!initialValues?.id}
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+          </div>
+        )}
         <form
           className='w-auto h-auto'
           onSubmit={formik.handleSubmit}
@@ -511,7 +505,9 @@ const ProjectFlockForm = ({
         >
           <div className='card bg-base-100 shadow w-full mb-6'>
             <div className='card-body'>
-              <div className='card-title mb-4'>Informasi Umum {formik.values.kandang_ids && formik.values.kandang_ids.join(', ')}</div>
+              <div className='card-title mb-4'>
+                Informasi Umum
+              </div>
 
               <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
@@ -603,6 +599,7 @@ const ProjectFlockForm = ({
                   errorMessage={formik.errors.period as string}
                   readOnly={formType === 'detail'}
                   disabled={true}
+                  isLoading={isLoadingPeriodFlocks}
                 />
               </div>
             </div>
@@ -633,6 +630,9 @@ const ProjectFlockForm = ({
                 open={openSelectKandangs}
               >
                 <div className='overflow-x-auto'>
+                  {isLoadingKandang && (
+                    <span className="loading loading-dots loading-xl"></span>
+                  )}
                   <table className='table'>
                     {/* head */}
                     <thead>
@@ -756,24 +756,26 @@ const ProjectFlockForm = ({
             )}
           </div>
         </form>
-        <div className='w-full'>
-          <Button
-            onClick={() => {
-              if (initialValues?.id) {
-                deleteModal.openModal();
-              }
-            }}
-            color='error'
-          >
-            <Icon
-              icon='material-symbols:delete-outline-rounded'
-              width={16}
-              height={16}
-              className='justify-start text-sm'
-            />
-            Delete
-          </Button>
-        </div>
+        {formType != 'add' && (
+          <div className='w-full'>
+            <Button
+              onClick={() => {
+                if (initialValues?.id) {
+                  deleteModal.openModal();
+                }
+              }}
+              color='error'
+            >
+              <Icon
+                icon='material-symbols:delete-outline-rounded'
+                width={16}
+                height={16}
+                className='justify-start text-sm'
+              />
+              Delete
+            </Button>
+          </div>
+        )}
       </section>
 
       <ConfirmationModal

From 4e6d2088e1fbb5fbfeab107675c7041b4d1c15ef Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 14:55:37 +0700
Subject: [PATCH 111/212] feat(FE-147): create Transfer to Laying list page

---
 src/app/production/transfer-to-laying/page.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/page.tsx

diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
new file mode 100644
index 00000000..40829c20
--- /dev/null
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -0,0 +1,16 @@
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+
+const TransferToLaying = () => {
+  return (
+    <section className='w-full p-4'>
+      <h1 className='mb-4'>Transfer to Laying</h1>
+      <Button href='/production/transfer-to-laying/add' color='primary'>
+        <Icon icon='ic:round-plus' width={24} height={24} />
+        Tambah Transfer to Laying
+      </Button>
+    </section>
+  );
+};
+
+export default TransferToLaying;

From 7fdbfe6dfb6191722051a8be4ef28865e606e291 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 14:56:58 +0700
Subject: [PATCH 112/212] feat(FE-113): create Add Transfer to Laying page

---
 src/app/production/transfer-to-laying/add/page.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/add/page.tsx

diff --git a/src/app/production/transfer-to-laying/add/page.tsx b/src/app/production/transfer-to-laying/add/page.tsx
new file mode 100644
index 00000000..6f29085f
--- /dev/null
+++ b/src/app/production/transfer-to-laying/add/page.tsx
@@ -0,0 +1,11 @@
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+const AddTransferToLaying = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <TransferToLayingForm />
+    </div>
+  );
+};
+
+export default AddTransferToLaying;

From d550dcbf4823538779014584e3c4b4d042d845ed Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 14:57:32 +0700
Subject: [PATCH 113/212] feat(FE-141): create layout for detail Transfer to
 Laying route

---
 .../production/transfer-to-laying/detail/layout.tsx   | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/detail/layout.tsx

diff --git a/src/app/production/transfer-to-laying/detail/layout.tsx b/src/app/production/transfer-to-laying/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/production/transfer-to-laying/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;

From 0bab704163c143dd981d81aef42bda86a657af02 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:01:19 +0700
Subject: [PATCH 114/212] chore(FE-113): create getByPath helper function

---
 src/lib/helper.ts | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index d85b7b16..0f827e8a 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -27,3 +27,37 @@ export const formatCurrency = (
     maximumFractionDigits,
   }).format(value);
 };
+
+/**
+ * Retrieves a nested value from an object using a dot-delimited key path.
+ * Supports array indexes (e.g., "users.0.name") and returns a default value
+ * if the path does not exist.
+ *
+ * @param obj - The source object to search.
+ * @param path - Dot-delimited key string (e.g., "user.address.city").
+ * @param defaultValue - Optional value to return if the key path is not found.
+ * @returns The value found at the specified path, or the default value.
+ */
+export function getByPath<T, D = undefined>(
+  obj: T,
+  path: string,
+  defaultValue?: D
+): unknown | D {
+  if (obj == null) return defaultValue as D;
+  if (!path) return obj as unknown;
+
+  const segments = path.split('.').filter(Boolean);
+  let cur: { [key: string]: unknown } = obj;
+
+  for (const seg of segments) {
+    if (cur == null) return defaultValue as D;
+    const key: string | number =
+      Array.isArray(cur) && /^\d+$/.test(seg) ? Number(seg) : seg;
+    if (Object(cur) !== cur || !(key in cur)) {
+      return defaultValue as D;
+    }
+    cur = cur[key] as { [key: string]: unknown };
+  }
+
+  return cur as unknown;
+}

From 8b403a4208710e9c247f61d86c348d3421fefd4d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:01:48 +0700
Subject: [PATCH 115/212] feat(FE-113): create useSelect hook

---
 src/components/input/SelectInput.tsx | 48 +++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index f6cef527..e16bbea0 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+
 import Select, {
   OptionProps,
   GroupBase,
@@ -11,7 +13,10 @@ import Select, {
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
-import { cn } from '@/lib/helper';
+import { cn, getByPath } from '@/lib/helper';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 export interface OptionType {
   value: string | number;
@@ -222,4 +227,45 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   );
 };
 
+const useSelect = <T,>(
+  basePath: string,
+  valueKey: keyof T,
+  labelKey: keyof T,
+  searchKey: string = 'search',
+  params?: { [key: string]: string }
+) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const optionsUrlParams = useMemo(() => {
+    return new URLSearchParams({
+      [searchKey]: inputValue ?? '',
+      ...params,
+    }).toString();
+  }, [inputValue, searchKey]);
+
+  const optionsUrl = `${basePath}?${optionsUrlParams}`;
+
+  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
+  });
+
+  const options = isResponseSuccess(data)
+    ? data.data.map((item) => {
+        return {
+          value: getByPath(item, valueKey as string),
+          label: getByPath(item, labelKey as string),
+        };
+      })
+    : [];
+
+  return {
+    inputValue,
+    setInputValue,
+    options,
+    isLoadingOptions: isLoading,
+    rawData: data,
+  };
+};
+
+export { useSelect };
 export default SelectInput;

From 1a76913f3f6b57fd40e2d60c89fef34317b18d4a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:05:36 +0700
Subject: [PATCH 116/212] chore(FE-113): set vertical-align to top

---
 src/styles/daisyui.css | 4 ++++
 1 file changed, 4 insertions(+)

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 5af9c3ee27398b82320435ee37d7313dda066db8 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:06:10 +0700
Subject: [PATCH 117/212] chore(FE-113): change api route for getting user info
 to /auth/sso/userinfo

---
 src/components/helper/RequireAuth.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
index 1d9d86b4..dbd4b6bc 100644
--- a/src/components/helper/RequireAuth.tsx
+++ b/src/components/helper/RequireAuth.tsx
@@ -158,7 +158,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
 
   const { data: userResponse, isLoading: isLoadingUserResponse } =
     useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
-      '/auth/get-me',
+      '/auth/sso/userinfo',
       httpClientFetcher,
       {
         shouldRetryOnError: false,
@@ -194,4 +194,4 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   return <>{children}</>;
 };
 
-export default RequireAuth;
\ No newline at end of file
+export default RequireAuth;

From bac72b8eb361e9997bea1158b560c857207d8376 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:06:39 +0700
Subject: [PATCH 118/212] feat(FE-113): create Transfer to Laying type

---
 .../api/production/transfer-to-laying.d.ts    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/types/api/production/transfer-to-laying.d.ts

diff --git a/src/types/api/production/transfer-to-laying.d.ts b/src/types/api/production/transfer-to-laying.d.ts
new file mode 100644
index 00000000..77d35d8f
--- /dev/null
+++ b/src/types/api/production/transfer-to-laying.d.ts
@@ -0,0 +1,37 @@
+import { BaseApiResponse, BaseMetadata, flags } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+export type BaseTransferToLaying = {
+  id: number;
+  transfer_date: string;
+  flock_source: {
+    id: number;
+    name: string;
+  };
+  flock_destination: {
+    id: number;
+    name: string;
+  };
+  quantity: number;
+  kandangs: {
+    kandang: Kandang;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type TransferToLaying = BaseMetadata & BaseTransferToLaying;
+
+export type CreateTransferToLayingPayload = {
+  transfer_date: string;
+  flock_source_id: number;
+  flock_destination_id: number;
+  totalQuantity: number;
+  kandangs: {
+    kandang_id: number;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type UpdateTransferToLayingPayload = CreateTransferToLayingPayload;

From 2f4daea253120ab40b6d036b9f20935aadb7fb5f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:07:51 +0700
Subject: [PATCH 119/212] feat(FE-113): create API Service for Transfer to
 Laying

---
 .../api/production/transfer-to-laying.ts      | 182 ++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 src/services/api/production/transfer-to-laying.ts

diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
new file mode 100644
index 00000000..94af7ae8
--- /dev/null
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -0,0 +1,182 @@
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+import { FlockWithKandangs } from '@/types/api/master-data/flock';
+
+// TODO: delete this dummy data
+const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
+  code: 200,
+  status: 'success',
+  message: 'Get all projectflocks successfully',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 2,
+  },
+  data: [
+    {
+      id: 2,
+      name: 'Flock Banten',
+      totalQuantity: 300,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 150,
+        },
+        {
+          kandang: {
+            id: 5,
+            name: 'Cikaum 3',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 50,
+        },
+      ],
+    },
+
+    {
+      id: 3,
+      name: 'Flock Priangan',
+      totalQuantity: 200,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'Priangan',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+      ],
+    },
+  ],
+};
+
+export class TransferToLayingService<
+  T,
+  CreatePayloadGeneric,
+  UpdatePayloadGeneric
+> extends BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async getFlockSource(): Promise<
+    BaseApiResponse<FlockWithKandangs[]> | undefined
+  > {
+    try {
+      //   const getFlockSourcePath = `${this.basePath}/${flockSourcePath}`;
+      //   const getSingleRes = await httpClient<FlockSourceType>(getFlockSourcePath);
+      //   return getSingleRes;
+
+      await sleep(500);
+
+      return FLOCK_SOURCE_DUMMY_DATA;
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+}
+
+export const TransferToLayingApi = new TransferToLayingService<
+  unknown,
+  unknown,
+  unknown
+>('');

From d9fa685ae627dd29632dc23d0bcd27400136702a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:08:11 +0700
Subject: [PATCH 120/212] feat(FE-113): create Transfer to Laying Create Form

---
 .../form/TransferToLayingForm.tsx             | 562 ++++++++++++++++++
 1 file changed, 562 insertions(+)
 create mode 100644 src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
new file mode 100644
index 00000000..c4428a72
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -0,0 +1,562 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import SelectInput, {
+  OptionType,
+  // useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+import {
+  TransferToLayingFormSchema,
+  TransferToLayingFormValues,
+  UpdateTransferToLayingFormSchema,
+} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
+import { cn } from '@/lib/helper';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+
+interface TransferToLayingFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: TransferToLaying;
+}
+
+const TransferToLayingForm = ({
+  type = 'add',
+  initialValues,
+}: TransferToLayingFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createTransferToLayingHandler = useCallback(
+    async (payload: CreateTransferToLayingPayload) => {
+      console.log('Create transfer to laying:', { payload });
+
+      toast.success('Berhasil menambahkan data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const updateTransferToLayingHandler = useCallback(
+    async (
+      transferToLayingId: number,
+      payload: UpdateTransferToLayingPayload
+    ) => {
+      console.log(
+        `Update transfer to laying with ID of ${transferToLayingId}:`,
+        { payload }
+      );
+
+      toast.success('Berhasil mengubah data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
+    return {
+      transfer_date: initialValues?.transfer_date ?? '',
+      flockSource: initialValues?.flock_source
+        ? {
+            value: initialValues?.flock_source.id,
+            label: initialValues?.flock_source.name,
+          }
+        : undefined,
+      flockDestination: initialValues?.flock_destination
+        ? {
+            value: initialValues?.flock_destination.id,
+            label: initialValues?.flock_destination.name,
+          }
+        : undefined,
+      totalQuantity: initialValues?.quantity ?? undefined,
+
+      kandangs: initialValues?.kandangs
+        ? initialValues.kandangs.map((kandang) => ({
+            kandang: {
+              value: kandang.kandang.id,
+              label: kandang.kandang.name,
+            },
+            quantity: kandang.quantity,
+          }))
+        : [],
+
+      reason: initialValues?.reason ?? undefined,
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<TransferToLayingFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit'
+        ? UpdateTransferToLayingFormSchema
+        : TransferToLayingFormSchema,
+    onSubmit: async (values) => {
+      console.log({ values });
+
+      setFormErrorMessage('');
+
+      const transferToLayingPayload: CreateTransferToLayingPayload = {
+        transfer_date: values.transfer_date as string,
+        flock_source_id: values.flockSource?.value as number,
+        flock_destination_id: values.flockDestination?.value as number,
+        totalQuantity: values.totalQuantity as number,
+
+        kandangs: values.kandangs?.map((kandang) => ({
+          kandang_id: kandang.kandang.value,
+          quantity: kandang.quantity,
+        })) as {
+          kandang_id: number;
+          quantity: number;
+        }[],
+
+        reason: values.reason as string,
+      };
+
+      switch (type) {
+        case 'add':
+          await createTransferToLayingHandler(transferToLayingPayload);
+          break;
+
+        case 'edit':
+          await updateTransferToLayingHandler(
+            initialValues?.id as number,
+            transferToLayingPayload
+          );
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues, values: formikValues } = formik;
+  const { kandangs: kandangsValue } = formikValues;
+
+  const deleteTransferToLayingClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete TransferToLaying!');
+
+    setIsDeleteLoading(false);
+  };
+
+  const isRepeaterInputError = (
+    column: keyof TransferToLayingFormValues['kandangs'][0],
+    idx: number
+  ) => {
+    return (
+      formik.touched.kandangs?.[idx]?.[column] &&
+      Boolean(
+        formik.errors.kandangs?.[idx] instanceof Object &&
+          formik.errors.kandangs?.[idx]?.[column]
+      )
+    );
+  };
+
+  const repeaterInputErrorMessage = (
+    column: keyof TransferToLayingFormValues['kandangs'][0],
+    idx: number
+  ) => {
+    return (formik.errors.kandangs?.[idx] as Record<string, string>)?.[column];
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Source
+  // const {
+  //   inputValue: flockSourceInputValue,
+  //   setInputValue: setFlockSourceInputValue,
+  //   options: flockSourceOptions,
+  //   isLoadingOptions: isLoadingFlockSourceOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-source', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const { data: flockSources, isLoading: isLoadingFlockSourceOptions } = useSWR(
+    'test',
+    () => TransferToLayingApi.getFlockSource()
+  );
+
+  const flockSourceOptions = isResponseSuccess(flockSources)
+    ? flockSources?.data.map((flockSource) => ({
+        value: flockSource.id,
+        label: flockSource.name,
+      }))
+    : [];
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    // Get flock source data for total quantity and kandang
+    const flockSource =
+      isResponseSuccess(flockSources) && val !== null
+        ? flockSources.data.find(
+            (item) => item.id === (val as OptionType).value
+          )
+        : undefined;
+
+    // Set total quantity and kandangs
+    if (flockSource) {
+      const formattedKandangs = flockSource.kandangs.map((item) => ({
+        kandang: {
+          value: item.kandang.id,
+          label: item.kandang.name,
+        },
+        quantity: '',
+        maxQuantity: item.quantity,
+      }));
+
+      formik.setFieldValue('totalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('maxTotalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('kandangs', formattedKandangs);
+    } else {
+      formik.setFieldValue('totalQuantity', undefined);
+      formik.setFieldValue('kandangs', undefined);
+      formik.setFieldValue('reason', '');
+    }
+
+    formik.setFieldTouched('flockSource', true);
+    formik.setFieldValue('flockSource', val);
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Destination
+  // const {
+  //   inputValue: flockDestinationInputValue,
+  //   setInputValue: setFlockDestinationInputValue,
+  //   options: flockDestinationOptions,
+  //   isLoadingOptions: isLoadingFlockDestinationOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-destination', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const {
+    data: flockDestinations,
+    isLoading: isLoadingFlockDestinationOptions,
+  } = useSWR('test', () => TransferToLayingApi.getFlockSource());
+
+  const flockDestinationOptions = isResponseSuccess(flockDestinations)
+    ? flockDestinations?.data.map((flockDestination) => ({
+        value: flockDestination.id,
+        label: flockDestination.name,
+      }))
+    : [];
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched('flockDestination', true);
+    formik.setFieldValue('flockDestination', val);
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  useEffect(() => {
+    // calculate total quantity if kandangs quantity change
+    if (kandangsValue && kandangsValue.length > 0) {
+      let newTotalQuantity = 0;
+
+      kandangsValue.forEach((item) => {
+        newTotalQuantity += item.quantity as number;
+      });
+
+      formik.setFieldValue('totalQuantity', newTotalQuantity);
+      formik.validateField('totalQuantity');
+    }
+  }, [formikSetValues, kandangsValue]);
+
+  return (
+    <>
+      <section className='w-full max-w-3xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/nonstock'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Transfer ke Laying'}
+            {type === 'edit' && 'Edit Transfer ke Laying'}
+            {type === 'detail' && 'Detail Transfer ke Laying'}
+          </h1>
+        </header>
+
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={formik.values.transfer_date}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.transfer_date &&
+                Boolean(formik.errors.transfer_date)
+              }
+              errorMessage={formik.errors.transfer_date}
+              readOnly={type === 'detail'}
+            />
+
+            <div className='flex flex-col sm:flex-row gap-4'>
+              <SelectInput
+                required
+                label='Flock Asal'
+                placeholder='Flock asal'
+                value={formik.values.flockSource as OptionType}
+                options={flockSourceOptions}
+                onChange={flockSourceChangeHandler}
+                isLoading={isLoadingFlockSourceOptions}
+                // onInputChange={setFlockSourceInputValue}
+                isError={
+                  formik.touched.flockSource &&
+                  Boolean(typeof formik.errors.flockSource === 'string')
+                }
+                errorMessage={formik.errors.flockSource as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+
+              <SelectInput
+                required
+                label='Flock Tujuan'
+                placeholder='Flock tujuan'
+                value={formik.values.flockDestination as OptionType}
+                options={flockDestinationOptions}
+                onChange={flockDestinationChangeHandler}
+                isLoading={isLoadingFlockDestinationOptions}
+                // onInputChange={setFlockDestinationInputValue}
+                isError={
+                  formik.touched.flockDestination &&
+                  Boolean(typeof formik.errors.flockDestination === 'string')
+                }
+                errorMessage={formik.errors.flockDestination as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
+
+            <TextInput
+              required
+              type='number'
+              name='totalQuantity'
+              label='Jumlah Transfer'
+              bottomLabel={
+                formikValues.maxTotalQuantity
+                  ? `Max: ${formikValues.maxTotalQuantity}`
+                  : undefined
+              }
+              placeholder='Masukkan jumlah transfer'
+              value={formik.values.totalQuantity ?? ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.totalQuantity &&
+                Boolean(formik.errors.totalQuantity)
+              }
+              errorMessage={formik.errors.totalQuantity}
+              // readOnly={type === 'detail'}
+              // disabled={Boolean(formik.errors.flockSource)}
+              disabled
+            />
+
+            <div>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Kandang</th>
+                      <th>Kuantitas</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {(!formik.values.kandangs ||
+                      formik.values.kandangs.length === 0) && (
+                      <tr>
+                        <td colSpan={2}>
+                          <p className='w-full text-center text-gray-400'>
+                            Pilih flock asal terlebih dahulu!
+                          </p>
+                        </td>
+                      </tr>
+                    )}
+
+                    {formik.values.kandangs &&
+                      formik.values.kandangs.map((kandang, idx) => (
+                        <tr key={idx}>
+                          <td>
+                            <SelectInput
+                              value={kandang.kandang}
+                              options={[]}
+                              isDisabled
+                            />
+                          </td>
+
+                          <td>
+                            <TextInput
+                              required
+                              type='number'
+                              name={`kandangs[${idx}].quantity`}
+                              bottomLabel={
+                                kandang.maxQuantity
+                                  ? `Max: ${kandang.maxQuantity}`
+                                  : undefined
+                              }
+                              placeholder='Masukkan kuantitas'
+                              value={kandang.quantity}
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              isError={isRepeaterInputError('quantity', idx)}
+                              errorMessage={repeaterInputErrorMessage(
+                                'quantity',
+                                idx
+                              )}
+                              readOnly={type === 'detail'}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <TextArea
+              required
+              rows={5}
+              name='reason'
+              label='Alasan Transfer'
+              placeholder='Alasan transfer'
+              value={formik.values.reason}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.reason && Boolean(formik.errors.reason)}
+              errorMessage={formik.errors.reason}
+              readOnly={type === 'detail'}
+              disabled={Boolean(formik.errors.flockSource)}
+            />
+          </div>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteTransferToLayingClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+
+                {type !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {type !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {formErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{formErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data TransferToLaying?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default TransferToLayingForm;

From 4127075b132a1e514e67d88fcb12b16aac8830c7 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:09:33 +0700
Subject: [PATCH 121/212] feat(FE-113): create Transfer to Laying Create Form
 Schema

---
 .../form/TransferToLayingForm.schema.ts       | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
new file mode 100644
index 00000000..e0273a9a
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
@@ -0,0 +1,83 @@
+import * as Yup from 'yup';
+
+type TransferToLayingFormSchemaType = {
+  transfer_date?: string;
+  flockSource?: {
+    value: number;
+    label: string;
+  };
+  flockDestination?: {
+    value: number;
+    label: string;
+  };
+
+  totalQuantity?: number;
+  maxTotalQuantity?: number; // original cap (hidden), helper
+
+  kandangs: {
+    kandang: {
+      value: number;
+      label: string;
+    };
+    quantity: number | string; // editable
+    maxQuantity?: number; // original cap (hidden), helper
+  }[];
+  reason?: string;
+};
+
+export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSchemaType> =
+  Yup.object({
+    transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+
+    flockSource: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock asal wajib diisi!'),
+
+    flockDestination: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock tujuan wajib diisi!'),
+
+    totalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .max(
+        Yup.ref('maxTotalQuantity'),
+        ({ max }) => `Kuantitas maksimal ${max}!`
+      )
+      .required('Jumlah transfer wajib diisi!'),
+
+    maxTotalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .required('Jumlah transfer wajib diisi!'),
+
+    kandangs: Yup.array()
+      .of(
+        Yup.object({
+          kandang: Yup.object({
+            value: Yup.number().min(1).required(),
+            label: Yup.string().required(),
+          }).required('Kandang wajib diisi!'),
+
+          quantity: Yup.number()
+            .min(0, 'Kuantitas minimal 0!')
+            .max(
+              Yup.ref('maxQuantity'),
+              ({ max }) => `Kuantitas maksimal ${max}!`
+            )
+            .required('Kuantitas wajib diisi!'),
+
+          maxQuantity: Yup.number().min(1).required(), // internal helper field
+        })
+      )
+      .min(1, 'Minimal 1 kandang terisi!')
+      .required('Kandang wajib diisi!'),
+
+    reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  });
+
+export const UpdateTransferToLayingFormSchema = TransferToLayingFormSchema;
+
+export type TransferToLayingFormValues = Yup.InferType<
+  typeof TransferToLayingFormSchema
+>;

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 122/212] 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 a2c43a7f1ee6f9d3d43af5a3034628d6f4d8f463 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:12:09 +0700
Subject: [PATCH 123/212] feat(FE-141): create Transfer to Laying Detail page

---
 .../transfer-to-laying/detail/page.tsx        | 138 ++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/detail/page.tsx

diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
new file mode 100644
index 00000000..91b70bc6
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
+  id: 1,
+  transfer_date: '14-10-2025',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+const TransferToLayingDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    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 (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying || isResponseError(transferToLaying))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransferToLayingDetail;

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 124/212] 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 a29bbc9a4252ea30ac93f4bb83ecafd0fc1fe549 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:23:13 +0700
Subject: [PATCH 125/212] chore(FE-113): comment Inventory Product link

---
 src/config/constant.ts | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index f3ea80b3..06659f69 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -30,11 +30,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     link: '/inventory',
     icon: 'mdi:warehouse',
     submenu: [
-      {
-        title: 'Product',
-        link: '/inventory/product',
-        icon: 'mdi:package-variant-closed',
-      },
+      // {
+      //   title: 'Product',
+      //   link: '/inventory/product',
+      //   icon: 'mdi:package-variant-closed',
+      // },
       {
         title: 'Penyesuaian Stok',
         link: '/inventory/adjustment',
@@ -115,18 +115,6 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
       },
     ],
   },
-  {
-    title: 'Persediaan',
-    link: '/inventory',
-    icon: 'material-symbols:box-outline-rounded',
-    submenu: [
-      {
-        title: 'Penyesuaian Persediaan',
-        link: '/inventory/adjustment',
-        icon: 'material-symbols:box-edit-outline-rounded',
-      },
-    ],
-  },
 ] as const;
 
 export const ROWS_OPTIONS = [

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 126/212] 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 6e6675d0a7ac3c23b9e34f76966858e44ee29831 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:37:25 +0700
Subject: [PATCH 127/212] feat(FE-113): change title and add Transfer ke Laying
 link

---
 src/config/constant.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index c7546890..b7afc19a 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -13,7 +13,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
   },
 
   {
-    title: 'Production',
+    title: 'Produksi',
     link: '/production',
     icon: 'material-symbols:conveyor-belt-outline-rounded',
     submenu: [
@@ -32,6 +32,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         link: '/production/recording',
         icon: 'mdi:clipboard-text',
       },
+      {
+        title: 'Transfer ke Laying',
+        link: '/production/transfer-to-laying',
+        icon: 'streamline:transfer-van',
+      },
     ],
   },
 

From e29613a37e362017d1b590dff26e3a11e264eec0 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:54:11 +0700
Subject: [PATCH 128/212] chore(FE-113): add status field

---
 src/app/production/transfer-to-laying/detail/page.tsx | 2 ++
 src/services/api/production/transfer-to-laying.ts     | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
index 91b70bc6..4d603098 100644
--- a/src/app/production/transfer-to-laying/detail/page.tsx
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -28,6 +28,7 @@ const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
       kandang: {
         id: 1,
         name: 'Kandang test',
+        status: 'ACTIVE',
         location: {
           id: 1,
           name: 'test location',
@@ -55,6 +56,7 @@ const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
       kandang: {
         id: 1,
         name: 'Kandang test 2',
+        status: 'ACTIVE',
         location: {
           id: 1,
           name: 'test location',
diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 94af7ae8..69b4db73 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -25,6 +25,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 3,
             name: 'Cikaum 1',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -47,6 +48,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 4,
             name: 'Cikaum 2',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -69,6 +71,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 5,
             name: 'Cikaum 3',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -99,6 +102,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 3,
             name: 'Cikaum 1',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',
@@ -121,6 +125,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
           kandang: {
             id: 4,
             name: 'Cikaum 2',
+            status: 'ACTIVE',
             location: {
               id: 1,
               name: 'Singaparna',

From 06f1d3f6a4fbd0134321bbcce9d0cfc207496f35 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:54:25 +0700
Subject: [PATCH 129/212] fix(FE-113): fix merge error

---
 src/components/input/SelectInput.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 082f9ae5..b491077f 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -97,7 +97,6 @@ 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('');
@@ -140,8 +139,6 @@ 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>
@@ -150,7 +147,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
       )}
 
       <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId='select'
         instanceId='select'
         value={value ?? (isMulti ? [] : null)}
         onChange={handleChange}
@@ -223,11 +219,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );

From 9f24d22a2c90906a115d6983e690cef056313a58 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 21 Oct 2025 15:54:50 +0700
Subject: [PATCH 130/212] feat(FE-113): create FlockWithKandangs type

---
 src/types/api/master-data/flock.d.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/types/api/master-data/flock.d.ts b/src/types/api/master-data/flock.d.ts
index 3ac5d390..daa7babf 100644
--- a/src/types/api/master-data/flock.d.ts
+++ b/src/types/api/master-data/flock.d.ts
@@ -1,14 +1,26 @@
-import { BaseMetadata } from "@/types/api/api-general";
+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;
\ No newline at end of file
+export type UpdateFlockPayload = CreateFlockPayload;
+
+// ---------------------------------------
+// TODO: adjust this later after Transfer to Laying API done
+import { BaseKandang } from '@/types/api/master-data/kandang';
+
+export type FlockWithKandangs = BaseFlock & {
+  totalQuantity: number;
+  kandangs: {
+    kandang: BaseKandang;
+    quantity: number;
+  }[];
+};

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 131/212] 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 132/212] 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 133/212] 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 134/212] 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 135/212] 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 136/212] 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 137/212] 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 138/212] 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 139/212] 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 140/212] 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 e53325cdc5eaefec0e9592e93cf9bf8b3fcf8592 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 11:53:12 +0700
Subject: [PATCH 141/212] feat(FE-147): show Transfer to Laying table

---
 src/app/production/transfer-to-laying/page.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
index 40829c20..84513542 100644
--- a/src/app/production/transfer-to-laying/page.tsx
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -1,14 +1,9 @@
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
+import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
 
 const TransferToLaying = () => {
   return (
     <section className='w-full p-4'>
-      <h1 className='mb-4'>Transfer to Laying</h1>
-      <Button href='/production/transfer-to-laying/add' color='primary'>
-        <Icon icon='ic:round-plus' width={24} height={24} />
-        Tambah Transfer to Laying
-      </Button>
+      <TransferToLayingsTable />
     </section>
   );
 };

From c24c0817aec51eb81da39c5b5de47b4dddb22cd4 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 11:53:35 +0700
Subject: [PATCH 142/212] chore(FE-147): add rowSelection and setRowSelection
 props

---
 src/components/Table.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index cfd77df6..d3498e33 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   manualSorting?: boolean;
+  rowSelection?: Record<string, boolean>;
+  setRowSelection?: OnChangeFn<Record<string, boolean>>;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +88,8 @@ const Table = <TData extends object>({
   sorting,
   setSorting,
   manualSorting = false,
+  rowSelection,
+  setRowSelection,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
     };
   }
 
+  if (rowSelection && setRowSelection) {
+    tableOptions.onRowSelectionChange = setRowSelection;
+    tableOptions.state = {
+      ...tableOptions.state,
+      rowSelection,
+    };
+    tableOptions.getRowId = (row) => (row as { id: string }).id;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 

From 1e2ea79a6a2d4e583a819921950f797c09dc4f69 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:51:20 +0700
Subject: [PATCH 143/212] chore(FE-147): add close button for MainDrawer

---
 src/components/MainDrawer.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
index be87f069..4a3b44b0 100644
--- a/src/components/MainDrawer.tsx
+++ b/src/components/MainDrawer.tsx
@@ -10,6 +10,7 @@ import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Navbar from '@/components/Navbar';
 import Collapse from '@/components/Collapse';
+import Button from '@/components/Button';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
@@ -155,9 +156,15 @@ const MainDrawerMenu = () => {
 };
 
 const MainDrawerContent = () => {
+  const { setMainDrawerOpen } = useUiStore();
+
+  const closeMainDrawerHandler = () => {
+    setMainDrawerOpen(false);
+  };
+
   return (
     <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='flex items-center gap-4'>
+      <div className='flex flex-row items-center gap-4'>
         <Image
           src='/assets/img/lti-logo.png'
           alt='MBU Logo'
@@ -167,6 +174,21 @@ const MainDrawerContent = () => {
         />
 
         <h1 className='text-xl font-bold'>LTI ERP</h1>
+
+        <div className='grow flex flex-row justify-end sm:hidden'>
+          <Button
+            variant='soft'
+            color='error'
+            onClick={closeMainDrawerHandler}
+            className='rounded-full'
+          >
+            <Icon
+              icon='material-symbols:close-rounded'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
       </div>
 
       <MainDrawerMenu />

From 204369e0feb41e820fe712858d3b775690ba9e35 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:51:39 +0700
Subject: [PATCH 144/212] feat(FE-147): add CheckboxInput component

---
 src/components/input/CheckboxInput.tsx | 89 ++++++++++++++++++++++++++
 1 file changed, 89 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..fb0c95c7
--- /dev/null
+++ b/src/components/input/CheckboxInput.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { HTMLProps, useEffect, useRef } from 'react';
+import { cn } from '@/lib/helper';
+
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
+  name: string;
+  label?: string;
+  indeterminate?: boolean;
+  classNames?: {
+    wrapper?: string;
+    inputWrapper?: string;
+    checkbox?: string;
+    label?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+}
+
+const CheckboxInput = ({
+  indeterminate,
+  name,
+  label,
+  className,
+  classNames,
+  isValid,
+  isError,
+  errorMessage,
+  ...rest
+}: CheckboxInputProps) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return (
+    <div
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
+    >
+      <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(
+            'checkbox cursor-pointer',
+            {
+              'border-error': isError,
+              'border-success': isValid,
+            },
+            className,
+            classNames?.checkbox
+          )}
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
+            )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
+    </div>
+  );
+};
+
+export default CheckboxInput;

From 3c8bdfbdac062e2754c3521d79e0340d896a1950 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:52:29 +0700
Subject: [PATCH 145/212] chore(FE-147): set generic when using getByPath
 function

---
 src/components/input/SelectInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index b491077f..6aaedc17 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -252,8 +252,8 @@ const useSelect = <T,>(
   const options = isResponseSuccess(data)
     ? data.data.map((item) => {
         return {
-          value: getByPath(item, valueKey as string),
-          label: getByPath(item, labelKey as string),
+          value: getByPath<T, number>(item, valueKey as string),
+          label: getByPath<T, string>(item, labelKey as string),
         };
       })
     : [];

From 5e710a792f473055e9d4b0223ef0e55b97e297d8 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:52:51 +0700
Subject: [PATCH 146/212] chore(FE-147): set moment locale to 'id' globally

---
 src/lib/helper.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index 0f827e8a..fe5811fd 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -1,7 +1,11 @@
 import moment from 'moment';
+import 'moment/locale/id';
 import { twMerge } from 'tailwind-merge';
 import clsx, { ClassValue } from 'clsx';
 
+// set locale globally
+moment.locale('id');
+
 export const sleep = (ms: number = 1000) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -42,9 +46,9 @@ export function getByPath<T, D = undefined>(
   obj: T,
   path: string,
   defaultValue?: D
-): unknown | D {
+): D {
   if (obj == null) return defaultValue as D;
-  if (!path) return obj as unknown;
+  if (!path) return obj as D;
 
   const segments = path.split('.').filter(Boolean);
   let cur: { [key: string]: unknown } = obj;
@@ -59,5 +63,5 @@ export function getByPath<T, D = undefined>(
     cur = cur[key] as { [key: string]: unknown };
   }
 
-  return cur as unknown;
+  return cur as D;
 }

From d2f24723fce85c9b05285dd47e49d6169afe2aad Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:53:41 +0700
Subject: [PATCH 147/212] chore(FE-141): set dummy data for Transfer to Laying
 detail page

---
 .../transfer-to-laying/detail/page.tsx         | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
index 4d603098..de5426c8 100644
--- a/src/app/production/transfer-to-laying/detail/page.tsx
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -13,7 +13,7 @@ import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
 // TODO: delete dummy data
 const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
   id: 1,
-  transfer_date: '14-10-2025',
+  transfer_date: '2025-10-14',
   flock_source: {
     id: 1,
     name: 'Flock asal test',
@@ -114,9 +114,11 @@ const TransferToLayingDetail = () => {
     );
   }
 
+  // TODO: remove dummy data and integrate with real API
   if (
     !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
   ) {
     router.replace('/404');
     return;
@@ -127,12 +129,18 @@ const TransferToLayingDetail = () => {
       {isLoadingTransferToLaying && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
         <TransferToLayingForm
           type='detail'
-          initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+          initialValues={transferToLaying.data}
         />
-      )}
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='detail'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+      />
     </div>
   );
 };

From ab9fbc903273a18a48a5f9f2711c9c0c651d57ad Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:54:02 +0700
Subject: [PATCH 148/212] feat(FE-147): create TransferToLayingsTable component

---
 .../TransferToLayingsTable.tsx                | 633 ++++++++++++++++++
 1 file changed, 633 insertions(+)
 create mode 100644 src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
new file mode 100644
index 00000000..52d21016
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -0,0 +1,633 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import TextInput from '@/components/input/TextInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { cn, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Flock } from '@/types/api/master-data/flock';
+import { FlockApi } from '@/services/api/master-data';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  approveClickHandler,
+  rejectClickHandler,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<TransferToLaying, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
+  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={`/production/transfer-to-laying/detail/?transferToLayingId=${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={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='success'
+        onClick={approveClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:check' width={24} height={24} />
+        Approve
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='error'
+        onClick={rejectClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:close' width={24} height={24} />
+        Reject
+      </Button>
+
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const TransferToLayingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      transferDate: '',
+      flockSource: '',
+      flockDestination: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      transferDate: 'transfer_date',
+      flockSource: 'flock_source',
+      flockDestination: 'flock_destination',
+    },
+  });
+
+  const {
+    data: transferToLayings,
+    isLoading,
+    mutate: refreshTransferToLayings,
+  } = useSWR(
+    `${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
+    TransferToLayingApi.getAllFetcher
+  );
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Flocks data
+  const {
+    setInputValue: setFlockSourceInputValue,
+    options: flockSourceOptions,
+    isLoadingOptions: isLoadingFlockSourceOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setFlockDestinationInputValue,
+    options: flockDestinationOptions,
+    isLoadingOptions: isLoadingFlockDestinationOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  // Flocks value
+  const [selectedFlockSource, setSelectedFlockSource] =
+    useState<OptionType | null>(null);
+  const [selectedFlockDestination, setSelectedFlockDestination] =
+    useState<OptionType | null>(null);
+
+  const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
+    TransferToLaying | undefined
+  >(undefined);
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const transferToLayingsColumns: ColumnDef<TransferToLaying>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div>
+          <CheckboxInput
+            name='row'
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            indeterminate={row.getIsSomeSelected()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        </div>
+      ),
+    },
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal Transfer',
+      cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'flock_source',
+      header: 'Flock Asal',
+      cell: (props) => props.row.original.flock_source.name,
+    },
+    {
+      accessorKey: 'flock_destination',
+      header: 'Flock Tujuan',
+      cell: (props) => props.row.original.flock_destination.name,
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+    },
+    {
+      accessorKey: 'reason',
+      header: 'Alasan Transfer',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        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 approveClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          rejectModal.openModal();
+        };
+
+        const deleteClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const bulkApproveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const bulkRejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
+    refreshTransferToLayings();
+
+    deleteModal.closeModal();
+    toast.success('Berhasil menghapus data transfer ke laying!');
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkApproveResponse)) {
+      refreshTransferToLayings();
+      approveModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Approved data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+
+      setRowSelection({});
+    } else {
+      approveModal.closeModal();
+
+      toast.error(
+        `Gagal approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const bulkRejectResponse = await TransferToLayingApi.bulkReject(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkRejectResponse)) {
+      refreshTransferToLayings();
+      rejectModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Rejected data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+      setRowSelection({});
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(
+        `Gagal reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transferDate', e.target.value);
+  };
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedFlockSource(val as OptionType);
+    updateFilter(
+      'flockSource',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedFlockDestination(val as OptionType);
+    updateFilter(
+      'flockDestination',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  // track sorting
+  //   useEffect(() => {
+  //     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+  //     if (!isNameSorted) {
+  //       updateFilter('nameSort', '');
+  //     } else {
+  //       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+  //     }
+  //   }, [sorting, updateFilter]);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+              <Button
+                href='/production/transfer-to-laying/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Transfer ke Laying
+              </Button>
+
+              {selectedRowIds.length > 0 && (
+                <>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={bulkApproveClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
+                    Approve
+                  </Button>
+
+                  <Button
+                    variant='outline'
+                    color='error'
+                    onClick={bulkRejectClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </>
+              )}
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari TransferToLaying'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 justify-end gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={tableFilterState.transferDate}
+              onChange={transferDateChangeHandler}
+              className={{ wrapper: 'col-span-12 sm:col-span-3' }}
+            />
+
+            <SelectInput
+              label='Flock Asal'
+              options={flockSourceOptions}
+              isLoading={isLoadingFlockSourceOptions}
+              value={selectedFlockSource}
+              onChange={flockSourceChangeHandler}
+              onInputChange={setFlockSourceInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Tujuan'
+              options={flockDestinationOptions}
+              isLoading={isLoadingFlockDestinationOptions}
+              value={selectedFlockDestination}
+              onChange={flockDestinationChangeHandler}
+              onInputChange={setFlockDestinationInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-3 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<TransferToLaying>
+          data={
+            isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+          }
+          columns={transferToLayingsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(transferToLayings) &&
+                transferToLayings?.data?.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',
+          }}
+        />
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data transfer ke laying ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={approveModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={rejectModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default TransferToLayingsTable;

From 9a51b2876f78ce2b2aa5aeed4d3be37735b51ffb Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:54:46 +0700
Subject: [PATCH 149/212] chore(FE-113,140,141): adjust back button link

---
 .../transfer-to-laying/form/TransferToLayingForm.tsx      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
index c4428a72..b026b47f 100644
--- a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -288,7 +288,7 @@ const TransferToLayingForm = ({
       <section className='w-full max-w-3xl'>
         <header className='flex flex-col gap-4'>
           <Button
-            href='/master-data/nonstock'
+            href='/production/transfer-to-laying'
             variant='link'
             className='w-fit p-0 text-primary'
           >
@@ -418,6 +418,9 @@ const TransferToLayingForm = ({
                               value={kandang.kandang}
                               options={[]}
                               isDisabled
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
                             />
                           </td>
 
@@ -441,6 +444,9 @@ const TransferToLayingForm = ({
                                 idx
                               )}
                               readOnly={type === 'detail'}
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
                             />
                           </td>
                         </tr>

From 3226b22dfbcf012b613b4dd94d022f5b7172493f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:55:12 +0700
Subject: [PATCH 150/212] chore(FE-147): use dummy data

---
 .../api/production/transfer-to-laying.ts      | 661 +++++++++++++++++-
 1 file changed, 651 insertions(+), 10 deletions(-)

diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 69b4db73..00bf8080 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -2,8 +2,594 @@ import { sleep } from '@/lib/helper';
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 
+import {
+  CreateTransferToLayingPayload,
+  TransferToLaying,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
 import { FlockWithKandangs } from '@/types/api/master-data/flock';
 
+// TODO: delete this dummy data
+const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
+  TransferToLaying[]
+> = {
+  code: 200,
+  status: 'success',
+  message: 'Successfully get all transfer to laying data!',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 8,
+  },
+  data: [
+    {
+      id: 201,
+      transfer_date: '2025-10-10',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 1200,
+      kandangs: [
+        {
+          kandang: {
+            id: 11,
+            name: 'KDG-11',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 501,
+              id_user: 501,
+              email: 'rina@farm.co',
+              name: 'Rina Setiawan',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 600,
+        },
+        {
+          kandang: {
+            id: 12,
+            name: 'KDG-12',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 502,
+              id_user: 502,
+              email: 'budi@farm.co',
+              name: 'Budi Hartono',
+            },
+            created_user: {
+              id: 9002,
+              id_user: 9002,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-08-25T08:00:00Z',
+            updated_at: '2025-09-20T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Start laying cycle',
+      created_user: {
+        id: 9100,
+        id_user: 9100,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-10T06:00:00Z',
+      updated_at: '2025-10-10T06:00:00Z',
+    },
+    {
+      id: 202,
+      transfer_date: '2025-10-11',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 950,
+      kandangs: [
+        {
+          kandang: {
+            id: 13,
+            name: 'KDG-13',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 503,
+              id_user: 503,
+              email: 'sari@farm.co',
+              name: 'Sari Wulandari',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-09-05T08:00:00Z',
+            updated_at: '2025-10-02T08:00:00Z',
+          },
+          quantity: 500,
+        },
+        {
+          kandang: {
+            id: 14,
+            name: 'KDG-14',
+            status: 'MAINTENANCE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 504,
+              id_user: 504,
+              email: 'agus@farm.co',
+              name: 'Agus Pratama',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-07-15T08:00:00Z',
+            updated_at: '2025-09-15T08:00:00Z',
+          },
+          quantity: 450,
+        },
+      ],
+      reason: 'Capacity balancing',
+      created_user: {
+        id: 9101,
+        id_user: 9101,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-11T06:00:00Z',
+      updated_at: '2025-10-11T06:00:00Z',
+    },
+    {
+      id: 203,
+      transfer_date: '2025-10-12',
+      flock_source: { id: 3, name: 'Flock C' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 1100,
+      kandangs: [
+        {
+          kandang: {
+            id: 21,
+            name: 'KDG-21',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 505,
+              id_user: 505,
+              email: 'dewi@farm.co',
+              name: 'Dewi Lestari',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-10T08:00:00Z',
+            updated_at: '2025-10-05T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 22,
+            name: 'KDG-22',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 506,
+              id_user: 506,
+              email: 'hadi@farm.co',
+              name: 'Hadi Santoso',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-12T08:00:00Z',
+            updated_at: '2025-10-06T08:00:00Z',
+          },
+          quantity: 400,
+        },
+      ],
+      reason: 'Align age group',
+      created_user: {
+        id: 9102,
+        id_user: 9102,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-12T06:00:00Z',
+      updated_at: '2025-10-12T06:00:00Z',
+    },
+    {
+      id: 204,
+      transfer_date: '2025-10-13',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 800,
+      kandangs: [
+        {
+          kandang: {
+            id: 15,
+            name: 'KDG-15',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 507,
+              id_user: 507,
+              email: 'nadia@farm.co',
+              name: 'Nadia Putri',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-08-01T08:00:00Z',
+            updated_at: '2025-09-28T08:00:00Z',
+          },
+          quantity: 800,
+        },
+      ],
+      reason: 'Open capacity in LH3',
+      created_user: {
+        id: 9103,
+        id_user: 9103,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-13T06:00:00Z',
+      updated_at: '2025-10-13T06:00:00Z',
+    },
+    {
+      id: 205,
+      transfer_date: '2025-10-14',
+      flock_source: { id: 4, name: 'Flock D' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 650,
+      kandangs: [
+        {
+          kandang: {
+            id: 23,
+            name: 'KDG-23',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 508,
+              id_user: 508,
+              email: 'yoga@farm.co',
+              name: 'Yoga Prabowo',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-20T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 350,
+        },
+        {
+          kandang: {
+            id: 24,
+            name: 'KDG-24',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 509,
+              id_user: 509,
+              email: 'mega@farm.co',
+              name: 'Mega Anggraini',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-21T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Fill remaining LH2 slots',
+      created_user: {
+        id: 9104,
+        id_user: 9104,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-14T06:00:00Z',
+      updated_at: '2025-10-14T06:00:00Z',
+    },
+    {
+      id: 206,
+      transfer_date: '2025-10-15',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 720,
+      kandangs: [
+        {
+          kandang: {
+            id: 16,
+            name: 'KDG-16',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 510,
+              id_user: 510,
+              email: 'rizky@farm.co',
+              name: 'Rizky Maulana',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-12T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 420,
+        },
+        {
+          kandang: {
+            id: 17,
+            name: 'KDG-17',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 511,
+              id_user: 511,
+              email: 'tia@farm.co',
+              name: 'Tia Safitri',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-18T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Stage-by-stage transfer',
+      created_user: {
+        id: 9105,
+        id_user: 9105,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-15T06:00:00Z',
+      updated_at: '2025-10-15T06:00:00Z',
+    },
+    {
+      id: 207,
+      transfer_date: '2025-10-16',
+      flock_source: { id: 5, name: 'Flock E' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 500,
+      kandangs: [
+        {
+          kandang: {
+            id: 18,
+            name: 'KDG-18',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 512,
+              id_user: 512,
+              email: 'lukas@farm.co',
+              name: 'Lukas Aditya',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+        {
+          kandang: {
+            id: 19,
+            name: 'KDG-19',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 513,
+              id_user: 513,
+              email: 'maya@farm.co',
+              name: 'Maya Kartika',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-03T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+      ],
+      reason: 'Trial batch',
+      created_user: {
+        id: 9106,
+        id_user: 9106,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-16T06:00:00Z',
+      updated_at: '2025-10-16T06:00:00Z',
+    },
+    {
+      id: 208,
+      transfer_date: '2025-10-17',
+      flock_source: { id: 6, name: 'Flock F' },
+      flock_destination: { id: 13, name: 'Laying House 4' },
+      quantity: 1300,
+      kandangs: [
+        {
+          kandang: {
+            id: 25,
+            name: 'KDG-25',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 514,
+              id_user: 514,
+              email: 'rara@farm.co',
+              name: 'Rara Pertiwi',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-07T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 26,
+            name: 'KDG-26',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 515,
+              id_user: 515,
+              email: 'doni@farm.co',
+              name: 'Doni Firmansyah',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-09T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Open new house',
+      created_user: {
+        id: 9107,
+        id_user: 9107,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-17T06:00:00Z',
+      updated_at: '2025-10-17T06:00:00Z',
+    },
+  ],
+};
+
 // TODO: delete this dummy data
 const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
   code: 200,
@@ -149,15 +735,26 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
   ],
 };
 
-export class TransferToLayingService<
-  T,
-  CreatePayloadGeneric,
-  UpdatePayloadGeneric
-> extends BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
+export class TransferToLayingService extends BaseApiService<
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload
+> {
   constructor(basePath: string = '') {
     super(basePath);
   }
 
+  // TODO: remove dummy data and integrate to real API
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<TransferToLaying[]>> {
+    // return await httpClientFetcher<BaseApiResponse<T[]>>(endpoint);
+
+    await sleep(750);
+
+    return GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA;
+  }
+
   // TODO: remove dummy data and integrate to real API
   async getFlockSource(): Promise<
     BaseApiResponse<FlockWithKandangs[]> | undefined
@@ -178,10 +775,54 @@ export class TransferToLayingService<
       return undefined;
     }
   }
+
+  // TODO: remove dummy data and integrate to real API
+  async bulkApprove(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil approve data transfer ke laying!',
+        data: {
+          message: 'Berhasil approve data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async bulkReject(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil reject data transfer ke laying!',
+        data: {
+          message: 'Berhasil reject data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
 }
 
-export const TransferToLayingApi = new TransferToLayingService<
-  unknown,
-  unknown,
-  unknown
->('');
+export const TransferToLayingApi = new TransferToLayingService('');

From f998d32b0af3cb67130e50d5dc41a073022fd868 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 12:55:31 +0700
Subject: [PATCH 151/212] chore(FE-147): add ApproveAction type

---
 src/types/api/api-general.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index c118b5a4..3a9f9bc9 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -104,3 +104,5 @@ export type ApprovalsLine = {
   role?: string;
   status: 'approved' | 'rejected' | 'waiting';
 }[];
+
+export type ApproveAction = 'APPROVED' | 'REJECTED';

From d0d323954bcdf7e2167e8f3a55665b60d9bd1716 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 13:10:03 +0700
Subject: [PATCH 152/212] feat: install husky

---
 package-lock.json | 17 +++++++++++++++++
 package.json      |  4 +++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 1aa69d33..a39060ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "daisyui": "^5.1.12",
         "eslint": "^9",
         "eslint-config-next": "15.5.3",
+        "husky": "^9.1.7",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -4176,6 +4177,22 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
diff --git a/package.json b/package.json
index 8adf6787..e970499c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "eslint && next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "prepare": "husky"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.19.4",
@@ -36,6 +37,7 @@
     "daisyui": "^5.1.12",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
+    "husky": "^9.1.7",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

From 70e1aca6c7ee48f1d7e3a31eb71060e3c08f7961 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 13:13:34 +0700
Subject: [PATCH 153/212] feat: create husky pre-commit file

---
 .husky/pre-commit | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 00000000..66ff6a67
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,2 @@
+npm run lint
+npm run build

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 154/212] 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 eaf41805d768e54851c3953df4352e458545b8de Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 23 Oct 2025 13:30:27 +0700
Subject: [PATCH 155/212] feat(FE-92-93-105-106): slicing ui chickin DOC and
 integrate with API

---
 src/app/production/chickin/add/layout.tsx     |  11 +
 src/app/production/chickin/add/page.tsx       | 236 +++++++++++++
 src/app/production/chickin/page.tsx           |  10 +
 src/components/input/DateInput.tsx            | 137 ++++++++
 .../pages/production/chickin/ChickinTable.tsx | 327 ++++++++++++++++++
 .../chickin/form/ChickinForm.schema.ts        |   9 +
 .../production/chickin/form/ChickinForm.tsx   | 179 ++++++++++
 .../project-flock/ProjectFlockTable.tsx       |   9 +
 src/config/constant.ts                        |   2 +-
 src/services/api/production.ts                |  12 +-
 src/types/api/production/chickin.d.ts         |  20 ++
 .../api/production/project-flock-kandang.d.ts |  12 +
 12 files changed, 962 insertions(+), 2 deletions(-)
 create mode 100644 src/app/production/chickin/add/layout.tsx
 create mode 100644 src/app/production/chickin/add/page.tsx
 create mode 100644 src/app/production/chickin/page.tsx
 create mode 100644 src/components/input/DateInput.tsx
 create mode 100644 src/components/pages/production/chickin/ChickinTable.tsx
 create mode 100644 src/components/pages/production/chickin/form/ChickinForm.schema.ts
 create mode 100644 src/components/pages/production/chickin/form/ChickinForm.tsx
 create mode 100644 src/types/api/production/chickin.d.ts
 create mode 100644 src/types/api/production/project-flock-kandang.d.ts

diff --git a/src/app/production/chickin/add/layout.tsx b/src/app/production/chickin/add/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/production/chickin/add/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;
\ No newline at end of file
diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
new file mode 100644
index 00000000..475fba5a
--- /dev/null
+++ b/src/app/production/chickin/add/page.tsx
@@ -0,0 +1,236 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import useSWR from 'swr';
+
+const AddChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const projectFlockId = searchParams.get('projectFlockId');
+
+  // Tables Props
+  const { state: tableFilterState } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
+    undefined
+  );
+
+  // Fetch Data
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
+    useSWR(`${ProjectFlockApi.basePath}`, ProjectFlockApi.getAllFetcher);
+
+  const getProjectFlockKandangUrl = `/kandangs/lookup`;
+  const {
+    data: projectFlockKandang,
+    isLoading: isLoadingProjectFlockKandang,
+    mutate: refreshProjectFlockKandang,
+  } = useSWR(getProjectFlockKandangUrl, () =>
+    ProjectFlockApi.customRequest<BaseApiResponse<ProjectFlockKandang>, 'GET'>(
+      getProjectFlockKandangUrl,
+      {
+        method: 'GET',
+        params: {
+          project_flock_id: projectFlockId ?? 0,
+          kandang_id: selectedKandang?.id,
+        },
+      }
+    )
+  );
+
+  // Mapping Options
+  const options = isResponseSuccess(listProjectFlock)
+    ? listProjectFlock?.data.map((projectFlock) => {
+        return {
+          value: projectFlock.id,
+          label: projectFlock?.flock.name,
+        };
+      })
+    : [];
+
+  const chickinModal = useModal();
+
+  // Use Effect
+  useEffect(() => {
+    refreshProjectFlockKandang();
+  }, [selectedKandang, refreshProjectFlockKandang]);
+
+  if (!projectFlockId) {
+    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 (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  // Handle Function
+  const handleChickinClick = (kandang: Kandang) => {
+    setSelectedKandang(kandang);
+    if (isResponseSuccess(projectFlockKandang) && projectFlockKandang.data.id) {
+      chickinModal.openModal();
+      return;
+    }
+  };
+
+  return (
+    <>
+      {isResponseSuccess(projectFlock) && (
+        <>
+          <section className='w-full p-4'>
+            <header className='flex flex-col gap-4'>
+              <Button
+                href='/production/project-flock'
+                variant='link'
+                className='w-fit p-0 text-primary'
+              >
+                <Icon icon='uil:arrow-left' width={24} height={24} />
+                Kembali
+              </Button>
+
+              <div className='flex flex-col gap-4 w-full my-4'>
+                <div className='max-w-64'>
+                  <SelectInput
+                    label='Project flock'
+                    options={options}
+                    isLoading={isLoadingListProjectFlock}
+                    value={{
+                      label: projectFlock.data.flock.name,
+                      value: projectFlock.data.id,
+                    }}
+                    onChange={(val) =>
+                      router.push(
+                        `/production/chickin/add?projectFlockId=${
+                          (val as OptionType | null)?.value
+                        }`
+                      )
+                    }
+                  />
+                </div>
+              </div>
+            </header>
+            <Table<Kandang>
+              data={projectFlock.data.kandangs}
+              columns={[
+                {
+                  header: '#',
+                  cell: (props) =>
+                    tableFilterState.pageSize * (tableFilterState.page - 1) +
+                    props.row.index +
+                    1,
+                },
+                {
+                  accessorKey: 'name',
+                  header: 'Nama Kandang',
+                },
+                {
+                  header: 'Aksi',
+                  cell: (props) => {
+                    return (
+                      <>
+                        <Button
+                          color='success'
+                          variant='outline'
+                          isLoading={isLoadingProjectFlockKandang}
+                          onClick={() => {
+                            handleChickinClick(props.row.original);
+                          }}
+                        >
+                          <Icon
+                            icon='mdi:home-import-outline'
+                            width={24}
+                            height={24}
+                          />
+                          Chickin
+                        </Button>
+                      </>
+                    );
+                  },
+                },
+              ]}
+              page={undefined}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(projectFlock) &&
+                    projectFlock.data.kandangs?.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',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </section>
+          <Modal ref={chickinModal.ref}>
+            <div className='flex flex-row justify-between items-center'>
+              <h1 className='text-xl font-semibold text-center mb-6'>
+                Chickin Kandang - {selectedKandang?.name}
+              </h1>
+              <Button
+                color='error'
+                variant='link'
+                onClick={chickinModal.closeModal}
+              >
+                <Icon
+                  className='text-black'
+                  icon='uil:times'
+                  width={24}
+                  height={24}
+                />
+              </Button>
+            </div>
+            {isResponseSuccess(projectFlockKandang) &&
+              !isLoadingProjectFlockKandang && (
+                <ChickinForm
+                  initialValues={{
+                    project_flock_kandang: projectFlockKandang.data,
+                    created_user: projectFlock.data.created_user,
+                    created_at: projectFlock.data.created_at,
+                    updated_at: projectFlock.data.updated_at,
+                  }}
+                />
+              )}
+          </Modal>
+        </>
+      )}
+    </>
+  );
+};
+
+export default AddChickin;
diff --git a/src/app/production/chickin/page.tsx b/src/app/production/chickin/page.tsx
new file mode 100644
index 00000000..ad662f65
--- /dev/null
+++ b/src/app/production/chickin/page.tsx
@@ -0,0 +1,10 @@
+import ChickinTable from "@/components/pages/production/chickin/ChickinTable";
+
+const Chickin = () => {
+  return (
+    <section className="w-full p-4">
+      <ChickinTable/>
+    </section>
+  );
+}
+export default Chickin;
\ No newline at end of file
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
new file mode 100644
index 00000000..0ef80fee
--- /dev/null
+++ b/src/components/input/DateInput.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DateInputProps {
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string;
+  placeholder?: string;
+  min?: string;
+  max?: 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>;
+}
+
+const DateInput = ({
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  min,
+  max,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+  isLoading = false,
+}: DateInputProps) => {
+  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 flex items-center',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
+        )}
+      >
+        {startAdornment && startAdornment}
+
+        <input
+          type='date'
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          min={min}
+          max={max}
+          disabled={disabled}
+          className={cn(
+            'grow bg-transparent cursor-pointer',
+            className?.input
+          )}
+          readOnly={readOnly}
+        />
+
+        {(isLoading || endAdornment) && (
+          <div className='flex flex-row gap-2'>
+            {isLoading && <span className='loading loading-spinner' />}
+            {endAdornment && endAdornment}
+          </div>
+        )}
+      </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 DateInput;
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
new file mode 100644
index 00000000..5c9f8431
--- /dev/null
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -0,0 +1,327 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { TableRowOptions } from '@/components/table/TableRowOptions';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Chickin } from '@/types/api/production/chickin';
+import { Icon } from '@iconify/react';
+import { CellContext, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import useSWR from 'swr';
+import ChickinForm from './form/ChickinForm';
+
+const ChickinTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      search: 'search',
+    },
+  });
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedChickin, setSelectedChickin] = useState<Chickin | undefined>(
+    undefined
+  );
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const chickinModal = useModal();
+
+  // Data Fetching
+  const {
+    data: chickins,
+    isLoading,
+    mutate: refreshChickins,
+  } = useSWR(
+    `${ChickinApi.basePath}${getTableFilterQueryString()}`,
+    ChickinApi.getAllFetcher
+  );
+  const {
+    data: projectFlocks,
+    isLoading: isLoadingProjectFlocks,
+  } = useSWR(
+    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
+    ProjectFlockApi.getAllFetcher
+  );
+
+  const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', event.target.value);
+    setPage(1);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+    setPage(1);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    try {
+      await ChickinApi.delete(selectedChickin?.id as number);
+      refreshChickins();
+      deleteModal.closeModal();
+    } finally {
+      setIsDeleteLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <Button
+              href='/production/chickin/add?projectFlockId=1'
+              color='primary'
+            >
+              <Icon icon='uil:plus' width={24} height={24} />
+              Tambah
+            </Button>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Chickin'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+          <TableRowSizeSelector
+            value={tableFilterState.pageSize}
+            onChange={pageSizeChangeHandler}
+            options={ROWS_OPTIONS}
+          />
+        </div>
+      </div>
+      <Table<Chickin>
+        data={isResponseSuccess(chickins) ? chickins?.data : []}
+        columns={[
+          {
+            header: '#',
+            cell: (props) =>
+              tableFilterState.pageSize * (tableFilterState.page - 1) +
+              props.row.index +
+              1,
+          },
+          {
+            accessorFn: (row) => row.project_flock_kandang?.kandang.name,
+            header: 'Kandang',
+          },
+          {
+            accessorFn: (row) => row.quantity,
+            header: 'Jumlah Chickin',
+          },
+          {
+            accessorFn: (row) => row.chick_in_date,
+            header: 'Tanggal Chickin',
+            cell: (props) => {
+              if (props.row.original.chick_in_date) {
+                return new Date(props.row.original.chick_in_date).toLocaleDateString(
+                  'id-ID'
+                );
+              } else {
+                return '-';
+              }
+            }
+          },
+          {
+            accessorFn: (row) => row.note,
+            header: 'Catatan',
+          },
+          {
+            header: 'Aksi',
+            cell: (props) => {
+              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 = () => {
+                setSelectedChickin(props.row.original);
+                deleteModal.openModal();
+              };
+
+              const editClickHandler = () => {
+                setSelectedChickin(props.row.original);
+                chickinModal.openModal();
+              };
+
+              return (
+                <>
+                  {currentPageSize > 2 && (
+                    <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                      <RowOptionsMenu
+                        type='dropdown'
+                        props={props}
+                        deleteClickHandler={deleteClickHandler}
+                        editClickHandler={editClickHandler}
+                      />
+                    </RowDropdownOptions>
+                  )}
+
+                  {currentPageSize <= 2 && (
+                    <RowCollapseOptions>
+                      <RowOptionsMenu
+                        type='collapse'
+                        props={props}
+                        deleteClickHandler={deleteClickHandler}
+                        editClickHandler={editClickHandler}
+                      />
+                    </RowCollapseOptions>
+                  )}
+                </>
+              );
+            },
+          },
+        ]}
+        pageSize={tableFilterState.pageSize}
+        page={isResponseSuccess(chickins) ? chickins?.meta?.page : 0}
+        totalItems={
+          isResponseSuccess(chickins) ? chickins?.meta?.total_results : 0
+        }
+        onPageChange={setPage}
+        isLoading={isLoading}
+        sorting={sorting}
+        setSorting={setSorting}
+        className={{
+          containerClassName: cn({
+            'mb-20':
+              isResponseSuccess(chickins) && chickins?.data?.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 Chickin ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          onClick: confirmationModalDeleteClickHandler,
+          isLoading: isDeleteLoading,
+          color: 'error',
+        }}
+      />
+      <Modal ref={chickinModal.ref}>
+        <div className='flex flex-row justify-between items-center'>
+          <h1 className='text-xl font-semibold text-center mb-6'>
+            Chickin Kandang - { selectedChickin?.project_flock_kandang && selectedChickin?.project_flock_kandang.kandang?.name}
+          </h1>
+          <Button
+            color='error'
+            variant='link'
+            onClick={chickinModal.closeModal}
+          >
+            <Icon
+              className='text-black'
+              icon='uil:times'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
+        <ChickinForm initialValues={selectedChickin} formType='edit' afterSubmit={() => {
+          refreshChickins()
+          chickinModal.closeModal()
+        }}/>
+      </Modal>
+    </>
+  );
+};
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  editClickHandler,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Chickin, unknown>;
+  editClickHandler: () => void;
+  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={`/production/chickin/detail?projectFlockId=${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
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+        onClick={editClickHandler}
+      >
+        <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='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+export default ChickinTable;
diff --git a/src/components/pages/production/chickin/form/ChickinForm.schema.ts b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
new file mode 100644
index 00000000..c7e8f4c6
--- /dev/null
+++ b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
@@ -0,0 +1,9 @@
+import * as Yup from 'yup';
+
+export const ChickinFormSchema = Yup.object({
+  chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
+})
+
+export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
+
+export const UpdateChickinFormSchema = ChickinFormSchema;
\ No newline at end of file
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
new file mode 100644
index 00000000..c0a3bdcb
--- /dev/null
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -0,0 +1,179 @@
+'use client';
+
+import Button from '@/components/Button';
+import {
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload,
+} from '@/types/api/production/chickin';
+import {
+  ChickinFormSchema,
+  ChickinFormValues,
+  UpdateChickinFormSchema,
+} from '@/components/pages/production/chickin/form/ChickinForm.schema';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import { ChickinApi } from '@/services/api/production';
+import DateInput from '@/components/input/DateInput';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { Icon } from '@iconify/react';
+
+interface ChickinFormProps {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues?: Chickin;
+  afterSubmit?: () => void;
+}
+
+const ChickinForm = ({
+  formType = 'add',
+  initialValues,
+  afterSubmit,
+}: ChickinFormProps) => {
+  // Helper Function
+  const formatDateForInput = (dateString?: string): string => {
+    if (!dateString) return '';
+    return new Date(dateString).toISOString().split('T')[0];
+  };
+
+  // State
+  const [chickinFormErrorMessage, setChickinFormErrorMessage] = useState('');
+
+  // Initial Value
+  const formikInitialValue = useMemo<ChickinFormValues>(() => {
+    return {
+      chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
+    };
+  }, [initialValues]);
+
+  // Handle Submit Function
+  const handleCreate = useCallback(
+    async (
+      payload: CreateChickinPayload,
+      afterSubmit: (() => void) | undefined
+    ) => {
+      const res = await ChickinApi.create(payload);
+      if (isResponseError(res)) {
+        setChickinFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      afterSubmit?.();
+    },
+    []
+  );
+  const handleUpdate = useCallback(
+    async (
+      payload: UpdateChickinPayload,
+      afterSubmit: (() => void) | undefined
+    ) => {
+      const res = await ChickinApi.update(
+        payload.project_flock_kandang_id as number,
+        payload
+      );
+      if (isResponseError(res)) {
+        setChickinFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      afterSubmit?.();
+    },
+    []
+  );
+
+  // Formik
+  const formik = useFormik<ChickinFormValues>({
+    initialValues: formikInitialValue,
+    enableReinitialize: true,
+    validationSchema:
+      formType === 'edit' ? UpdateChickinFormSchema : ChickinFormSchema,
+    onSubmit: async (values) => {
+      // reset error message
+      setChickinFormErrorMessage('');
+
+      if (initialValues?.project_flock_kandang?.id == undefined) {
+        return;
+      }
+
+      // create payload
+      const payload = {
+        chick_in_date: values.chick_in_date,
+        project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          handleCreate(payload, afterSubmit);
+          break;
+        case 'edit':
+          handleUpdate(payload, afterSubmit);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  // Initialize Formik
+  const { setValues: formikSetValues } = formik;
+  useEffect(() => {
+    formikSetValues(formikInitialValue);
+  }, [formikSetValues, formikInitialValue]);
+
+  return (
+    <>
+      <form
+        className='min-h-48 flex flex-col gap-4'
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+      >
+        <DateInput
+          value={formik.values.chick_in_date}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          name='chick_in_date'
+          label='Tanggal Chickin'
+          required
+          isError={
+            formik.touched.chick_in_date && Boolean(formik.errors.chick_in_date)
+          }
+          errorMessage={formik.errors.chick_in_date}
+        />
+        {initialValues?.project_flock_kandang?.id == undefined && (
+          <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
+        )}
+        {chickinFormErrorMessage && (
+          <div
+            role='alert'
+            className='alert alert-error'
+            onClick={() => {
+              setChickinFormErrorMessage('');
+            }}
+          >
+            <Icon icon='mdi:times' />
+            <span>{chickinFormErrorMessage}</span>
+          </div>
+        )}
+        <div className='flex justify-center mt-auto gap-2'>
+          <Button color='warning' type='reset'>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={
+              !formik.isValid ||
+              formik.isSubmitting ||
+              !initialValues?.project_flock_kandang?.id
+            }
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default ChickinForm;
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index af057fb8..412c47ed 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -56,6 +56,15 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
+      <Button
+        href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+        variant='ghost'
+        color='success'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:home-import-outline' width={16} height={16} />
+        Chickin
+      </Button>
       {/* <Button
         href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
         variant='ghost'
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 053a50cc..9a648e03 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -24,7 +24,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
       },
       {
         title: 'Chick In',
-        link: '/production/chick-in',
+        link: '/production/chickin',
         icon: 'mdi:home-import-outline',
       },
       {
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 06e51c2c..23a3fe68 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -2,10 +2,20 @@ import {
   ProjectFlock,
   CreateProjectFlockPayload,
 } from '@/types/api/production/project-flock';
+import {
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload,
+} from '@/types/api/production/chickin';
 import { BaseApiService } from '@/services/api/base';
 
 export const ProjectFlockApi = new BaseApiService<
   ProjectFlock,
   CreateProjectFlockPayload,
   unknown
->('/production/project_flocks');
\ No newline at end of file
+>('/production/project_flocks');
+export const ChickinApi = new BaseApiService<
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload
+>('/production/chickins');
\ No newline at end of file
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
new file mode 100644
index 00000000..b4d5cd7a
--- /dev/null
+++ b/src/types/api/production/chickin.d.ts
@@ -0,0 +1,20 @@
+import { BaseMetadata } from "@/types/api/api-general";
+import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
+
+export type BaseChickin = {
+  id?: number;
+  chick_in_date?: string;
+  quantity?: number;
+  note?: string;
+  project_flock_kandang?: ProjectFlockKandang;
+}
+
+export type Chickin = BaseMetadata & BaseChickin;
+
+export type CreateChickinPayload = {
+  project_flock_kandang_id: number;
+  chick_in_date: string;
+}
+
+export type UpdateChickinPayload = CreateChickinPayload;
+
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
new file mode 100644
index 00000000..d75c403e
--- /dev/null
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -0,0 +1,12 @@
+import { Kandang } from "@/type/master-data/kandang";
+import { ProjectFlock } from "@/types/api/production/project-flock";
+
+export type BaseProjectFlockKandang = {
+  id: number;
+  project_flock_id: number;
+  kandang_id: number;
+  kandang: Kandang;
+  project_flock: ProjectFlock;
+}
+
+export type ProjectFlockKandang = BaseProjectFlockKandang;
\ No newline at end of file

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 156/212] 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 157/212] 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 158/212] 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 159/212] 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 160/212] 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 161/212] 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 162/212] 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 7e44226a6def1e298f24b39690791a537025d224 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 17:34:14 +0700
Subject: [PATCH 163/212] feat(FE-141): add approve and reject functionality in
 Transfer to Laying Detail Page

---
 .../form/TransferToLayingForm.tsx             | 128 +++++++++++++++++-
 1 file changed, 124 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
index b026b47f..def2cde8 100644
--- a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -42,10 +42,18 @@ const TransferToLayingForm = ({
   initialValues,
 }: TransferToLayingFormProps) => {
   const router = useRouter();
+
+  // Modal hooks
   const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
 
   const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Modal loading state
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
 
   const createTransferToLayingHandler = useCallback(
     async (payload: CreateTransferToLayingPayload) => {
@@ -152,15 +160,65 @@ const TransferToLayingForm = ({
     deleteModal.openModal();
   };
 
+  const approveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
+    // TODO: delete data and integrate to real API
     deleteModal.closeModal();
-    toast.success('Successfully delete TransferToLaying!');
+    toast.success('Berhasil menghapus data transfer ke laying!');
 
     setIsDeleteLoading(false);
   };
 
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await TransferToLayingApi.approve(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(approveResponse)) {
+      approveModal.closeModal();
+
+      toast.success('Berhasil approve data transfer ke laying!');
+    } else {
+      approveModal.closeModal();
+
+      toast.error('Gagal approve data transfer ke laying!');
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await TransferToLayingApi.reject(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(rejectResponse)) {
+      rejectModal.closeModal();
+
+      toast.success('Berhasil reject data transfer ke laying!');
+    } else {
+      rejectModal.closeModal();
+
+      toast.error('Gagal reject data transfer ke laying!');
+    }
+
+    setIsRejectLoading(false);
+  };
+
   const isRepeaterInputError = (
     column: keyof TransferToLayingFormValues['kandangs'][0],
     idx: number
@@ -303,10 +361,38 @@ const TransferToLayingForm = ({
           </h1>
         </header>
 
+        <div className='w-full my-4 flex flex-row justify-end gap-2'>
+          {type === 'detail' && (
+            <>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={approveClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+
+              <Button
+                variant='outline'
+                color='error'
+                onClick={rejectClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+        </div>
+
         <form
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
-          className='w-full mt-8 flex flex-col gap-6'
+          className='w-full flex flex-col gap-6'
         >
           <div className='flex flex-col gap-4'>
             <TextInput
@@ -494,7 +580,7 @@ const TransferToLayingForm = ({
                   <Button
                     type='button'
                     color='warning'
-                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
                     className='px-4'
                   >
                     <Icon
@@ -549,7 +635,7 @@ const TransferToLayingForm = ({
         <ConfirmationModal
           ref={deleteModal.ref}
           type='error'
-          text='Apakah anda yakin ingin menghapus data TransferToLaying?'
+          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -561,6 +647,40 @@ const TransferToLayingForm = ({
           }}
         />
       )}
+
+      {type === 'detail' && (
+        <>
+          <ConfirmationModal
+            ref={approveModal.ref}
+            type='success'
+            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'success',
+              isLoading: isApproveLoading,
+              onClick: confirmationModalApproveClickHandler,
+            }}
+          />
+
+          <ConfirmationModal
+            ref={rejectModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              isLoading: isRejectLoading,
+              onClick: confirmationModalRejectClickHandler,
+            }}
+          />
+        </>
+      )}
     </>
   );
 };

From 3110b96305e2d26a63b520f89a096dd8a0dbd775 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 17:34:52 +0700
Subject: [PATCH 164/212] feat(FE-141): add approve and reject method

---
 .../api/production/transfer-to-laying.ts      | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 00bf8080..6f808a8c 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -776,6 +776,30 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  // TODO: remove dummy data and integrate to real API
+  async approve(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil approve data transfer ke laying!',
+        data: {
+          message: 'Berhasil approve data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
   // TODO: remove dummy data and integrate to real API
   async bulkApprove(
     ids: number[]
@@ -800,6 +824,30 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  // TODO: remove dummy data and integrate to real API
+  async reject(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil reject data transfer ke laying!',
+        data: {
+          message: 'Berhasil reject data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
   // TODO: remove dummy data and integrate to real API
   async bulkReject(
     ids: number[]

From d1d152ef5a5384472e4260e32ecd6180eedb609f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 23 Oct 2025 17:50:18 +0700
Subject: [PATCH 165/212] feat(FE-140): create Edit Transfer to Laying page

---
 .../transfer-to-laying/detail/edit/page.tsx   | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 src/app/production/transfer-to-laying/detail/edit/page.tsx

diff --git a/src/app/production/transfer-to-laying/detail/edit/page.tsx b/src/app/production/transfer-to-laying/detail/edit/page.tsx
new file mode 100644
index 00000000..9003dbba
--- /dev/null
+++ b/src/app/production/transfer-to-laying/detail/edit/page.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+const TransferToLayingEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const transferToLayingId = searchParams.get('transferToLayingId');
+
+  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
+    useSWR(transferToLayingId, (id: number) =>
+      TransferToLayingApi.getSingle(id)
+    );
+
+  if (!transferToLayingId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_EDIT))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingTransferToLaying && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
+        <TransferToLayingForm
+          type='detail'
+          initialValues={transferToLaying.data}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='edit'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_EDIT}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingEdit;

From 8a467c2d65afe7cec97b81aa8768fd2a36e25084 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 23 Oct 2025 18:43:26 +0700
Subject: [PATCH 166/212] fix(FE-92-93-105-106): fixing chickin form, after
 submit event and chickin modal trigger

---
 src/app/production/chickin/add/page.tsx       | 31 +++++++++++++------
 .../pages/production/chickin/ChickinTable.tsx |  4 +--
 .../chickin/form/ChickinForm.schema.ts        |  2 ++
 .../production/chickin/form/ChickinForm.tsx   | 27 ++++++++++++++++
 4 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index 475fba5a..e7fa4c24 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -29,9 +29,11 @@ const AddChickin = () => {
     paramMap: { page: 'page', pageSize: 'limit' },
   });
 
+  // States
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
 
   // Fetch Data
   const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
@@ -39,7 +41,9 @@ const AddChickin = () => {
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(`${ProjectFlockApi.basePath}`, ProjectFlockApi.getAllFetcher);
+    useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+    }).toString()}`, ProjectFlockApi.getAllFetcher);
 
   const getProjectFlockKandangUrl = `/kandangs/lookup`;
   const {
@@ -64,7 +68,7 @@ const AddChickin = () => {
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: projectFlock?.flock.name,
+          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
         };
       })
     : [];
@@ -97,10 +101,13 @@ const AddChickin = () => {
   // Handle Function
   const handleChickinClick = (kandang: Kandang) => {
     setSelectedKandang(kandang);
-    if (isResponseSuccess(projectFlockKandang) && projectFlockKandang.data.id) {
-      chickinModal.openModal();
-      return;
-    }
+    refreshProjectFlockKandang();
+    chickinModal.openModal();
+  };
+  const handleAfterSubmit = () => {
+    refreshProjectFlockKandang();
+    chickinModal.closeModal();
+    router.push('/production/chickin');
   };
 
   return (
@@ -119,13 +126,15 @@ const AddChickin = () => {
               </Button>
 
               <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-64'>
+                <div className='max-w-1/4'>
                   <SelectInput
-                    label='Project flock'
+                    required
+                    isSearchable
+                    label='Project Flock'
                     options={options}
                     isLoading={isLoadingListProjectFlock}
                     value={{
-                      label: projectFlock.data.flock.name,
+                      label: `${projectFlock.data.flock.name} - ${projectFlock.data.category} - Periode ${projectFlock.data.period}`,
                       value: projectFlock.data.id,
                     }}
                     onChange={(val) =>
@@ -135,6 +144,9 @@ const AddChickin = () => {
                         }`
                       )
                     }
+                    onInputChange={(val) => {
+                      setSearchProjectFlock(val);
+                    }}
                   />
                 </div>
               </div>
@@ -224,6 +236,7 @@ const AddChickin = () => {
                     created_at: projectFlock.data.created_at,
                     updated_at: projectFlock.data.updated_at,
                   }}
+                  afterSubmit={handleAfterSubmit}
                 />
               )}
           </Modal>
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index 5c9f8431..e2b527d3 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -2,15 +2,13 @@
 
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import { TableRowOptions } from '@/components/table/TableRowOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
-import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
diff --git a/src/components/pages/production/chickin/form/ChickinForm.schema.ts b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
index c7e8f4c6..42d3b6ea 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.schema.ts
+++ b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
@@ -2,6 +2,8 @@ import * as Yup from 'yup';
 
 export const ChickinFormSchema = Yup.object({
   chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
+  note: Yup.string().required('Catatan wajib diisi!'),
+  quantity: Yup.number().min(1, 'Jumlah wajib diisi!').required('Jumlah wajib diisi!'),
 })
 
 export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index c0a3bdcb..c6674df4 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -18,6 +18,8 @@ import DateInput from '@/components/input/DateInput';
 import { isResponseError } from '@/lib/api-helper';
 import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
+import TextArea from '@/components/input/TextArea';
+import TextInput from '@/components/input/TextInput';
 
 interface ChickinFormProps {
   formType?: 'add' | 'detail' | 'edit';
@@ -43,6 +45,8 @@ const ChickinForm = ({
   const formikInitialValue = useMemo<ChickinFormValues>(() => {
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
+      note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
+      quantity: initialValues?.quantity ?? 1,
     };
   }, [initialValues]);
 
@@ -140,6 +144,29 @@ const ChickinForm = ({
           }
           errorMessage={formik.errors.chick_in_date}
         />
+        <TextInput
+          value={formik.values.quantity}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          name='quantity'
+          label='Jumlah Chickin'
+          required
+          isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
+          errorMessage={formik.errors.quantity}
+          type='number'
+          disabled
+        />
+        <TextArea
+          required
+          label='Catatan'
+          name='note'
+          value={formik.values.note}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          isError={formik.touched.note && Boolean(formik.errors.note)}
+          errorMessage={formik.errors.note}
+
+        />
         {initialValues?.project_flock_kandang?.id == undefined && (
           <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
         )}

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 167/212] 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 51bce1a2c70b45696487e6f1ce77f8aab6ae9bdd Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 23 Oct 2025 20:23:25 +0700
Subject: [PATCH 168/212] feat(FE-86-88): Adding reject button and integrate
 with approval api

---
 .../production/project-flock/detail/page.tsx  |   8 +-
 src/components/input/DateInput.tsx            |   2 +-
 src/components/input/FileInput.tsx            |   2 +-
 src/components/input/SelectInput.tsx          |   8 +-
 src/components/input/TextArea.tsx             |   2 +-
 src/components/input/TextInput.tsx            |   2 +-
 .../pages/production/chickin/ChickinTable.tsx |   7 -
 .../project-flock/ProjectFlockTable.tsx       | 353 +++++++++---------
 .../project-flock/form/ProjectFlockForm.tsx   |  95 +++--
 src/types/api/api-general.d.ts                |   9 +
 src/types/api/production/project-flock.d.ts   |  29 +-
 11 files changed, 298 insertions(+), 219 deletions(-)

diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index 5efe83d8..bf0da188 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -13,7 +13,7 @@ const ProjectFlockDetail = () => {
 
   const projectFlockId = searchParams.get("projectFlockId");
 
-  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
     projectFlockId,
     (id: number) => ProjectFlockApi.getSingle(id)
   );
@@ -28,15 +28,15 @@ const ProjectFlockDetail = () => {
     );
   }
 
-  if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
+  if(!isLoadingProjectFlock && (!projectFlock || isResponseError(projectFlock))){
     router.replace("/404");
     return;
   }
 
   return (
     <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
-      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
+      {isLoadingProjectFlock && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
         <ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
       )}
     </div>
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index 0ef80fee..be485b75 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -88,7 +88,7 @@ const DateInput = ({
 
       <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 flex items-center',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 6218970c..86100e40 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -70,7 +70,7 @@ const FileInput = ({
         onBlur={onBlur}
         disabled={disabled}
         className={cn(
-          'grow file-input w-full h-12 rounded-lg!',
+          'grow file-input w-full h-12 rounded',
           className?.input
         )}
         readOnly={readOnly}
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index b35ad7dd..cbb0c9db 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -160,7 +160,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
               {
                 'border-red-500! ring-2 ring-red-200': isError,
                 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -176,7 +176,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
@@ -185,7 +185,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -193,7 +193,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index e9517277..d8d58929 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 outline-none! transition-all',
             {
               'border-error': isError,
               'border-success!': isValid,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index eec312c1..4ee1f558 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 outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index e2b527d3..e3d908fd 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -57,13 +57,6 @@ const ChickinTable = () => {
     `${ChickinApi.basePath}${getTableFilterQueryString()}`,
     ChickinApi.getAllFetcher
   );
-  const {
-    data: projectFlocks,
-    isLoading: isLoadingProjectFlocks,
-  } = useSWR(
-    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
-    ProjectFlockApi.getAllFetcher
-  );
 
   const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     updateFilter('search', event.target.value);
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 412c47ed..95361278 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -16,13 +16,12 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { Icon } from '@iconify/react';
 import {
-  CellContext,
-  ColumnDef,
-  SortingState,
-} from '@tanstack/react-table';
+  ProjectFlockApprovalPayload,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import { CellContext, SortingState } from '@tanstack/react-table';
 import { ChangeEventHandler, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -56,24 +55,28 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
-      <Button
-        href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
-        variant='ghost'
-        color='success'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:home-import-outline' width={16} height={16} />
-        Chickin
-      </Button>
-      {/* <Button
-        href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:pencil-outline' width={16} height={16} />
-        Edit
-      </Button> */}
+      {props.row.original.approval.step_name === 'Aktif' && (
+        <Button
+          href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+          variant='ghost'
+          color='success'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:home-import-outline' width={16} height={16} />
+          Chickin
+        </Button>
+      )}
+      {props.row.original.approval.step_name === 'Pengajuan' && (
+        <Button
+          href={`/production/project-flock/detail/edit?projectFlockId=${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'
@@ -144,20 +147,20 @@ const ProjectFlockTable = () => {
     search: areaSelectInputValue,
     limit: '100',
   }).toString()}`;
-  const {
-    data: areas,
-    isLoading: isLoadingAreas,
-  } = useSWR(areaUrl, AreaApi.getAllFetcher);
+  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+    areaUrl,
+    AreaApi.getAllFetcher
+  );
 
   const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
     search: locationSelectInputValue,
     area_id: selectedArea != null ? selectedArea.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: locations,
-    isLoading: isLoadingLocations,
-  } = useSWR(locationUrl, LocationApi.getAllFetcher);
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationUrl,
+    LocationApi.getAllFetcher
+  );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: kandangSelectInputValue,
@@ -165,10 +168,10 @@ const ProjectFlockTable = () => {
       selectedLocation != null ? selectedLocation.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: kandangs,
-    isLoading: isLoadingKandang,
-  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+  const { data: kandangs, isLoading: isLoadingKandang } = useSWR(
+    kandangUrl,
+    KandangApi.getAllFetcher
+  );
 
   // Data to Options Mapping
   const optionsArea = isResponseSuccess(areas)
@@ -200,129 +203,6 @@ const ProjectFlockTable = () => {
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
-
-  // Columns
-  const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
-    {
-      id: 'select',
-      header: () => {
-        const allSelected =
-          isResponseSuccess(projectFlocks) &&
-          projectFlocks.data.length > 0 &&
-          selectedIds.length === projectFlocks.data.length;
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={allSelected}
-            onChange={(e) => handleSelectAll(e.target.checked)}
-          />
-        );
-      },
-      cell: (props) => {
-        const id = props.row.original.id;
-        const isChecked = selectedIds.includes(id);
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={isChecked}
-            onChange={(e) => handleSelectRow(id, e.target.checked)}
-          />
-        );
-      },
-    },
-
-    {
-      accessorKey: 'flock.name',
-      header: 'Flock',
-    },
-    {
-      accessorKey: 'area.name',
-      header: 'Area',
-    },
-    {
-      accessorKey: 'location.name',
-      header: 'Lokasi',
-    },
-    {
-      accessorKey: 'fcr.name',
-      header: 'FCR',
-    },
-    {
-      accessorKey: 'category',
-      header: 'Kategori',
-    },
-    {
-      header: 'Kandang',
-      cell: (props) => {
-        const kandang = props.row.original.kandangs;
-        if (kandang) {
-          const kandangNames = kandang.map((k: Kandang) => k.name);
-          return (
-            <div>
-              {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
-            </div>
-          );
-        } else {
-          return '-';
-        }
-      },
-    },
-    {
-      accessorKey: 'period',
-      header: 'Periode',
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Dibuat pada',
-      cell: (props) =>
-        new Date(props.row.original.created_at).toLocaleDateString(),
-    },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        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 = () => {
-          setSelectedProjectFlock(props.row.original);
-          deleteModal.openModal();
-        };
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
   // Handler
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
@@ -343,9 +223,15 @@ const ProjectFlockTable = () => {
   };
   const handleSelectAll = (checked: boolean) => {
     if (checked && isResponseSuccess(projectFlocks)) {
-      const allIds = projectFlocks.data.map((item) => item.id);
+      const allIds = projectFlocks.data
+        .filter((item) => item.approval.step_name === 'Pengajuan')
+        .map((item) => item.id);
       setSelectedIds(allIds);
-      setSelectedFlocks(projectFlocks.data);
+      setSelectedFlocks(
+        projectFlocks.data.filter(
+          (item) => item.approval.step_name === 'Pengajuan'
+        )
+      );
     } else {
       setSelectedIds([]);
       setSelectedFlocks([]);
@@ -374,12 +260,12 @@ const ProjectFlockTable = () => {
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
-      payload: 'POST',
-      params: {
-        ids: selectedFlocks.map((flock) => flock.id).join(','),
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: selectedFlocks.map((flock) => flock.id),
       },
     });
 
@@ -391,6 +277,9 @@ const ProjectFlockTable = () => {
       toast.error(approveProjectFlockRes?.message as string);
       confirmModal.closeModal();
     }
+    setSelectedIds([]);
+    setSelectedFlocks([]);
+    refreshProjectFlocks();
     setIsApproveLoading(false);
   };
 
@@ -508,7 +397,137 @@ const ProjectFlockTable = () => {
 
           <Table<ProjectFlock>
             data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
-            columns={projectFlocksColumns}
+            columns={[
+              {
+                id: 'select',
+                header: () => {
+                  const allSelected =
+                    isResponseSuccess(projectFlocks) &&
+                    projectFlocks.data.length > 0 &&
+                    selectedIds.length === projectFlocks.data.length;
+                  return (
+                    <input
+                      type='checkbox'
+                      className='checkbox checkbox-sm'
+                      checked={allSelected}
+                      onChange={(e) => handleSelectAll(e.target.checked)}
+                    />
+                  );
+                },
+                cell: (props) => {
+                  const id = props.row.original.id;
+                  const isChecked = selectedIds.includes(id);
+
+                  return (
+                    <input
+                      disabled={
+                        props.row.original.approval.step_name != 'Pengajuan'
+                      }
+                      type='checkbox'
+                      className='checkbox checkbox-sm'
+                      checked={isChecked}
+                      onChange={(e) => handleSelectRow(id, e.target.checked)}
+                    />
+                  );
+                },
+              },
+
+              {
+                accessorKey: 'flock.name',
+                header: 'Flock',
+              },
+              {
+                accessorKey: 'area.name',
+                header: 'Area',
+              },
+              {
+                accessorKey: 'location.name',
+                header: 'Lokasi',
+              },
+              {
+                accessorKey: 'fcr.name',
+                header: 'FCR',
+              },
+              {
+                accessorKey: 'category',
+                header: 'Kategori',
+              },
+              {
+                accessorKey: 'approval.step_name',
+                header: 'Status',
+              },
+              {
+                header: 'Kandang',
+                cell: (props) => {
+                  const kandang = props.row.original.kandangs;
+                  if (kandang) {
+                    const kandangNames = kandang.map((k: Kandang) => k.name);
+                    return (
+                      <div>
+                        {kandangNames.length > 0
+                          ? kandangNames.join(', ')
+                          : 'Tidak ada'}
+                      </div>
+                    );
+                  } else {
+                    return '-';
+                  }
+                },
+              },
+              {
+                accessorKey: 'period',
+                header: 'Periode',
+              },
+              {
+                accessorKey: 'created_at',
+                header: 'Dibuat pada',
+                cell: (props) =>
+                  new Date(props.row.original.created_at).toLocaleDateString(),
+              },
+              {
+                header: 'Aksi',
+                cell: (props) => {
+                  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 = () => {
+                    setSelectedProjectFlock(props.row.original);
+                    deleteModal.openModal();
+                  };
+
+                  return (
+                    <>
+                      {currentPageSize > 2 && (
+                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowDropdownOptions>
+                      )}
+
+                      {currentPageSize <= 2 && (
+                        <RowCollapseOptions>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowCollapseOptions>
+                      )}
+                    </>
+                  );
+                },
+              },
+            ]}
             pageSize={tableFilterState.pageSize}
             page={
               isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index ccc3fadc..d098aba3 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -21,6 +21,7 @@ import {
   UpdateProjectFlockFormSchema,
 } from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
 import {
+  ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
   PeriodFlock,
   ProjectFlock,
@@ -70,6 +71,18 @@ const ProjectFlockForm = ({
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(initialValues?.approval.step_name == 'Pengajuan' ? false : true);
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(!isApprovedDisabled);
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(!isApprovedDisabled ? 'APPROVED' : 'REJECTED');
+
+  useEffect(() => {
+  if (initialValues?.approval?.step_name) {
+    const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
+    setIsApprovedDisabled(approvedDisabled);
+    setIsRejectedDisabled(!approvedDisabled);
+    setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
+  }
+}, [initialValues]);
 
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -375,7 +388,7 @@ const ProjectFlockForm = ({
       formik.setFieldValue('period', initialValues?.period);
     }
   }, [initialValues, setSelectedArea, formType]);
-  
+
   useEffect(() => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
@@ -400,7 +413,7 @@ const ProjectFlockForm = ({
   }, [formik.values]);
 
   useEffect(() => {
-    if(isResponseSuccess(periodFlocks)){
+    if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
   }, [periodFlocks]);
@@ -422,23 +435,39 @@ const ProjectFlockForm = ({
     setIsDeleteLoading(false);
   };
 
-  const confirmationModalApproveClickHandler = async () => {
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (initialValues?.id === undefined) return;
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/${initialValues?.id}/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [initialValues.id],
+      },
     });
 
     if (isResponseSuccess(approveProjectFlockRes)) {
-      toast.success('Project Flock berhasil di-approve!');
-      confirmModal.closeModal();
+      if(action == 'APPROVED'){
+        setIsApprovedDisabled(true);
+        setIsRejectedDisabled(false);
+      }
+      if(action == 'REJECTED'){
+        setIsRejectedDisabled(true);
+        setIsApprovedDisabled(false);
+      }
+      toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
       toast.error(approveProjectFlockRes?.message as string);
-      confirmModal.closeModal();
     }
+    confirmModal.closeModal();
     setIsApproveLoading(false);
   };
 
@@ -481,21 +510,43 @@ const ProjectFlockForm = ({
           </div>
         )}
         {formType == 'detail' && (
-          <div className='w-full py-4'>
+          <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button
               variant='outline'
               color='success'
               onClick={() => {
                 if (initialValues?.id) {
+                  setApprovalAction('APPROVED');
                   confirmModal.openModal();
                 }
               }}
-              disabled={!initialValues?.id}
+              disabled={
+                !initialValues?.id ||
+                isApprovedDisabled
+              }
               className='w-full sm:w-fit'
             >
               <Icon icon='material-symbols:check' width={24} height={24} />
               Approve
             </Button>
+            <Button
+              variant='outline'
+              color='error'
+              onClick={() => {
+                if (initialValues?.id) {
+                  setApprovalAction('REJECTED');
+                  confirmModal.openModal();
+                }
+              }}
+              disabled={
+                !initialValues?.id ||
+                isRejectedDisabled
+              }
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='mdi:times' width={24} height={24} />
+              Reject
+            </Button>
           </div>
         )}
         <form
@@ -505,9 +556,7 @@ const ProjectFlockForm = ({
         >
           <div className='card bg-base-100 shadow w-full mb-6'>
             <div className='card-body'>
-              <div className='card-title mb-4'>
-                Informasi Umum
-              </div>
+              <div className='card-title mb-4'>Informasi Umum</div>
 
               <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
@@ -614,7 +663,7 @@ const ProjectFlockForm = ({
                       variant='link'
                       className={`text-primary rotate-${
                         openSelectKandangs ? '180' : '0'
-                      } transition-transform hover:text-inherit`}
+                      } transition-transform hover:text-inherit me-3`}
                     >
                       <Icon
                         icon='material-symbols:keyboard-arrow-down'
@@ -631,7 +680,7 @@ const ProjectFlockForm = ({
               >
                 <div className='overflow-x-auto'>
                   {isLoadingKandang && (
-                    <span className="loading loading-dots loading-xl"></span>
+                    <span className='loading loading-dots loading-xl'></span>
                   )}
                   <table className='table'>
                     {/* head */}
@@ -673,7 +722,7 @@ const ProjectFlockForm = ({
                           </label>
                         </th>
                         <th>Kandang</th>
-                        <th>Status</th>
+                        {/* <th>Status</th> */}
                         <th>Penanggung Jawab</th>
                       </tr>
                     </thead>
@@ -704,7 +753,7 @@ const ProjectFlockForm = ({
                               </label>
                             </th>
                             <td>{kandang.name}</td>
-                            <td>{kandang.status}</td>
+                            {/* <td>{kandang.status}</td> */}
                             <td>{kandang.pic?.name}</td>
                           </tr>
                         ))}
@@ -795,16 +844,20 @@ const ProjectFlockForm = ({
 
       <ConfirmationModal
         ref={confirmModal.ref}
-        type='success'
-        text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
         secondaryButton={{
           text: 'Tidak',
         }}
         primaryButton={{
           text: 'Ya',
-          color: 'success',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
           isLoading: isApproveLoading,
-          onClick: confirmationModalApproveClickHandler,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
         }}
       />
     </>
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index c118b5a4..2a720018 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -104,3 +104,12 @@ export type ApprovalsLine = {
   role?: string;
   status: 'approved' | 'rejected' | 'waiting';
 }[];
+
+export type BaseApproval = {
+  step_number: number;
+  step_name: string;
+  action: string;
+  notes: string | null;
+  action_by: CreatedUser;
+  action_at: string;
+};
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 306c32f1..be14302d 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -1,9 +1,9 @@
-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 { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 
 export type BaseProjectFlock = {
   id: number;
@@ -21,15 +21,15 @@ export type BaseProjectFlock = {
   period: number;
   kandang_ids: number[];
   kandangs: Kandang[];
-}
+  approval: BaseApproval;
+};
 
 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 +39,11 @@ 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;
+
+export type ProjectFlockApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};

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 169/212] 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 170/212] 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 171/212] 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>

From a13a51a16fe4d6ba5cabee9071e8c0c01e2caa53 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 06:15:29 +0700
Subject: [PATCH 172/212] fix(FE-92-93-105): adding input note and quantity for
 create/edit chickin

---
 src/app/production/chickin/add/page.tsx       | 89 ++++++++++++-------
 src/app/production/chickin/detail/layout.tsx  | 11 +++
 src/app/production/chickin/detail/page.tsx    | 74 +++++++++++++++
 .../pages/production/chickin/ChickinTable.tsx |  6 +-
 .../production/chickin/form/ChickinForm.tsx   | 23 +++--
 src/types/api/production/chickin.d.ts         |  2 +
 .../api/production/project-flock-kandang.d.ts |  8 +-
 7 files changed, 169 insertions(+), 44 deletions(-)
 create mode 100644 src/app/production/chickin/detail/layout.tsx
 create mode 100644 src/app/production/chickin/detail/page.tsx

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index e7fa4c24..feb1d3d2 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -3,6 +3,7 @@
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
 import Table from '@/components/Table';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -14,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 
 import useSWR from 'swr';
 
@@ -33,6 +34,11 @@ const AddChickin = () => {
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
+  const [projectFlockKandang, setProjectFlockKandang] = useState<
+    BaseApiResponse<ProjectFlockKandang>
+  >();
+  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
+    useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
 
   // Fetch Data
@@ -41,44 +47,26 @@ const AddChickin = () => {
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
-      search: searchProjectFlock,
-    }).toString()}`, ProjectFlockApi.getAllFetcher);
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
+        search: searchProjectFlock,
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
+    );
 
   const getProjectFlockKandangUrl = `/kandangs/lookup`;
-  const {
-    data: projectFlockKandang,
-    isLoading: isLoadingProjectFlockKandang,
-    mutate: refreshProjectFlockKandang,
-  } = useSWR(getProjectFlockKandangUrl, () =>
-    ProjectFlockApi.customRequest<BaseApiResponse<ProjectFlockKandang>, 'GET'>(
-      getProjectFlockKandangUrl,
-      {
-        method: 'GET',
-        params: {
-          project_flock_id: projectFlockId ?? 0,
-          kandang_id: selectedKandang?.id,
-        },
-      }
-    )
-  );
-
   // Mapping Options
   const options = isResponseSuccess(listProjectFlock)
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
+          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
         };
       })
     : [];
 
   const chickinModal = useModal();
-
-  // Use Effect
-  useEffect(() => {
-    refreshProjectFlockKandang();
-  }, [selectedKandang, refreshProjectFlockKandang]);
+  const alertModal = useModal();
 
   if (!projectFlockId) {
     router.back();
@@ -99,13 +87,35 @@ const AddChickin = () => {
   }
 
   // Handle Function
-  const handleChickinClick = (kandang: Kandang) => {
+  const handleChickinClick = async (kandang: Kandang) =>  {
+    setIsLoadingProjectFlockKandang(true);
     setSelectedKandang(kandang);
-    refreshProjectFlockKandang();
-    chickinModal.openModal();
+    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlockKandang>,
+      'GET'
+    >(getProjectFlockKandangUrl, {
+      method: 'GET',
+      params: {
+        project_flock_id: projectFlockId ?? 0,
+        kandang_id: kandang.id,
+      },
+    });
+    if (
+      isResponseSuccess(ProjectFlockKandangRes)
+    ) {
+      setProjectFlockKandang(ProjectFlockKandangRes);
+      setIsLoadingProjectFlockKandang(false);
+      if (
+        ProjectFlockKandangRes.data.available_quantity &&
+        ProjectFlockKandangRes.data.available_quantity > 0
+      ) {
+        chickinModal.openModal();
+      }else{
+        alertModal.openModal();
+      }
+    }
   };
   const handleAfterSubmit = () => {
-    refreshProjectFlockKandang();
     chickinModal.closeModal();
     router.push('/production/chickin');
   };
@@ -126,7 +136,7 @@ const AddChickin = () => {
               </Button>
 
               <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-1/4'>
+                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
                   <SelectInput
                     required
                     isSearchable
@@ -173,10 +183,10 @@ const AddChickin = () => {
                         <Button
                           color='success'
                           variant='outline'
-                          isLoading={isLoadingProjectFlockKandang}
                           onClick={() => {
                             handleChickinClick(props.row.original);
                           }}
+                          disabled={isLoadingProjectFlockKandang}
                         >
                           <Icon
                             icon='mdi:home-import-outline'
@@ -240,6 +250,19 @@ const AddChickin = () => {
                 />
               )}
           </Modal>
+          <ConfirmationModal
+            ref={alertModal.ref}
+            type='info'
+            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+            secondaryButton={undefined}
+            primaryButton={{
+              text: 'Ya',
+              color: 'info',
+              onClick: () => {
+                alertModal.closeModal();
+              },
+            }}
+          />
         </>
       )}
     </>
diff --git a/src/app/production/chickin/detail/layout.tsx b/src/app/production/chickin/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/production/chickin/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;
\ No newline at end of file
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
new file mode 100644
index 00000000..42aa5bf8
--- /dev/null
+++ b/src/app/production/chickin/detail/page.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { ChickinApi } from "@/services/api/production";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const DetailChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const chickinId = searchParams.get('chickinId');
+
+  const {
+    data: chickin,
+    isLoading,
+    mutate: refreshChickin,
+  } = useSWR(
+    chickinId,
+    (id: number) => ChickinApi.getSingle(id)
+  );
+
+  if(!chickinId){
+    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 (
+    !isLoading &&
+    (!chickin || isResponseError(chickin))
+  ) { 
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <>
+      <div className="w-full p-4 flex flex-col justify-center gap-4">
+        {isLoading && <span className='loading loading-spinner loading-xl' />}
+        {!isLoading && isResponseSuccess(chickin) && (
+          <>
+            <div className="card shadow">
+              <div className="card-body">
+                <div className="card-title">
+                  Informasi Project Flock
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <div className="font-semibold">Flock</div>
+                    <div >{chickin.data.project_flock_kandang?.project_flock.flock.name}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="card shadow">
+              <div className="card-body">
+                <div className="card-title">
+                  Informasi Chickin
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DetailChickin;
\ No newline at end of file
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index e3d908fd..2b3fdc07 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -279,15 +279,15 @@ const RowOptionsMenu = ({
         'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
       )}
     >
-      <Button
-        href={`/production/chickin/detail?projectFlockId=${props.row.original.id}`}
+      {/* <Button
+        href={`/production/chickin/detail?chickinId=${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> */}
       <Button
         variant='ghost'
         color='warning'
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index c6674df4..71e64c35 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -11,7 +11,7 @@ import {
   ChickinFormValues,
   UpdateChickinFormSchema,
 } from '@/components/pages/production/chickin/form/ChickinForm.schema';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { ChickinApi } from '@/services/api/production';
 import DateInput from '@/components/input/DateInput';
@@ -45,8 +45,8 @@ const ChickinForm = ({
   const formikInitialValue = useMemo<ChickinFormValues>(() => {
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
-      note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
-      quantity: initialValues?.quantity ?? 1,
+      note: initialValues?.note ?? '',
+      quantity: initialValues?.quantity ?? initialValues?.project_flock_kandang?.available_quantity ?? 0,
     };
   }, [initialValues]);
 
@@ -103,6 +103,8 @@ const ChickinForm = ({
       const payload = {
         chick_in_date: values.chick_in_date,
         project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
+        note: values.note,
+        quantity: values.quantity,
       };
 
       // cek type form yang disubmit
@@ -151,21 +153,28 @@ const ChickinForm = ({
           name='quantity'
           label='Jumlah Chickin'
           required
-          isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
-          errorMessage={formik.errors.quantity}
+          isError={
+            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
+            formik.values.quantity == 0
+          }
+          errorMessage={
+            formik.values.quantity == 0
+              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
+              : formik.errors.quantity
+          }
           type='number'
-          disabled
+          readOnly
         />
         <TextArea
           required
           label='Catatan'
           name='note'
+          placeholder='Masukan catatan chickin'
           value={formik.values.note}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           isError={formik.touched.note && Boolean(formik.errors.note)}
           errorMessage={formik.errors.note}
-
         />
         {initialValues?.project_flock_kandang?.id == undefined && (
           <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index b4d5cd7a..ad8822b5 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -14,6 +14,8 @@ export type Chickin = BaseMetadata & BaseChickin;
 export type CreateChickinPayload = {
   project_flock_kandang_id: number;
   chick_in_date: string;
+  note: string;
+  quantity?: number;
 }
 
 export type UpdateChickinPayload = CreateChickinPayload;
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index d75c403e..83a1c18f 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -7,6 +7,12 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
+  available_quantity?: number;
 }
 
-export type ProjectFlockKandang = BaseProjectFlockKandang;
\ No newline at end of file
+export type ProjectFlockKandang = BaseProjectFlockKandang;
+
+export type LookupProjectFlockKandangPayload = {
+  project_flock_id: number;
+  kandang_id: number;
+}
\ No newline at end of file

From f0f6ec53cb300b20716de2d3027d6d9e8da3a30f Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 13:58:46 +0700
Subject: [PATCH 173/212] refactor(FE-84-87) refactor checkbox using reuseable
 component checkboxinput

---
 src/app/production/chickin/add/page.tsx       |  15 +-
 src/app/production/chickin/detail/page.tsx    |   1 -
 .../production/project-flock/detail/page.tsx  |  51 ++--
 src/app/production/project-flock/page.tsx     |   1 -
 src/components/PillBadge.tsx                  |  31 +++
 src/components/Table.tsx                      |  13 +
 src/components/input/CheckboxInput.tsx        |  89 +++++++
 .../project-flock/ProjectFlockTable.tsx       | 169 ++++++-------
 .../project-flock/form/ProjectFlockForm.tsx   | 235 ++++++------------
 .../form/ProjectFlockKandangTable.tsx         | 146 +++++++++++
 10 files changed, 476 insertions(+), 275 deletions(-)
 create mode 100644 src/components/PillBadge.tsx
 create mode 100644 src/components/input/CheckboxInput.tsx
 create mode 100644 src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index feb1d3d2..1823b41a 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -15,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { use, useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import useSWR from 'swr';
 
@@ -34,9 +34,8 @@ const AddChickin = () => {
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
-  const [projectFlockKandang, setProjectFlockKandang] = useState<
-    BaseApiResponse<ProjectFlockKandang>
-  >();
+  const [projectFlockKandang, setProjectFlockKandang] =
+    useState<BaseApiResponse<ProjectFlockKandang>>();
   const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
     useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
@@ -87,7 +86,7 @@ const AddChickin = () => {
   }
 
   // Handle Function
-  const handleChickinClick = async (kandang: Kandang) =>  {
+  const handleChickinClick = async (kandang: Kandang) => {
     setIsLoadingProjectFlockKandang(true);
     setSelectedKandang(kandang);
     const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
@@ -100,9 +99,7 @@ const AddChickin = () => {
         kandang_id: kandang.id,
       },
     });
-    if (
-      isResponseSuccess(ProjectFlockKandangRes)
-    ) {
+    if (isResponseSuccess(ProjectFlockKandangRes)) {
       setProjectFlockKandang(ProjectFlockKandangRes);
       setIsLoadingProjectFlockKandang(false);
       if (
@@ -110,7 +107,7 @@ const AddChickin = () => {
         ProjectFlockKandangRes.data.available_quantity > 0
       ) {
         chickinModal.openModal();
-      }else{
+      } else {
         alertModal.openModal();
       }
     }
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
index 42aa5bf8..d62c92bf 100644
--- a/src/app/production/chickin/detail/page.tsx
+++ b/src/app/production/chickin/detail/page.tsx
@@ -13,7 +13,6 @@ const DetailChickin = () => {
   const {
     data: chickin,
     isLoading,
-    mutate: refreshChickin,
   } = useSWR(
     chickinId,
     (id: number) => ChickinApi.getSingle(id)
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index bf0da188..bea96b84 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -1,46 +1,51 @@
-'use client'
+'use client';
 
-
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ProjectFlockApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const ProjectFlockDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const projectFlockId = searchParams.get("projectFlockId");
+  const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
-  if(!projectFlockId){
+  if (!projectFlockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingProjectFlock && (!projectFlock || isResponseError(projectFlock))){
-    router.replace("/404");
+  if (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingProjectFlock && <span className="loading loading-spinner loading-xl" />}
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProjectFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
+        <ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ProjectFlockDetail;
\ No newline at end of file
+export default ProjectFlockDetail;
diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx
index fdb8775d..d264d9e4 100644
--- a/src/app/production/project-flock/page.tsx
+++ b/src/app/production/project-flock/page.tsx
@@ -1,4 +1,3 @@
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
 import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
 
 const ProjectFlock = () => {
diff --git a/src/components/PillBadge.tsx b/src/components/PillBadge.tsx
new file mode 100644
index 00000000..827177a9
--- /dev/null
+++ b/src/components/PillBadge.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface PillBadgeProps {
+  content: ReactNode;
+  color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
+  className?: string;
+}
+
+const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
+        {
+          'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
+          'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
+          'border-green-200 bg-green-50 text-green-500': color === 'green',
+          'border-red-200 bg-red-50 text-red-500': color === 'red',
+          'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
+          'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
+        },
+        className
+      )}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default PillBadge;
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index cfd77df6..d3498e33 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   manualSorting?: boolean;
+  rowSelection?: Record<string, boolean>;
+  setRowSelection?: OnChangeFn<Record<string, boolean>>;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +88,8 @@ const Table = <TData extends object>({
   sorting,
   setSorting,
   manualSorting = false,
+  rowSelection,
+  setRowSelection,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
     };
   }
 
+  if (rowSelection && setRowSelection) {
+    tableOptions.onRowSelectionChange = setRowSelection;
+    tableOptions.state = {
+      ...tableOptions.state,
+      rowSelection,
+    };
+    tableOptions.getRowId = (row) => (row as { id: string }).id;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 
diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
new file mode 100644
index 00000000..fb0c95c7
--- /dev/null
+++ b/src/components/input/CheckboxInput.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { HTMLProps, useEffect, useRef } from 'react';
+import { cn } from '@/lib/helper';
+
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
+  name: string;
+  label?: string;
+  indeterminate?: boolean;
+  classNames?: {
+    wrapper?: string;
+    inputWrapper?: string;
+    checkbox?: string;
+    label?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+}
+
+const CheckboxInput = ({
+  indeterminate,
+  name,
+  label,
+  className,
+  classNames,
+  isValid,
+  isError,
+  errorMessage,
+  ...rest
+}: CheckboxInputProps) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return (
+    <div
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
+    >
+      <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(
+            'checkbox cursor-pointer',
+            {
+              'border-error': isError,
+              'border-success': isValid,
+            },
+            className,
+            classNames?.checkbox
+          )}
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
+            )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
+    </div>
+  );
+};
+
+export default CheckboxInput;
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 95361278..3f4afc47 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
@@ -120,10 +121,15 @@ const ProjectFlockTable = () => {
       periodFilter: 'period',
     },
   });
+
+  // State
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection)
+    .filter((id) => rowSelection[id])
+    .map((id) => parseInt(id));
   const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
   const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
   const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
-
   const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -132,6 +138,14 @@ const ProjectFlockTable = () => {
     null
   );
   const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<ProjectFlock>();
+  const deleteModal = useModal();
+  const confirmModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Fetch Data
   const {
@@ -193,16 +207,6 @@ const ProjectFlockTable = () => {
       }))
     : [];
 
-  // State
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<ProjectFlock>();
-  const deleteModal = useModal();
-  const confirmModal = useModal();
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
   // Handler
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
@@ -221,40 +225,6 @@ const ProjectFlockTable = () => {
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-  const handleSelectAll = (checked: boolean) => {
-    if (checked && isResponseSuccess(projectFlocks)) {
-      const allIds = projectFlocks.data
-        .filter((item) => item.approval.step_name === 'Pengajuan')
-        .map((item) => item.id);
-      setSelectedIds(allIds);
-      setSelectedFlocks(
-        projectFlocks.data.filter(
-          (item) => item.approval.step_name === 'Pengajuan'
-        )
-      );
-    } else {
-      setSelectedIds([]);
-      setSelectedFlocks([]);
-    }
-  };
-
-  const handleSelectRow = (id: number, checked: boolean) => {
-    if (!isResponseSuccess(projectFlocks)) return;
-
-    const targetFlock = projectFlocks.data.find((item) => item.id === id);
-
-    if (!targetFlock) return;
-
-    if (checked) {
-      setSelectedIds((prev) => [...prev, id]);
-      setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
-    } else {
-      setSelectedIds((prev) => prev.filter((val) => val !== id));
-      setSelectedFlocks((prev) =>
-        (prev || []).filter((flock) => flock.id !== id)
-      );
-    }
-  };
 
   const confirmationModalApproveClickHandler = async () => {
     setIsApproveLoading(true);
@@ -265,7 +235,7 @@ const ProjectFlockTable = () => {
       method: 'POST',
       payload: {
         action: 'APPROVED',
-        approvable_ids: selectedFlocks.map((flock) => flock.id),
+        approvable_ids: selectedRowIds.map((id) => id),
       },
     });
 
@@ -277,8 +247,7 @@ const ProjectFlockTable = () => {
       toast.error(approveProjectFlockRes?.message as string);
       confirmModal.closeModal();
     }
-    setSelectedIds([]);
-    setSelectedFlocks([]);
+    setRowSelection({});
     refreshProjectFlocks();
     setIsApproveLoading(false);
   };
@@ -301,11 +270,9 @@ const ProjectFlockTable = () => {
                 variant='outline'
                 color='success'
                 onClick={() => {
-                  if (selectedIds.length > 0) {
-                    confirmModal.openModal();
-                  }
+                  confirmModal.openModal();
                 }}
-                disabled={!(selectedIds.length > 0)}
+                disabled={selectedRowIds.length === 0}
                 className='w-full sm:w-fit'
               >
                 <Icon icon='material-symbols:check' width={24} height={24} />
@@ -400,33 +367,58 @@ const ProjectFlockTable = () => {
             columns={[
               {
                 id: 'select',
-                header: () => {
-                  const allSelected =
-                    isResponseSuccess(projectFlocks) &&
-                    projectFlocks.data.length > 0 &&
-                    selectedIds.length === projectFlocks.data.length;
-                  return (
-                    <input
-                      type='checkbox'
-                      className='checkbox checkbox-sm'
-                      checked={allSelected}
-                      onChange={(e) => handleSelectAll(e.target.checked)}
-                    />
+                header: ({ table }) => {
+                  const allRows = table.getRowModel().rows;
+                  const selectableRows = allRows.filter(
+                    (row) => row.original?.approval?.step_number == 1
                   );
-                },
-                cell: (props) => {
-                  const id = props.row.original.id;
-                  const isChecked = selectedIds.includes(id);
+                  
+                  const allSelected = selectableRows.every((row) =>
+                    row.getIsSelected()
+                  ) && selectableRows.length != 0;
+
+                  const someSelected =
+                    selectableRows.some((row) => row.getIsSelected()) &&
+                    !allSelected;
+
+                  const toggleSelectableRows = () => {
+                    const shouldSelect = !allSelected;
+                    selectableRows.forEach((row) =>
+                      row.toggleSelected(shouldSelect)
+                    );
+                  };
 
                   return (
-                    <input
-                      disabled={
-                        props.row.original.approval.step_name != 'Pengajuan'
+                    <div className='w-full flex flex-row justify-center'>
+                      <CheckboxInput
+                        name='allRow'
+                        checked={allSelected}
+                        indeterminate={someSelected}
+                        onChange={toggleSelectableRows}
+                        disabled={
+                          isResponseSuccess(projectFlocks) &&
+                          projectFlocks?.data?.filter(
+                            (flock) => flock.approval.step_number == 1
+                          ).length == 0
+                        }
+                      />
+                    </div>
+                  );
+                },
+                cell: ({ row }) => {
+                  return (
+                    <CheckboxInput
+                      name='row'
+                      checked={
+                        row.getIsSelected() &&
+                        row.original.approval.step_number == 1
                       }
-                      type='checkbox'
-                      className='checkbox checkbox-sm'
-                      checked={isChecked}
-                      onChange={(e) => handleSelectRow(id, e.target.checked)}
+                      disabled={
+                        !row.getCanSelect() ||
+                        row.original.approval.step_number != 1
+                      }
+                      indeterminate={row.getIsSomeSelected()}
+                      onChange={row.getToggleSelectedHandler()}
                     />
                   );
                 },
@@ -541,6 +533,8 @@ const ProjectFlockTable = () => {
             isLoading={isLoading}
             sorting={sorting}
             setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
             className={{
               containerClassName: cn({
                 'mb-20':
@@ -578,18 +572,19 @@ const ProjectFlockTable = () => {
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
-        text={
-          selectedFlocks.length > 0
-            ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
-                .map(
-                  (flock) =>
-                    `${flock.flock?.name ?? '(Tanpa nama)'} - ${
-                      flock.area?.name ?? '-'
-                    }`
-                )
-                .join(', ')})`
-            : 'Tidak ada Project Flock yang dipilih.'
-        }
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        // text={
+        //   selectedFlocks.length > 0
+        //     ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
+        //         .map(
+        //           (flock) =>
+        //             `${flock.flock?.name ?? '(Tanpa nama)'} - ${
+        //               flock.area?.name ?? '-'
+        //             }`
+        //         )
+        //         .join(', ')})`
+        //     : 'Tidak ada Project Flock yang dipilih.'
+        // }
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index d098aba3..14eee9b7 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -14,7 +14,7 @@ import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
+import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockFormSchema,
   ProjectFlockFormValues,
@@ -35,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ProjectFlockKandangTable from './ProjectFlockKandangTable';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: ProjectFlock;
+  refreshProjectFlocks?: KeyedMutator<
+    BaseApiResponse<ProjectFlock> | undefined
+  >;
 }
 
 const ProjectFlockForm = ({
   formType = 'add',
   initialValues,
+  refreshProjectFlocks,
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
@@ -71,18 +76,34 @@ const ProjectFlockForm = ({
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isApprovedDisabled, setIsApprovedDisabled] = useState(initialValues?.approval.step_name == 'Pengajuan' ? false : true);
-  const [isRejectedDisabled, setIsRejectedDisabled] = useState(!isApprovedDisabled);
-  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(!isApprovedDisabled ? 'APPROVED' : 'REJECTED');
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    initialValues?.approval.step_name == 'Pengajuan' ? false : true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
+    () =>
+      Object.fromEntries(
+        (initialValues?.kandangs ?? []).map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      )
+  );
 
   useEffect(() => {
-  if (initialValues?.approval?.step_name) {
-    const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
-    setIsApprovedDisabled(approvedDisabled);
-    setIsRejectedDisabled(!approvedDisabled);
-    setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
-  }
-}, [initialValues]);
+    if (initialValues?.approval?.step_name) {
+      const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
+      setIsApprovedDisabled(approvedDisabled);
+      setIsRejectedDisabled(!approvedDisabled);
+      setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
+    }
+  }, [initialValues]);
 
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -122,7 +143,7 @@ const ProjectFlockForm = ({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
   }).toString()}`;
-  const { data: kandang, isLoading: isLoadingKandang } = useSWR(
+  const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
     kandangUrl,
     KandangApi.getAllFetcher
   );
@@ -180,6 +201,20 @@ const ProjectFlockForm = ({
       }
     }
   }, [kandang]);
+  useEffect(() => {
+    if (initialValues?.kandangs) {
+      refreshKandang();
+      setOpenSelectKandangs(true);
+
+      const newRowSelection = Object.fromEntries(
+        initialValues.kandangs.map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      );
+      setRowSelection(newRowSelection);
+    }
+  }, [initialValues, refreshKandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -224,38 +259,6 @@ const ProjectFlockForm = ({
     formik.setFieldTouched('category', true);
   };
 
-  const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value, checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.concat(parseInt(value))
-      );
-    } else {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.filter((id) => id !== parseInt(value))
-      );
-    }
-  };
-  const kandangCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        optionsKandang
-          .filter(
-            (kandang) =>
-              kandang.status === 'NON_ACTIVE' ||
-              formik.values.kandang_ids.includes(kandang.id)
-          )
-          .map((kandang) => kandang.id)
-      );
-    } else {
-      formik.setFieldValue('kandang_ids', []);
-    }
-  };
-
   // Submit Handler
   const createProjectFlockHandler = async (
     payload: CreateProjectFlockPayload
@@ -418,6 +421,16 @@ const ProjectFlockForm = ({
     }
   }, [periodFlocks]);
 
+  useEffect(() => {
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formikSetValues({
+      ...formik.values,
+      kandang_ids: selectedRowIds,
+    });
+  }, [rowSelection, formikSetValues]);
+
   // Actions handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -454,14 +467,17 @@ const ProjectFlockForm = ({
     });
 
     if (isResponseSuccess(approveProjectFlockRes)) {
-      if(action == 'APPROVED'){
-        setIsApprovedDisabled(true);
-        setIsRejectedDisabled(false);
-      }
-      if(action == 'REJECTED'){
-        setIsRejectedDisabled(true);
-        setIsApprovedDisabled(false);
+      if (refreshProjectFlocks) {
+        await refreshProjectFlocks();
       }
+      // if (action == 'APPROVED') {
+      //   setIsApprovedDisabled(true);
+      //   setIsRejectedDisabled(false);
+      // }
+      // if (action == 'REJECTED') {
+      //   setIsRejectedDisabled(true);
+      //   setIsApprovedDisabled(false);
+      // }
       toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
@@ -520,10 +536,7 @@ const ProjectFlockForm = ({
                   confirmModal.openModal();
                 }
               }}
-              disabled={
-                !initialValues?.id ||
-                isApprovedDisabled
-              }
+              disabled={!initialValues?.id || isApprovedDisabled}
               className='w-full sm:w-fit'
             >
               <Icon icon='material-symbols:check' width={24} height={24} />
@@ -538,10 +551,7 @@ const ProjectFlockForm = ({
                   confirmModal.openModal();
                 }
               }}
-              disabled={
-                !initialValues?.id ||
-                isRejectedDisabled
-              }
+              disabled={!initialValues?.id || isRejectedDisabled}
               className='w-full sm:w-fit'
             >
               <Icon icon='mdi:times' width={24} height={24} />
@@ -682,100 +692,13 @@ const ProjectFlockForm = ({
                   {isLoadingKandang && (
                     <span className='loading loading-dots loading-xl'></span>
                   )}
-                  <table className='table'>
-                    {/* head */}
-                    <thead>
-                      <tr>
-                        <th>
-                          <label>
-                            <input
-                              type='checkbox'
-                              checked={
-                                optionsKandang
-                                  .filter(
-                                    (k) =>
-                                      k.status === 'NON_ACTIVE' ||
-                                      formik.values.kandang_ids.includes(k.id)
-                                  )
-                                  .every((k) =>
-                                    formik.values.kandang_ids.includes(k.id)
-                                  ) &&
-                                optionsKandang.filter(
-                                  (k) =>
-                                    k.status === 'NON_ACTIVE' ||
-                                    formik.values.kandang_ids.includes(k.id)
-                                ).length > 0
-                              }
-                              className='checkbox transition-none'
-                              disabled={
-                                formType === 'detail' ||
-                                optionsKandang.filter(
-                                  (k) => k.status === 'NON_ACTIVE'
-                                ).length == 0
-                              }
-                              onChange={
-                                formType === 'detail'
-                                  ? () => {}
-                                  : kandangCheckAll
-                              }
-                            />
-                          </label>
-                        </th>
-                        <th>Kandang</th>
-                        {/* <th>Status</th> */}
-                        <th>Penanggung Jawab</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {/* rows */}
-                      {selectedLocation != '' &&
-                        optionsKandang.map((kandang) => (
-                          <tr key={kandang.id}>
-                            <th>
-                              <label>
-                                <input
-                                  value={kandang.id}
-                                  type='checkbox'
-                                  className='checkbox transition-none'
-                                  checked={formik.values.kandang_ids.includes(
-                                    kandang.id
-                                  )}
-                                  onChange={
-                                    formType === 'detail'
-                                      ? () => {}
-                                      : kandangChangeHandler
-                                  }
-                                  disabled={
-                                    formType === 'detail' ||
-                                    kandang.status != 'NON_ACTIVE'
-                                  }
-                                />
-                              </label>
-                            </th>
-                            <td>{kandang.name}</td>
-                            {/* <td>{kandang.status}</td> */}
-                            <td>{kandang.pic?.name}</td>
-                          </tr>
-                        ))}
-                      {selectedLocation == '' && (
-                        <tr>
-                          <td colSpan={3} className='text-center text-muted'>
-                            Data tidak tersedia
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                    {/* foot */}
-                    {selectedLocation != '' && (
-                      <tfoot>
-                        <tr>
-                          <th></th>
-                          <th>Kandang</th>
-                          <th>Penanggung Jawab</th>
-                        </tr>
-                      </tfoot>
-                    )}
-                  </table>
+                  <ProjectFlockKandangTable
+                    listKandang={optionsKandang}
+                    rowSelection={rowSelection}
+                    setRowSelection={setRowSelection}
+                    selectedIds={formik.values.kandang_ids}
+                    formType={formType}
+                  />
                 </div>
               </Collapse>
             </div>
@@ -845,7 +768,11 @@ const ProjectFlockForm = ({
       <ConfirmationModal
         ref={confirmModal.ref}
         type={approvalAction == 'APPROVED' ? 'success' : 'error'}
-        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } Project Flock berikut? (${initialValues?.flock?.name} - ${
+          initialValues?.area?.name
+        })?`}
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
new file mode 100644
index 00000000..bf930eec
--- /dev/null
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import CheckboxInput from '@/components/input/CheckboxInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { cn } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { OnChangeFn } from '@tanstack/react-table';
+
+const ProjectFlockKandangTable = ({
+  listKandang,
+  rowSelection,
+  setRowSelection,
+  selectedIds,
+  formType = 'add',
+}: {
+  listKandang: Kandang[];
+  rowSelection: Record<string, boolean>;
+  setRowSelection: OnChangeFn<Record<string, boolean>>;
+  selectedIds: (number | undefined)[];
+  formType: 'add' | 'edit' | 'detail';
+}) => {
+  console.log('selectedIds');
+  console.log(selectedIds);
+  return (
+    <Table<Kandang>
+      data={listKandang}
+      columns={[
+        {
+          id: 'select',
+          header: ({ table }) => {
+            const allRows = table.getRowModel().rows;
+            const selectableRows = allRows.filter(
+              (row) =>
+                row.original.status == 'NON_ACTIVE' ||
+                row.original.status == 'PENGAJUAN'
+            );
+
+            const allSelected =
+              selectableRows.every((row) => row.getIsSelected()) &&
+              selectableRows.length != 0 && formType != 'detail';
+
+            const someSelected =
+              selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
+
+            const toggleSelectableRows = () => {
+              const shouldSelect = !allSelected;
+              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
+            };
+
+            return (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  onChange={toggleSelectableRows}
+                  disabled={
+                    listKandang.filter(
+                      (kandang) =>
+                        kandang.status == 'NON_ACTIVE' ||
+                        kandang.status == 'PENGAJUAN'
+                    ).length == 0 || formType == 'detail'
+                  }
+                />
+              </div>
+            );
+          },
+          cell: ({ row }) => {
+            return (
+              <CheckboxInput
+                name='row'
+                checked={
+                  (row.getIsSelected() &&
+                    (row.original.status == 'NON_ACTIVE' ||
+                      row.original.status == 'PENGAJUAN')) ||
+                  selectedIds.includes(row.original.id)
+                }
+                disabled={
+                  !row.getCanSelect() ||
+                  (row.original.status != 'NON_ACTIVE' &&
+                    row.original.status != 'PENGAJUAN') ||
+                  formType == 'detail'
+                }
+                indeterminate={row.getIsSomeSelected()}
+                onChange={row.getToggleSelectedHandler()}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.name,
+          header: 'Kandang',
+        },
+        {
+          accessorFn: (row) => row.status,
+          header: 'Status',
+          cell: (props) => {
+            return (
+              <PillBadge
+                color={(() => {
+                  switch (props.row.original.status) {
+                    case 'ACTIVE':
+                      return 'red';
+                    case 'PENGAJUAN':
+                      return 'green';
+                    case 'NON_ACTIVE':
+                      return 'blue';
+                    default:
+                      return 'gray';
+                  }
+                })()}
+                content={props.row.original.status
+                  .toLowerCase()
+                  .replace(/_/g, ' ')
+                  .replace(/\b\w/g, (char) => char.toUpperCase())}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.pic?.name,
+          header: 'Penanggung Jawab',
+        },
+      ]}
+      className={{
+        containerClassName: cn({
+          'mb-20': listKandang?.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',
+        paginationClassName: 'hidden',
+      }}
+      rowSelection={rowSelection}
+      setRowSelection={setRowSelection}
+    />
+  );
+};
+
+export default ProjectFlockKandangTable;

From 1e9d02b4b79fa6647ae08252406dd6d604f2a110 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 16:27:15 +0700
Subject: [PATCH 174/212] feat(FE-92-94): Slicing UI detail chickin & refactor
 number input chickin form

---
 package-lock.json                             |  11 +
 package.json                                  |   1 +
 src/app/production/chickin/add/page.tsx       |   3 +-
 src/app/production/chickin/detail/page.tsx    | 332 ++++++++++++++++--
 src/components/Card.tsx                       | 178 ++++++++++
 src/components/input/NumberInput.tsx          |  53 +++
 .../pages/production/chickin/ChickinTable.tsx |  17 +-
 .../production/chickin/form/ChickinForm.tsx   |  23 +-
 .../project-flock/ProjectFlockTable.tsx       |   1 -
 src/lib/helper.ts                             |  13 +
 src/types/api/production/chickin.d.ts         |  11 +-
 11 files changed, 595 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Card.tsx
 create mode 100644 src/components/input/NumberInput.tsx

diff --git a/package-lock.json b/package-lock.json
index a39060ef..72580442 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-hot-toast": "^2.6.0",
+        "react-number-format": "^5.4.4",
         "react-select": "^5.10.2",
         "swr": "^2.3.6",
         "tailwind-merge": "^3.3.1",
@@ -5811,6 +5812,16 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-number-format": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-select": {
       "version": "5.10.2",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.2.tgz",
diff --git a/package.json b/package.json
index e970499c..2e806ddd 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
+    "react-number-format": "^5.4.4",
     "react-select": "^5.10.2",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index 1823b41a..af834b37 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -59,7 +59,7 @@ const AddChickin = () => {
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
+          label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
         };
       })
     : [];
@@ -242,6 +242,7 @@ const AddChickin = () => {
                     created_user: projectFlock.data.created_user,
                     created_at: projectFlock.data.created_at,
                     updated_at: projectFlock.data.updated_at,
+                    approval: projectFlock.data.approval,
                   }}
                   afterSubmit={handleAfterSubmit}
                 />
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
index d62c92bf..aef7c4b7 100644
--- a/src/app/production/chickin/detail/page.tsx
+++ b/src/app/production/chickin/detail/page.tsx
@@ -1,24 +1,51 @@
-'use client'
+'use client';
 
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ChickinApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ChickinApi } from '@/services/api/production';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Chickin,
+  ChickinApprovalPayload,
+} from '@/types/api/production/chickin';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
 
 const DetailChickin = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const chickinId = searchParams.get('chickinId');
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  const confirmModal = useModal();
+  const deleteModal = useModal();
+  const chickinModal = useModal();
   const {
     data: chickin,
     isLoading,
-  } = useSWR(
-    chickinId,
-    (id: number) => ChickinApi.getSingle(id)
+    mutate: refreshChickin,
+  } = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
+
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    // chickin.data?.approval.step_number == 1 ? false : true
+    true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
   );
 
-  if(!chickinId){
+  if (!chickinId) {
     router.back();
 
     return (
@@ -28,46 +55,291 @@ const DetailChickin = () => {
     );
   }
 
-  if (
-    !isLoading &&
-    (!chickin || isResponseError(chickin))
-  ) { 
+  if (!isLoading && (!chickin || isResponseError(chickin))) {
     router.replace('/404');
     return;
   }
 
+  if (!isResponseSuccess(chickin)) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (chickin?.data.id === undefined) return;
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.customRequest<
+      BaseApiResponse<Chickin>,
+      ChickinApprovalPayload
+    >(`/approvals`, {
+      method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [chickin.data.id],
+      },
+    });
+
+    if (isResponseSuccess(approveChickinRes)) {
+      if (refreshChickin) {
+        await refreshChickin();
+      }
+      toast.success(approveChickinRes.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ChickinApi.delete(
+      chickin.data?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/chickin');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsDeleteLoading(false);
+  };
+
   return (
     <>
-      <div className="w-full p-4 flex flex-col justify-center gap-4">
+      <div className='w-full p-4 flex flex-col justify-center gap-4'>
         {isLoading && <span className='loading loading-spinner loading-xl' />}
         {!isLoading && isResponseSuccess(chickin) && (
           <>
-            <div className="card shadow">
-              <div className="card-body">
-                <div className="card-title">
-                  Informasi Project Flock
+            {/* <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={(() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                })}
+                disabled={!chickin?.data.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!chickin?.data.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </div> */}
+            <Card
+              title='Informasi Umum'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }
+                  </div>
                 </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <div className="font-semibold">Flock</div>
-                    <div >{chickin.data.project_flock_kandang?.project_flock.flock.name}</div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Area</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.area
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kategori</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.category}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Lokasi</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.location
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Periode</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.period}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kandang</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.kandang.name}
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="card shadow">
-              <div className="card-body">
-                <div className="card-title">
-                  Informasi Chickin
+            </Card>
+            <Card
+              title='Detail Chickin'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock Kandang</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }{' '}
+                    - {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Tanggal Chickin</div>
+                  <div className='text-sm'>
+                    {chickin.data.chick_in_date
+                      ? new Date(chickin.data.chick_in_date).toLocaleDateString(
+                          'id-ID'
+                        )
+                      : '-'}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Jumlah (Ekor)</div>
+                  <div className='text-sm'>
+                    {chickin.data.quantity?.toLocaleString('id-ID')}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Catatan</div>
+                  <div className='text-sm'>{chickin.data.note}</div>
                 </div>
               </div>
+            </Card>
+            <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                color='error'
+                onClick={() => {
+                  deleteModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Delete
+              </Button>
+              <Button color='warning'
+                onClick={() => {
+                  chickinModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                Edit
+              </Button>
             </div>
           </>
         )}
       </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <Modal ref={chickinModal.ref}>
+        <div className='flex flex-row justify-between items-center'>
+          <h1 className='text-xl font-semibold text-center mb-6'>
+            Chickin Kandang -{' '}
+            {chickin?.data?.project_flock_kandang &&
+              chickin?.data?.project_flock_kandang.kandang?.name}
+          </h1>
+          <Button
+            color='error'
+            variant='link'
+            onClick={chickinModal.closeModal}
+          >
+            <Icon
+              className='text-black'
+              icon='uil:times'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
+        <ChickinForm
+          initialValues={chickin?.data}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickin();
+            chickinModal.closeModal();
+          }}
+        />
+      </Modal>
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } chickin berikut? (${
+          chickin?.data.project_flock_kandang?.project_flock.flock.name
+        } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
+        }}
+      />
     </>
   );
-}
+};
 
-export default DetailChickin;
\ No newline at end of file
+export default DetailChickin;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 00000000..1895c2c5
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/helper";
+import Image from "next/image";
+
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+  title?: string;
+  subtitle?: string;
+  image?: string;
+  imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  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,
+  imageWidth,
+  imageHeight,
+  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 getImageDimensions = () => {
+    if (variant === "image-full") {
+      return {
+        width: imageWidth || 128,
+        height: imageHeight || 128,
+      };
+    }
+
+    const cardWidths = {
+      sm: 256, // w-64
+      md: 384, // w-96
+      lg: 448, // w-[28rem]
+    };
+
+    return {
+      width: imageWidth || cardWidths[size],
+      height: imageHeight || 192,
+    };
+  };
+
+  const getImageClasses = () => {
+    if (variant === "image-full") {
+      return cn("object-cover", className?.image);
+    }
+    return cn("w-full 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) {
+    const imageDimensions = getImageDimensions();
+    return (
+      <div className={getCardClasses()} {...props}>
+        <figure>
+          <Image
+            src={image}
+            alt={imageAlt || title || "Card image"}
+            width={imageDimensions.width}
+            height={imageDimensions.height}
+            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>
+          <Image
+            src={image}
+            alt={imageAlt || title || "Card image"}
+            width={getImageDimensions().width}
+            height={getImageDimensions().height}
+            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;
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
new file mode 100644
index 00000000..4375ca20
--- /dev/null
+++ b/src/components/input/NumberInput.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { ChangeEvent } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
+  thousandSeparator?: string;
+  decimalSeparator?: string;
+  decimalScale?: number;
+  allowNegative?: boolean;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
+}
+
+const NumberInput = ({
+  thousandSeparator = ',',
+  decimalSeparator = '.',
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  ...restProps
+}: NumberInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
+
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
+    }
+  };
+
+  return (
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      {...restProps}
+    />
+  );
+};
+
+export default NumberInput;
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index 2b3fdc07..65ab3c16 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -11,8 +11,8 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
-import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
+import { cn, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
@@ -124,6 +124,13 @@ const ChickinTable = () => {
           {
             accessorFn: (row) => row.quantity,
             header: 'Jumlah Chickin',
+            cell: (props) => {
+              if (props.row.original.quantity) {
+                return formatNumber(props.row.original.quantity);
+              } else {
+                return '-';
+              }
+            }
           },
           {
             accessorFn: (row) => row.chick_in_date,
@@ -159,7 +166,7 @@ const ChickinTable = () => {
                 deleteModal.openModal();
               };
 
-              const editClickHandler = () => {
+              const editClickHandler = () =>  {
                 setSelectedChickin(props.row.original);
                 chickinModal.openModal();
               };
@@ -279,7 +286,7 @@ const RowOptionsMenu = ({
         'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
       )}
     >
-      {/* <Button
+      <Button
         href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
@@ -287,7 +294,7 @@ const RowOptionsMenu = ({
       >
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
-      </Button> */}
+      </Button>
       <Button
         variant='ghost'
         color='warning'
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index 71e64c35..8ac6b6ee 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -20,6 +20,7 @@ import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
 import TextArea from '@/components/input/TextArea';
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 
 interface ChickinFormProps {
   formType?: 'add' | 'detail' | 'edit';
@@ -46,7 +47,10 @@ const ChickinForm = ({
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
       note: initialValues?.note ?? '',
-      quantity: initialValues?.quantity ?? initialValues?.project_flock_kandang?.available_quantity ?? 0,
+      quantity:
+        initialValues?.quantity ??
+        initialValues?.project_flock_kandang?.available_quantity ??
+        0,
     };
   }, [initialValues]);
 
@@ -71,10 +75,7 @@ const ChickinForm = ({
       payload: UpdateChickinPayload,
       afterSubmit: (() => void) | undefined
     ) => {
-      const res = await ChickinApi.update(
-        payload.project_flock_kandang_id as number,
-        payload
-      );
+      const res = await ChickinApi.update(payload.id, payload);
       if (isResponseError(res)) {
         setChickinFormErrorMessage(res.message);
         return;
@@ -95,7 +96,10 @@ const ChickinForm = ({
       // reset error message
       setChickinFormErrorMessage('');
 
-      if (initialValues?.project_flock_kandang?.id == undefined) {
+      if (
+        initialValues?.project_flock_kandang?.id == undefined ||
+        (formType == 'edit' && initialValues?.id == undefined)
+      ) {
         return;
       }
 
@@ -105,9 +109,11 @@ const ChickinForm = ({
         project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
         note: values.note,
         quantity: values.quantity,
+        id: initialValues.id ?? 0,
       };
 
       // cek type form yang disubmit
+      console.log(formType);
       switch (formType) {
         case 'add':
           handleCreate(payload, afterSubmit);
@@ -146,12 +152,12 @@ const ChickinForm = ({
           }
           errorMessage={formik.errors.chick_in_date}
         />
-        <TextInput
+        <NumberInput
           value={formik.values.quantity}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           name='quantity'
-          label='Jumlah Chickin'
+          label='Jumlah (Ekor)'
           required
           isError={
             (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
@@ -162,7 +168,6 @@ const ChickinForm = ({
               ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
               : formik.errors.quantity
           }
-          type='number'
           readOnly
         />
         <TextArea
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 3f4afc47..99f26721 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -144,7 +144,6 @@ const ProjectFlockTable = () => {
   const deleteModal = useModal();
   const confirmModal = useModal();
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Fetch Data
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index d85b7b16..2ec60598 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -13,6 +13,19 @@ export const cn = (...inputs: ClassValue[]) => {
   return twMerge(clsx(inputs));
 };
 
+export const formatNumber = (
+  value: number | bigint | Intl.StringNumericLiteral,
+  locale = 'en-US',
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2
+) => {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits,
+    maximumFractionDigits,
+  }).format(value);
+};
+
+
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
   currency = 'USD',
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index ad8822b5..99d24922 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -1,4 +1,4 @@
-import { BaseMetadata } from "@/types/api/api-general";
+import { BaseApproval, BaseMetadata } from "@/types/api/api-general";
 import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
 
 export type BaseChickin = {
@@ -7,6 +7,7 @@ export type BaseChickin = {
   quantity?: number;
   note?: string;
   project_flock_kandang?: ProjectFlockKandang;
+  approval: BaseApproval;
 }
 
 export type Chickin = BaseMetadata & BaseChickin;
@@ -18,5 +19,11 @@ export type CreateChickinPayload = {
   quantity?: number;
 }
 
-export type UpdateChickinPayload = CreateChickinPayload;
+export type UpdateChickinPayload = CreateChickinPayload & {
+  id: number;
+};
 
+export type ChickinApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};
\ No newline at end of file

From a65d00edc8ba4ed72ab9cd62eaf1a7d83fdbbf31 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Sat, 25 Oct 2025 17:01:02 +0700
Subject: [PATCH 175/212] fix(FE): fixing pipeline run error

---
 package-lock.json | 982 +++++++++++++++++++++-------------------------
 1 file changed, 445 insertions(+), 537 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 72580442..6b7c09e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,13 +69,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
-      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@babel/types": "^7.28.2",
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -116,21 +116,21 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
-      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.4"
+        "@babel/types": "^7.28.5"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -163,17 +163,17 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz",
-      "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
+        "@babel/generator": "^7.28.5",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.4",
+        "@babel/parser": "^7.28.5",
         "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4",
+        "@babel/types": "^7.28.5",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -181,22 +181,22 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
-      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
-      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -206,9 +206,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
-      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz",
+      "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -373,9 +373,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -383,13 +383,13 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
-      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.6",
+        "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
         "minimatch": "^3.1.2"
       },
@@ -398,19 +398,22 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
-      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.1.tgz",
+      "integrity": "sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==",
       "dev": true,
       "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.16.0"
+      },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
-      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.16.0.tgz",
+      "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -445,9 +448,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.35.0.tgz",
-      "integrity": "sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.38.0.tgz",
+      "integrity": "sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -458,9 +461,9 @@
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -468,13 +471,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
-      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.0.tgz",
+      "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.16.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -581,10 +584,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",
-      "integrity": "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
       "cpu": [
         "arm64"
       ],
@@ -600,13 +613,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.0"
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.3.tgz",
-      "integrity": "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
       "cpu": [
         "x64"
       ],
@@ -622,13 +635,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.0"
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.0.tgz",
-      "integrity": "sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
       "cpu": [
         "arm64"
       ],
@@ -642,9 +655,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.0.tgz",
-      "integrity": "sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
       "cpu": [
         "x64"
       ],
@@ -658,9 +671,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.0.tgz",
-      "integrity": "sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
       "cpu": [
         "arm"
       ],
@@ -674,9 +687,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.0.tgz",
-      "integrity": "sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
       "cpu": [
         "arm64"
       ],
@@ -690,9 +703,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.0.tgz",
-      "integrity": "sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
       "cpu": [
         "ppc64"
       ],
@@ -706,9 +719,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.0.tgz",
-      "integrity": "sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
       "cpu": [
         "s390x"
       ],
@@ -722,9 +735,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.0.tgz",
-      "integrity": "sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
       "cpu": [
         "x64"
       ],
@@ -738,9 +751,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
-      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
       "cpu": [
         "arm64"
       ],
@@ -754,9 +767,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
-      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
       "cpu": [
         "x64"
       ],
@@ -770,9 +783,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz",
-      "integrity": "sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
       "cpu": [
         "arm"
       ],
@@ -788,13 +801,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.0"
+        "@img/sharp-libvips-linux-arm": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.3.tgz",
-      "integrity": "sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
       "cpu": [
         "arm64"
       ],
@@ -810,13 +823,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.0"
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.3.tgz",
-      "integrity": "sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
       "cpu": [
         "ppc64"
       ],
@@ -832,13 +845,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.0"
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.3.tgz",
-      "integrity": "sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
       "cpu": [
         "s390x"
       ],
@@ -854,13 +867,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.0"
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.3.tgz",
-      "integrity": "sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
       "cpu": [
         "x64"
       ],
@@ -876,13 +889,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.0"
+        "@img/sharp-libvips-linux-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
-      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
       "cpu": [
         "arm64"
       ],
@@ -898,13 +911,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
-      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
       "cpu": [
         "x64"
       ],
@@ -920,20 +933,20 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.3.tgz",
-      "integrity": "sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
       "cpu": [
         "wasm32"
       ],
       "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.4.4"
+        "@emnapi/runtime": "^1.5.0"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -943,9 +956,9 @@
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
-      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
       "cpu": [
         "arm64"
       ],
@@ -962,9 +975,9 @@
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.3.tgz",
-      "integrity": "sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
       "cpu": [
         "ia32"
       ],
@@ -981,9 +994,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz",
-      "integrity": "sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
       "cpu": [
         "x64"
       ],
@@ -999,19 +1012,6 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.4"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1271,9 +1271,9 @@
       "license": "MIT"
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
-      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.14.1.tgz",
+      "integrity": "sha512-jGTk8UD/RdjsNZW8qq10r0RBvxL8OWtoT+kImlzPDFilmozzM+9QmIJsmze9UiSBrFU45ZxhTYBypn9q9z/VfQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -1287,54 +1287,49 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
-      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.5.1",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.18",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.19",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
-      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
       "dev": true,
-      "hasInstallScript": true,
       "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
-      },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
-        "@tailwindcss/oxide-darwin-x64": "4.1.13",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
-      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
       "cpu": [
         "arm64"
       ],
@@ -1349,9 +1344,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
-      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
       "cpu": [
         "arm64"
       ],
@@ -1366,9 +1361,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
-      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
       "cpu": [
         "x64"
       ],
@@ -1383,9 +1378,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
-      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
       "cpu": [
         "x64"
       ],
@@ -1400,9 +1395,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
-      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
       "cpu": [
         "arm"
       ],
@@ -1417,9 +1412,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
-      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
       "cpu": [
         "arm64"
       ],
@@ -1434,9 +1429,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
-      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
       "cpu": [
         "arm64"
       ],
@@ -1451,9 +1446,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
-      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
       "cpu": [
         "x64"
       ],
@@ -1468,9 +1463,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
-      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
       "cpu": [
         "x64"
       ],
@@ -1485,9 +1480,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
-      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -1503,21 +1498,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.5",
-        "@emnapi/runtime": "^1.4.5",
-        "@emnapi/wasi-threads": "^1.0.4",
-        "@napi-rs/wasm-runtime": "^0.2.12",
-        "@tybys/wasm-util": "^0.10.0",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
-      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
       "cpu": [
         "arm64"
       ],
@@ -1532,9 +1527,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
-      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
       "cpu": [
         "x64"
       ],
@@ -1549,17 +1544,17 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
-      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.16.tgz",
+      "integrity": "sha512-Qn3SFGPXYQMKR/UtqS+dqvPrzEeBZHrFA92maT4zijCVggdsXnDBMsPFJo1eArX3J+O+Gi+8pV4PkqjLCNBk3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.13",
-        "@tailwindcss/oxide": "4.1.13",
+        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/oxide": "4.1.16",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.13"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tanstack/match-sorter-utils": {
@@ -1656,9 +1651,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.14.tgz",
-      "integrity": "sha512-gqiKWld3YIkmtrrg9zDvg9jfksZCcPywXVN7IauUGhilwGV/yOyeUsvpR796m/Jye0zUzMXPKe8Ct1B79A7N5Q==",
+      "version": "20.19.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.23.tgz",
+      "integrity": "sha512-yIdlVVVHXpmqRhtyovZAcSy0MiPcYWGkoO4CGe/+jpP0hmNuihm4XhHbADpK++MsiLHP5MVlv+bcgdF99kSiFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1672,22 +1667,22 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.1.13",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
-      "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
-      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^19.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/react-transition-group": {
@@ -1700,17 +1695,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.43.0.tgz",
-      "integrity": "sha512-8tg+gt7ENL7KewsKMKDHXR1vm8tt9eMxjJBYINf6swonlWgkYn5NwyIgXpbbDxTNU5DgpDFfj95prcTq2clIQQ==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
+      "integrity": "sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/type-utils": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/type-utils": "8.46.2",
+        "@typescript-eslint/utils": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -1724,7 +1719,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.43.0",
+        "@typescript-eslint/parser": "^8.46.2",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -1740,16 +1735,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.43.0.tgz",
-      "integrity": "sha512-B7RIQiTsCBBmY+yW4+ILd6mF5h1FUwJsVvpqkrgpszYifetQ2Ke+Z4u6aZh0CblkUGIdR59iYVyXqqZGkZ3aBw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.2.tgz",
+      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1765,14 +1760,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.43.0.tgz",
-      "integrity": "sha512-htB/+D/BIGoNTQYffZw4uM4NzzuolCoaA/BusuSIcC8YjmBYQioew5VUZAYdAETPjeed0hqCaW7EHg+Robq8uw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.2.tgz",
+      "integrity": "sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.43.0",
-        "@typescript-eslint/types": "^8.43.0",
+        "@typescript-eslint/tsconfig-utils": "^8.46.2",
+        "@typescript-eslint/types": "^8.46.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1787,14 +1782,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.43.0.tgz",
-      "integrity": "sha512-daSWlQ87ZhsjrbMLvpuuMAt3y4ba57AuvadcR7f3nl8eS3BjRc8L9VLxFLk92RL5xdXOg6IQ+qKjjqNEimGuAg==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.2.tgz",
+      "integrity": "sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0"
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1805,9 +1800,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.43.0.tgz",
-      "integrity": "sha512-ALC2prjZcj2YqqL5X/bwWQmHA2em6/94GcbB/KKu5SX3EBDOsqztmmX1kMkvAJHzxk7TazKzJfFiEIagNV3qEA==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.2.tgz",
+      "integrity": "sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1822,15 +1817,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.43.0.tgz",
-      "integrity": "sha512-qaH1uLBpBuBBuRf8c1mLJ6swOfzCXryhKND04Igr4pckzSEW9JX5Aw9AgW00kwfjWJF0kk0ps9ExKTfvXfw4Qg==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.2.tgz",
+      "integrity": "sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2",
+        "@typescript-eslint/utils": "8.46.2",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -1847,9 +1842,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.43.0.tgz",
-      "integrity": "sha512-vQ2FZaxJpydjSZJKiSW/LJsabFFvV7KgLC5DiLhkBcykhQj8iK9BOaDmQt74nnKdLvceM5xmhaTF+pLekrxEkw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
+      "integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1861,16 +1856,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.43.0.tgz",
-      "integrity": "sha512-7Vv6zlAhPb+cvEpP06WXXy/ZByph9iL6BQRBDj4kmBsW98AqEeQHlj/13X+sZOrKSo9/rNKH4Ul4f6EICREFdw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.2.tgz",
+      "integrity": "sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.43.0",
-        "@typescript-eslint/tsconfig-utils": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/project-service": "8.46.2",
+        "@typescript-eslint/tsconfig-utils": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -1946,16 +1941,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.43.0.tgz",
-      "integrity": "sha512-S1/tEmkUeeswxd0GGcnwuVQPFWo8NzZTOMxCvw8BX7OMxnNae+i8Tm7REQen/SwUIPoPqfKn7EaZ+YLpiB3k9g==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.2.tgz",
+      "integrity": "sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0"
+        "@typescript-eslint/scope-manager": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/typescript-estree": "8.46.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1970,13 +1965,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.43.0.tgz",
-      "integrity": "sha512-T+S1KqRD4sg/bHfLwrpF/K3gQLBM1n7Rp7OjjikjTEssI2YJzQpi5WXoynOaQ93ERIuq3O8RBTOUYDKszUCEHw==",
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.2.tgz",
+      "integrity": "sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
+        "@typescript-eslint/types": "8.46.2",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -2529,9 +2524,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.10.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
-      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
+      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
@@ -2664,9 +2659,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001741",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
-      "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==",
+      "version": "1.0.30001751",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz",
+      "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2700,16 +2695,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2725,25 +2710,11 @@
         "node": ">=6"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2756,20 +2727,9 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2833,9 +2793,9 @@
       "license": "MIT"
     },
     "node_modules/daisyui": {
-      "version": "5.1.12",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.12.tgz",
-      "integrity": "sha512-wPk6TfH6cPjYFcJIj1Zn2IYjrXLHtKbHD7GesfTDpH86d6Mgy1GTgl8mhKUqpbnVnTUNgkV7L2diPsvOGSpBIw==",
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.3.9.tgz",
+      "integrity": "sha512-741x1pGGSGHcrBYtdE7iKbqW1OoiijYdAZ8oJPZR9MhSKLcMBlHjKfN3YlM2/K7t5jd7O0sg4SqkVNPylalRFw==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2991,9 +2951,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
-      "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -3067,12 +3027,6 @@
         "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/error-ex/node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "license": "MIT"
-    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -3259,25 +3213,24 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.35.0.tgz",
-      "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.38.0.tgz",
+      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.21.0",
-        "@eslint/config-helpers": "^0.3.1",
-        "@eslint/core": "^0.15.2",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.1",
+        "@eslint/core": "^0.16.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.35.0",
-        "@eslint/plugin-kit": "^0.3.5",
+        "@eslint/js": "9.38.0",
+        "@eslint/plugin-kit": "^0.4.0",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
@@ -3932,6 +3885,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -3988,9 +3951,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
-      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4264,11 +4227,10 @@
       }
     },
     "node_modules/is-arrayish": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
-      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
-      "license": "MIT",
-      "optional": true
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
     },
     "node_modules/is-async-function": {
       "version": "2.1.1",
@@ -4423,14 +4385,15 @@
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
         "has-tostringtag": "^1.0.2",
         "safe-regex-test": "^1.1.0"
       },
@@ -4685,9 +4648,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -4826,9 +4789,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
       "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
@@ -4842,22 +4805,44 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
       "cpu": [
         "arm64"
       ],
@@ -4876,9 +4861,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
       "cpu": [
         "x64"
       ],
@@ -4897,9 +4882,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
       "cpu": [
         "x64"
       ],
@@ -4918,9 +4903,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
       "cpu": [
         "arm"
       ],
@@ -4939,9 +4924,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
       "cpu": [
         "arm64"
       ],
@@ -4960,9 +4945,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
       "cpu": [
         "arm64"
       ],
@@ -4981,9 +4966,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
       "cpu": [
         "x64"
       ],
@@ -5002,9 +4987,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
       "cpu": [
         "x64"
       ],
@@ -5023,9 +5008,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
       "cpu": [
         "arm64"
       ],
@@ -5044,9 +5029,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
       "cpu": [
         "x64"
       ],
@@ -5118,9 +5103,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5210,45 +5195,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -5283,9 +5229,9 @@
       }
     },
     "node_modules/napi-postinstall": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
-      "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -5910,12 +5856,12 @@
       "license": "MIT"
     },
     "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.16.0",
+        "is-core-module": "^2.16.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -6045,9 +5991,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -6107,15 +6053,15 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.34.3",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
-      "integrity": "sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.4",
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
         "semver": "^7.7.2"
       },
       "engines": {
@@ -6125,28 +6071,28 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.3",
-        "@img/sharp-darwin-x64": "0.34.3",
-        "@img/sharp-libvips-darwin-arm64": "1.2.0",
-        "@img/sharp-libvips-darwin-x64": "1.2.0",
-        "@img/sharp-libvips-linux-arm": "1.2.0",
-        "@img/sharp-libvips-linux-arm64": "1.2.0",
-        "@img/sharp-libvips-linux-ppc64": "1.2.0",
-        "@img/sharp-libvips-linux-s390x": "1.2.0",
-        "@img/sharp-libvips-linux-x64": "1.2.0",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.0",
-        "@img/sharp-linux-arm": "0.34.3",
-        "@img/sharp-linux-arm64": "0.34.3",
-        "@img/sharp-linux-ppc64": "0.34.3",
-        "@img/sharp-linux-s390x": "0.34.3",
-        "@img/sharp-linux-x64": "0.34.3",
-        "@img/sharp-linuxmusl-arm64": "0.34.3",
-        "@img/sharp-linuxmusl-x64": "0.34.3",
-        "@img/sharp-wasm32": "0.34.3",
-        "@img/sharp-win32-arm64": "0.34.3",
-        "@img/sharp-win32-ia32": "0.34.3",
-        "@img/sharp-win32-x64": "0.34.3"
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
       }
     },
     "node_modules/shebang-command": {
@@ -6248,16 +6194,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
-      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6511,16 +6447,16 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
-      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
-      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6531,24 +6467,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -6764,9 +6682,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -6875,9 +6793,9 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -6998,16 +6916,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -7031,9 +6939,9 @@
       }
     },
     "node_modules/yup": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.0.tgz",
-      "integrity": "sha512-VJce62dBd+JQvoc+fCVq+KZfPHr+hXaxCcVgotfwWvlR0Ja3ffYKaJBT8rptPOSKOGJDCUnW2C2JWpud7aRP6Q==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
       "license": "MIT",
       "dependencies": {
         "property-expr": "^2.0.5",

From cbb4f7421ec9ffcc904778c4eeaf2f37ffe6412a Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 27 Oct 2025 10:58:49 +0700
Subject: [PATCH 176/212] fix(FE-86): fixing error null value

---
 src/app/production/chickin/add/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index af834b37..3ef73396 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -141,8 +141,8 @@ const AddChickin = () => {
                     options={options}
                     isLoading={isLoadingListProjectFlock}
                     value={{
-                      label: `${projectFlock.data.flock.name} - ${projectFlock.data.category} - Periode ${projectFlock.data.period}`,
-                      value: projectFlock.data.id,
+                      label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
+                      value: projectFlock.data?.id,
                     }}
                     onChange={(val) =>
                       router.push(
@@ -159,7 +159,7 @@ const AddChickin = () => {
               </div>
             </header>
             <Table<Kandang>
-              data={projectFlock.data.kandangs}
+              data={projectFlock.data?.kandangs}
               columns={[
                 {
                   header: '#',
@@ -202,7 +202,7 @@ const AddChickin = () => {
                 containerClassName: cn({
                   'mb-20':
                     isResponseSuccess(projectFlock) &&
-                    projectFlock.data.kandangs?.length === 0,
+                    projectFlock.data?.kandangs?.length === 0,
                 }),
                 tableWrapperClassName: 'overflow-x-auto min-h-full!',
                 tableClassName: 'font-inter w-full table-auto min-h-full!',
@@ -239,10 +239,10 @@ const AddChickin = () => {
                 <ChickinForm
                   initialValues={{
                     project_flock_kandang: projectFlockKandang.data,
-                    created_user: projectFlock.data.created_user,
-                    created_at: projectFlock.data.created_at,
-                    updated_at: projectFlock.data.updated_at,
-                    approval: projectFlock.data.approval,
+                    created_user: projectFlock.data?.created_user,
+                    created_at: projectFlock.data?.created_at,
+                    updated_at: projectFlock.data?.updated_at,
+                    approval: projectFlock.data?.approval,
                   }}
                   afterSubmit={handleAfterSubmit}
                 />

From 6706f361d84b03bfda01473c172f49d97d657585 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 27 Oct 2025 13:03:38 +0700
Subject: [PATCH 177/212] refactor(FE): change number input to
 reuseablecomponent from ui-component

---
 src/components/input/NumberInput.tsx          | 439 ++----------------
 .../inventory/movement/form/MovementForm.tsx  |   6 -
 .../recording/form/RecordingForm.tsx          |  20 -
 3 files changed, 42 insertions(+), 423 deletions(-)

diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 132688d7..89b02845 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -1,413 +1,58 @@
-'use client';
+"use client";
 
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { ChangeEvent, ReactNode } from "react";
+import { NumericFormat, OnValueChange } from "react-number-format";
+import TextInput, { TextInputProps } from "@/components/input/TextInput";
 
-import { cn } from '@/lib/helper';
-import Inputmask from 'inputmask';
-
-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
-  };
-
-  return new Inputmask(options);
-};
-
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number' | 'text';
-
-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;
-  errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  maskType?: MaskType;
-  decimals?: number;
+interface NumberInputProps extends Omit<TextInputProps, "type"> {
   thousandSeparator?: string;
   decimalSeparator?: string;
-  currencyPrefix?: string;
-  weightUnit?: string;
-
-  min?: number;
-  max?: number;
+  decimalScale?: number;
   allowNegative?: boolean;
-
-  oncomplete?: () => void;
-  onincomplete?: () => void;
-  oncleared?: () => void;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
 }
 
 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',
-                       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);
+  thousandSeparator = ",",
+  decimalSeparator = ".",
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  inputPrefix,
+  inputSuffix,
+  ...restProps
+}: NumberInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo,
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
 
-  const getInputPrefix = (): string => {
-    switch (maskType) {
-      case 'currency':
-        return currencyPrefix;
-      default:
-        return '';
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
     }
   };
 
-  const getInputSuffix = (): string => {
-    switch (maskType) {
-      case 'weight':
-        return weightUnit;
-      default:
-        return '';
-    }
-  };
-
-  useEffect(() => {
-    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,
-        ',',
-        '.',
-        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 handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const currentValue = (e.currentTarget as HTMLInputElement).value;
-    console.log('✅ After format:', currentValue);
-
-    if (onChange) {
-      const syntheticEvent = {
-        target: {
-          name,
-          value: currentValue,
-        },
-      } as ChangeEvent<HTMLInputElement>;
-      onChange(syntheticEvent);
-    }
-  };
-
-  const inputPrefix = getInputPrefix();
-  const inputSuffix = getInputSuffix();
-
   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='relative flex'>
-        {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',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputPrefix}
-            </span>
-          </div>
-        )}
-
-        <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(
-              'grow bg-transparent outline-none',
-              {
-                '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,
-              }
-            )}
-          >
-            <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>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
-    </div>
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      startAdornment={inputPrefix}
+      endAdornment={inputSuffix}
+      {...restProps}
+    />
   );
 };
 
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d2c91168..d8239d14 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1377,9 +1377,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               handleDeliveryCostChange(idx, e.target.value)
                             }
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1404,9 +1401,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               )
                             }
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 4d8ef9ca..6018ae84 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -942,9 +942,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={feed.feed_stock}
                         onChange={handleFeedStockChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator=''
                         isError={
@@ -1120,10 +1117,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={weight.chicken_weight}
                         onChange={handleChickenWeightChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='weight'
-                        weightUnit='gram'
-                        decimals={2}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator='.'
                         isError={
@@ -1153,9 +1146,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={weight.chicken_count}
                         onChange={handleChickenCountChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         isError={
                           isRepeaterInputError(
                             'body_weight',
@@ -1184,10 +1174,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           value={weight.average_chicken_weight || ''}
                           onChange={handleAverageWeightChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
-                          maskType='weight'
-                          weightUnit='gram'
-                          decimals={2}
-                          min={0}
                           thousandSeparator=','
                           decimalSeparator='.'
                           isError={
@@ -1450,9 +1436,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={vaccine.used_stock}
                         onChange={handleVaccinationStockChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator=''
                         isError={
@@ -1660,9 +1643,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         value={mortality.count}
                         onChange={handleMortalityCountChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
-                        maskType='number'
-                        decimals={0}
-                        min={0}
                         thousandSeparator=','
                         decimalSeparator=''
                         isError={

From 82c1645d923c15e45272912ff45c96e99ea8668a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 10:45:41 +0700
Subject: [PATCH 178/212] chore(FE-91): rework ApprovalSteps and create helper
 function for formatting approval workflow

---
 src/components/pages/ApprovalSteps.tsx | 169 +++++++++++++++++++++----
 1 file changed, 143 insertions(+), 26 deletions(-)

diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index 4022e254..184b3f20 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -3,11 +3,24 @@ import Steps from '@/components/steps/Steps';
 import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 
-import { formatDate } from '@/lib/helper';
-import { ApprovalsLine } from '@/types/api/api-general';
+import { cn, formatDate } from '@/lib/helper';
+import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
+import { ApprovalLine } from '@/types/config/constant';
+
+export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
+
+export type ApprovalStepLog = {
+  action_by?: string;
+  date?: string;
+  notes?: string | null;
+};
 
 interface ApprovalStepsProps {
-  approvals: ApprovalsLine;
+  approvals: {
+    name?: string;
+    status: ApprovalStepStatus;
+    logs?: ApprovalStepLog[];
+  }[];
 }
 
 const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
@@ -15,17 +28,23 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
     <Steps direction='vertical' className='w-full md:steps-horizontal'>
       {approvals.map((approval, idx) => {
         const stepItemColor =
-          approval.status === 'approved'
+          approval.status === 'APPROVED'
             ? 'success'
-            : approval.status === 'rejected'
+            : approval.status === 'REJECTED'
             ? 'error'
+            : approval.status === 'WAITING'
+            ? 'warning'
             : undefined;
 
         const stepItemIcon =
-          approval.status === 'approved'
+          approval.status === 'APPROVED'
             ? 'material-symbols:check-rounded'
-            : approval.status === 'rejected'
+            : approval.status === 'REJECTED'
             ? 'material-symbols:close-rounded'
+            : approval.status === 'WAITING'
+            ? 'pajamas:dash-circle'
+            : approval.logs && approval.logs.length > 0
+            ? 'material-symbols:info-outline-rounded'
             : 'bxs:hourglass';
 
         return (
@@ -33,27 +52,53 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
             key={idx}
             color={stepItemColor}
             icon={
-              approval.status !== 'waiting' && (
-                <Tooltip
-                  color={stepItemColor}
-                  position='right'
-                  className={{
-                    wrapper: 'md:tooltip-bottom',
-                  }}
-                  content={
-                    <div className='flex flex-col text-base'>
-                      <span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
-                      <span>Oleh: {approval.action_by}</span>
-                      <span>Catatan: {approval.notes}</span>
-                    </div>
-                  }
-                >
-                  <Icon icon={stepItemIcon} width={24} height={24} />
-                </Tooltip>
-              )
+              <Tooltip
+                color={stepItemColor}
+                position='right'
+                className={{
+                  wrapper: 'md:tooltip-bottom',
+                }}
+                content={
+                  <>
+                    {approval.logs && approval.logs.length > 0 && (
+                      <div className='flex flex-col gap-2'>
+                        {approval.logs?.map((approvalLog, logIdx) => (
+                          <div
+                            key={logIdx}
+                            className='flex flex-col text-base text-start'
+                          >
+                            {approvalLog.date && (
+                              <span>
+                                {formatDate(
+                                  approvalLog.date,
+                                  'YYYY-MM-DD, HH:mm:ss'
+                                )}
+                              </span>
+                            )}
+                            <span>Oleh: {approvalLog.action_by ?? '-'}</span>
+                            <span>Catatan: {approvalLog.notes ?? '-'}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                }
+              >
+                <Icon
+                  icon={stepItemIcon}
+                  width={24}
+                  height={24}
+                  className={cn({
+                    invisible:
+                      approval.status === 'IDLE' &&
+                      (!approval.logs ||
+                        (approval.logs && approval.logs.length === 0)),
+                  })}
+                />
+              </Tooltip>
             }
           >
-            {approval.role}
+            {approval.name}
           </StepItem>
         );
       })}
@@ -61,4 +106,76 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
   );
 };
 
+export const formatGroupedApprovalsToApprovalSteps = (
+  approvalLine: ApprovalLine,
+  groupedApprovals: BaseGroupedApproval[],
+  latestApproval: BaseApproval
+): ApprovalStepsProps['approvals'] => {
+  const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
+    approvalLine.map((approvalLineItem) => {
+      const approvalGroup = groupedApprovals.find(
+        (approvalGroupItem) =>
+          approvalGroupItem.step_number === approvalLineItem.step_number
+      );
+
+      const currentStepNumber = approvalLineItem.step_number;
+      const lastStepNumber =
+        groupedApprovals[groupedApprovals.length - 1].step_number;
+
+      if (!approvalGroup && currentStepNumber <= lastStepNumber) {
+        throw new Error(
+          `Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
+        );
+      }
+
+      if (!approvalGroup) {
+        const isWaiting = currentStepNumber === latestApproval.step_number + 1;
+
+        return {
+          name: approvalLineItem.step_name,
+          status: isWaiting ? 'WAITING' : 'IDLE',
+        };
+      }
+
+      let approvalStatus: ApprovalStepStatus;
+
+      if (approvalGroup.step_number <= latestApproval.step_number) {
+        switch (approvalGroup.approvals[0].action) {
+          case 'CREATED':
+          case 'APPROVED':
+            approvalStatus = 'APPROVED';
+            break;
+
+          case 'REJECTED':
+            approvalStatus = 'REJECTED';
+            break;
+
+          default:
+            approvalStatus = 'IDLE';
+            break;
+        }
+      } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
+        approvalStatus = 'WAITING';
+      } else {
+        approvalStatus = 'IDLE';
+      }
+
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals.map(
+        (approval) => ({
+          action_by: approval.action_by.name,
+          date: approval.action_at,
+          notes: approval.notes,
+        })
+      );
+
+      return {
+        name: approvalGroup.step_name,
+        status: approvalStatus,
+        logs: approvalLogs,
+      };
+    });
+
+  return formattedApprovalSteps;
+};
+
 export default ApprovalSteps;

From b720c1411b15d9ca4ff7e5b0ce7615f2d8a9c0d3 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 10:47:29 +0700
Subject: [PATCH 179/212] chore(FE-91): make warning step icon glow

---
 src/components/steps/StepItem.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/steps/StepItem.tsx b/src/components/steps/StepItem.tsx
index 85ec4f3e..26ce1ce8 100644
--- a/src/components/steps/StepItem.tsx
+++ b/src/components/steps/StepItem.tsx
@@ -24,7 +24,14 @@ const StepItem = ({ children, icon, className, color }: StepItemProps) => {
 
   return (
     <li className={cn(stepItemBaseClassName, className)}>
-      <span className='step-icon'>{icon}</span>
+      <span
+        className={cn('step-icon', {
+          'transition-shadow shadow-[0_0_10px_2px_var(--color-warning)] hover:shadow-[0_0_15px_5px_var(--color-warning)]':
+            color === 'warning',
+        })}
+      >
+        {icon}
+      </span>
 
       <div>{children}</div>
     </li>

From bce58c585d89ee15a2ba338a8294e6a594c8c43c Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 10:47:51 +0700
Subject: [PATCH 180/212] feat(FE-91): create approval-line config file

---
 src/config/approval-line.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/config/approval-line.ts

diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts
new file mode 100644
index 00000000..0a02d1f1
--- /dev/null
+++ b/src/config/approval-line.ts
@@ -0,0 +1,12 @@
+import { ApprovalLine } from '@/types/config/constant';
+
+export const PROJECT_FLOCK_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Aktif',
+  },
+] as const;

From dd3a0079db959d099951939ba5ac00bb2f27453e Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 10:48:18 +0700
Subject: [PATCH 181/212] chore(FE-91): set formatNumber locale to id-ID as
 default

---
 src/lib/helper.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index e3bfda65..002be5a3 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -19,7 +19,7 @@ export const cn = (...inputs: ClassValue[]) => {
 
 export const formatNumber = (
   value: number | bigint | Intl.StringNumericLiteral,
-  locale = 'en-US',
+  locale = 'id-ID',
   minimumFractionDigits = 0,
   maximumFractionDigits = 2
 ) => {
@@ -29,7 +29,6 @@ export const formatNumber = (
   }).format(value);
 };
 
-
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
   currency = 'USD',

From 5c3b1c489f9163fe38276f30621786b72711e256 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 10:48:37 +0700
Subject: [PATCH 182/212] chore(FE-91): set color for step-warning

---
 src/styles/daisyui.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css
index dadaa2fa..fc87399f 100644
--- a/src/styles/daisyui.css
+++ b/src/styles/daisyui.css
@@ -9,6 +9,11 @@
     --step-fg: var(--color-error-content);
   }
 
+  .step.step-warning::before {
+    --step-bg: var(--color-warning);
+    --step-fg: var(--color-warning-content);
+  }
+
   .table :where(th, td) {
     vertical-align: top;
   }

From c9c343b840093df80e96d9f2f63ced4231956c97 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 10:49:36 +0700
Subject: [PATCH 183/212] chore(FE-91): create BaseGroupedApproval, Approvals,
 and GroupedApprovals api types

---
 src/types/api/api-general.d.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index a42eaa3f..af9144e2 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -97,21 +97,21 @@ export type flags =
   | 'FINISHER'
   | 'OVK';
 
-export type ApprovalsLine = {
-  action_by?: string;
-  date?: string;
-  notes?: string;
-  role?: string;
-  status: 'approved' | 'rejected' | 'waiting';
-}[];
-
 export type BaseApproval = {
   step_number: number;
   step_name: string;
   action: string;
-  notes: string | null;
+  notes?: string | null;
   action_by: CreatedUser;
   action_at: string;
 };
 
-export type ApproveAction = 'APPROVED' | 'REJECTED';
+export type BaseGroupedApproval = {
+  step_number: number;
+  step_name: string;
+  approvals: BaseApproval[];
+};
+
+export type Approvals = BaseApiResponse<BaseApproval>;
+
+export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;

From f7eb89c11337eca261eded16e40d83d642dd887a Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 10:49:50 +0700
Subject: [PATCH 184/212] feat(FE-91): create constant type file

---
 src/types/config/constant.d.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 src/types/config/constant.d.ts

diff --git a/src/types/config/constant.d.ts b/src/types/config/constant.d.ts
new file mode 100644
index 00000000..3e4371be
--- /dev/null
+++ b/src/types/config/constant.d.ts
@@ -0,0 +1,4 @@
+export type ApprovalLine = {
+  step_number: number;
+  step_name: string;
+}[];

From 79cfcad026f1c0fa5540c95340244b51f7d678d7 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 30 Oct 2025 11:03:22 +0700
Subject: [PATCH 185/212] chore(FE-91): set formatCurrency default currency to
 indonesian currency

---
 src/lib/helper.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index 002be5a3..aeda46f6 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -31,8 +31,8 @@ export const formatNumber = (
 
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
-  currency = 'USD',
-  locale = 'en-US',
+  currency = 'IDR',
+  locale = 'id-ID',
   minimumFractionDigits = 0,
   maximumFractionDigits = 2
 ) => {

From 99194eaf8024ca7a08fb9f586922d515cee2f585 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 30 Oct 2025 21:23:37 +0700
Subject: [PATCH 186/212] refactor(FE-92-87): mengganti select input dengan
 reuseable component

---
 src/app/production/chickin/add/page.tsx       | 339 ++++++++++--------
 src/components/input/DateInput.tsx            |  83 +++--
 src/components/input/SelectInput.tsx          |  83 ++++-
 .../project-flock/ProjectFlockTable.tsx       |  14 +-
 src/config/constant.ts                        |   6 +
 5 files changed, 320 insertions(+), 205 deletions(-)

diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index 3ef73396..a52dbe10 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
@@ -39,10 +40,12 @@ const AddChickin = () => {
   const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
     useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<OptionType | null>(null);
 
   // Fetch Data
   const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId,
+    projectFlockId ?? selectedProjectFlock?.value.toString(),
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
@@ -59,7 +62,7 @@ const AddChickin = () => {
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
+          label: `${projectFlock?.flock?.name} - Periode ${projectFlock?.period}`,
         };
       })
     : [];
@@ -67,24 +70,6 @@ const AddChickin = () => {
   const chickinModal = useModal();
   const alertModal = useModal();
 
-  if (!projectFlockId) {
-    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 (
-    !isLoadingProjectFlock &&
-    (!projectFlock || isResponseError(projectFlock))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
   // Handle Function
   const handleChickinClick = async (kandang: Kandang) => {
     setIsLoadingProjectFlockKandang(true);
@@ -95,7 +80,7 @@ const AddChickin = () => {
     >(getProjectFlockKandangUrl, {
       method: 'GET',
       params: {
-        project_flock_id: projectFlockId ?? 0,
+        project_flock_id: projectFlockId ?? selectedProjectFlock?.value ?? 0,
         kandang_id: kandang.id,
       },
     });
@@ -116,153 +101,189 @@ const AddChickin = () => {
     chickinModal.closeModal();
     router.push('/production/chickin');
   };
+  const handleChangeProjectFlock = (val: OptionType | null) => {
+    setSelectedProjectFlock(val);
+    if (projectFlockId) {
+      router.push('/production/chickin/add');
+    }
+  };
 
   return (
     <>
-      {isResponseSuccess(projectFlock) && (
-        <>
-          <section className='w-full p-4'>
-            <header className='flex flex-col gap-4'>
-              <Button
-                href='/production/project-flock'
-                variant='link'
-                className='w-fit p-0 text-primary'
-              >
-                <Icon icon='uil:arrow-left' width={24} height={24} />
-                Kembali
-              </Button>
+      <>
+        <section className='w-full p-4'>
+          <header className='flex flex-col gap-4'>
+            <Button
+              href='/production/project-flock'
+              variant='link'
+              className='w-fit p-0 text-primary'
+            >
+              <Icon icon='uil:arrow-left' width={24} height={24} />
+              Kembali
+            </Button>
 
-              <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
-                  <SelectInput
-                    required
-                    isSearchable
-                    label='Project Flock'
-                    options={options}
-                    isLoading={isLoadingListProjectFlock}
-                    value={{
-                      label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
-                      value: projectFlock.data?.id,
-                    }}
-                    onChange={(val) =>
-                      router.push(
-                        `/production/chickin/add?projectFlockId=${
-                          (val as OptionType | null)?.value
-                        }`
-                      )
-                    }
-                    onInputChange={(val) => {
-                      setSearchProjectFlock(val);
-                    }}
-                  />
-                </div>
-              </div>
-            </header>
-            <Table<Kandang>
-              data={projectFlock.data?.kandangs}
-              columns={[
-                {
-                  header: '#',
-                  cell: (props) =>
-                    tableFilterState.pageSize * (tableFilterState.page - 1) +
-                    props.row.index +
-                    1,
-                },
-                {
-                  accessorKey: 'name',
-                  header: 'Nama Kandang',
-                },
-                {
-                  header: 'Aksi',
-                  cell: (props) => {
-                    return (
-                      <>
-                        <Button
-                          color='success'
-                          variant='outline'
-                          onClick={() => {
-                            handleChickinClick(props.row.original);
-                          }}
-                          disabled={isLoadingProjectFlockKandang}
-                        >
-                          <Icon
-                            icon='mdi:home-import-outline'
-                            width={24}
-                            height={24}
-                          />
-                          Chickin
-                        </Button>
-                      </>
-                    );
-                  },
-                },
-              ]}
-              page={undefined}
-              className={{
-                containerClassName: cn({
-                  'mb-20':
-                    isResponseSuccess(projectFlock) &&
-                    projectFlock.data?.kandangs?.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',
-                paginationClassName: 'hidden',
-              }}
-            />
-          </section>
-          <Modal ref={chickinModal.ref}>
-            <div className='flex flex-row justify-between items-center'>
-              <h1 className='text-xl font-semibold text-center mb-6'>
-                Chickin Kandang - {selectedKandang?.name}
-              </h1>
-              <Button
-                color='error'
-                variant='link'
-                onClick={chickinModal.closeModal}
-              >
-                <Icon
-                  className='text-black'
-                  icon='uil:times'
-                  width={24}
-                  height={24}
-                />
-              </Button>
-            </div>
-            {isResponseSuccess(projectFlockKandang) &&
-              !isLoadingProjectFlockKandang && (
-                <ChickinForm
-                  initialValues={{
-                    project_flock_kandang: projectFlockKandang.data,
-                    created_user: projectFlock.data?.created_user,
-                    created_at: projectFlock.data?.created_at,
-                    updated_at: projectFlock.data?.updated_at,
-                    approval: projectFlock.data?.approval,
+            <div className='flex flex-col gap-4 w-full my-4'>
+              <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
+                <SelectInput
+                  required
+                  label='Project Flock'
+                  placeholder='Pilih project flock'
+                  options={options}
+                  onInputChange={(val) => {
+                    setSearchProjectFlock(val);
                   }}
-                  afterSubmit={handleAfterSubmit}
+                  isLoading={isLoadingListProjectFlock}
+                  value={
+                    isResponseSuccess(projectFlock)
+                      ? {
+                          label: `${projectFlock.data?.flock?.name}`,
+                          value: projectFlock.data?.id,
+                        }
+                      : undefined
+                  }
+                  onChange={(val) => {
+                    handleChangeProjectFlock(val as OptionType);
+                  }}
+                  isSearchable
+                  isClearable
+                  startAdornment={
+                    isResponseSuccess(projectFlock) && (
+                      <Badge
+                        variant='soft'
+                        color='success'
+                        size='sm'
+                        className={{
+                          badge: 'whitespace-nowrap font-semibold',
+                        }}
+                      >
+                        Periode {projectFlock.data?.period}
+                      </Badge>
+                    )
+                  }
                 />
-              )}
-          </Modal>
-          <ConfirmationModal
-            ref={alertModal.ref}
-            type='info'
-            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
-            secondaryButton={undefined}
-            primaryButton={{
-              text: 'Ya',
-              color: 'info',
-              onClick: () => {
-                alertModal.closeModal();
+              </div>
+            </div>
+          </header>
+          <Table<Kandang>
+            emptyContent={
+              <div className='w-full p-5 text-center'>
+                {projectFlockId && isResponseError(projectFlock) ? (
+                  <span className='text-lg opacity-50'>
+                    {projectFlock.message}
+                  </span>
+                ) : (
+                  <span className='text-lg opacity-50'>
+                    Pilih project flock terlebih dahulu...
+                  </span>
+                )}
+              </div>
+            }
+            data={
+              isResponseSuccess(projectFlock) ? projectFlock.data?.kandangs : []
+            }
+            columns={[
+              {
+                header: '#',
+                cell: (props) =>
+                  tableFilterState.pageSize * (tableFilterState.page - 1) +
+                  props.row.index +
+                  1,
               },
+              {
+                accessorKey: 'name',
+                header: 'Nama Kandang',
+              },
+              {
+                header: 'Aksi',
+                cell: (props) => {
+                  return (
+                    <>
+                      <Button
+                        color='success'
+                        variant='outline'
+                        onClick={() => {
+                          handleChickinClick(props.row.original);
+                        }}
+                        disabled={isLoadingProjectFlockKandang}
+                      >
+                        <Icon
+                          icon='mdi:home-import-outline'
+                          width={24}
+                          height={24}
+                        />
+                        Chickin
+                      </Button>
+                    </>
+                  );
+                },
+              },
+            ]}
+            page={undefined}
+            className={{
+              containerClassName: cn({
+                'mb-20':
+                  isResponseSuccess(projectFlock) &&
+                  projectFlock.data?.kandangs?.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',
+              paginationClassName: 'hidden',
             }}
           />
-        </>
-      )}
+        </section>
+        <Modal ref={chickinModal.ref}>
+          <div className='flex flex-row justify-between items-center'>
+            <h1 className='text-xl font-semibold text-center mb-6'>
+              Chickin Kandang - {selectedKandang?.name}
+            </h1>
+            <Button
+              color='error'
+              variant='link'
+              onClick={chickinModal.closeModal}
+            >
+              <Icon
+                className='text-black'
+                icon='uil:times'
+                width={24}
+                height={24}
+              />
+            </Button>
+          </div>
+          {isResponseSuccess(projectFlockKandang) &&
+            isResponseSuccess(projectFlock) &&
+            !isLoadingProjectFlockKandang && (
+              <ChickinForm
+                initialValues={{
+                  project_flock_kandang: projectFlockKandang.data,
+                  created_user: projectFlock.data?.created_user,
+                  created_at: projectFlock.data?.created_at,
+                  updated_at: projectFlock.data?.updated_at,
+                  approval: projectFlock.data?.approval,
+                }}
+                afterSubmit={handleAfterSubmit}
+              />
+            )}
+        </Modal>
+        <ConfirmationModal
+          ref={alertModal.ref}
+          type='info'
+          text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+          secondaryButton={undefined}
+          primaryButton={{
+            text: 'Ya',
+            color: 'info',
+            onClick: () => {
+              alertModal.closeModal();
+            },
+          }}
+        />
+      </>
     </>
   );
 };
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index be485b75..2b91b7ae 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -4,10 +4,24 @@ import {
   ChangeEventHandler,
   FocusEventHandler,
   ReactNode,
+  useState,
 } from 'react';
-
 import { cn } from '@/lib/helper';
 
+const formatToISO = (dateStr: string): string | null => {
+  const parts = dateStr.split('/');
+  if (parts.length !== 3) return null;
+  const [day, month, year] = parts;
+  if (!day || !month || !year) return null;
+  return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+};
+
+const formatToLocal = (isoDate: string): string => {
+  if (!isoDate) return '';
+  const [year, month, day] = isoDate.split('-');
+  return `${day}/${month}/${year}`;
+};
+
 export interface DateInputProps {
   label?: string;
   bottomLabel?: string;
@@ -44,9 +58,9 @@ const DateInput = ({
   min,
   max,
   className,
-  isError,
-  isValid,
-  errorMessage,
+  isError: externalError,
+  isValid: externalValid,
+  errorMessage: externalErrorMessage,
   startAdornment,
   endAdornment,
   disabled = false,
@@ -56,6 +70,40 @@ const DateInput = ({
   readOnly = false,
   isLoading = false,
 }: DateInputProps) => {
+  const [internalError, setInternalError] = useState<string | null>(null);
+
+  const minISO = min ? formatToISO(min) ?? undefined : undefined;
+  const maxISO = max ? formatToISO(max) ?? undefined : undefined;
+
+  const valueISO =
+    value && value.includes('/') ? formatToISO(value) ?? '' : value ?? '';
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    const selectedDate = e.target.value;
+    const isoMin = minISO;
+    const isoMax = maxISO;
+
+    if (isoMin && selectedDate < isoMin) {
+      setInternalError(`Tanggal tidak boleh sebelum ${min}`);
+    } else if (isoMax && selectedDate > isoMax) {
+      setInternalError(`Tanggal tidak boleh setelah ${max}`);
+    } else {
+      setInternalError(null);
+    }
+
+    const event = {
+      ...e,
+      target: {
+        ...e.target,
+        value: formatToLocal(selectedDate),
+      },
+    };
+    onChange?.(event as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  const finalIsError = externalError || !!internalError;
+  const finalErrorMessage = internalError || externalErrorMessage;
+
   return (
     <div
       className={cn(
@@ -68,9 +116,7 @@ const DateInput = ({
           htmlFor={name}
           className={cn(
             'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
+            { 'text-error': finalIsError },
             className?.label
           )}
         >
@@ -90,8 +136,8 @@ const DateInput = ({
         className={cn(
           'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
           {
-            'border-error': isError,
-            'border-success!': isValid,
+            'border-error': finalIsError,
+            'border-success!': externalValid && !finalIsError,
           },
           className?.inputWrapper
         )}
@@ -103,16 +149,13 @@ const DateInput = ({
           id={name}
           name={name}
           placeholder={placeholder}
-          value={value}
-          onChange={onChange}
+          value={valueISO}
+          onChange={handleChange}
           onBlur={onBlur}
-          min={min}
-          max={max}
+          min={minISO}
+          max={maxISO}
           disabled={disabled}
-          className={cn(
-            'grow bg-transparent cursor-pointer',
-            className?.input
-          )}
+          className={cn('grow bg-transparent cursor-pointer', className?.input)}
           readOnly={readOnly}
         />
 
@@ -124,11 +167,11 @@ const DateInput = ({
         )}
       </div>
 
-      {!isError && bottomLabel && (
+      {!finalIsError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      {finalIsError && finalErrorMessage && (
+        <p className='w-full text-sm text-error'>{finalErrorMessage}</p>
       )}
     </div>
   );
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 6a8d0ac8..8db939bd 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -1,22 +1,23 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
-
 import Select, {
   OptionProps,
   GroupBase,
   InputActionMeta,
   MultiValue,
   SingleValue,
+  components as ReactSelectComponents,
+  ControlProps,
 } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn, getByPath } from '@/lib/helper';
+import useSWR from 'swr';
 import { httpClientFetcher } from '@/services/http/client';
-import { isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse } from '@/types/api/api-general';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 export interface OptionType {
   value: string | number;
@@ -53,6 +54,7 @@ interface SelectInputBaseProps<T = OptionType> {
   openMenu?: boolean;
   delay?: number;
   onInputChange?: (search: string) => void;
+  startAdornment?: ReactNode;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -63,6 +65,33 @@ interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
 
 const animatedComponents = makeAnimated();
 
+const CustomControl = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
+  props: ControlProps<Option, IsMulti, Group>
+) => {
+  const { children } = props;
+
+  const customProps = props.selectProps as unknown as {
+    shouldShowAdornment?: boolean;
+    startAdornment?: ReactNode;
+  };
+
+  const shouldShowAdornment = customProps.shouldShowAdornment ?? false;
+  const startAdornment = customProps.startAdornment;
+
+  return (
+    <ReactSelectComponents.Control {...props}>
+      <div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
+        {shouldShowAdornment && startAdornment}
+        {children}
+      </div>
+    </ReactSelectComponents.Control>
+  );
+};
+
 const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const {
     label,
@@ -87,15 +116,24 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     delay = 300,
     createables = false,
     onInputChange,
+    startAdornment,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
   const [debouncedInputValue] = useDebounce(internalInputValue, delay);
 
+  const shouldShowAdornment = startAdornment && !internalInputValue;
+
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-    return { ...base, IndicatorSeparator: () => null };
-  }, [isAnimated]);
+    const customComponents = { ...base, IndicatorSeparator: () => null };
+
+    if (startAdornment) {
+      customComponents.Control = CustomControl;
+    }
+
+    return customComponents;
+  }, [isAnimated, startAdornment]);
 
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
@@ -148,12 +186,13 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
-        value={value ?? (isMulti ? [] : null)}
-        onChange={handleChange}
+        value={value ?? (isMulti ? [] : undefined)}
+        onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}
         inputValue={internalInputValue}
         onInputChange={internalInputChangeHandler}
+        onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
         isDisabled={isDisabled}
         isLoading={isLoading}
@@ -163,17 +202,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         placeholder={placeholder}
         className={cn('w-full', className?.select)}
         classNames={{
-          control: ({ isFocused, isDisabled }) =>
-            cn(
-              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
-              {
-                'border-red-500! ring-2 ring-red-200': isError,
-                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                'border-gray-300': !isError && !isFocused,
-                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-              }
-            ),
-          valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          ...(!startAdornment && {
+            control: ({ isFocused, isDisabled }) =>
+              cn(
+                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+                {
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'border-gray-300': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                }
+              ),
+            valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          }),
           placeholder: () =>
             cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
           singleValue: () =>
@@ -190,7 +231,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
             cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -211,6 +252,10 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
         }}
+        {...(startAdornment && {
+          shouldShowAdornment,
+          startAdornment,
+        })}
         menuPortalTarget={
           typeof document !== 'undefined' ? document.body : undefined
         }
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 99f26721..2958a3f5 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -371,10 +371,10 @@ const ProjectFlockTable = () => {
                   const selectableRows = allRows.filter(
                     (row) => row.original?.approval?.step_number == 1
                   );
-                  
-                  const allSelected = selectableRows.every((row) =>
-                    row.getIsSelected()
-                  ) && selectableRows.length != 0;
+
+                  const allSelected =
+                    selectableRows.every((row) => row.getIsSelected()) &&
+                    selectableRows.length != 0;
 
                   const someSelected =
                     selectableRows.some((row) => row.getIsSelected()) &&
@@ -495,7 +495,7 @@ const ProjectFlockTable = () => {
 
                   return (
                     <>
-                      {currentPageSize > 2 && (
+                      {currentPageSize > 1 && (
                         <RowDropdownOptions isLast2Rows={isLast2Rows}>
                           <RowOptionsMenu
                             type='dropdown'
@@ -505,10 +505,10 @@ const ProjectFlockTable = () => {
                         </RowDropdownOptions>
                       )}
 
-                      {currentPageSize <= 2 && (
+                      {currentPageSize <= 1 && (
                         <RowCollapseOptions>
                           <RowOptionsMenu
-                            type='dropdown'
+                            type='collapse'
                             props={props}
                             deleteClickHandler={deleteClickHandler}
                           />
diff --git a/src/config/constant.ts b/src/config/constant.ts
index bf2bb0d9..2e9d3832 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -40,6 +40,12 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     ],
   },
 
+  {
+    title: 'Penjualan',
+    link: '/sale',
+    icon: 'mdi:attach-money',
+  },
+
   {
     title: 'Persediaan',
     link: '/inventory',

From b6991652acbdd26c5d19f024fb98c41b0b0b99d0 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Fri, 31 Oct 2025 13:57:30 +0700
Subject: [PATCH 187/212] feat(FE-169): Slicing UI Index Pengajuan Sales &
 Define Data Type for Marketing

---
 src/app/marketing/sales-orders/add/page.tsx   |   9 +
 .../sales-orders/detail/edit/page.tsx         |   8 +
 .../marketing/sales-orders/detail/layout.tsx  |  11 ++
 .../marketing/sales-orders/detail/page.tsx    |   9 +
 src/app/marketing/sales-orders/page.tsx       |  10 ++
 .../sales-orders/SalesOrderTable.tsx          | 166 ++++++++++++++++++
 .../sales-orders/form/SalesForm.schema.ts     |   0
 .../marketing/sales-orders/form/SalesForm.tsx |   0
 .../sales-orders/form/SalesFormRepeater.ts    |   0
 .../sales-orders/form/SalesFromRepeater.tsx   |   0
 src/config/constant.ts                        |   2 +-
 src/types/api/marketing/marketing.d.ts        |  39 ++++
 12 files changed, 253 insertions(+), 1 deletion(-)
 create mode 100644 src/app/marketing/sales-orders/add/page.tsx
 create mode 100644 src/app/marketing/sales-orders/detail/edit/page.tsx
 create mode 100644 src/app/marketing/sales-orders/detail/layout.tsx
 create mode 100644 src/app/marketing/sales-orders/detail/page.tsx
 create mode 100644 src/app/marketing/sales-orders/page.tsx
 create mode 100644 src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
 create mode 100644 src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
 create mode 100644 src/components/pages/marketing/sales-orders/form/SalesForm.tsx
 create mode 100644 src/components/pages/marketing/sales-orders/form/SalesFormRepeater.ts
 create mode 100644 src/components/pages/marketing/sales-orders/form/SalesFromRepeater.tsx
 create mode 100644 src/types/api/marketing/marketing.d.ts

diff --git a/src/app/marketing/sales-orders/add/page.tsx b/src/app/marketing/sales-orders/add/page.tsx
new file mode 100644
index 00000000..ed193137
--- /dev/null
+++ b/src/app/marketing/sales-orders/add/page.tsx
@@ -0,0 +1,9 @@
+const AddSalesOrder = () => {
+  return (
+    <div>
+      <p>Tambah Sales Order</p>
+    </div>
+  );
+};
+
+export default AddSalesOrder;
diff --git a/src/app/marketing/sales-orders/detail/edit/page.tsx b/src/app/marketing/sales-orders/detail/edit/page.tsx
new file mode 100644
index 00000000..cc0722ea
--- /dev/null
+++ b/src/app/marketing/sales-orders/detail/edit/page.tsx
@@ -0,0 +1,8 @@
+const EditSalesOrder = () => {
+  return (
+    <div>
+      <p>Edit Sales Order</p>
+    </div>
+  );
+};
+export default EditSalesOrder;
diff --git a/src/app/marketing/sales-orders/detail/layout.tsx b/src/app/marketing/sales-orders/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/marketing/sales-orders/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/marketing/sales-orders/detail/page.tsx b/src/app/marketing/sales-orders/detail/page.tsx
new file mode 100644
index 00000000..ee377cfa
--- /dev/null
+++ b/src/app/marketing/sales-orders/detail/page.tsx
@@ -0,0 +1,9 @@
+const DetailSalesOrder = () => {
+  return (
+    <div>
+      <p>Detail Sales Order</p>
+    </div>
+  );
+};
+
+export default DetailSalesOrder;
diff --git a/src/app/marketing/sales-orders/page.tsx b/src/app/marketing/sales-orders/page.tsx
new file mode 100644
index 00000000..3494b6a1
--- /dev/null
+++ b/src/app/marketing/sales-orders/page.tsx
@@ -0,0 +1,10 @@
+import SalesOrderTable from '@/components/pages/marketing/sales-orders/SalesOrderTable';
+
+const SalesOrder = () => {
+  return (
+    <div className='w-full p-4'>
+      <SalesOrderTable />
+    </div>
+  );
+};
+export default SalesOrder;
diff --git a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
new file mode 100644
index 00000000..eb35e666
--- /dev/null
+++ b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import Button from '@/components/Button';
+import { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { cn } from '@/lib/helper';
+import { SalesOrder } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { CellContext } from '@tanstack/react-table';
+import { useCallback, useState } from 'react';
+
+const RowsOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<SalesOrder, 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 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>
+        <Button
+          href={`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={`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>
+    </div>
+  );
+};
+const SalesOrderTable = () => {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  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);
+    },
+    []
+  );
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='flex flex-col gap-2 mb-4'>
+        <TableToolbar
+          addButton={{
+            href: 'recording/add',
+            label: 'Tambah Sales Order',
+          }}
+          search={{
+            value: search,
+            onChange: searchChangeHandler,
+            placeholder: 'Cari Sales Order',
+          }}
+        />
+        <TableRowSizeSelector
+          value={pageSize}
+          onChange={pageSizeChangeHandler}
+          options={ROWS_OPTIONS}
+        />
+      </div>
+      <Table
+        data={[]}
+        columns={[
+          {
+            header: '#',
+            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+          },
+          {
+            accessorKey: 'so_number',
+            header: 'No. Order',
+          },
+          {
+            accessorKey: 'tanggal',
+            header: 'Tanggal',
+          },
+          {
+            accessorKey: 'approval.step_name',
+            header: 'Status',
+          },
+          {
+            accessorKey: 'customer',
+            header: 'Customer',
+          },
+          {
+            accessorKey: 'grand_total',
+            header: 'Grand Total',
+          },
+          {
+            accessorKey: 'product_details',
+            header: 'Product Details',
+          },
+          {
+            header: 'Aksi',
+            cell: (props) => {},
+          },
+        ]}
+        pageSize={pageSize}
+        page={page}
+        onPageChange={setPage}
+        className={{
+          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',
+        }}
+      />
+    </div>
+  );
+};
+export default SalesOrderTable;
diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts b/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/pages/marketing/sales-orders/form/SalesFormRepeater.ts b/src/components/pages/marketing/sales-orders/form/SalesFormRepeater.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/pages/marketing/sales-orders/form/SalesFromRepeater.tsx b/src/components/pages/marketing/sales-orders/form/SalesFromRepeater.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 2e9d3832..840f5c32 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -42,7 +42,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
 
   {
     title: 'Penjualan',
-    link: '/sale',
+    link: '/marketing/sales-orders',
     icon: 'mdi:attach-money',
   },
 
diff --git a/src/types/api/marketing/marketing.d.ts b/src/types/api/marketing/marketing.d.ts
new file mode 100644
index 00000000..b577802a
--- /dev/null
+++ b/src/types/api/marketing/marketing.d.ts
@@ -0,0 +1,39 @@
+import { Customer } from '@/types/api/master-data/customer';
+import {
+  BaseApproval,
+  BaseMetadata,
+  CreatedUser,
+} from '@/types/api/api-general';
+import { ProductWarehouse } from '../inventory/product-warehouse';
+
+export type BaseMarketing = {
+  id: number;
+  status?: string;
+  so_number: string;
+  customer: Customer;
+  so_docs: string;
+  so_date: string;
+  sales_person: CreatedUser;
+  notes: string;
+};
+
+export type MarketingProducts = {
+  id: number;
+  qty: number;
+  unit_price: number;
+  avg_weigth: number;
+  total_price: number;
+  product_warehouse: ProductWarehouse;
+  delivery_date?: string;
+  vehicle_number?: string;
+};
+
+export type SalesOrder = BaseMetadata & BaseMarketing;
+
+export type CreateSalesOrderPayload = {
+  customer_id: number;
+  date: string;
+  notes: string;
+};
+
+export type UpdateSalesOrderPayload = CreateSalesOrderPayload;

From 495e11c6fe5b5c539f598fa1fa6acfc9d7b1e22e Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Fri, 31 Oct 2025 14:57:15 +0700
Subject: [PATCH 188/212] fix(FE-41): Menambahkan kolom kapasitas di tabel
 kandang

---
 .../transfer-to-laying/detail/edit/page.tsx   |  2 ++
 .../transfer-to-laying/detail/page.tsx        |  2 ++
 .../master-data/kandang/KandangsTable.tsx     | 16 +++++++++++++--
 .../kandang/form/KandangForm.schema.ts        |  4 ++++
 .../master-data/kandang/form/KandangForm.tsx  | 17 ++++++++++++++++
 .../production/recording/RecordingTable.tsx   |  1 +
 .../api/production/transfer-to-laying.ts      | 20 +++++++++++++++++++
 src/types/api/master-data/kandang.d.ts        |  2 ++
 8 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/app/production/transfer-to-laying/detail/edit/page.tsx b/src/app/production/transfer-to-laying/detail/edit/page.tsx
index 9003dbba..20c7373f 100644
--- a/src/app/production/transfer-to-laying/detail/edit/page.tsx
+++ b/src/app/production/transfer-to-laying/detail/edit/page.tsx
@@ -27,6 +27,7 @@ const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
     {
       kandang: {
         id: 1,
+        capacity: 1000,
         name: 'Kandang test',
         status: 'ACTIVE',
         location: {
@@ -56,6 +57,7 @@ const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
       kandang: {
         id: 1,
         name: 'Kandang test 2',
+        capacity: 3000,
         status: 'ACTIVE',
         location: {
           id: 1,
diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
index de5426c8..3f7dbe56 100644
--- a/src/app/production/transfer-to-laying/detail/page.tsx
+++ b/src/app/production/transfer-to-laying/detail/page.tsx
@@ -27,6 +27,7 @@ const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
     {
       kandang: {
         id: 1,
+        capacity: 1000,
         name: 'Kandang test',
         status: 'ACTIVE',
         location: {
@@ -55,6 +56,7 @@ const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
     {
       kandang: {
         id: 1,
+        capacity: 3000,
         name: 'Kandang test 2',
         status: 'ACTIVE',
         location: {
diff --git a/src/components/pages/master-data/kandang/KandangsTable.tsx b/src/components/pages/master-data/kandang/KandangsTable.tsx
index c51eeb21..d2b585de 100644
--- a/src/components/pages/master-data/kandang/KandangsTable.tsx
+++ b/src/components/pages/master-data/kandang/KandangsTable.tsx
@@ -22,7 +22,7 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
+import { cn, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -93,12 +93,19 @@ const KandangsTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+    initial: {
+      search: '',
+      nameSort: '',
+      locationSort: '',
+      capacitySort: '',
+      picSort: '',
+    },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       nameSort: 'sort_name',
       locationSort: 'sort_location',
+      capacitySort: 'sort_capacity',
       picSort: ' sort_pic',
     },
   });
@@ -138,6 +145,11 @@ const KandangsTable = () => {
       header: 'Lokasi',
       cell: (props) => props.row.original.location.name,
     },
+    {
+      accessorKey: 'capacity',
+      header: 'Kapasitas',
+      cell: (props) => formatNumber(props.row.original.capacity ?? 0),
+    },
     {
       accessorKey: 'pic',
       header: 'PIC',
diff --git a/src/components/pages/master-data/kandang/form/KandangForm.schema.ts b/src/components/pages/master-data/kandang/form/KandangForm.schema.ts
index 9a0e42a0..b0f816bd 100644
--- a/src/components/pages/master-data/kandang/form/KandangForm.schema.ts
+++ b/src/components/pages/master-data/kandang/form/KandangForm.schema.ts
@@ -11,6 +11,10 @@ export const KandangFormSchema = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
 
+  capacity: Yup.number()
+    .min(1, 'Kapasitas wajib diisi!')
+    .required('Kapasitas wajib diisi!'),
+
   picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
   pic: Yup.object({
     value: Yup.number().min(1).required(),
diff --git a/src/components/pages/master-data/kandang/form/KandangForm.tsx b/src/components/pages/master-data/kandang/form/KandangForm.tsx
index f0d68983..7753a507 100644
--- a/src/components/pages/master-data/kandang/form/KandangForm.tsx
+++ b/src/components/pages/master-data/kandang/form/KandangForm.tsx
@@ -27,6 +27,7 @@ import {
 import { LocationApi, KandangApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { UserApi } from '@/services/api/user';
+import NumberInput from '@/components/input/NumberInput';
 
 interface KandangFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -81,6 +82,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
             label: initialValues.location.name,
           }
         : null,
+      capacity: initialValues?.capacity ?? 0,
       picId: initialValues?.pic?.id ?? 0,
       pic: initialValues?.pic
         ? {
@@ -101,6 +103,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
       const kandangPayload: CreateKandangPayload = {
         name: values.name,
         location_id: values.locationId,
+        capacity: values.capacity,
         pic_id: values.picId,
       };
 
@@ -249,6 +252,20 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               isClearable
             />
 
+            <NumberInput
+              required
+              name='capacity'
+              label='Kapasitas'
+              value={formik.values.capacity ?? undefined}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.capacity && Boolean(formik.errors.capacity)
+              }
+              errorMessage={formik.errors.capacity as string}
+              readOnly={type === 'detail'}
+            />
+
             <SelectInput
               required
               label='PIC'
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 85ec092f..159b524c 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -52,6 +52,7 @@ const dummyRecordings: Recording[] = [
     },
     coop: {
       id: 1,
+      capacity: 1000,
       name: 'Coop 1',
       status: 'ACTIVE',
       location: {
diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 6f808a8c..d2dd565e 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -33,6 +33,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 11,
+            capacity: 1000,
             name: 'KDG-11',
             status: 'ACTIVE',
             location: {
@@ -61,6 +62,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 12,
+            capacity: 1000,
             name: 'KDG-12',
             status: 'ACTIVE',
             location: {
@@ -107,6 +109,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 13,
+            capacity: 1000,
             name: 'KDG-13',
             status: 'ACTIVE',
             location: {
@@ -135,6 +138,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 14,
+            capacity: 1000,
             name: 'KDG-14',
             status: 'MAINTENANCE',
             location: {
@@ -181,6 +185,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 21,
+            capacity: 1000,
             name: 'KDG-21',
             status: 'ACTIVE',
             location: {
@@ -209,6 +214,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 22,
+            capacity: 1000,
             name: 'KDG-22',
             status: 'ACTIVE',
             location: {
@@ -255,6 +261,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 15,
+            capacity: 1000,
             name: 'KDG-15',
             status: 'ACTIVE',
             location: {
@@ -301,6 +308,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 23,
+            capacity: 1000,
             name: 'KDG-23',
             status: 'ACTIVE',
             location: {
@@ -329,6 +337,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 24,
+            capacity: 1000,
             name: 'KDG-24',
             status: 'ACTIVE',
             location: {
@@ -375,6 +384,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 16,
+            capacity: 1000,
             name: 'KDG-16',
             status: 'ACTIVE',
             location: {
@@ -403,6 +413,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 17,
+            capacity: 1000,
             name: 'KDG-17',
             status: 'ACTIVE',
             location: {
@@ -449,6 +460,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 18,
+            capacity: 1000,
             name: 'KDG-18',
             status: 'ACTIVE',
             location: {
@@ -477,6 +489,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 19,
+            capacity: 1000,
             name: 'KDG-19',
             status: 'ACTIVE',
             location: {
@@ -523,6 +536,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 25,
+            capacity: 1000,
             name: 'KDG-25',
             status: 'ACTIVE',
             location: {
@@ -551,6 +565,7 @@ const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
         {
           kandang: {
             id: 26,
+            capacity: 1000,
             name: 'KDG-26',
             status: 'ACTIVE',
             location: {
@@ -610,6 +625,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
         {
           kandang: {
             id: 3,
+            capacity: 1000,
             name: 'Cikaum 1',
             status: 'ACTIVE',
             location: {
@@ -633,6 +649,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
         {
           kandang: {
             id: 4,
+            capacity: 1000,
             name: 'Cikaum 2',
             status: 'ACTIVE',
             location: {
@@ -656,6 +673,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
         {
           kandang: {
             id: 5,
+            capacity: 1000,
             name: 'Cikaum 3',
             status: 'ACTIVE',
             location: {
@@ -687,6 +705,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
         {
           kandang: {
             id: 3,
+            capacity: 1000,
             name: 'Cikaum 1',
             status: 'ACTIVE',
             location: {
@@ -710,6 +729,7 @@ const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
         {
           kandang: {
             id: 4,
+            capacity: 1000,
             name: 'Cikaum 2',
             status: 'ACTIVE',
             location: {
diff --git a/src/types/api/master-data/kandang.d.ts b/src/types/api/master-data/kandang.d.ts
index 17cbbee7..8ad20f15 100644
--- a/src/types/api/master-data/kandang.d.ts
+++ b/src/types/api/master-data/kandang.d.ts
@@ -7,6 +7,7 @@ export type BaseKandang = {
   name: string;
   status: string;
   location: BaseLocation;
+  capacity: number;
   pic: BaseUser;
 };
 
@@ -15,6 +16,7 @@ export type Kandang = BaseMetadata & BaseKandang;
 export type CreateKandangPayload = {
   name: string;
   location_id: number;
+  capacity: number;
   pic_id: number;
 };
 

From bba8fb15e58c2e01946594f4be62f1cc88057f1b Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:24:52 +0700
Subject: [PATCH 189/212] chore: change a element to button

---
 src/components/menu/MenuItem.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
index 5046f8ff..dce81dac 100644
--- a/src/components/menu/MenuItem.tsx
+++ b/src/components/menu/MenuItem.tsx
@@ -49,14 +49,18 @@ const MenuItem = ({
   );
 
   return (
-    <li onClick={onClick}>
+    <li>
       {href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!href && <a className={menuItemBaseClassName}>{menuItemContent}</a>}
+      {!href && (
+        <button className={menuItemBaseClassName} onClick={onClick}>
+          {menuItemContent}
+        </button>
+      )}
     </li>
   );
 };

From e6187555ced2cc4efec99d98be3180207254734d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:26:25 +0700
Subject: [PATCH 190/212] chore: create RowOptionsMenuWrapper component

---
 .../table/RowOptionsMenuWrapper.tsx           | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/table/RowOptionsMenuWrapper.tsx

diff --git a/src/components/table/RowOptionsMenuWrapper.tsx b/src/components/table/RowOptionsMenuWrapper.tsx
new file mode 100644
index 00000000..53a8ecf1
--- /dev/null
+++ b/src/components/table/RowOptionsMenuWrapper.tsx
@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface RowOptionsMenuWrapperProps {
+  children?: ReactNode;
+  type: 'dropdown' | 'collapse';
+}
+
+const RowOptionsMenuWrapper = ({
+  children,
+  type,
+}: RowOptionsMenuWrapperProps) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content mr-2': type === 'dropdown',
+          'w-fit ml-auto mt-2': type === 'collapse',
+        },
+        'p-2.5 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <div className='flex flex-col gap-1'>{children}</div>
+    </div>
+  );
+};
+
+export default RowOptionsMenuWrapper;

From d853b43e175d4d59d58612f3897e82680cf7d91d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:31:11 +0700
Subject: [PATCH 191/212] fix: use RowOptionsMenuWrapper component for
 RowOptionsMenu

---
 .../pages/master-data/area/AreasTable.tsx     | 27 +++++------
 .../pages/master-data/bank/BanksTable.tsx     | 29 ++++++------
 .../master-data/customer/CustomersTable.tsx   | 38 +++++++--------
 .../pages/master-data/fcr/FcrsTable.tsx       | 29 ++++++------
 .../pages/master-data/flock/FlocksTable.tsx   | 32 ++++++-------
 .../master-data/kandang/KandangsTable.tsx     | 29 ++++++------
 .../master-data/location/LocationsTable.tsx   | 29 ++++++------
 .../master-data/nonstock/NonstocksTable.tsx   | 29 ++++++------
 .../product-category/ProductCategoryTable.tsx | 29 ++++++------
 .../master-data/product/ProductTable.tsx      | 29 ++++++------
 .../master-data/supplier/SupplierTable.tsx    | 27 +++++------
 .../pages/master-data/uom/UomsTable.tsx       | 29 ++++++------
 .../master-data/warehouse/WarehousesTable.tsx | 27 +++++------
 .../pages/production/chickin/ChickinTable.tsx | 46 +++++++++----------
 .../project-flock/ProjectFlockTable.tsx       | 27 ++++-------
 .../production/recording/RecordingTable.tsx   | 18 ++------
 .../TransferToLayingsTable.tsx                | 21 +++------
 17 files changed, 216 insertions(+), 279 deletions(-)

diff --git a/src/components/pages/master-data/area/AreasTable.tsx b/src/components/pages/master-data/area/AreasTable.tsx
index c1ec1ef5..207fb8a6 100644
--- a/src/components/pages/master-data/area/AreasTable.tsx
+++ b/src/components/pages/master-data/area/AreasTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
         variant='ghost'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const AreasTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const AreasTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/area/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/area/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Area
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/bank/BanksTable.tsx b/src/components/pages/master-data/bank/BanksTable.tsx
index 0d084491..58b09ef8 100644
--- a/src/components/pages/master-data/bank/BanksTable.tsx
+++ b/src/components/pages/master-data/bank/BanksTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -163,7 +155,7 @@ const BanksTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -212,10 +204,15 @@ const BanksTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/bank/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/bank/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Bank
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/customer/CustomersTable.tsx b/src/components/pages/master-data/customer/CustomersTable.tsx
index d3fde60b..89401638 100644
--- a/src/components/pages/master-data/customer/CustomersTable.tsx
+++ b/src/components/pages/master-data/customer/CustomersTable.tsx
@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -15,10 +16,7 @@ import { CustomerApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
-import {
-  CellContext,
-  ColumnDef,
-} from '@tanstack/react-table';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -33,16 +31,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
         variant='ghost'
@@ -53,10 +42,10 @@ const RowOptionsMenu = ({
         Detail
       </Button>
       <Button
-        className='justify-start text-sm'
         href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
+        className='justify-start text-sm'
       >
         <Icon icon='material-symbols:edit-outline' width={16} height={16} />
         Edit
@@ -65,7 +54,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -75,7 +64,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -174,7 +163,7 @@ const CustomersTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -210,10 +199,15 @@ const CustomersTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/customer/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/customer/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Customer
+                Tambah
               </Button>
             </div>
 
@@ -285,4 +279,4 @@ const CustomersTable = () => {
   );
 };
 
-export default CustomersTable;
\ No newline at end of file
+export default CustomersTable;
diff --git a/src/components/pages/master-data/fcr/FcrsTable.tsx b/src/components/pages/master-data/fcr/FcrsTable.tsx
index 5f0285bb..b582222e 100644
--- a/src/components/pages/master-data/fcr/FcrsTable.tsx
+++ b/src/components/pages/master-data/fcr/FcrsTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const FcrsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const FcrsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/fcr/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/fcr/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah FCR
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx
index b0684a1a..5350c518 100644
--- a/src/components/pages/master-data/flock/FlocksTable.tsx
+++ b/src/components/pages/master-data/flock/FlocksTable.tsx
@@ -12,6 +12,7 @@ import { FlockApi } from '@/services/api/master-data';
 import { useModal } from '@/components/Modal';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import toast from 'react-hot-toast';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -30,16 +31,7 @@ const RowsOptions = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
         variant='ghost'
@@ -54,7 +46,7 @@ const RowsOptions = ({
         />
         Edit
       </Button>
-       <Button
+      <Button
         href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
@@ -72,7 +64,7 @@ const RowsOptions = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -82,7 +74,7 @@ const RowsOptions = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -203,9 +195,15 @@ const FlockTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/flock/add' color='primary'>
-                Tambah Flock
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/flock/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
               </Button>
             </div>
 
@@ -275,4 +273,4 @@ const FlockTable = () => {
   );
 };
 
-export default FlockTable;
\ No newline at end of file
+export default FlockTable;
diff --git a/src/components/pages/master-data/kandang/KandangsTable.tsx b/src/components/pages/master-data/kandang/KandangsTable.tsx
index c51eeb21..45c981e1 100644
--- a/src/components/pages/master-data/kandang/KandangsTable.tsx
+++ b/src/components/pages/master-data/kandang/KandangsTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -173,7 +165,7 @@ const KandangsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -238,10 +230,15 @@ const KandangsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/kandang/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/kandang/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Kandang
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/location/LocationsTable.tsx b/src/components/pages/master-data/location/LocationsTable.tsx
index 2548fb28..19f11298 100644
--- a/src/components/pages/master-data/location/LocationsTable.tsx
+++ b/src/components/pages/master-data/location/LocationsTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -172,7 +164,7 @@ const LocationsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -237,10 +229,15 @@ const LocationsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/location/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/location/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Location
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/nonstock/NonstocksTable.tsx b/src/components/pages/master-data/nonstock/NonstocksTable.tsx
index 462b3488..ae38c573 100644
--- a/src/components/pages/master-data/nonstock/NonstocksTable.tsx
+++ b/src/components/pages/master-data/nonstock/NonstocksTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -184,7 +176,7 @@ const NonstocksTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -249,10 +241,15 @@ const NonstocksTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/nonstock/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/nonstock/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Nonstock
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
index 63b1c919..1a6e641c 100644
--- a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
+++ b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
         variant='ghost'
@@ -64,7 +56,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -74,7 +66,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -154,7 +146,7 @@ const ProductCategoryTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -200,10 +192,15 @@ const ProductCategoryTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/product-category/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/product-category/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Product Category
+                Tambah
               </Button>
             </div>
             <DebouncedTextInput
diff --git a/src/components/pages/master-data/product/ProductTable.tsx b/src/components/pages/master-data/product/ProductTable.tsx
index b38a749a..2a94656c 100644
--- a/src/components/pages/master-data/product/ProductTable.tsx
+++ b/src/components/pages/master-data/product/ProductTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
@@ -36,16 +37,7 @@ const RowOptionsMenu = ({
   props: CellContext<Product, unknown>;
   deleteClickHandler: () => void;
 }) => (
-  <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'
-    )}
-  >
+  <RowOptionsMenuWrapper type={type}>
     <Button
       href={`/master-data/product/detail/?productId=${props.row.original.id}`}
       variant='ghost'
@@ -68,7 +60,7 @@ const RowOptionsMenu = ({
       onClick={deleteClickHandler}
       variant='ghost'
       color='error'
-      className='text-error hover:text-inherit'
+      className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
     >
       <Icon
         icon='material-symbols:delete-outline-rounded'
@@ -78,7 +70,7 @@ const RowOptionsMenu = ({
       />
       Delete
     </Button>
-  </div>
+  </RowOptionsMenuWrapper>
 );
 
 const ProductsTable = () => {
@@ -217,7 +209,7 @@ const ProductsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -280,10 +272,15 @@ const ProductsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/product/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/product/add'
+                variant='outline'
+                className='w-full sm:w-fit'
+                color='primary'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Produk
+                Tambah
               </Button>
             </div>
             <DebouncedTextInput
diff --git a/src/components/pages/master-data/supplier/SupplierTable.tsx b/src/components/pages/master-data/supplier/SupplierTable.tsx
index 672f70a6..da84afc0 100644
--- a/src/components/pages/master-data/supplier/SupplierTable.tsx
+++ b/src/components/pages/master-data/supplier/SupplierTable.tsx
@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -30,16 +31,7 @@ const RowOptions = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
         variant='ghost'
@@ -72,7 +64,7 @@ const RowOptions = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -82,7 +74,7 @@ const RowOptions = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -226,10 +218,15 @@ const SuppliersTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/supplier/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/supplier/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Supplier
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/uom/UomsTable.tsx b/src/components/pages/master-data/uom/UomsTable.tsx
index dcec5fe5..edf67f34 100644
--- a/src/components/pages/master-data/uom/UomsTable.tsx
+++ b/src/components/pages/master-data/uom/UomsTable.tsx
@@ -14,6 +14,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
@@ -32,16 +33,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
         variant='ghost'
@@ -66,7 +58,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -76,7 +68,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -150,7 +142,7 @@ const UomsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -199,10 +191,15 @@ const UomsTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/uom/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/uom/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah UOM
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/master-data/warehouse/WarehousesTable.tsx b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
index f6d2d071..a61f6f5b 100644
--- a/src/components/pages/master-data/warehouse/WarehousesTable.tsx
+++ b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
         variant='ghost'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -206,7 +198,7 @@ const WarehousesTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -277,10 +269,15 @@ const WarehousesTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/warehouse/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/warehouse/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Warehouse
+                Tambah
               </Button>
             </div>
 
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index 65ab3c16..cd52c154 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -8,6 +8,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -87,7 +88,9 @@ const ChickinTable = () => {
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <Button
               href='/production/chickin/add?projectFlockId=1'
+              variant='outline'
               color='primary'
+              className='w-full sm:w-fit'
             >
               <Icon icon='uil:plus' width={24} height={24} />
               Tambah
@@ -130,20 +133,20 @@ const ChickinTable = () => {
               } else {
                 return '-';
               }
-            }
+            },
           },
           {
             accessorFn: (row) => row.chick_in_date,
             header: 'Tanggal Chickin',
             cell: (props) => {
               if (props.row.original.chick_in_date) {
-                return new Date(props.row.original.chick_in_date).toLocaleDateString(
-                  'id-ID'
-                );
+                return new Date(
+                  props.row.original.chick_in_date
+                ).toLocaleDateString('id-ID');
               } else {
                 return '-';
               }
-            }
+            },
           },
           {
             accessorFn: (row) => row.note,
@@ -166,7 +169,7 @@ const ChickinTable = () => {
                 deleteModal.openModal();
               };
 
-              const editClickHandler = () =>  {
+              const editClickHandler = () => {
                 setSelectedChickin(props.row.original);
                 chickinModal.openModal();
               };
@@ -240,7 +243,9 @@ const ChickinTable = () => {
       <Modal ref={chickinModal.ref}>
         <div className='flex flex-row justify-between items-center'>
           <h1 className='text-xl font-semibold text-center mb-6'>
-            Chickin Kandang - { selectedChickin?.project_flock_kandang && selectedChickin?.project_flock_kandang.kandang?.name}
+            Chickin Kandang -{' '}
+            {selectedChickin?.project_flock_kandang &&
+              selectedChickin?.project_flock_kandang.kandang?.name}
           </h1>
           <Button
             color='error'
@@ -255,10 +260,14 @@ const ChickinTable = () => {
             />
           </Button>
         </div>
-        <ChickinForm initialValues={selectedChickin} formType='edit' afterSubmit={() => {
-          refreshChickins()
-          chickinModal.closeModal()
-        }}/>
+        <ChickinForm
+          initialValues={selectedChickin}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickins();
+            chickinModal.closeModal();
+          }}
+        />
       </Modal>
     </>
   );
@@ -276,16 +285,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
@@ -308,7 +308,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -318,7 +318,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 99f26721..56e3d4df 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -9,6 +9,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
         variant='ghost'
@@ -82,7 +74,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -92,7 +84,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -259,6 +251,7 @@ const ProjectFlockTable = () => {
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
               <Button
                 href='/production/project-flock/add'
+                variant='outline'
                 color='primary'
                 className='w-full sm:w-fit'
               >
@@ -371,10 +364,10 @@ const ProjectFlockTable = () => {
                   const selectableRows = allRows.filter(
                     (row) => row.original?.approval?.step_number == 1
                   );
-                  
-                  const allSelected = selectableRows.every((row) =>
-                    row.getIsSelected()
-                  ) && selectableRows.length != 0;
+
+                  const allSelected =
+                    selectableRows.every((row) => row.getIsSelected()) &&
+                    selectableRows.length != 0;
 
                   const someSelected =
                     selectableRows.some((row) => row.getIsSelected()) &&
@@ -508,7 +501,7 @@ const ProjectFlockTable = () => {
                       {currentPageSize <= 2 && (
                         <RowCollapseOptions>
                           <RowOptionsMenu
-                            type='dropdown'
+                            type='collapse'
                             props={props}
                             deleteClickHandler={deleteClickHandler}
                           />
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 85ec092f..8c9dadd1 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -14,6 +14,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import Table from '@/components/Table';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
 
@@ -126,16 +127,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`recording/detail/?recordingId=${props.row.original.id}`}
         variant='ghost'
@@ -158,7 +150,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -168,7 +160,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -255,7 +247,7 @@ const RecordingTable = () => {
         <TableToolbar
           addButton={{
             href: 'recording/add',
-            label: 'Tambah Recording',
+            label: 'Tambah',
           }}
           search={{
             value: search,
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
index 52d21016..a1ec603a 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -19,6 +19,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import TextInput from '@/components/input/TextInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
@@ -43,16 +44,7 @@ const RowOptionsMenu = ({
   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'
-      )}
-    >
+    <RowOptionsMenuWrapper type={type}>
       <Button
         href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
         variant='ghost'
@@ -97,7 +89,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -107,7 +99,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -291,7 +283,7 @@ const TransferToLayingsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   approveClickHandler={approveClickHandler}
                   rejectClickHandler={rejectClickHandler}
@@ -437,11 +429,12 @@ const TransferToLayingsTable = () => {
             <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
               <Button
                 href='/production/transfer-to-laying/add'
+                variant='outline'
                 color='primary'
                 className='w-full sm:w-fit'
               >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Transfer ke Laying
+                Tambah
               </Button>
 
               {selectedRowIds.length > 0 && (

From 8a3c7d35ec566d03ce843241d14f20d07feecefd Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:35:34 +0700
Subject: [PATCH 192/212] chore: update add button styling and copywriting

---
 .../adjustment/InventoryAdjustmentTable.tsx   | 22 +++++++++----------
 .../inventory/movement/MovementTable.tsx      |  2 +-
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
index 45cfd3f3..caa4aee4 100644
--- a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
+++ b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
@@ -10,11 +10,7 @@ import { inventoryAdjustmentApi } from '@/services/api/inventory';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 import { Icon } from '@iconify/react';
-import {
-  ColumnDef,
-  ColumnSort,
-  SortingState,
-} from '@tanstack/react-table';
+import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
 import { useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
 
@@ -44,10 +40,7 @@ const InventoryAdjustmentTable = () => {
   });
 
   // Fetch Data
-  const {
-    data: inventoryAdjustments,
-    isLoading,
-  } = useSWR(
+  const { data: inventoryAdjustments, isLoading } = useSWR(
     `${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
     inventoryAdjustmentApi.getAllFetcher
   );
@@ -187,8 +180,13 @@ const InventoryAdjustmentTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/inventory/adjustment/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/inventory/adjustment/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
@@ -211,7 +209,7 @@ const InventoryAdjustmentTable = () => {
                   value: tableFilterState.pageSize,
                 }}
                 onChange={pageSizeChangeHandler}
-                className={{ wrapper: 'max-w-28' }}
+                className={{ wrapper: 'min-w-28' }}
               />
             </div>
           </div>
diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index 61be40f8..6926ce4e 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -77,7 +77,7 @@ const MovementTable = () => {
         <TableToolbar
           addButton={{
             href: '/inventory/movement/add',
-            label: 'Tambah Movement',
+            label: 'Tambah',
           }}
           search={{
             value: tableFilterState.search,

From ad10ffbba3c91bc838055af33cce85f649cc8a3e Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:35:49 +0700
Subject: [PATCH 193/212] chore: set min width for RowCollapseOptions

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

diff --git a/src/components/table/RowCollapseOptions.tsx b/src/components/table/RowCollapseOptions.tsx
index 42f9720a..ce90314c 100644
--- a/src/components/table/RowCollapseOptions.tsx
+++ b/src/components/table/RowCollapseOptions.tsx
@@ -16,7 +16,7 @@ const RowCollapseOptions = ({ children }: RowCollapseOptionsProps) => {
           <Icon icon='material-symbols:more-vert' width={16} height={16} />
         </Button>
       }
-      className='w-fit'
+      className='w-fit min-w-36'
       titleClassName='p-0! justify-self-end'
     >
       {children}

From b2540f1d43e5488944496bf12babf9817c12f67c Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:36:11 +0700
Subject: [PATCH 194/212] chore: use RowOptionsMenuWrapper

---
 src/components/table/TableRowOptions.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx
index 4e2e2c93..6c92c928 100644
--- a/src/components/table/TableRowOptions.tsx
+++ b/src/components/table/TableRowOptions.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react';
 import Button from '../Button';
-import { cn } from '@/lib/helper';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 interface TableRowOptionsProps {
   type?: 'dropdown' | 'collapse';
@@ -21,16 +21,7 @@ export const TableRowOptions = ({
   showEdit = true,
   showDelete = true,
 }: TableRowOptionsProps) => (
-  <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'
-    )}
-  >
+  <RowOptionsMenuWrapper type={type}>
     <Button
       href={`${basePath}/detail/?${queryParam}=${recordId}`}
       variant='ghost'
@@ -56,7 +47,7 @@ export const TableRowOptions = ({
         onClick={onDelete}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit justify-start text-sm'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='mdi:delete-outline'
@@ -67,5 +58,5 @@ export const TableRowOptions = ({
         Delete
       </Button>
     )}
-  </div>
+  </RowOptionsMenuWrapper>
 );

From 46572fd992430bb2b764abb9eb89a1bd37c57467 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:36:21 +0700
Subject: [PATCH 195/212] chore: update add button styling

---
 src/components/table/TableToolbar.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/table/TableToolbar.tsx b/src/components/table/TableToolbar.tsx
index e3b385b1..4ec76931 100644
--- a/src/components/table/TableToolbar.tsx
+++ b/src/components/table/TableToolbar.tsx
@@ -18,8 +18,13 @@ export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
   return (
     <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
       {addButton && (
-        <div className='flex flex-row'>
-          <Button href={addButton.href} color='primary'>
+        <div className='w-full flex flex-row'>
+          <Button
+            href={addButton.href}
+            variant='outline'
+            color='primary'
+            className='w-full sm:w-fit'
+          >
             <Icon icon='ic:round-plus' width={24} height={24} />
             {addButton.label}
           </Button>

From 42b4206e6605ae8423eb2cd9da1193bd75065fa6 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:53:37 +0700
Subject: [PATCH 196/212] chore: install prettier

---
 package-lock.json | 17 +++++++++++++++++
 package.json      |  1 +
 2 files changed, 18 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index e1f28d3e..33b7c640 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "eslint": "^9",
         "eslint-config-next": "15.5.3",
         "husky": "^9.1.7",
+        "prettier": "^3.6.2",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -5669,6 +5670,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index b371e4e7..8250d68f 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
     "husky": "^9.1.7",
+    "prettier": "^3.6.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

From f01dae5f97e88b1a6c83c6843674cf8f440bf405 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:58:03 +0700
Subject: [PATCH 197/212] chore: add format script

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8250d68f..10fe9598 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint",
-    "prepare": "husky"
+    "prepare": "husky",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.19.4",

From 0ae4fe083127d55f65d92a43a8091f10b24a3859 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sat, 1 Nov 2025 15:58:47 +0700
Subject: [PATCH 198/212] chore: format code using prettier

---
 eslint.config.mjs                             |   18 +-
 postcss.config.mjs                            |    2 +-
 src/app/globals.css                           |    6 +-
 src/app/inventory/adjustment/add/page.tsx     |   10 +-
 .../inventory/adjustment/detail/layout.tsx    |   12 +-
 src/app/inventory/adjustment/detail/page.tsx  |   15 +-
 src/app/master-data/customer/add/page.tsx     |   10 +-
 src/app/master-data/customer/detail/page.tsx  |   32 +-
 src/app/master-data/customer/page.tsx         |    8 +-
 src/app/master-data/flock/add/page.tsx        |    6 +-
 .../master-data/flock/detail/edit/page.tsx    |   16 +-
 src/app/master-data/flock/detail/layout.tsx   |   12 +-
 src/app/master-data/flock/detail/page.tsx     |   35 +-
 src/app/master-data/flock/page.tsx            |   10 +-
 .../master-data/product-category/add/page.tsx |    6 +-
 .../product-category/detail/edit/page.tsx     |   63 +-
 .../product-category/detail/page.tsx          |   14 +-
 src/app/master-data/product-category/page.tsx |    6 +-
 src/app/master-data/product/add/page.tsx      |    4 +-
 .../master-data/product/detail/edit/page.tsx  |    7 +-
 src/app/master-data/product/detail/page.tsx   |    7 +-
 src/app/master-data/product/page.tsx          |    8 +-
 src/app/master-data/supplier/add/page.tsx     |    2 +-
 src/app/master-data/supplier/detail/page.tsx  |    2 +-
 src/app/master-data/supplier/page.tsx         |    2 +-
 src/app/production/chickin/add/layout.tsx     |   12 +-
 src/app/production/chickin/detail/layout.tsx  |   12 +-
 src/app/production/chickin/detail/page.tsx    |   10 +-
 src/app/production/chickin/page.tsx           |   10 +-
 src/app/production/project-flock/add/page.tsx |   12 +-
 .../project-flock/detail/edit/page.tsx        |   39 +-
 .../project-flock/detail/layout.tsx           |   12 +-
 .../production/project-flock/detail/page.tsx  |    6 +-
 src/app/production/project-flock/page.tsx     |    8 +-
 src/components/Card.tsx                       |   28 +-
 src/components/Pagination.tsx                 |   20 +-
 src/components/input/DateInput.tsx            |   11 +-
 src/components/input/FileInput.tsx            |    5 +-
 src/components/input/NumberInput.tsx          |   16 +-
 src/components/pages/ApprovalSteps.tsx        |   20 +-
 .../adjustment/InventoryAdjustmentTable.tsx   |    4 +-
 .../form/InventoryAdjustmentForm.schema.ts    |    9 +-
 .../form/InventoryAdjustmentForm.tsx          |   45 +-
 .../customer/form/CustomerForm.tsx            |    9 +-
 .../flock/form/FlockForm.schema.ts            |    5 +-
 .../master-data/flock/form/FlockForm.tsx      |   11 +-
 .../form/ProductCategoryForm.schema.ts        |    8 +-
 .../form/ProductCategoryForm.tsx              |   17 +-
 .../product/form/ProductForm.schema.ts        |   65 +-
 .../master-data/product/form/ProductForm.tsx  |  134 +-
 .../supplier/form/SupplierForm.schema.ts      |   67 +-
 .../supplier/form/SupplierForm.tsx            |   16 +-
 .../chickin/form/ChickinForm.schema.ts        |    8 +-
 .../form/ProjectFlockForm.schema.ts           |    3 +-
 .../project-flock/form/ProjectFlockForm.tsx   |   19 +-
 .../form/ProjectFlockKandangTable.tsx         |    7 +-
 .../recording/form/RecordingForm.tsx          | 1403 +++++++++--------
 .../TransferToLayingsTable.tsx                |   18 +-
 src/services/api/base.ts                      |   11 +-
 src/services/api/master-data.ts               |    2 +-
 src/services/api/production.ts                |    2 +-
 src/types/api/master-data/customer.d.ts       |   40 +-
 src/types/api/master-data/product.d.ts        |    2 +-
 src/types/api/master-data/supplier.d.ts       |   60 +-
 src/types/api/production/chickin.d.ts         |   10 +-
 .../api/production/project-flock-kandang.d.ts |    8 +-
 66 files changed, 1319 insertions(+), 1198 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 719cea2b..fa167c8d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -10,14 +10,14 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
   {
     ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
     ],
   },
 ];
diff --git a/postcss.config.mjs b/postcss.config.mjs
index c7bcb4b1..ba720fe5 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;
diff --git a/src/app/globals.css b/src/app/globals.css
index 97be6978..c3d05c67 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,10 +3,10 @@
 @import '../styles/daisyui.css';
 
 @plugin "daisyui/theme" {
-  name: "lti";
+  name: 'lti';
   default: false;
   prefersdark: false;
-  color-scheme: "light";
+  color-scheme: 'light';
   --color-base-100: oklch(98% 0.001 106.423);
   --color-base-200: oklch(97% 0.001 106.424);
   --color-base-300: oklch(92% 0.003 48.717);
@@ -37,8 +37,6 @@
   --noise: 0;
 }
 
-
-
 :root {
   --color-primary: #1f74bf;
 }
diff --git a/src/app/inventory/adjustment/add/page.tsx b/src/app/inventory/adjustment/add/page.tsx
index 3bd64573..e20eedfc 100644
--- a/src/app/inventory/adjustment/add/page.tsx
+++ b/src/app/inventory/adjustment/add/page.tsx
@@ -1,11 +1,11 @@
-import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm";
+import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
 
 const CreateInventoryAdjustment = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <InventoryAdjustmentForm/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <InventoryAdjustmentForm />
     </section>
   );
-}
+};
 
-export default CreateInventoryAdjustment;
\ No newline at end of file
+export default CreateInventoryAdjustment;
diff --git a/src/app/inventory/adjustment/detail/layout.tsx b/src/app/inventory/adjustment/detail/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/inventory/adjustment/detail/layout.tsx
+++ b/src/app/inventory/adjustment/detail/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/inventory/adjustment/detail/page.tsx b/src/app/inventory/adjustment/detail/page.tsx
index 5e96c86a..acb9f8db 100644
--- a/src/app/inventory/adjustment/detail/page.tsx
+++ b/src/app/inventory/adjustment/detail/page.tsx
@@ -7,11 +7,12 @@ import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 
 const DetailInventoryAdjustment = () => {
   const router = useRouter();
-  const [inventoryAdjustment, setInventoryAdjustment] = useState<InventoryAdjustment | null>(null);
+  const [inventoryAdjustment, setInventoryAdjustment] =
+    useState<InventoryAdjustment | null>(null);
 
   // Ambil data dari router state
   useEffect(() => {
-    console.log("Router State");
+    console.log('Router State');
     console.log(window.history.state);
     const state = window.history.state?.usr as
       | { inventoryAdjustment?: InventoryAdjustment }
@@ -24,20 +25,20 @@ const DetailInventoryAdjustment = () => {
   }, [router]);
 
   const finalData = inventoryAdjustment;
-  
-  console.log("Final Data");
+
+  console.log('Final Data');
   console.log(finalData);
 
   if (!finalData) {
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
+    <section className='w-full p-4 flex flex-row justify-center'>
       <InventoryAdjustmentForm initialValues={finalData} />
     </section>
   );
diff --git a/src/app/master-data/customer/add/page.tsx b/src/app/master-data/customer/add/page.tsx
index a1096f02..dd75c679 100644
--- a/src/app/master-data/customer/add/page.tsx
+++ b/src/app/master-data/customer/add/page.tsx
@@ -1,11 +1,11 @@
-import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
 
 const AddCustomer = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <CustomerForm/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <CustomerForm />
     </section>
   );
-}
+};
 
-export default AddCustomer;
\ No newline at end of file
+export default AddCustomer;
diff --git a/src/app/master-data/customer/detail/page.tsx b/src/app/master-data/customer/detail/page.tsx
index 263458c2..d778f83b 100644
--- a/src/app/master-data/customer/detail/page.tsx
+++ b/src/app/master-data/customer/detail/page.tsx
@@ -1,45 +1,47 @@
-'use client'
+'use client';
 
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 import { CustomerApi } from '@/services/api/master-data';
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
 
 const CustomerDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const costumerId = searchParams.get("customerId");
+  const costumerId = searchParams.get('customerId');
 
   const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
     costumerId,
     (id: number) => CustomerApi.getSingle(id)
   );
 
-  if(!costumerId){
+  if (!costumerId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
-    router.replace("/404");
+  if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingCostumer && isResponseSuccess(costumer) && (
-        <CustomerForm formType="detail" initialValues={costumer.data} />
+        <CustomerForm formType='detail' initialValues={costumer.data} />
       )}
     </div>
-  )
+  );
 };
 
 export default CustomerDetail;
diff --git a/src/app/master-data/customer/page.tsx b/src/app/master-data/customer/page.tsx
index b80401f1..8aec1088 100644
--- a/src/app/master-data/customer/page.tsx
+++ b/src/app/master-data/customer/page.tsx
@@ -1,11 +1,11 @@
-import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
+import CustomersTable from '@/components/pages/master-data/customer/CustomersTable';
 
 const Customer = () => {
   return (
-    <section className="w-full p-4">
+    <section className='w-full p-4'>
       <CustomersTable />
     </section>
-  )
+  );
 };
 
-export default Customer;
\ No newline at end of file
+export default Customer;
diff --git a/src/app/master-data/flock/add/page.tsx b/src/app/master-data/flock/add/page.tsx
index 5ee3958e..d038d414 100644
--- a/src/app/master-data/flock/add/page.tsx
+++ b/src/app/master-data/flock/add/page.tsx
@@ -1,11 +1,11 @@
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
 
 const AddFlock = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
+    <section className='w-full p-4 flex flex-row justify-center'>
       <FlockForm />
     </section>
   );
-}
+};
 
 export default AddFlock;
diff --git a/src/app/master-data/flock/detail/edit/page.tsx b/src/app/master-data/flock/detail/edit/page.tsx
index c9651727..babc6653 100644
--- a/src/app/master-data/flock/detail/edit/page.tsx
+++ b/src/app/master-data/flock/detail/edit/page.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { FlockApi } from "@/services/api/master-data";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const FlockEdit = () => {
   const router = useRouter();
@@ -44,6 +44,6 @@ const FlockEdit = () => {
       )}
     </div>
   );
-}
+};
 
-export default FlockEdit;
\ No newline at end of file
+export default FlockEdit;
diff --git a/src/app/master-data/flock/detail/layout.tsx b/src/app/master-data/flock/detail/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/master-data/flock/detail/layout.tsx
+++ b/src/app/master-data/flock/detail/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/master-data/flock/detail/page.tsx b/src/app/master-data/flock/detail/page.tsx
index 8a805911..e9620d33 100644
--- a/src/app/master-data/flock/detail/page.tsx
+++ b/src/app/master-data/flock/detail/page.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { FlockApi } from "@/services/api/master-data";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const FlockDetail = () => {
   const router = useRouter();
@@ -14,33 +14,36 @@ const FlockDetail = () => {
   const flockId = searchParams.get('flockId');
 
   // Fetch Data
-  const { data: flock, isLoading: isLoadingFlock } = useSWR(flockId, (id: number) => FlockApi.getSingle(id));
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(
+    flockId,
+    (id: number) => FlockApi.getSingle(id)
+  );
 
-  if(!flockId){
+  if (!flockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingFlock && (!flock || isResponseError(flock))){
+  if (!isLoadingFlock && (!flock || isResponseError(flock))) {
     router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       {isLoadingFlock && (
-        <span className="loading loading-spinner loading-xl" />
+        <span className='loading loading-spinner loading-xl' />
       )}
       {!isLoadingFlock && isResponseSuccess(flock) && (
-        <FlockForm formType="detail" initialValues={flock.data} />
+        <FlockForm formType='detail' initialValues={flock.data} />
       )}
     </div>
   );
-}
+};
 
-export default FlockDetail;
\ No newline at end of file
+export default FlockDetail;
diff --git a/src/app/master-data/flock/page.tsx b/src/app/master-data/flock/page.tsx
index b317091a..76cc32c1 100644
--- a/src/app/master-data/flock/page.tsx
+++ b/src/app/master-data/flock/page.tsx
@@ -1,11 +1,11 @@
-import FlockTable from "@/components/pages/master-data/flock/FlocksTable";
+import FlockTable from '@/components/pages/master-data/flock/FlocksTable';
 
 const Flock = () => {
   return (
-    <section className="w-full p-4">
-      <FlockTable/>
+    <section className='w-full p-4'>
+      <FlockTable />
     </section>
-  );   
-}
+  );
+};
 
 export default Flock;
diff --git a/src/app/master-data/product-category/add/page.tsx b/src/app/master-data/product-category/add/page.tsx
index 0993ba7a..2331159e 100644
--- a/src/app/master-data/product-category/add/page.tsx
+++ b/src/app/master-data/product-category/add/page.tsx
@@ -1,11 +1,11 @@
-import ProductCategoryForm from "@/components/pages/master-data/product-category/form/ProductCategoryForm";
+import ProductCategoryForm from '@/components/pages/master-data/product-category/form/ProductCategoryForm';
 
 const AddProductCategory = () => {
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       <ProductCategoryForm />
     </div>
   );
 };
 
-export default AddProductCategory;
\ No newline at end of file
+export default AddProductCategory;
diff --git a/src/app/master-data/product-category/detail/edit/page.tsx b/src/app/master-data/product-category/detail/edit/page.tsx
index 6bc10644..4cb7eb5a 100644
--- a/src/app/master-data/product-category/detail/edit/page.tsx
+++ b/src/app/master-data/product-category/detail/edit/page.tsx
@@ -9,39 +9,44 @@ import { ProductCategoryApi } from '@/services/api/master-data';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 const ProductCategoryEdit = () => {
-    const router = useRouter();
-    const searchParams = useSearchParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
-    const productCategoryId = searchParams.get('productCategoryId');
+  const productCategoryId = searchParams.get('productCategoryId');
 
-    const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
-        productCategoryId,
-        (id: number) => ProductCategoryApi.getSingle(id)
-    );
+  const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
+    productCategoryId,
+    (id: number) => ProductCategoryApi.getSingle(id)
+  );
 
-    if (!productCategoryId) {
-        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 (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
-        router.replace('/404');
-        return;
-    }
+  if (!productCategoryId) {
+    router.back();
 
     return (
-        <div className='w-full p-4 flex flex-row justify-center'>
-        {isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
-        {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
-            <ProductCategoryForm type='edit' initialValues={productCategory.data} />
-        )}
-        </div>
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
     );
-}
+  }
 
-export default ProductCategoryEdit;
\ No newline at end of file
+  if (
+    !isLoadingProductCategory &&
+    (!productCategory || isResponseError(productCategory))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProductCategory && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
+        <ProductCategoryForm type='edit' initialValues={productCategory.data} />
+      )}
+    </div>
+  );
+};
+
+export default ProductCategoryEdit;
diff --git a/src/app/master-data/product-category/detail/page.tsx b/src/app/master-data/product-category/detail/page.tsx
index cba06fdb..c1a21aaf 100644
--- a/src/app/master-data/product-category/detail/page.tsx
+++ b/src/app/master-data/product-category/detail/page.tsx
@@ -29,16 +29,24 @@ const ProductCategoryDetail = () => {
     );
   }
 
-  if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
+  if (
+    !isLoadingProductCategory &&
+    (!productCategory || isResponseError(productCategory))
+  ) {
     router.replace('/404');
     return;
   }
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
+      {isLoadingProductCategory && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
-        <ProductCategoryForm type='detail' initialValues={productCategory.data} />
+        <ProductCategoryForm
+          type='detail'
+          initialValues={productCategory.data}
+        />
       )}
     </div>
   );
diff --git a/src/app/master-data/product-category/page.tsx b/src/app/master-data/product-category/page.tsx
index 5ec6d555..78a4fda3 100644
--- a/src/app/master-data/product-category/page.tsx
+++ b/src/app/master-data/product-category/page.tsx
@@ -1,11 +1,11 @@
-import ProductCategoryTable from "@/components/pages/master-data/product-category/ProductCategoryTable";
+import ProductCategoryTable from '@/components/pages/master-data/product-category/ProductCategoryTable';
 
 const ProductCategory = () => {
   return (
-    <section className="w-full p-4">
+    <section className='w-full p-4'>
       <ProductCategoryTable />
     </section>
   );
 };
 
-export default ProductCategory;
\ No newline at end of file
+export default ProductCategory;
diff --git a/src/app/master-data/product/add/page.tsx b/src/app/master-data/product/add/page.tsx
index 7cc995b6..37f42691 100644
--- a/src/app/master-data/product/add/page.tsx
+++ b/src/app/master-data/product/add/page.tsx
@@ -2,10 +2,10 @@ import ProductForm from '@/components/pages/master-data/product/form/ProductForm
 
 const AddProduct = () => {
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
+    <div className='w-full p-4 flex flex-row justify-center'>
       <ProductForm />
     </div>
   );
 };
 
-export default AddProduct;
\ No newline at end of file
+export default AddProduct;
diff --git a/src/app/master-data/product/detail/edit/page.tsx b/src/app/master-data/product/detail/edit/page.tsx
index 96cfdc42..8916a98e 100644
--- a/src/app/master-data/product/detail/edit/page.tsx
+++ b/src/app/master-data/product/detail/edit/page.tsx
@@ -13,9 +13,8 @@ const ProductEdit = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductEdit = () => {
   );
 };
 
-export default ProductEdit;
\ No newline at end of file
+export default ProductEdit;
diff --git a/src/app/master-data/product/detail/page.tsx b/src/app/master-data/product/detail/page.tsx
index 916a44d0..34743e1f 100644
--- a/src/app/master-data/product/detail/page.tsx
+++ b/src/app/master-data/product/detail/page.tsx
@@ -13,9 +13,8 @@ const ProductDetail = () => {
 
   const productId = searchParams.get('productId');
 
-  const { data: product, isLoading } = useSWR(
-    productId,
-    (id: number) => ProductApi.getSingle(id)
+  const { data: product, isLoading } = useSWR(productId, (id: number) =>
+    ProductApi.getSingle(id)
   );
 
   if (!productId) {
@@ -42,4 +41,4 @@ const ProductDetail = () => {
   );
 };
 
-export default ProductDetail;
\ No newline at end of file
+export default ProductDetail;
diff --git a/src/app/master-data/product/page.tsx b/src/app/master-data/product/page.tsx
index 6014aeb9..a385d411 100644
--- a/src/app/master-data/product/page.tsx
+++ b/src/app/master-data/product/page.tsx
@@ -1,11 +1,11 @@
-import ProductsTable from "@/components/pages/master-data/product/ProductTable";
+import ProductsTable from '@/components/pages/master-data/product/ProductTable';
 
 const Product = () => {
   return (
-    <section className="w-full p-4">
-        <ProductsTable />
+    <section className='w-full p-4'>
+      <ProductsTable />
     </section>
   );
 };
 
-export default Product;
\ No newline at end of file
+export default Product;
diff --git a/src/app/master-data/supplier/add/page.tsx b/src/app/master-data/supplier/add/page.tsx
index 8a95c3c6..37df33b0 100644
--- a/src/app/master-data/supplier/add/page.tsx
+++ b/src/app/master-data/supplier/add/page.tsx
@@ -8,4 +8,4 @@ const AddSupplier = () => {
   );
 };
 
-export default AddSupplier;
\ No newline at end of file
+export default AddSupplier;
diff --git a/src/app/master-data/supplier/detail/page.tsx b/src/app/master-data/supplier/detail/page.tsx
index 433fa043..a34ad72e 100644
--- a/src/app/master-data/supplier/detail/page.tsx
+++ b/src/app/master-data/supplier/detail/page.tsx
@@ -46,4 +46,4 @@ const SupplierDetail = () => {
   );
 };
 
-export default SupplierDetail;
\ No newline at end of file
+export default SupplierDetail;
diff --git a/src/app/master-data/supplier/page.tsx b/src/app/master-data/supplier/page.tsx
index 1f54bd0d..8000be0a 100644
--- a/src/app/master-data/supplier/page.tsx
+++ b/src/app/master-data/supplier/page.tsx
@@ -1,4 +1,4 @@
-import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
+import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
 
 const Supplier = () => {
   return (
diff --git a/src/app/production/chickin/add/layout.tsx b/src/app/production/chickin/add/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/production/chickin/add/layout.tsx
+++ b/src/app/production/chickin/add/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/production/chickin/detail/layout.tsx b/src/app/production/chickin/detail/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/production/chickin/detail/layout.tsx
+++ b/src/app/production/chickin/detail/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/chickin/detail/page.tsx
index 96647c55..be8c5332 100644
--- a/src/app/production/chickin/detail/page.tsx
+++ b/src/app/production/chickin/detail/page.tsx
@@ -20,7 +20,7 @@ import useSWR from 'swr';
 
 /**
  * TODO: Refactor code - pindahin detail ke reuseable component
- *       setelah implement approval and reject 
+ *       setelah implement approval and reject
  */
 
 const DetailChickin = () => {
@@ -43,9 +43,8 @@ const DetailChickin = () => {
     // chickin.data?.approval.step_number == 1 ? false : true
     true
   );
-  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
-    !isApprovedDisabled
-  );
+  const [isRejectedDisabled, setIsRejectedDisabled] =
+    useState(!isApprovedDisabled);
   const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
     !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
   );
@@ -264,7 +263,8 @@ const DetailChickin = () => {
                 <Icon icon='mdi:times' width={24} height={24} />
                 Delete
               </Button>
-              <Button color='warning'
+              <Button
+                color='warning'
                 onClick={() => {
                   chickinModal.openModal();
                 }}
diff --git a/src/app/production/chickin/page.tsx b/src/app/production/chickin/page.tsx
index ad662f65..5d105aab 100644
--- a/src/app/production/chickin/page.tsx
+++ b/src/app/production/chickin/page.tsx
@@ -1,10 +1,10 @@
-import ChickinTable from "@/components/pages/production/chickin/ChickinTable";
+import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
 
 const Chickin = () => {
   return (
-    <section className="w-full p-4">
-      <ChickinTable/>
+    <section className='w-full p-4'>
+      <ChickinTable />
     </section>
   );
-}
-export default Chickin;
\ No newline at end of file
+};
+export default Chickin;
diff --git a/src/app/production/project-flock/add/page.tsx b/src/app/production/project-flock/add/page.tsx
index 60141d80..b323b5f3 100644
--- a/src/app/production/project-flock/add/page.tsx
+++ b/src/app/production/project-flock/add/page.tsx
@@ -1,13 +1,13 @@
-'use client'
+'use client';
 
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 
 const AddProjectFlock = () => {
   return (
-    <section className="w-full p-4 flex flex-row justify-center">
-      <ProjectFlockForm formType="add"/>
+    <section className='w-full p-4 flex flex-row justify-center'>
+      <ProjectFlockForm formType='add' />
     </section>
   );
-}
+};
 
-export default AddProjectFlock;
\ No newline at end of file
+export default AddProjectFlock;
diff --git a/src/app/production/project-flock/detail/edit/page.tsx b/src/app/production/project-flock/detail/edit/page.tsx
index 858d0ca8..7576cc27 100644
--- a/src/app/production/project-flock/detail/edit/page.tsx
+++ b/src/app/production/project-flock/detail/edit/page.tsx
@@ -1,46 +1,47 @@
-'use client'
+'use client';
 
-
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ProjectFlockApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const ProjectFlockEdit = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const projectFlockId = searchParams.get("projectFlockId");
+  const projectFlockId = searchParams.get('projectFlockId');
 
   const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
     projectFlockId,
     (id: number) => ProjectFlockApi.getSingle(id)
   );
 
-  if(!projectFlockId){
+  if (!projectFlockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
-    router.replace("/404");
+  if (!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
       {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType="edit" initialValues={projectFlock.data} />
+        <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ProjectFlockEdit;
\ No newline at end of file
+export default ProjectFlockEdit;
diff --git a/src/app/production/project-flock/detail/layout.tsx b/src/app/production/project-flock/detail/layout.tsx
index b41c70f9..7220dfa1 100644
--- a/src/app/production/project-flock/detail/layout.tsx
+++ b/src/app/production/project-flock/detail/layout.tsx
@@ -1,11 +1,11 @@
-import SuspenseHelper from "@/components/helper/SuspenseHelper"
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
 const Layout = ({
-  children
+  children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>
-}
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index bea96b84..6cf694c0 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -42,7 +42,11 @@ const ProjectFlockDetail = () => {
         <span className='loading loading-spinner loading-xl' />
       )}
       {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
+        <ProjectFlockForm
+          formType='detail'
+          initialValues={projectFlock.data}
+          refreshProjectFlocks={refreshProjectFlock}
+        />
       )}
     </div>
   );
diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx
index d264d9e4..79feb41f 100644
--- a/src/app/production/project-flock/page.tsx
+++ b/src/app/production/project-flock/page.tsx
@@ -1,11 +1,11 @@
-import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
+import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 
 const ProjectFlock = () => {
   return (
-    <section className="w-full p-4">
-      <ProjectFlockTable/>
+    <section className='w-full p-4'>
+      <ProjectFlockTable />
     </section>
   );
-}
+};
 
 export default ProjectFlock;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 06438390..cde902f0 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,13 +1,11 @@
 'use client';
 
-import {
-  HTMLAttributes,
-  ReactNode,
-} from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
-export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+export interface CardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
   title?: string;
   subtitle?: string;
   image?: string;
@@ -44,17 +42,17 @@ const Card = ({
     const baseClasses = 'card bg-base-100';
 
     const variantClasses = {
-      'default': '',
-      'compact': 'card-compact',
-      'bordered': 'border border-base-300',
-      'shadow': 'shadow-xl',
+      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]',
+      sm: 'w-64',
+      md: 'w-96',
+      lg: 'w-[28rem]',
     };
 
     return cn(
@@ -84,9 +82,9 @@ const Card = ({
 
   const getTitleClasses = () => {
     const sizeClasses = {
-      'sm': 'text-lg',
-      'md': 'text-xl',
-      'lg': 'text-2xl',
+      sm: 'text-lg',
+      md: 'text-xl',
+      lg: 'text-2xl',
     };
 
     return cn('card-title font-bold', sizeClasses[size], className?.title);
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 86d3a67a..e47e480d 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -185,17 +185,17 @@ const Pagination = ({
                     currentPage <= 2
                       ? currentPage + 2
                       : currentPage === totalPages - 2
-                      ? 3
-                      : currentPage >= totalPages - 1
-                      ? 4
-                      : 1
+                        ? 3
+                        : currentPage >= totalPages - 1
+                          ? 4
+                          : 1
                   }
                   endPage={
                     currentPage <= 2 || currentPage >= totalPages - 1
                       ? totalPages - 3
                       : currentPage === totalPages - 2
-                      ? totalPages - 4
-                      : 2
+                        ? totalPages - 4
+                        : 2
                   }
                   onPageItemClick={pageChangeHandler}
                 />
@@ -242,15 +242,15 @@ const Pagination = ({
                     currentPage <= 3
                       ? currentPage + 2
                       : currentPage >= 4
-                      ? currentPage + 2
-                      : 1
+                        ? currentPage + 2
+                        : 1
                   }
                   endPage={
                     currentPage <= 3
                       ? totalPages - 2
                       : currentPage >= 4
-                      ? totalPages - 1
-                      : 0
+                        ? totalPages - 1
+                        : 0
                   }
                   onPageItemClick={pageChangeHandler}
                 />
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index be485b75..6e2f1d77 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-} from 'react';
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
 
@@ -109,10 +105,7 @@ const DateInput = ({
           min={min}
           max={max}
           disabled={disabled}
-          className={cn(
-            'grow bg-transparent cursor-pointer',
-            className?.input
-          )}
+          className={cn('grow bg-transparent cursor-pointer', className?.input)}
           readOnly={readOnly}
         />
 
diff --git a/src/components/input/FileInput.tsx b/src/components/input/FileInput.tsx
index 86100e40..aee7cb78 100644
--- a/src/components/input/FileInput.tsx
+++ b/src/components/input/FileInput.tsx
@@ -69,10 +69,7 @@ const FileInput = ({
         onChange={onChange}
         onBlur={onBlur}
         disabled={disabled}
-        className={cn(
-          'grow file-input w-full h-12 rounded',
-          className?.input
-        )}
+        className={cn('grow file-input w-full h-12 rounded', className?.input)}
         readOnly={readOnly}
       />
 
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
index 89b02845..dd6c8c2b 100644
--- a/src/components/input/NumberInput.tsx
+++ b/src/components/input/NumberInput.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { ChangeEvent, ReactNode } from "react";
-import { NumericFormat, OnValueChange } from "react-number-format";
-import TextInput, { TextInputProps } from "@/components/input/TextInput";
+import { ChangeEvent, ReactNode } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
-interface NumberInputProps extends Omit<TextInputProps, "type"> {
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
   thousandSeparator?: string;
   decimalSeparator?: string;
   decimalScale?: number;
@@ -17,8 +17,8 @@ interface NumberInputProps extends Omit<TextInputProps, "type"> {
 }
 
 const NumberInput = ({
-  thousandSeparator = ",",
-  decimalSeparator = ".",
+  thousandSeparator = ',',
+  decimalSeparator = '.',
   decimalScale = 5,
   allowNegative = true,
   onChange,
@@ -28,7 +28,7 @@ const NumberInput = ({
 }: NumberInputProps) => {
   const valueChangeHandler: OnValueChange = (
     numberFormatValues,
-    sourceInfo,
+    sourceInfo
   ) => {
     const newChangeEvent = sourceInfo.event as
       | ChangeEvent<HTMLInputElement>
diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index 184b3f20..daac4ab0 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -31,21 +31,21 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
           approval.status === 'APPROVED'
             ? 'success'
             : approval.status === 'REJECTED'
-            ? 'error'
-            : approval.status === 'WAITING'
-            ? 'warning'
-            : undefined;
+              ? 'error'
+              : approval.status === 'WAITING'
+                ? 'warning'
+                : undefined;
 
         const stepItemIcon =
           approval.status === 'APPROVED'
             ? 'material-symbols:check-rounded'
             : approval.status === 'REJECTED'
-            ? 'material-symbols:close-rounded'
-            : approval.status === 'WAITING'
-            ? 'pajamas:dash-circle'
-            : approval.logs && approval.logs.length > 0
-            ? 'material-symbols:info-outline-rounded'
-            : 'bxs:hourglass';
+              ? 'material-symbols:close-rounded'
+              : approval.status === 'WAITING'
+                ? 'pajamas:dash-circle'
+                : approval.logs && approval.logs.length > 0
+                  ? 'material-symbols:info-outline-rounded'
+                  : 'bxs:hourglass';
 
         return (
           <StepItem
diff --git a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
index caa4aee4..049b0661 100644
--- a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
+++ b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx
@@ -106,8 +106,8 @@ const InventoryAdjustmentTable = () => {
           type === 'INCREASE'
             ? 'Peningkatan'
             : type === 'DECREASE'
-            ? 'Penurunan'
-            : '-';
+              ? 'Penurunan'
+              : '-';
 
         return (
           <div
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
index d7a0ae0a..0a6dc1f9 100644
--- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
@@ -4,24 +4,21 @@ export const InventoryAdjustmentFormSchema = Yup.object({
   product_category: Yup.object({
     value: Yup.number().required('ID Kategori Produk wajib diisi!'),
     label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   product_category_id: Yup.number().nullable(),
 
   product: Yup.object({
     value: Yup.number().required('ID Produk wajib diisi!'),
     label: Yup.string().required('Nama Produk wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   product_id: Yup.number().nullable(),
 
   warehouse: Yup.object({
     value: Yup.number().required('ID Gudang wajib diisi!'),
     label: Yup.string().required('Nama Gudang wajib diisi!'),
-  })
-    .nullable(),
+  }).nullable(),
 
   warehouse_id: Yup.number().nullable(),
 
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
index 9a19ced1..69860be9 100644
--- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
@@ -51,9 +51,8 @@ const InventoryAdjustmentForm = ({
   // Submit Handler
   const createInventoryAdjustmentHandler = useCallback(
     async (payload: CreateInventoryAdjustmentPayload) => {
-      const createInventoryAdjustmentRes = await inventoryAdjustmentApi.create(
-        payload
-      );
+      const createInventoryAdjustmentRes =
+        await inventoryAdjustmentApi.create(payload);
 
       if (isResponseError(createInventoryAdjustmentRes)) {
         setInventoryAdjustmentFormErrorMessage(
@@ -68,7 +67,9 @@ const InventoryAdjustmentForm = ({
     [router]
   );
 
-  const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
+  const formikInitialValues = useMemo<
+    Partial<InventoryAdjustmentFormValues>
+  >(() => {
     return {
       product_category_id: initialValues?.product_category?.id ?? 0,
       product_id: initialValues?.product?.id ?? 0,
@@ -185,7 +186,6 @@ const InventoryAdjustmentForm = ({
     warehouseChangeHandler(null);
   };
 
-
   const { setValues: formikSetValues } = formik;
 
   // Effect
@@ -225,7 +225,13 @@ const InventoryAdjustmentForm = ({
       const type = initialValues.transaction_type.toLowerCase();
       setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
     }
-  }, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
+  }, [
+    formik,
+    initialValues,
+    setQuantityLabel,
+    setDisabledProduct,
+    setSelectedProductCategories,
+  ]);
   useEffect(() => {
     formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
   }, [formikSetValues, formikInitialValues]);
@@ -364,15 +370,19 @@ const InventoryAdjustmentForm = ({
               errorMessage={formik.errors.transaction_type as string}
               variant='radio-primary'
               required
-              bottomLabel={formik.values.transaction_type == undefined ? 'Pilih salah satu tipe transaksi' : undefined}
+              bottomLabel={
+                formik.values.transaction_type == undefined
+                  ? 'Pilih salah satu tipe transaksi'
+                  : undefined
+              }
               disabled={type === 'detail'}
             />
 
             {/* Number Input Stock */}
             <TextInput
-             className={{
-              wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
-             }}
+              className={{
+                wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
+              }}
               required
               label={quantityLabel}
               name='quantity'
@@ -395,8 +405,6 @@ const InventoryAdjustmentForm = ({
               readOnly={type === 'detail'}
             />
 
-            
-
             {/* Text Area Input Reason */}
             <TextArea
               required
@@ -413,14 +421,23 @@ const InventoryAdjustmentForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (
               <div className='flex flex-row justify-end gap-2'>
-                <Button type='button' color='warning' className='px-4' onClick={resetHandler}>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={resetHandler}
+                >
                   Reset
                 </Button>
                 <Button
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
+                  disabled={
+                    !formik.isValid ||
+                    formik.isSubmitting ||
+                    formik.values.product == undefined
+                  }
                   className='px-4'
                 >
                   Submit
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
index ac848834..52d27834 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.tsx
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -11,7 +11,11 @@ import {
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
-import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from '@/components/pages/master-data/customer/form/CustomerForm.schema';
+import {
+  CustomerFormSchema,
+  CustomerFormValues,
+  UpdateCustomerFormSchema,
+} from '@/components/pages/master-data/customer/form/CustomerForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -150,7 +154,8 @@ const CustomerForm = ({
   const formik = useFormik<CustomerFormValues>({
     initialValues: formikInitialValues,
     enableReinitialize: true,
-    validationSchema: formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
+    validationSchema:
+      formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setCustomerFormErrorMessage('');
diff --git a/src/components/pages/master-data/flock/form/FlockForm.schema.ts b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
index 76445610..56550b4e 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.schema.ts
+++ b/src/components/pages/master-data/flock/form/FlockForm.schema.ts
@@ -3,10 +3,7 @@ import * as Yup from 'yup';
 export const FlockFormSchema = Yup.object({
   name: Yup.string()
     .required('Nama wajib diisi!')
-    .matches(
-      /^[\p{L}\p{N}\s]+$/u,
-      'Nama tidak boleh mengandung simbol'
-    ),
+    .matches(/^[\p{L}\p{N}\s]+$/u, 'Nama tidak boleh mengandung simbol'),
 });
 
 export const UpdateFlockFormSchema = FlockFormSchema;
diff --git a/src/components/pages/master-data/flock/form/FlockForm.tsx b/src/components/pages/master-data/flock/form/FlockForm.tsx
index cc227fa6..2a2193ec 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.tsx
+++ b/src/components/pages/master-data/flock/form/FlockForm.tsx
@@ -1,11 +1,15 @@
-'use client'
+'use client';
 
 import { useModal } from '@/components/Modal';
 import { FlockApi } from '@/services/api/master-data';
 import { Flock } from '@/types/api/master-data/flock';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from '@/components/pages/master-data/flock/form/FlockForm.schema';
+import {
+  FlockFormSchema,
+  FlockFormValues,
+  UpdateFlockFormSchema,
+} from '@/components/pages/master-data/flock/form/FlockForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -48,7 +52,8 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
   const formik = useFormik<FlockFormValues>({
     initialValues: formikInitialValue,
     enableReinitialize: true,
-    validationSchema: formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
+    validationSchema:
+      formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
     onSubmit: async (values) => {
       // reset error message
       setFlockFormErrorMessage('');
diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
index 102bb812..d28f7d7b 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
@@ -1,10 +1,14 @@
 import * as Yup from 'yup';
 
 export const ProductCategoryFormSchema = Yup.object({
-  code: Yup.string().required('Kode wajib diisi!').max(3, 'Kode kategori produk melebihi 3 karakter!'),
+  code: Yup.string()
+    .required('Kode wajib diisi!')
+    .max(3, 'Kode kategori produk melebihi 3 karakter!'),
   name: Yup.string().required('Nama wajib diisi!'),
 });
 
 export const UpdateProductCategoryFormSchema = ProductCategoryFormSchema;
 
-export type ProductCategoryFormValues = Yup.InferType<typeof ProductCategoryFormSchema>;
\ No newline at end of file
+export type ProductCategoryFormValues = Yup.InferType<
+  typeof ProductCategoryFormSchema
+>;
diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
index 453670f3..a11a9992 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx
@@ -30,7 +30,10 @@ interface ProductCategoryFormProps {
   initialValues?: ProductCategory;
 }
 
-const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFormProps) => {
+const ProductCategoryForm = ({
+  type = 'add',
+  initialValues,
+}: ProductCategoryFormProps) => {
   const router = useRouter();
   const deleteModal = useModal();
 
@@ -77,7 +80,10 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
 
   const formik = useFormik<ProductCategoryFormValues>({
     initialValues: formikInitialValues,
-    validationSchema: type === 'edit' ? UpdateProductCategoryFormSchema : ProductCategoryFormSchema,
+    validationSchema:
+      type === 'edit'
+        ? UpdateProductCategoryFormSchema
+        : ProductCategoryFormSchema,
     onSubmit: async (values) => {
       setFormErrorMessage('');
 
@@ -91,7 +97,10 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
           await createProductCategoryHandler(payload);
           break;
         case 'edit':
-          await updateProductCategoryHandler(initialValues?.id as number, payload);
+          await updateProductCategoryHandler(
+            initialValues?.id as number,
+            payload
+          );
           break;
       }
     },
@@ -263,4 +272,4 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
   );
 };
 
-export default ProductCategoryForm;
\ No newline at end of file
+export default ProductCategoryForm;
diff --git a/src/components/pages/master-data/product/form/ProductForm.schema.ts b/src/components/pages/master-data/product/form/ProductForm.schema.ts
index eea9abf7..9e4297e1 100644
--- a/src/components/pages/master-data/product/form/ProductForm.schema.ts
+++ b/src/components/pages/master-data/product/form/ProductForm.schema.ts
@@ -5,49 +5,50 @@ export const ProductFormSchema = Yup.object({
   brand: Yup.string().required('Merek wajib diisi!'),
   sku: Yup.string().required('SKU wajib diisi!'),
   uom: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
-  uom_id: Yup.number().required('Satuan wajib diisi!').typeError('Satuan wajib diisi!'),
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  uom_id: Yup.number()
+    .required('Satuan wajib diisi!')
+    .typeError('Satuan wajib diisi!'),
   product_category: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
   product_category_id: Yup.number()
-      .required('Kategori produk wajib diisi!')
-      .typeError('Kategori produk wajib diisi!'),
+    .required('Kategori produk wajib diisi!')
+    .typeError('Kategori produk wajib diisi!'),
   product_price: Yup.number()
-      .required('Harga produk wajib diisi!')
-      .typeError('Harga produk wajib diisi!')
-      .min(0, 'Harga produk tidak boleh kurang dari 0!'),
+    .required('Harga produk wajib diisi!')
+    .typeError('Harga produk wajib diisi!')
+    .min(0, 'Harga produk tidak boleh kurang dari 0!'),
   selling_price: Yup.number()
-      .required('Harga jual wajib diisi!')
-      .typeError('Harga jual wajib diisi!')
-      .min(0, 'Harga jual tidak boleh kurang dari 0!'),
+    .required('Harga jual wajib diisi!')
+    .typeError('Harga jual wajib diisi!')
+    .min(0, 'Harga jual tidak boleh kurang dari 0!'),
   tax: Yup.number()
-      .required('Pajak wajib diisi!')
-      .typeError('Pajak wajib diisi!')
-      .min(0, 'Pajak tidak boleh kurang dari 0!')
-      .max(100, 'Pajak tidak boleh lebih dari 100%!'),
+    .required('Pajak wajib diisi!')
+    .typeError('Pajak wajib diisi!')
+    .min(0, 'Pajak tidak boleh kurang dari 0!')
+    .max(100, 'Pajak tidak boleh lebih dari 100%!'),
   expiry_period: Yup.number()
-      .required('Periode kadaluarsa wajib diisi!')
-      .typeError('Periode kadaluarsa wajib diisi!')
-      .min(0, 'Periode kadaluarsa tidak boleh kurang dari 0!'),
+    .required('Periode kadaluarsa wajib diisi!')
+    .typeError('Periode kadaluarsa wajib diisi!')
+    .min(0, 'Periode kadaluarsa tidak boleh kurang dari 0!'),
   supplier: Yup.object({
-            value: Yup.number().min(1).required(),
-            label: Yup.string().required(),
-         }).nullable(),
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
   supplier_ids: Yup.array()
-      .of(Yup.number().typeError('Supplier tidak valid!'))
-      .min(1, 'Minimal harus ada 1 supplier!')
-      .required('Supplier wajib diisi!'),
+    .of(Yup.number().typeError('Supplier tidak valid!'))
+    .min(1, 'Minimal harus ada 1 supplier!')
+    .required('Supplier wajib diisi!'),
   flags: Yup.array()
-      .of(Yup.string())
-      .min(1, 'Minimal harus ada 1 flag!')
-      .required('Flag wajib diisi!'),
+    .of(Yup.string())
+    .min(1, 'Minimal harus ada 1 flag!')
+    .required('Flag wajib diisi!'),
 });
 
 export const UpdateProductFormSchema = ProductFormSchema;
 
 export type ProductFormValues = Yup.InferType<typeof ProductFormSchema>;
-
diff --git a/src/components/pages/master-data/product/form/ProductForm.tsx b/src/components/pages/master-data/product/form/ProductForm.tsx
index 02afbfc9..d08ffe27 100644
--- a/src/components/pages/master-data/product/form/ProductForm.tsx
+++ b/src/components/pages/master-data/product/form/ProductForm.tsx
@@ -24,7 +24,12 @@ import {
   CreateProductPayload,
   UpdateProductPayload,
 } from '@/types/api/master-data/product';
-import { UomApi, ProductCategoryApi, SupplierApi, ProductApi } from '@/services/api/master-data';
+import {
+  UomApi,
+  ProductCategoryApi,
+  SupplierApi,
+  ProductApi,
+} from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { PRODUCT_FLAG_OPTIONS } from '@/config/constant';
 
@@ -67,30 +72,37 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     [router]
   );
 
-  const formikInitialValues = useMemo<ProductFormValues>(() => ({
-    name: initialValues?.name ?? '',
-    brand: initialValues?.brand ?? '',
-    sku: initialValues?.sku ?? '',
-    uom: initialValues?.uom
-      ? { value: initialValues.uom.id, label: initialValues.uom.name }
-      : null,
-    uom_id: initialValues?.uom?.id ?? 0,
-    product_category: initialValues?.product_category
-      ? { value: initialValues.product_category.id, label: initialValues.product_category.name }
-      : null,
-    product_category_id: initialValues?.product_category?.id ?? 0,
-    product_price: initialValues?.product_price ?? 0,
-    selling_price: initialValues?.selling_price ?? 0,
-    tax: initialValues?.tax ?? 0,
-    expiry_period: initialValues?.expiry_period ?? 0,
-    supplier: null, // not used for payload, just for UI
-    supplier_ids: initialValues?.suppliers?.map(s => s.id) ?? [],
-    flags: initialValues?.flags ?? [],
-  }), [initialValues]);
+  const formikInitialValues = useMemo<ProductFormValues>(
+    () => ({
+      name: initialValues?.name ?? '',
+      brand: initialValues?.brand ?? '',
+      sku: initialValues?.sku ?? '',
+      uom: initialValues?.uom
+        ? { value: initialValues.uom.id, label: initialValues.uom.name }
+        : null,
+      uom_id: initialValues?.uom?.id ?? 0,
+      product_category: initialValues?.product_category
+        ? {
+            value: initialValues.product_category.id,
+            label: initialValues.product_category.name,
+          }
+        : null,
+      product_category_id: initialValues?.product_category?.id ?? 0,
+      product_price: initialValues?.product_price ?? 0,
+      selling_price: initialValues?.selling_price ?? 0,
+      tax: initialValues?.tax ?? 0,
+      expiry_period: initialValues?.expiry_period ?? 0,
+      supplier: null, // not used for payload, just for UI
+      supplier_ids: initialValues?.suppliers?.map((s) => s.id) ?? [],
+      flags: initialValues?.flags ?? [],
+    }),
+    [initialValues]
+  );
 
   const formik = useFormik<ProductFormValues>({
     initialValues: formikInitialValues,
-    validationSchema: type === 'edit' ? UpdateProductFormSchema : ProductFormSchema,
+    validationSchema:
+      type === 'edit' ? UpdateProductFormSchema : ProductFormSchema,
     onSubmit: async (values) => {
       setProductFormErrorMessage('');
       const payload: CreateProductPayload = {
@@ -103,8 +115,12 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
         selling_price: values.selling_price,
         tax: values.tax,
         expiry_period: values.expiry_period,
-        supplier_ids: (values.supplier_ids ?? []).filter((id): id is number => typeof id === 'number'),
-        flags: (values.flags ?? []).filter((f): f is string => typeof f === 'string'),
+        supplier_ids: (values.supplier_ids ?? []).filter(
+          (id): id is number => typeof id === 'number'
+        ),
+        flags: (values.flags ?? []).filter(
+          (f): f is string => typeof f === 'string'
+        ),
       };
       switch (type) {
         case 'add':
@@ -122,7 +138,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   // UOM
   const [uomSelectInputValue, setUomSelectInputValue] = useState('');
   const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({ search: uomSelectInputValue ?? '' }).toString()}`;
-  const { data: uoms, isLoading: isLoadingUoms } = useSWR(uomsUrl, UomApi.getAllFetcher);
+  const { data: uoms, isLoading: isLoadingUoms } = useSWR(
+    uomsUrl,
+    UomApi.getAllFetcher
+  );
   const uomOptions = isResponseSuccess(uoms)
     ? uoms?.data.map((uom) => ({ value: uom.id, label: uom.name }))
     : [];
@@ -136,7 +155,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   // Product Category
   const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
   const categoriesUrl = `${ProductCategoryApi.basePath}?${new URLSearchParams({ search: categorySelectInputValue ?? '' }).toString()}`;
-  const { data: categories, isLoading: isLoadingCategories } = useSWR(categoriesUrl, ProductCategoryApi.getAllFetcher);
+  const { data: categories, isLoading: isLoadingCategories } = useSWR(
+    categoriesUrl,
+    ProductCategoryApi.getAllFetcher
+  );
   const categoryOptions = isResponseSuccess(categories)
     ? categories?.data.map((cat) => ({ value: cat.id, label: cat.name }))
     : [];
@@ -150,16 +172,22 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   // Supplier (multi select)
   const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
   const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue ?? '' }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(suppliersUrl, SupplierApi.getAllFetcher);
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    suppliersUrl,
+    SupplierApi.getAllFetcher
+  );
   const supplierOptions = isResponseSuccess(suppliers)
-      ? suppliers?.data
-          .filter((sup) => sup.category === 'SAPRONAK')
-          .map((sup) => ({ value: sup.id, label: sup.name }))
-      : [];
+    ? suppliers?.data
+        .filter((sup) => sup.category === 'SAPRONAK')
+        .map((sup) => ({ value: sup.id, label: sup.name }))
+    : [];
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     const arr = Array.isArray(val) ? val : val ? [val] : [];
     formik.setFieldTouched('supplier_ids', true);
-    formik.setFieldValue('supplier_ids', arr.map((v) => (v as OptionType).value));
+    formik.setFieldValue(
+      'supplier_ids',
+      arr.map((v) => (v as OptionType).value)
+    );
   };
 
   const deleteProductClickHandler = () => {
@@ -260,7 +288,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               options={categoryOptions}
               onInputChange={setCategorySelectInputValue}
               isLoading={isLoadingCategories}
-              isError={formik.touched.product_category_id && Boolean(formik.errors.product_category_id)}
+              isError={
+                formik.touched.product_category_id &&
+                Boolean(formik.errors.product_category_id)
+              }
               errorMessage={formik.errors.product_category_id as string}
               isDisabled={type === 'detail'}
               isClearable
@@ -274,7 +305,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               value={formik.values.product_price}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.product_price && Boolean(formik.errors.product_price)}
+              isError={
+                formik.touched.product_price &&
+                Boolean(formik.errors.product_price)
+              }
               errorMessage={formik.errors.product_price as string}
               readOnly={type === 'detail'}
             />
@@ -287,7 +321,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               value={formik.values.selling_price}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.selling_price && Boolean(formik.errors.selling_price)}
+              isError={
+                formik.touched.selling_price &&
+                Boolean(formik.errors.selling_price)
+              }
               errorMessage={formik.errors.selling_price as string}
               readOnly={type === 'detail'}
             />
@@ -313,7 +350,10 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               value={formik.values.expiry_period}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.expiry_period && Boolean(formik.errors.expiry_period)}
+              isError={
+                formik.touched.expiry_period &&
+                Boolean(formik.errors.expiry_period)
+              }
               errorMessage={formik.errors.expiry_period as string}
               readOnly={type === 'detail'}
             />
@@ -321,12 +361,17 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               required
               label='Supplier'
               isMulti
-              value={supplierOptions.filter(opt => formik.values.supplier_ids.includes(opt.value))}
+              value={supplierOptions.filter((opt) =>
+                formik.values.supplier_ids.includes(opt.value)
+              )}
               onChange={supplierChangeHandler}
               options={supplierOptions}
               onInputChange={setSupplierSelectInputValue}
               isLoading={isLoadingSuppliers}
-              isError={formik.touched.supplier_ids && Boolean(formik.errors.supplier_ids)}
+              isError={
+                formik.touched.supplier_ids &&
+                Boolean(formik.errors.supplier_ids)
+              }
               errorMessage={formik.errors.supplier_ids as string}
               isDisabled={type === 'detail'}
               isClearable
@@ -335,10 +380,15 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               required
               label='Flags'
               isMulti
-              value={PRODUCT_FLAG_OPTIONS.filter(opt => formik.values.flags.includes(opt.value))}
-              onChange={val => {
+              value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
+                formik.values.flags.includes(opt.value)
+              )}
+              onChange={(val) => {
                 const arr = Array.isArray(val) ? val : val ? [val] : [];
-                formik.setFieldValue('flags', arr.map((v) => (v as OptionType).value));
+                formik.setFieldValue(
+                  'flags',
+                  arr.map((v) => (v as OptionType).value)
+                );
               }}
               options={PRODUCT_FLAG_OPTIONS}
               isError={formik.touched.flags && Boolean(formik.errors.flags)}
@@ -435,4 +485,4 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   );
 };
 
-export default ProductForm;
\ No newline at end of file
+export default ProductForm;
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
index 44d15478..12c70b1c 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.schema.ts
@@ -1,41 +1,44 @@
 import * as Yup from 'yup';
 
 export const SupplierFormSchema = Yup.object({
-    name: Yup.string().required('Nama wajib diisi!'),
-    alias: Yup.string()
-    .matches(/^[A-Za-z0-9]+$/, 'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!')
+  name: Yup.string().required('Nama wajib diisi!'),
+  alias: Yup.string()
+    .matches(
+      /^[A-Za-z0-9]+$/,
+      'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!'
+    )
     .max(5, 'Alias maksimal 5 karakter!')
     .required('Alias wajib diisi!'),
-    pic: Yup.string().required('PIC wajib diisi!'),
-    type: Yup.object({
-        value: Yup.string().required(),
-        label: Yup.string().required(),
-      })
-        .required('Tipe wajib diisi!'),
-    category: Yup.object({
-        value: Yup.string().required(),
-        label: Yup.string().required(),
-      })
-        .required('Tipe wajib diisi!'),
-    hatchery: Yup.string().required('Hatchery wajib diisi!'),
-    phone: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
-        .min(10, 'Nomor telepon minimal 10 digit!')
-        .max(12, 'Nomor telepon maksimal 12 digit!')
-        .required('Nomor telepon wajib diisi!'),
-    email: Yup.string()
-        .email('Format email tidak valid!')
-        .required('Email wajib diisi!'),
-    address: Yup.string().required('Alamat wajib diisi!'),
-    npwp: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
-        .required('Nomor NPWP wajib diisi!'),
-    account_number: Yup.string()
-        .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
-        .required('Nomor rekening wajib diisi!'),
-    due_date: Yup.number().min(1, 'Tanggal jatuh tempo wajib diisi!').required('Tanggal jatuh tempo wajib diisi!'),
+  pic: Yup.string().required('PIC wajib diisi!'),
+  type: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  }).required('Tipe wajib diisi!'),
+  category: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  }).required('Tipe wajib diisi!'),
+  hatchery: Yup.string().required('Hatchery wajib diisi!'),
+  phone: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
+    .min(10, 'Nomor telepon minimal 10 digit!')
+    .max(12, 'Nomor telepon maksimal 12 digit!')
+    .required('Nomor telepon wajib diisi!'),
+  email: Yup.string()
+    .email('Format email tidak valid!')
+    .required('Email wajib diisi!'),
+  address: Yup.string().required('Alamat wajib diisi!'),
+  npwp: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
+    .required('Nomor NPWP wajib diisi!'),
+  account_number: Yup.string()
+    .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
+    .required('Nomor rekening wajib diisi!'),
+  due_date: Yup.number()
+    .min(1, 'Tanggal jatuh tempo wajib diisi!')
+    .required('Tanggal jatuh tempo wajib diisi!'),
 });
 
 export const UpdateSupplierFormSchema = SupplierFormSchema;
 
-export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;
\ No newline at end of file
+export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.tsx b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
index e400ead2..da69a52e 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.tsx
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
@@ -41,7 +41,9 @@ const SupplierForm = ({
   // Setup State
   const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<OptionType[]>([]);
+  const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<
+    OptionType[]
+  >([]);
 
   // -- Options data mapping
   const typeOptions = TYPE_OPTIONS;
@@ -167,7 +169,7 @@ const SupplierForm = ({
   // Initialize Formik
   useEffect(() => {
     formikSetValues(formikInitialValues);
-    if(formType != 'add'){
+    if (formType != 'add') {
       const hatcheryArrays = formikInitialValues.hatchery.split(',');
       const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
         value: item,
@@ -177,11 +179,13 @@ const SupplierForm = ({
     }
   }, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
   useEffect(() => {
-    const commaSeparatedValues = hatcheryOptionsValues.map((item) => item.value).join(',');
+    const commaSeparatedValues = hatcheryOptionsValues
+      .map((item) => item.value)
+      .join(',');
     formikSetValues({
       ...formik.values,
       hatchery: commaSeparatedValues,
-    })
+    });
   }, [hatcheryOptionsValues, formikSetValues]);
 
   // Option Handler
@@ -305,7 +309,9 @@ const SupplierForm = ({
                 console.log(val); // pastikan val = array of { value, label }
                 setHatcheryOptionValues(val as OptionType[]);
               }}
-              isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
+              isError={
+                formik.touched.hatchery && Boolean(formik.errors.hatchery)
+              }
               errorMessage={formik.errors.hatchery as string}
               isDisabled={formType === 'detail'}
               isClearable
diff --git a/src/components/pages/production/chickin/form/ChickinForm.schema.ts b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
index 42d3b6ea..606c6583 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.schema.ts
+++ b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
@@ -3,9 +3,11 @@ import * as Yup from 'yup';
 export const ChickinFormSchema = Yup.object({
   chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
   note: Yup.string().required('Catatan wajib diisi!'),
-  quantity: Yup.number().min(1, 'Jumlah wajib diisi!').required('Jumlah wajib diisi!'),
-})
+  quantity: Yup.number()
+    .min(1, 'Jumlah wajib diisi!')
+    .required('Jumlah wajib diisi!'),
+});
 
 export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
 
-export const UpdateChickinFormSchema = ChickinFormSchema;
\ No newline at end of file
+export const UpdateChickinFormSchema = ChickinFormSchema;
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
index 162282fb..8607a7e6 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -24,7 +24,8 @@ export const ProjectFlockFormSchema = Yup.object({
     value: Yup.string().required('Nilai Kategori wajib diisi!'),
     label: Yup.string().required('Label Kategori wajib diisi!'),
   }).nullable(),
-  category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
+  category: Yup.string()
+    .oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
     .required('Kategori wajib diisi!'),
 
   // FCR
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 14eee9b7..999fdfcb 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -79,9 +79,8 @@ const ProjectFlockForm = ({
   const [isApprovedDisabled, setIsApprovedDisabled] = useState(
     initialValues?.approval.step_name == 'Pengajuan' ? false : true
   );
-  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
-    !isApprovedDisabled
-  );
+  const [isRejectedDisabled, setIsRejectedDisabled] =
+    useState(!isApprovedDisabled);
   const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
     !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
   );
@@ -143,10 +142,11 @@ const ProjectFlockForm = ({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
   }).toString()}`;
-  const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
-    kandangUrl,
-    KandangApi.getAllFetcher
-  );
+  const {
+    data: kandang,
+    isLoading: isLoadingKandang,
+    mutate: refreshKandang,
+  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
   const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
 
@@ -207,10 +207,7 @@ const ProjectFlockForm = ({
       setOpenSelectKandangs(true);
 
       const newRowSelection = Object.fromEntries(
-        initialValues.kandangs.map((k: Kandang) => [
-          k.id.toString(),
-          true,
-        ])
+        initialValues.kandangs.map((k: Kandang) => [k.id.toString(), true])
       );
       setRowSelection(newRowSelection);
     }
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
index bf930eec..f0cfbe11 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -38,10 +38,13 @@ const ProjectFlockKandangTable = ({
 
             const allSelected =
               selectableRows.every((row) => row.getIsSelected()) &&
-              selectableRows.length != 0 && formType != 'detail';
+              selectableRows.length != 0 &&
+              formType != 'detail';
 
             const someSelected =
-              selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
+              selectableRows.some((row) => row.getIsSelected()) &&
+              !allSelected &&
+              formType != 'detail';
 
             const toggleSelectableRows = () => {
               const shouldSelect = !allSelected;
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 6018ae84..2f08aaba 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(() => {
@@ -487,7 +487,9 @@ 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.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+      const value =
+        parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) ||
+        0;
       handleChickenWeightChange(idx, value);
     },
     [handleChickenWeightChange]
@@ -495,7 +497,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleChickenCountChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+      const value =
+        parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) ||
+        0;
       handleChickenCountChange(idx, value);
     },
     [handleChickenCountChange]
@@ -503,7 +507,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const handleAverageWeightChangeWrapper = useCallback(
     (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) || 0;
+      const value =
+        parseFloat(e.target.value.replace(/[^\d,.-]/g, '').replace(/,/g, '')) ||
+        0;
       handleAverageWeightChange(idx, value);
     },
     [handleAverageWeightChange]
@@ -698,8 +704,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,74 +787,26 @@ 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
-                        }
-                        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}`}>
+                  <tr>
                     {type !== 'detail' && (
-                      <td className="!align-middle">
+                      <th>
                         <CheckboxInput
-                          name={`feed-${idx}`}
-                          checked={selectedFeed.includes(idx)}
+                          name='select-all-feed'
+                          checked={
+                            formik.values.feed_data?.length ===
+                              selectedFeed.length &&
+                            formik.values.feed_data?.length > 0
+                          }
                           onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>,
+                            e: React.ChangeEvent<HTMLInputElement>
                           ) => {
                             if (e.target.checked) {
-                              setSelectedFeed([...selectedFeed, idx]);
-                            } else {
                               setSelectedFeed(
-                                selectedFeed.filter((i) => i !== idx),
+                                formik.values.feed_data?.map((_, idx) => idx) ??
+                                  []
                               );
+                            } else {
+                              setSelectedFeed([]);
                             }
                           }}
                           classNames={{
@@ -856,127 +814,175 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             checkbox: 'checkbox checkbox-sm',
                           }}
                         />
-                      </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
-                            ) ?? '')
-                            : '';
-
-                          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`,
-                              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>
-                    <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}
-                        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>
+                      </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>
+                            ) => {
+                              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>
+                        <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(`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`,
+                                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>
+                      <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}
+                          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>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -1022,171 +1028,115 @@ 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
-                          }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedWeight(
-                                formik.values.body_weight?.map(
-                                  (_, idx) => idx
-                                ) ?? []
-                              );
-                            } else {
-                              setSelectedWeight([]);
+                  <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
                             }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center items-center h-full',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </div>
+                            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'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
                     </th>
-                  )}
-                  <th>
-                    Berat (Gram)
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
+                    <th>
+                      Jumlah Ayam
+                      <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>
+                      Rata-rata berat 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>
+                    </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>
-                      <NumberInput
-                        required
-                        name={`body_weight.${idx}.chicken_weight`}
-                        value={weight.chicken_weight}
-                        onChange={handleChickenWeightChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        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}
-                        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'>
+                  {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}.average_chicken_weight`}
-                          value={weight.average_chicken_weight || ''}
-                          onChange={handleAverageWeightChangeWrapper(idx)}
+                          name={`body_weight.${idx}.chicken_weight`}
+                          value={weight.chicken_weight}
+                          onChange={handleChickenWeightChangeWrapper(idx)}
                           onBlur={formik.handleBlur}
                           thousandSeparator=','
                           decimalSeparator='.'
                           isError={
                             isRepeaterInputError(
                               'body_weight',
-                              'average_chicken_weight',
+                              'chicken_weight',
                               idx
                             ).isError
                           }
                           errorMessage={
                             isRepeaterInputError(
                               'body_weight',
-                              'average_chicken_weight',
+                              'chicken_weight',
                               idx
                             ).errorMessage
                           }
@@ -1194,29 +1144,86 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           className={{
                             wrapper: 'w-full min-w-24',
                           }}
-                          placeholder=''
                         />
-                      </div>
-                    </td>
-                    {type !== 'detail' && (
+                      </td>
                       <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>
+                        <NumberInput
+                          required
+                          name={`body_weight.${idx}.chicken_count`}
+                          value={weight.chicken_count}
+                          onChange={handleChickenCountChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          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}
+                            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>
                       </td>
-                    )}
-                  </tr>
-                ))}
+                      {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>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -1262,221 +1269,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
-                          }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedVaccine(
-                                formik.values.vaccination?.map(
-                                  (_, idx) => idx
-                                ) ?? []
-                              );
-                            } else {
-                              setSelectedVaccine([]);
+                  <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
                             }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center items-center h-full',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </div>
+                            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'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
                     </th>
-                  )}
-                  <th>
-                    Name Vaksin
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
+                    <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>
-                  <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),
+                  {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(
+                              `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);
                           }}
-                          classNames={{
-                            wrapper: 'flex justify-center',
-                            checkbox: 'checkbox checkbox-sm',
+                          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>
-                      <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
-                            ? ''
-                            : 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}
-                        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>
+                        <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>
-                    )}
-                  </tr>
-                ))}
+                      <td>
+                        <NumberInput
+                          required
+                          name={`vaccination.${idx}.used_stock`}
+                          value={vaccine.used_stock}
+                          onChange={handleVaccinationStockChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          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>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -1522,162 +1532,163 @@ 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
-                          }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedMortality(
-                                formik.values.mortality?.map(
-                                  (_, idx) => idx
-                                ) ?? []
-                              );
-                            } else {
-                              setSelectedMortality([]);
+                  <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
                             }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center items-center h-full',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </div>
+                            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'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
                     </th>
-                  )}
-                  <th>
-                    Kondisi/Alasan Mortalitas
-                    <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
-                    >
+                    <th>
+                      Jumlah
+                      <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>
+                    </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),
-                              );
-                            }
+                  {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
+                            );
                           }}
-                          classNames={{
-                            wrapper: 'flex justify-center',
-                            checkbox: 'checkbox checkbox-sm',
+                          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>
-                      <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={handleMortalityCountChangeWrapper(idx)}
-                        onBlur={formik.handleBlur}
-                        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>
-                        <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>
+                        <NumberInput
+                          required
+                          name={`mortality.${idx}.count`}
+                          value={mortality.count}
+                          onChange={handleMortalityCountChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          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>
-                    )}
-                  </tr>
-                ))}
+                      {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>
+                  ))}
                 </tbody>
               </table>
             </div>
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
index a1ec603a..b44a499e 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -320,9 +320,8 @@ const TransferToLayingsTable = () => {
   const confirmationModalApproveClickHandler = async () => {
     setIsApproveLoading(true);
 
-    const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
-      selectedRowIds
-    );
+    const bulkApproveResponse =
+      await TransferToLayingApi.bulkApprove(selectedRowIds);
 
     if (isResponseSuccess(bulkApproveResponse)) {
       refreshTransferToLayings();
@@ -350,9 +349,8 @@ const TransferToLayingsTable = () => {
   const confirmationModalRejectClickHandler = async () => {
     setIsRejectLoading(true);
 
-    const bulkRejectResponse = await TransferToLayingApi.bulkReject(
-      selectedRowIds
-    );
+    const bulkRejectResponse =
+      await TransferToLayingApi.bulkReject(selectedRowIds);
 
     if (isResponseSuccess(bulkRejectResponse)) {
       refreshTransferToLayings();
@@ -477,7 +475,9 @@ const TransferToLayingsTable = () => {
               placeholder='Cari TransferToLaying'
               value={tableFilterState.search}
               onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
+              className={{
+                wrapper: 'sm:max-w-3xs',
+              }}
             />
           </div>
 
@@ -490,7 +490,9 @@ const TransferToLayingsTable = () => {
               placeholder='Masukkan tanggal transfer'
               value={tableFilterState.transferDate}
               onChange={transferDateChangeHandler}
-              className={{ wrapper: 'col-span-12 sm:col-span-3' }}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
             />
 
             <SelectInput
diff --git a/src/services/api/base.ts b/src/services/api/base.ts
index 5ccabdd7..2fcf3712 100644
--- a/src/services/api/base.ts
+++ b/src/services/api/base.ts
@@ -105,10 +105,13 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
 
       const url = options?.params
         ? `${urlBase}?${new URLSearchParams(
-            Object.entries(options.params).reduce((acc, [key, value]) => {
-              if (value !== undefined) acc[key] = String(value);
-              return acc;
-            }, {} as Record<string, string>)
+            Object.entries(options.params).reduce(
+              (acc, [key, value]) => {
+                if (value !== undefined) acc[key] = String(value);
+                return acc;
+              },
+              {} as Record<string, string>
+            )
           )}`
         : urlBase;
 
diff --git a/src/services/api/master-data.ts b/src/services/api/master-data.ts
index 854bb8f3..66df717a 100644
--- a/src/services/api/master-data.ts
+++ b/src/services/api/master-data.ts
@@ -140,4 +140,4 @@ export const FlockApi = new BaseApiService<
   Flock,
   CreateFlockPayload,
   UpdateFlockPayload
->('/master-data/flocks');
\ No newline at end of file
+>('/master-data/flocks');
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 1ccf4a6e..6d33af07 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -29,4 +29,4 @@ export const ChickinApi = new BaseApiService<
   Chickin,
   CreateChickinPayload,
   UpdateChickinPayload
->('/production/chickins');
\ No newline at end of file
+>('/production/chickins');
diff --git a/src/types/api/master-data/customer.d.ts b/src/types/api/master-data/customer.d.ts
index fa133cab..bdb45b05 100644
--- a/src/types/api/master-data/customer.d.ts
+++ b/src/types/api/master-data/customer.d.ts
@@ -1,27 +1,27 @@
-import { BaseMetadata, CreatedUser } from "@/types/api/api-general";
+import { BaseMetadata, CreatedUser } from '@/types/api/api-general';
 
 export type BaseCustomer = {
-    id: number;
-    name: string;
-    pic_id: number;
-    pic: CreatedUser;
-    type: string;
-    address: string;
-    phone: string;
-    email: string;
-    account_number: string;
-}
+  id: number;
+  name: string;
+  pic_id: number;
+  pic: CreatedUser;
+  type: string;
+  address: string;
+  phone: string;
+  email: string;
+  account_number: string;
+};
 
 export type Customer = BaseMetadata & BaseCustomer;
 
 export type CreateCustomerPayload = {
-    name: string;
-    pic_id: number;
-    type: string;
-    address: string;
-    phone: string;
-    email: string;
-    account_number: string;
-}
+  name: string;
+  pic_id: number;
+  type: string;
+  address: string;
+  phone: string;
+  email: string;
+  account_number: string;
+};
 
-export type UpdateCustomerPayload = CreateCustomerPayload;
\ No newline at end of file
+export type UpdateCustomerPayload = CreateCustomerPayload;
diff --git a/src/types/api/master-data/product.d.ts b/src/types/api/master-data/product.d.ts
index d4039750..e82f857e 100644
--- a/src/types/api/master-data/product.d.ts
+++ b/src/types/api/master-data/product.d.ts
@@ -34,4 +34,4 @@ export type CreateProductPayload = {
   flags: string[];
 };
 
-export type UpdateProductPayload = CreateProductPayload;
\ No newline at end of file
+export type UpdateProductPayload = CreateProductPayload;
diff --git a/src/types/api/master-data/supplier.d.ts b/src/types/api/master-data/supplier.d.ts
index e6998a25..3782cddb 100644
--- a/src/types/api/master-data/supplier.d.ts
+++ b/src/types/api/master-data/supplier.d.ts
@@ -1,38 +1,38 @@
 import { BaseMetadata } from '@/types/api/api-general';
 
 export type BaseSupplier = {
-    id: number;
-    name: string;
-    alias: string;
-    pic: string;
-    type: string;
-    category: string;
-    hatchery: string;
-    phone: string;
-    email: string;
-    address: string;
-    npwp: string;
-    account_number: string;
-    due_date: number;
-    balance?: number;
-}
+  id: number;
+  name: string;
+  alias: string;
+  pic: string;
+  type: string;
+  category: string;
+  hatchery: string;
+  phone: string;
+  email: string;
+  address: string;
+  npwp: string;
+  account_number: string;
+  due_date: number;
+  balance?: number;
+};
 
 export type Supplier = BaseMetadata & BaseSupplier;
 
 export type CreateSupplierPayload = {
-    name: string;
-    alias: string;
-    pic: string;
-    type: string;
-    category: string;
-    hatchery: string;
-    phone: string;
-    email: string;
-    address: string;
-    npwp: string;
-    account_number: string;
-    due_date: number;
-    balance?: number;
-}
+  name: string;
+  alias: string;
+  pic: string;
+  type: string;
+  category: string;
+  hatchery: string;
+  phone: string;
+  email: string;
+  address: string;
+  npwp: string;
+  account_number: string;
+  due_date: number;
+  balance?: number;
+};
 
-export type UpdateSupplierPayload = CreateSupplierPayload;
\ No newline at end of file
+export type UpdateSupplierPayload = CreateSupplierPayload;
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index 99d24922..3f5263a6 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -1,5 +1,5 @@
-import { BaseApproval, BaseMetadata } from "@/types/api/api-general";
-import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
 export type BaseChickin = {
   id?: number;
@@ -8,7 +8,7 @@ export type BaseChickin = {
   note?: string;
   project_flock_kandang?: ProjectFlockKandang;
   approval: BaseApproval;
-}
+};
 
 export type Chickin = BaseMetadata & BaseChickin;
 
@@ -17,7 +17,7 @@ export type CreateChickinPayload = {
   chick_in_date: string;
   note: string;
   quantity?: number;
-}
+};
 
 export type UpdateChickinPayload = CreateChickinPayload & {
   id: number;
@@ -26,4 +26,4 @@ export type UpdateChickinPayload = CreateChickinPayload & {
 export type ChickinApprovalPayload = {
   action: 'APPROVED' | 'REJECTED';
   approvable_ids: number[];
-};
\ No newline at end of file
+};
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index 83a1c18f..25c1c153 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -1,5 +1,5 @@
-import { Kandang } from "@/type/master-data/kandang";
-import { ProjectFlock } from "@/types/api/production/project-flock";
+import { Kandang } from '@/type/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 
 export type BaseProjectFlockKandang = {
   id: number;
@@ -8,11 +8,11 @@ export type BaseProjectFlockKandang = {
   kandang: Kandang;
   project_flock: ProjectFlock;
   available_quantity?: number;
-}
+};
 
 export type ProjectFlockKandang = BaseProjectFlockKandang;
 
 export type LookupProjectFlockKandangPayload = {
   project_flock_id: number;
   kandang_id: number;
-}
\ No newline at end of file
+};

From 3eb2930640d7408870ffecf33be0ccba5092cd75 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 3 Nov 2025 10:09:12 +0700
Subject: [PATCH 199/212] refactor(FE-238-106): change dateinput and create
 chickin page

---
 package-lock.json                             |  44 +++
 package.json                                  |   1 +
 .../production/chickin/add/kandang/layout.tsx |  11 +
 .../production/chickin/add/kandang/page.tsx   |  15 +
 src/app/production/chickin/add/page.tsx       | 295 +++++++++++++-----
 src/components/Modal.tsx                      |  61 ++--
 src/components/input/DateInput.tsx            | 283 +++++++++++++----
 .../project-flock/ProjectFlockTable.tsx       |  76 ++---
 8 files changed, 580 insertions(+), 206 deletions(-)
 create mode 100644 src/app/production/chickin/add/kandang/layout.tsx
 create mode 100644 src/app/production/chickin/add/kandang/page.tsx

diff --git a/package-lock.json b/package-lock.json
index e1f28d3e..b82b5c06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "moment": "^2.30.1",
         "next": "15.5.3",
         "react": "19.1.0",
+        "react-day-picker": "^9.11.1",
         "react-dom": "19.1.0",
         "react-hot-toast": "^2.6.0",
         "react-number-format": "^5.4.4",
@@ -195,6 +196,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
@@ -2872,6 +2879,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -5732,6 +5755,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.1.tgz",
+      "integrity": "sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
diff --git a/package.json b/package.json
index b371e4e7..10e8de5c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "moment": "^2.30.1",
     "next": "15.5.3",
     "react": "19.1.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
     "react-number-format": "^5.4.4",
diff --git a/src/app/production/chickin/add/kandang/layout.tsx b/src/app/production/chickin/add/kandang/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/production/chickin/add/kandang/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/production/chickin/add/kandang/page.tsx b/src/app/production/chickin/add/kandang/page.tsx
new file mode 100644
index 00000000..6f624672
--- /dev/null
+++ b/src/app/production/chickin/add/kandang/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+export default function AddChickinKandang() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  return (
+    <div>
+      <h1>Tambah Chickin untuk Kandang ID: {kandangId}</h1>
+    </div>
+  );
+}
diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
index a52dbe10..2f68e86c 100644
--- a/src/app/production/chickin/add/page.tsx
+++ b/src/app/production/chickin/add/page.tsx
@@ -2,10 +2,12 @@
 
 import Badge from '@/components/Badge';
 import Button from '@/components/Button';
+import Card from '@/components/Card';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -13,10 +15,12 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
+import { is } from 'react-day-picker/locale';
 
 import useSWR from 'swr';
 
@@ -113,21 +117,27 @@ const AddChickin = () => {
       <>
         <section className='w-full p-4'>
           <header className='flex flex-col gap-4'>
-            <Button
-              href='/production/project-flock'
-              variant='link'
-              className='w-fit p-0 text-primary'
-            >
-              <Icon icon='uil:arrow-left' width={24} height={24} />
-              Kembali
-            </Button>
+            <div className='flex flex-row justify-between items-center'>
+              <Button
+                href='/production/project-flock'
+                variant='link'
+                className='w-fit p-0 text-primary'
+              >
+                <Icon icon='uil:arrow-left' width={24} height={24} />
+                Kembali
+              </Button>
+              <h1 className='text-2xl font-semibold text-center'>
+                Daftar Kandang Project Flock
+              </h1>
+              <div></div>
+            </div>
 
             <div className='flex flex-col gap-4 w-full my-4'>
               <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
                 <SelectInput
                   required
-                  label='Project Flock'
-                  placeholder='Pilih project flock'
+                  label='Ganti Project Flock'
+                  placeholder='Pilih Project Flock'
                   options={options}
                   onInputChange={(val) => {
                     setSearchProjectFlock(val);
@@ -164,78 +174,203 @@ const AddChickin = () => {
               </div>
             </div>
           </header>
-          <Table<Kandang>
-            emptyContent={
-              <div className='w-full p-5 text-center'>
-                {projectFlockId && isResponseError(projectFlock) ? (
-                  <span className='text-lg opacity-50'>
-                    {projectFlock.message}
-                  </span>
-                ) : (
-                  <span className='text-lg opacity-50'>
-                    Pilih project flock terlebih dahulu...
-                  </span>
-                )}
-              </div>
-            }
-            data={
-              isResponseSuccess(projectFlock) ? projectFlock.data?.kandangs : []
-            }
-            columns={[
-              {
-                header: '#',
-                cell: (props) =>
-                  tableFilterState.pageSize * (tableFilterState.page - 1) +
-                  props.row.index +
-                  1,
-              },
-              {
-                accessorKey: 'name',
-                header: 'Nama Kandang',
-              },
-              {
-                header: 'Aksi',
-                cell: (props) => {
-                  return (
-                    <>
-                      <Button
-                        color='success'
-                        variant='outline'
-                        onClick={() => {
-                          handleChickinClick(props.row.original);
-                        }}
-                        disabled={isLoadingProjectFlockKandang}
-                      >
-                        <Icon
-                          icon='mdi:home-import-outline'
-                          width={24}
-                          height={24}
-                        />
-                        Chickin
-                      </Button>
-                    </>
-                  );
-                },
-              },
-            ]}
-            page={undefined}
+          <Card
+            title='Informasi Flock'
             className={{
-              containerClassName: cn({
-                'mb-20':
-                  isResponseSuccess(projectFlock) &&
-                  projectFlock.data?.kandangs?.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',
-              paginationClassName: 'hidden',
+              wrapper: 'w-full bg-white mb-3',
             }}
-          />
+          >
+            <Table<ProjectFlock>
+              emptyContent={
+                <div className='w-full p-5 text-center'>
+                  {projectFlockId && isResponseError(projectFlock) ? (
+                    <span className='text-lg opacity-50'>
+                      {projectFlock.message}
+                    </span>
+                  ) : (
+                    <span className='text-lg opacity-50'>
+                      Pilih project flock terlebih dahulu...
+                    </span>
+                  )}
+                </div>
+              }
+              data={isResponseSuccess(projectFlock) ? [projectFlock.data] : []}
+              columns={[
+                {
+                  header: 'Area',
+                  accessorKey: 'area.name',
+                },
+                {
+                  header: 'Lokasi',
+                  accessorKey: 'location.name',
+                },
+                {
+                  header: 'Nama Flock',
+                  accessorKey: 'flock.name',
+                },
+                {
+                  header: 'Kategori',
+                  accessorKey: 'category',
+                },
+                {
+                  header: 'Status',
+                  accessorKey: 'status',
+                  cell: (props) => {
+                    return props.row.original.approval.step_name ? (
+                      <PillBadge
+                        color={(() => {
+                          switch (
+                            props.row.original.approval.step_name.toUpperCase()
+                          ) {
+                            case 'AKTIF':
+                              return 'red';
+                            case 'PENGAJUAN':
+                              return 'green';
+                            default:
+                              return 'gray';
+                          }
+                        })()}
+                        content={props.row.original.approval.step_name
+                          .toLowerCase()
+                          .replace(/_/g, ' ')
+                          .replace(/\b\w/g, (char) => char.toUpperCase())}
+                      />
+                    ) : (
+                      '-'
+                    );
+                  },
+                },
+                {
+                  header: 'Periode',
+                  accessorKey: 'period',
+                },
+                {
+                  header: 'FCR Layer',
+                  accessorKey: 'fcr.name',
+                },
+              ]}
+              page={undefined}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(projectFlock) &&
+                    projectFlock.data?.kandangs?.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',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+          <Card
+            title='Daftar Chickin'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<Kandang>
+              emptyContent={
+                <div className='w-full p-5 text-center'>
+                  {projectFlockId && isResponseError(projectFlock) ? (
+                    <span className='text-lg opacity-50'>
+                      {projectFlock.message}
+                    </span>
+                  ) : (
+                    <span className='text-lg opacity-50'>
+                      Pilih project flock terlebih dahulu...
+                    </span>
+                  )}
+                </div>
+              }
+              data={
+                isResponseSuccess(projectFlock)
+                  ? projectFlock.data?.kandangs
+                  : []
+              }
+              columns={[
+                {
+                  header: '#',
+                  cell: (props) =>
+                    tableFilterState.pageSize * (tableFilterState.page - 1) +
+                    props.row.index +
+                    1,
+                },
+                {
+                  accessorFn: () =>
+                    isResponseSuccess(projectFlock)
+                      ? projectFlock.data.area.name
+                      : '',
+                  header: 'Area',
+                },
+                {
+                  accessorFn: () =>
+                    isResponseSuccess(projectFlock)
+                      ? projectFlock.data.location.name
+                      : '',
+                  header: 'Lokasi',
+                },
+                {
+                  accessorKey: 'name',
+                  header: 'Kandang',
+                },
+                {
+                  accessorKey: 'capacity',
+                  header: 'Kapasitas',
+                },
+                {
+                  accessorKey: 'pic.name',
+                  header: 'Penanggung Jawab',
+                },
+                {
+                  header: 'Aksi',
+                  cell: (props) => {
+                    return (
+                      <>
+                        <Button
+                          color='success'
+                          variant='outline'
+                          onClick={() => {
+                            handleChickinClick(props.row.original);
+                          }}
+                          disabled={isLoadingProjectFlockKandang}
+                        >
+                          <Icon
+                            icon='mdi:home-import-outline'
+                            width={24}
+                            height={24}
+                          />
+                          Chickin
+                        </Button>
+                      </>
+                    );
+                  },
+                },
+              ]}
+              page={undefined}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(projectFlock) &&
+                    projectFlock.data?.kandangs?.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',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
         </section>
         <Modal ref={chickinModal.ref}>
           <div className='flex flex-row justify-between items-center'>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a84c1827..958d88dd 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,6 +1,13 @@
 'use client';
 
-import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
+import {
+  ReactNode,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { cn } from '@/lib/helper';
 
 export const useModal = () => {
@@ -8,31 +15,35 @@ export const useModal = () => {
   const [open, setOpen] = useState(false);
 
   const openModal = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.showModal();
     setOpen(true);
-
-    ref.current?.showModal();
   }, []);
 
   const closeModal = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.close();
     setOpen(false);
-    ref.current?.close();
   }, []);
 
   const toggle = useCallback(() => {
-    if (open) {
-      closeModal();
-    } else {
-      openModal();
-    }
+    open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
-  if (ref.current) {
-    ref.current.addEventListener('close', () => {
-      closeModal();
-    });
-  }
+  // Gunakan useEffect agar event listener tidak didaftarkan berulang kali
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
 
-  return { ref, open, setOpen, openModal, closeModal, toggle } as const;
+    const handleClose = () => setOpen(false);
+    dialog.addEventListener('close', handleClose);
+
+    return () => {
+      dialog.removeEventListener('close', handleClose);
+    };
+  }, []);
+
+  return { ref, open, openModal, closeModal, toggle } as const;
 };
 
 interface ModalProps {
@@ -46,15 +57,19 @@ interface ModalProps {
 }
 
 const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
-  return (
-    <dialog ref={ref} className={cn('modal', className?.modal)}>
-      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (closeOnBackdrop && e.target === ref.current) {
+      ref.current?.close();
+    }
+  };
 
-      {closeOnBackdrop && (
-        <form method='dialog' className='modal-backdrop'>
-          <button>close</button>
-        </form>
-      )}
+  return (
+    <dialog
+      ref={ref}
+      className={cn('modal', className?.modal)}
+      onClick={handleBackdropClick}
+    >
+      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
     </dialog>
   );
 };
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index 2b91b7ae..e483a861 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -4,29 +4,21 @@ import {
   ChangeEventHandler,
   FocusEventHandler,
   ReactNode,
+  useEffect,
   useState,
 } from 'react';
-import { cn } from '@/lib/helper';
-
-const formatToISO = (dateStr: string): string | null => {
-  const parts = dateStr.split('/');
-  if (parts.length !== 3) return null;
-  const [day, month, year] = parts;
-  if (!day || !month || !year) return null;
-  return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
-};
-
-const formatToLocal = (isoDate: string): string => {
-  if (!isoDate) return '';
-  const [year, month, day] = isoDate.split('-');
-  return `${day}/${month}/${year}`;
-};
+import { cn, formatDate } from '@/lib/helper';
+import Modal, { useModal } from '../Modal';
+import { DateRange, DayPicker, Matcher } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+import Button from '../Button';
+import { Icon } from '@iconify/react';
 
 export interface DateInputProps {
   label?: string;
   bottomLabel?: string;
   name: string;
-  value?: string;
+  value?: string | { from?: string; to?: string };
   placeholder?: string;
   min?: string;
   max?: string;
@@ -42,9 +34,8 @@ export interface DateInputProps {
   readOnly?: boolean;
   required?: boolean;
   isLoading?: boolean;
+  isRange?: boolean;
   errorMessage?: string;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
@@ -54,51 +45,139 @@ const DateInput = ({
   bottomLabel,
   name,
   value,
-  placeholder,
+  placeholder = 'dd/mm/yyyy',
   min,
   max,
   className,
   isError: externalError,
   isValid: externalValid,
   errorMessage: externalErrorMessage,
-  startAdornment,
-  endAdornment,
   disabled = false,
   required = false,
   onChange,
   onBlur,
   readOnly = false,
   isLoading = false,
+  isRange = false,
 }: DateInputProps) => {
   const [internalError, setInternalError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Date | undefined>();
+  const [selectedRange, setSelectedRange] = useState<{
+    from?: Date;
+    to?: Date;
+  }>({});
+  const [displayValue, setDisplayValue] = useState<string>('');
 
-  const minISO = min ? formatToISO(min) ?? undefined : undefined;
-  const maxISO = max ? formatToISO(max) ?? undefined : undefined;
+  const minDate = min
+    ? new Date(min.split('/').reverse().join('-'))
+    : undefined;
+  const maxDate = max
+    ? new Date(max.split('/').reverse().join('-'))
+    : undefined;
 
-  const valueISO =
-    value && value.includes('/') ? formatToISO(value) ?? '' : value ?? '';
+  const calendarModal = useModal();
 
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    const selectedDate = e.target.value;
-    const isoMin = minISO;
-    const isoMax = maxISO;
-
-    if (isoMin && selectedDate < isoMin) {
-      setInternalError(`Tanggal tidak boleh sebelum ${min}`);
-    } else if (isoMax && selectedDate > isoMax) {
-      setInternalError(`Tanggal tidak boleh setelah ${max}`);
-    } else {
-      setInternalError(null);
+  // --- Sync value props ---
+  useEffect(() => {
+    if (!value) return;
+    if (isRange && typeof value === 'object') {
+      const from = value.from ? new Date(value.from) : undefined;
+      const to = value.to ? new Date(value.to) : undefined;
+      setSelectedRange({ from, to });
+      setDisplayValue(
+        `${from ? formatDate(from, 'DD/MM/YYYY') : ''} ${
+          to ? '- ' + formatDate(to, 'DD/MM/YYYY') : ''
+        }`
+      );
+    } else if (typeof value === 'string') {
+      const iso = value.includes('/')
+        ? value.split('/').reverse().join('-')
+        : value;
+      const date = new Date(iso);
+      setSelected(date);
+      setDisplayValue(formatDate(iso, 'DD/MM/YYYY'));
     }
+  }, [value, isRange]);
 
-    const event = {
-      ...e,
-      target: {
-        ...e.target,
-        value: formatToLocal(selectedDate),
-      },
-    };
-    onChange?.(event as React.ChangeEvent<HTMLInputElement>);
+  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (!disabled && !readOnly) calendarModal.openModal();
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    onBlur?.(e);
+  };
+
+  const handleSelectSingle = (selectedDate?: Date) => {
+    if (!selectedDate) return;
+    if (minDate && selectedDate < minDate) {
+      setInternalError(`Tanggal tidak boleh sebelum ${min}`);
+      return;
+    }
+    if (maxDate && selectedDate > maxDate) {
+      setInternalError(`Tanggal tidak boleh setelah ${max}`);
+      return;
+    }
+    setInternalError(null);
+    setSelected(selectedDate);
+    const formattedDisplay = formatDate(selectedDate, 'DD/MM/YYYY');
+    const formattedISO = formatDate(selectedDate, 'YYYY-MM-DD');
+    setDisplayValue(formattedDisplay);
+
+    const syntheticEvent = {
+      target: { name, value: formattedISO },
+    } as unknown as React.ChangeEvent<HTMLInputElement>;
+    onChange?.(syntheticEvent);
+    calendarModal.closeModal();
+  };
+
+  const handleSelectRange = (range?: { from?: Date; to?: Date }) => {
+    if (!range) return;
+    setSelectedRange(range);
+
+    const fromStr = range.from ? formatDate(range.from, 'DD/MM/YYYY') : '';
+    const toStr = range.to ? formatDate(range.to, 'DD/MM/YYYY') : '';
+    setDisplayValue(`${fromStr}${toStr ? ' - ' + toStr : ''}`);
+
+    // Jika kedua tanggal sudah terpilih
+    if (range.from && range.to) {
+      if (minDate && range.from < minDate) {
+        setInternalError(`Tanggal mulai tidak boleh sebelum ${min}`);
+        return;
+      }
+      if (maxDate && range.to > maxDate) {
+        setInternalError(`Tanggal akhir tidak boleh setelah ${max}`);
+        return;
+      }
+
+      setInternalError(null);
+      const syntheticEvent = {
+        target: {
+          name,
+          value: {
+            from: formatDate(range.from, 'YYYY-MM-DD'),
+            to: formatDate(range.to, 'YYYY-MM-DD'),
+          },
+        },
+      } as unknown as React.ChangeEvent<HTMLInputElement>;
+      onChange?.(syntheticEvent);
+    }
+  };
+
+  const handleResetDate = () => {
+    setSelected(undefined);
+    setSelectedRange({});
+    setDisplayValue('');
+    const syntheticEvent = {
+      target: { name, value: isRange ? { from: '', to: '' } : '' },
+    } as unknown as React.ChangeEvent<HTMLInputElement>;
+    onChange?.(syntheticEvent);
+    calendarModal.closeModal();
+  };
+
+  const handleSaveDate = () => {
+    if (internalError) return;
+    calendarModal.closeModal();
   };
 
   const finalIsError = externalError || !!internalError;
@@ -122,49 +201,53 @@ const DateInput = ({
         >
           {label}
           {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'>*</span>
-              </span>
-            </>
+            <span className='text-error' title='required'>
+              *
+            </span>
           )}
         </label>
       )}
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
           {
             'border-error': finalIsError,
-            'border-success!': externalValid && !finalIsError,
+            'border-success': externalValid && !finalIsError,
           },
           className?.inputWrapper
         )}
       >
-        {startAdornment && startAdornment}
-
         <input
-          type='date'
+          type='text'
           id={name}
           name={name}
-          placeholder={placeholder}
-          value={valueISO}
-          onChange={handleChange}
-          onBlur={onBlur}
-          min={minISO}
-          max={maxISO}
+          placeholder={isRange ? 'dd/mm/yyyy - dd/mm/yyyy' : placeholder}
+          value={displayValue}
+          onBlur={handleBlur}
+          onClick={handleClick}
           disabled={disabled}
-          className={cn('grow bg-transparent cursor-pointer', className?.input)}
-          readOnly={readOnly}
+          readOnly // ✅ tidak bisa diketik manual
+          className={cn(
+            'grow bg-transparent cursor-pointer focus:outline-none',
+            className?.input
+          )}
         />
 
-        {(isLoading || endAdornment) && (
+        {isLoading && (
           <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-            {endAdornment && endAdornment}
+            <span className='loading loading-spinner' />
           </div>
         )}
+        <Icon
+          icon='uil:calendar'
+          width={24}
+          height={24}
+          className='cursor-pointer text-dark'
+          onClick={(e) =>
+            handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
+          }
+        />
       </div>
 
       {!finalIsError && bottomLabel && (
@@ -173,6 +256,74 @@ const DateInput = ({
       {finalIsError && finalErrorMessage && (
         <p className='w-full text-sm text-error'>{finalErrorMessage}</p>
       )}
+
+      <Modal
+        ref={calendarModal.ref}
+        className={{
+          modal: 'rounded',
+          modalBox: `w-fit min-h-${isRange ? '124' : '110'} flex flex-col`,
+        }}
+        closeOnBackdrop
+      >
+        {isRange ? (
+          <DayPicker
+            required={required}
+            mode='range'
+            captionLayout='dropdown-years'
+            navLayout='around'
+            reverseYears
+            defaultMonth={selectedRange.from ?? new Date()}
+            startMonth={minDate ?? new Date(1999, 1)}
+            endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
+            selected={selectedRange as DateRange}
+            onSelect={handleSelectRange}
+            footer={<div className='text-center mt-3'>{displayValue}</div>}
+            disabled={
+              [
+                minDate ? { before: minDate } : undefined,
+                maxDate ? { after: maxDate } : undefined,
+              ].filter(Boolean) as Matcher[]
+            }
+          />
+        ) : (
+          <DayPicker
+            required={required}
+            mode='single'
+            captionLayout='dropdown-years'
+            navLayout='around'
+            reverseYears
+            defaultMonth={selected ?? new Date()}
+            startMonth={minDate ?? new Date(1999, 1)}
+            endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
+            selected={selected}
+            onSelect={handleSelectSingle}
+            disabled={
+              [
+                minDate ? { before: minDate } : undefined,
+                maxDate ? { after: maxDate } : undefined,
+              ].filter(Boolean) as Matcher[]
+            }
+          />
+        )}
+        <div className='mt-auto flex flex-col gap-2'>
+          {isRange && (
+            <small className='text-secondary'>
+              Tekan dua kali untuk memilih tanggal awal
+            </small>
+          )}
+
+          <div className='flex h-full justify-end items-end gap-2'>
+            <Button type='button' color='warning' onClick={handleResetDate}>
+              Reset
+            </Button>
+            {isRange && (
+              <Button type='button' onClick={handleSaveDate}>
+                Simpan
+              </Button>
+            )}
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 2958a3f5..73282123 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -44,54 +44,56 @@ const RowOptionsMenu = ({
           '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'
+        'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
       )}
     >
-      <Button
-        href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      {props.row.original.approval.step_name === 'Aktif' && (
+      <div className='flex flex-col gap-1'>
         <Button
-          href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+          href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
           variant='ghost'
-          color='success'
+          color='primary'
           className='justify-start text-sm'
         >
-          <Icon icon='mdi:home-import-outline' width={16} height={16} />
-          Chickin
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
         </Button>
-      )}
-      {props.row.original.approval.step_name === 'Pengajuan' && (
+        {props.row.original.approval.step_name === 'Aktif' && (
+          <Button
+            href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+            variant='ghost'
+            color='success'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:home-import-outline' width={16} height={16} />
+            Chickin
+          </Button>
+        )}
+        {props.row.original.approval.step_name === 'Pengajuan' && (
+          <Button
+            href={`/production/project-flock/detail/edit?projectFlockId=${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
-          href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+          onClick={deleteClickHandler}
           variant='ghost'
-          color='warning'
-          className='justify-start text-sm'
+          color='error'
+          className='text-error hover:text-inherit'
         >
-          <Icon icon='mdi:pencil-outline' width={16} height={16} />
-          Edit
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
         </Button>
-      )}
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+      </div>
     </div>
   );
 };

From d8637923bd3c8f93f09f66acf0d22de565c80de1 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 4 Nov 2025 13:24:10 +0700
Subject: [PATCH 200/212] refactor(FE-106-91-339-238): Slicing UI Chickin DOC
 Refactored

---
 .../production/chickin/add/kandang/page.tsx   |  15 -
 src/app/production/chickin/add/page.tsx       | 426 ------------------
 .../chickin/add/kandang/layout.tsx            |   0
 .../chickin/add/kandang/page.tsx              |  46 ++
 .../chickin/add/layout.tsx                    |   0
 .../project-flock/chickin/add/page.tsx        |  24 +
 .../chickin/detail/layout.tsx                 |   0
 .../chickin/detail/page.tsx                   |   8 -
 .../{ => project-flock}/chickin/page.tsx      |   0
 src/components/helper/form/FormHeader.tsx     |  21 +-
 .../sales-orders/SalesOrderTable.tsx          |  75 ++-
 .../pages/production/chickin/ChickinTable.tsx |   8 +-
 .../chickin/form/ChickinForm.schema.ts        |  14 +-
 .../production/chickin/form/ChickinForm.tsx   | 411 ++++++++---------
 .../project-flock/ProjectFlockTable.tsx       |  22 +-
 .../chickin/ProjectFlockChickinDetail.tsx     | 308 +++++++++++++
 .../project-flock/form/ProjectFlockForm.tsx   |  22 +-
 .../form/ProjectFlockKandangTable.tsx         |   4 +
 src/config/constant.ts                        |  10 +-
 src/services/api/production.ts                |   8 +-
 src/services/api/production/project-flock.ts  |  30 ++
 src/types/api/marketing/marketing.d.ts        |  24 +-
 src/types/api/master-data/kandang.d.ts        |   1 +
 .../api/production/project-flock-kandang.d.ts |  12 +-
 24 files changed, 780 insertions(+), 709 deletions(-)
 delete mode 100644 src/app/production/chickin/add/kandang/page.tsx
 delete mode 100644 src/app/production/chickin/add/page.tsx
 rename src/app/production/{ => project-flock}/chickin/add/kandang/layout.tsx (100%)
 create mode 100644 src/app/production/project-flock/chickin/add/kandang/page.tsx
 rename src/app/production/{ => project-flock}/chickin/add/layout.tsx (100%)
 create mode 100644 src/app/production/project-flock/chickin/add/page.tsx
 rename src/app/production/{ => project-flock}/chickin/detail/layout.tsx (100%)
 rename src/app/production/{ => project-flock}/chickin/detail/page.tsx (98%)
 rename src/app/production/{ => project-flock}/chickin/page.tsx (100%)
 create mode 100644 src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
 create mode 100644 src/services/api/production/project-flock.ts

diff --git a/src/app/production/chickin/add/kandang/page.tsx b/src/app/production/chickin/add/kandang/page.tsx
deleted file mode 100644
index 6f624672..00000000
--- a/src/app/production/chickin/add/kandang/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-
-export default function AddChickinKandang() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const kandangId = searchParams.get('kandangId');
-
-  return (
-    <div>
-      <h1>Tambah Chickin untuk Kandang ID: {kandangId}</h1>
-    </div>
-  );
-}
diff --git a/src/app/production/chickin/add/page.tsx b/src/app/production/chickin/add/page.tsx
deleted file mode 100644
index 2f68e86c..00000000
--- a/src/app/production/chickin/add/page.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-'use client';
-
-import Badge from '@/components/Badge';
-import Button from '@/components/Button';
-import Card from '@/components/Card';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import Modal, { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
-import PillBadge from '@/components/PillBadge';
-import Table from '@/components/Table';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
-import { ProjectFlockApi } from '@/services/api/production';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { BaseApiResponse } from '@/types/api/api-general';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { Icon } from '@iconify/react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
-import { is } from 'react-day-picker/locale';
-
-import useSWR from 'swr';
-
-const AddChickin = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const projectFlockId = searchParams.get('projectFlockId');
-
-  // Tables Props
-  const { state: tableFilterState } = useTableFilter({
-    initial: { search: '' },
-    paramMap: { page: 'page', pageSize: 'limit' },
-  });
-
-  // States
-  const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
-    undefined
-  );
-  const [projectFlockKandang, setProjectFlockKandang] =
-    useState<BaseApiResponse<ProjectFlockKandang>>();
-  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
-    useState(false);
-  const [searchProjectFlock, setSearchProjectFlock] = useState('');
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<OptionType | null>(null);
-
-  // Fetch Data
-  const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
-    projectFlockId ?? selectedProjectFlock?.value.toString(),
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
-  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(
-      `${ProjectFlockApi.basePath}?${new URLSearchParams({
-        search: searchProjectFlock,
-      }).toString()}`,
-      ProjectFlockApi.getAllFetcher
-    );
-
-  const getProjectFlockKandangUrl = `/kandangs/lookup`;
-  // Mapping Options
-  const options = isResponseSuccess(listProjectFlock)
-    ? listProjectFlock?.data.map((projectFlock) => {
-        return {
-          value: projectFlock.id,
-          label: `${projectFlock?.flock?.name} - Periode ${projectFlock?.period}`,
-        };
-      })
-    : [];
-
-  const chickinModal = useModal();
-  const alertModal = useModal();
-
-  // Handle Function
-  const handleChickinClick = async (kandang: Kandang) => {
-    setIsLoadingProjectFlockKandang(true);
-    setSelectedKandang(kandang);
-    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
-      BaseApiResponse<ProjectFlockKandang>,
-      'GET'
-    >(getProjectFlockKandangUrl, {
-      method: 'GET',
-      params: {
-        project_flock_id: projectFlockId ?? selectedProjectFlock?.value ?? 0,
-        kandang_id: kandang.id,
-      },
-    });
-    if (isResponseSuccess(ProjectFlockKandangRes)) {
-      setProjectFlockKandang(ProjectFlockKandangRes);
-      setIsLoadingProjectFlockKandang(false);
-      if (
-        ProjectFlockKandangRes.data.available_quantity &&
-        ProjectFlockKandangRes.data.available_quantity > 0
-      ) {
-        chickinModal.openModal();
-      } else {
-        alertModal.openModal();
-      }
-    }
-  };
-  const handleAfterSubmit = () => {
-    chickinModal.closeModal();
-    router.push('/production/chickin');
-  };
-  const handleChangeProjectFlock = (val: OptionType | null) => {
-    setSelectedProjectFlock(val);
-    if (projectFlockId) {
-      router.push('/production/chickin/add');
-    }
-  };
-
-  return (
-    <>
-      <>
-        <section className='w-full p-4'>
-          <header className='flex flex-col gap-4'>
-            <div className='flex flex-row justify-between items-center'>
-              <Button
-                href='/production/project-flock'
-                variant='link'
-                className='w-fit p-0 text-primary'
-              >
-                <Icon icon='uil:arrow-left' width={24} height={24} />
-                Kembali
-              </Button>
-              <h1 className='text-2xl font-semibold text-center'>
-                Daftar Kandang Project Flock
-              </h1>
-              <div></div>
-            </div>
-
-            <div className='flex flex-col gap-4 w-full my-4'>
-              <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
-                <SelectInput
-                  required
-                  label='Ganti Project Flock'
-                  placeholder='Pilih Project Flock'
-                  options={options}
-                  onInputChange={(val) => {
-                    setSearchProjectFlock(val);
-                  }}
-                  isLoading={isLoadingListProjectFlock}
-                  value={
-                    isResponseSuccess(projectFlock)
-                      ? {
-                          label: `${projectFlock.data?.flock?.name}`,
-                          value: projectFlock.data?.id,
-                        }
-                      : undefined
-                  }
-                  onChange={(val) => {
-                    handleChangeProjectFlock(val as OptionType);
-                  }}
-                  isSearchable
-                  isClearable
-                  startAdornment={
-                    isResponseSuccess(projectFlock) && (
-                      <Badge
-                        variant='soft'
-                        color='success'
-                        size='sm'
-                        className={{
-                          badge: 'whitespace-nowrap font-semibold',
-                        }}
-                      >
-                        Periode {projectFlock.data?.period}
-                      </Badge>
-                    )
-                  }
-                />
-              </div>
-            </div>
-          </header>
-          <Card
-            title='Informasi Flock'
-            className={{
-              wrapper: 'w-full bg-white mb-3',
-            }}
-          >
-            <Table<ProjectFlock>
-              emptyContent={
-                <div className='w-full p-5 text-center'>
-                  {projectFlockId && isResponseError(projectFlock) ? (
-                    <span className='text-lg opacity-50'>
-                      {projectFlock.message}
-                    </span>
-                  ) : (
-                    <span className='text-lg opacity-50'>
-                      Pilih project flock terlebih dahulu...
-                    </span>
-                  )}
-                </div>
-              }
-              data={isResponseSuccess(projectFlock) ? [projectFlock.data] : []}
-              columns={[
-                {
-                  header: 'Area',
-                  accessorKey: 'area.name',
-                },
-                {
-                  header: 'Lokasi',
-                  accessorKey: 'location.name',
-                },
-                {
-                  header: 'Nama Flock',
-                  accessorKey: 'flock.name',
-                },
-                {
-                  header: 'Kategori',
-                  accessorKey: 'category',
-                },
-                {
-                  header: 'Status',
-                  accessorKey: 'status',
-                  cell: (props) => {
-                    return props.row.original.approval.step_name ? (
-                      <PillBadge
-                        color={(() => {
-                          switch (
-                            props.row.original.approval.step_name.toUpperCase()
-                          ) {
-                            case 'AKTIF':
-                              return 'red';
-                            case 'PENGAJUAN':
-                              return 'green';
-                            default:
-                              return 'gray';
-                          }
-                        })()}
-                        content={props.row.original.approval.step_name
-                          .toLowerCase()
-                          .replace(/_/g, ' ')
-                          .replace(/\b\w/g, (char) => char.toUpperCase())}
-                      />
-                    ) : (
-                      '-'
-                    );
-                  },
-                },
-                {
-                  header: 'Periode',
-                  accessorKey: 'period',
-                },
-                {
-                  header: 'FCR Layer',
-                  accessorKey: 'fcr.name',
-                },
-              ]}
-              page={undefined}
-              className={{
-                containerClassName: cn({
-                  'mb-20':
-                    isResponseSuccess(projectFlock) &&
-                    projectFlock.data?.kandangs?.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',
-                paginationClassName: 'hidden',
-              }}
-            />
-          </Card>
-          <Card
-            title='Daftar Chickin'
-            className={{
-              wrapper: 'w-full bg-white',
-            }}
-          >
-            <Table<Kandang>
-              emptyContent={
-                <div className='w-full p-5 text-center'>
-                  {projectFlockId && isResponseError(projectFlock) ? (
-                    <span className='text-lg opacity-50'>
-                      {projectFlock.message}
-                    </span>
-                  ) : (
-                    <span className='text-lg opacity-50'>
-                      Pilih project flock terlebih dahulu...
-                    </span>
-                  )}
-                </div>
-              }
-              data={
-                isResponseSuccess(projectFlock)
-                  ? projectFlock.data?.kandangs
-                  : []
-              }
-              columns={[
-                {
-                  header: '#',
-                  cell: (props) =>
-                    tableFilterState.pageSize * (tableFilterState.page - 1) +
-                    props.row.index +
-                    1,
-                },
-                {
-                  accessorFn: () =>
-                    isResponseSuccess(projectFlock)
-                      ? projectFlock.data.area.name
-                      : '',
-                  header: 'Area',
-                },
-                {
-                  accessorFn: () =>
-                    isResponseSuccess(projectFlock)
-                      ? projectFlock.data.location.name
-                      : '',
-                  header: 'Lokasi',
-                },
-                {
-                  accessorKey: 'name',
-                  header: 'Kandang',
-                },
-                {
-                  accessorKey: 'capacity',
-                  header: 'Kapasitas',
-                },
-                {
-                  accessorKey: 'pic.name',
-                  header: 'Penanggung Jawab',
-                },
-                {
-                  header: 'Aksi',
-                  cell: (props) => {
-                    return (
-                      <>
-                        <Button
-                          color='success'
-                          variant='outline'
-                          onClick={() => {
-                            handleChickinClick(props.row.original);
-                          }}
-                          disabled={isLoadingProjectFlockKandang}
-                        >
-                          <Icon
-                            icon='mdi:home-import-outline'
-                            width={24}
-                            height={24}
-                          />
-                          Chickin
-                        </Button>
-                      </>
-                    );
-                  },
-                },
-              ]}
-              page={undefined}
-              className={{
-                containerClassName: cn({
-                  'mb-20':
-                    isResponseSuccess(projectFlock) &&
-                    projectFlock.data?.kandangs?.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',
-                paginationClassName: 'hidden',
-              }}
-            />
-          </Card>
-        </section>
-        <Modal ref={chickinModal.ref}>
-          <div className='flex flex-row justify-between items-center'>
-            <h1 className='text-xl font-semibold text-center mb-6'>
-              Chickin Kandang - {selectedKandang?.name}
-            </h1>
-            <Button
-              color='error'
-              variant='link'
-              onClick={chickinModal.closeModal}
-            >
-              <Icon
-                className='text-black'
-                icon='uil:times'
-                width={24}
-                height={24}
-              />
-            </Button>
-          </div>
-          {isResponseSuccess(projectFlockKandang) &&
-            isResponseSuccess(projectFlock) &&
-            !isLoadingProjectFlockKandang && (
-              <ChickinForm
-                initialValues={{
-                  project_flock_kandang: projectFlockKandang.data,
-                  created_user: projectFlock.data?.created_user,
-                  created_at: projectFlock.data?.created_at,
-                  updated_at: projectFlock.data?.updated_at,
-                  approval: projectFlock.data?.approval,
-                }}
-                afterSubmit={handleAfterSubmit}
-              />
-            )}
-        </Modal>
-        <ConfirmationModal
-          ref={alertModal.ref}
-          type='info'
-          text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
-          secondaryButton={undefined}
-          primaryButton={{
-            text: 'Ya',
-            color: 'info',
-            onClick: () => {
-              alertModal.closeModal();
-            },
-          }}
-        />
-      </>
-    </>
-  );
-};
-
-export default AddChickin;
diff --git a/src/app/production/chickin/add/kandang/layout.tsx b/src/app/production/project-flock/chickin/add/kandang/layout.tsx
similarity index 100%
rename from src/app/production/chickin/add/kandang/layout.tsx
rename to src/app/production/project-flock/chickin/add/kandang/layout.tsx
diff --git a/src/app/production/project-flock/chickin/add/kandang/page.tsx b/src/app/production/project-flock/chickin/add/kandang/page.tsx
new file mode 100644
index 00000000..56dfc2db
--- /dev/null
+++ b/src/app/production/project-flock/chickin/add/kandang/page.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockKandangApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+export default function AddChickinKandang() {
+  const searchParams = useSearchParams();
+  const projectFlockKandangId = searchParams.get('projectFlockKandangId');
+  const projectFlockId = searchParams.get('projectFlockId');
+  const router = useRouter();
+
+  const { data: projectFlockKandang, isLoading: isLoading } = useSWR(
+    projectFlockKandangId,
+    (id: number) => ProjectFlockKandangApi.getSingle(id)
+  );
+
+  if (!projectFlockKandangId) {
+    router.push(`/production/chickin/add?projectFlockId=${projectFlockId}`);
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoading && !projectFlockKandang) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <>
+      <section className='w-full p-4'>
+        {isLoading && <span className='loading loading-spinner loading-xl' />}
+        {!isLoading &&
+          isResponseSuccess(projectFlockKandang) &&
+          projectFlockId && (
+            <ChickinForm initialValues={projectFlockKandang.data} />
+          )}
+      </section>
+    </>
+  );
+}
diff --git a/src/app/production/chickin/add/layout.tsx b/src/app/production/project-flock/chickin/add/layout.tsx
similarity index 100%
rename from src/app/production/chickin/add/layout.tsx
rename to src/app/production/project-flock/chickin/add/layout.tsx
diff --git a/src/app/production/project-flock/chickin/add/page.tsx b/src/app/production/project-flock/chickin/add/page.tsx
new file mode 100644
index 00000000..3ca09c89
--- /dev/null
+++ b/src/app/production/project-flock/chickin/add/page.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import ProjectFlockChickinDetail from '@/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail';
+import { useSearchParams } from 'next/navigation';
+
+const AddChickin = () => {
+  const searchParams = useSearchParams();
+  const projectFlockId = searchParams.get('projectFlockId');
+
+  return (
+    <>
+      <section className='w-full p-4'>
+        <FormHeader
+          title='Daftar Kandang Project Flock'
+          backUrl='/production/project-flock'
+        />
+        <ProjectFlockChickinDetail projectFlockId={Number(projectFlockId)} />
+      </section>
+    </>
+  );
+};
+
+export default AddChickin;
diff --git a/src/app/production/chickin/detail/layout.tsx b/src/app/production/project-flock/chickin/detail/layout.tsx
similarity index 100%
rename from src/app/production/chickin/detail/layout.tsx
rename to src/app/production/project-flock/chickin/detail/layout.tsx
diff --git a/src/app/production/chickin/detail/page.tsx b/src/app/production/project-flock/chickin/detail/page.tsx
similarity index 98%
rename from src/app/production/chickin/detail/page.tsx
rename to src/app/production/project-flock/chickin/detail/page.tsx
index be8c5332..d77e5949 100644
--- a/src/app/production/chickin/detail/page.tsx
+++ b/src/app/production/project-flock/chickin/detail/page.tsx
@@ -312,14 +312,6 @@ const DetailChickin = () => {
             />
           </Button>
         </div>
-        <ChickinForm
-          initialValues={chickin?.data}
-          formType='edit'
-          afterSubmit={() => {
-            refreshChickin();
-            chickinModal.closeModal();
-          }}
-        />
       </Modal>
 
       <ConfirmationModal
diff --git a/src/app/production/chickin/page.tsx b/src/app/production/project-flock/chickin/page.tsx
similarity index 100%
rename from src/app/production/chickin/page.tsx
rename to src/app/production/project-flock/chickin/page.tsx
diff --git a/src/components/helper/form/FormHeader.tsx b/src/components/helper/form/FormHeader.tsx
index ebc1d7ae..de7ec882 100644
--- a/src/components/helper/form/FormHeader.tsx
+++ b/src/components/helper/form/FormHeader.tsx
@@ -2,15 +2,27 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 
 interface FormHeaderProps {
-  type: 'add' | 'edit' | 'detail';
+  type?: 'add' | 'edit' | 'detail';
   title: string;
-  backUrl: string;
+  backUrl?: string;
+  onBackClick?: () => void;
 }
 
-export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
+export const FormHeader = ({
+  type,
+  title,
+  backUrl,
+  onBackClick,
+}: FormHeaderProps) => {
   return (
     <header className='flex flex-col gap-4'>
-      <Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
+      <Button
+        type='button'
+        href={!onBackClick ? backUrl : undefined}
+        onClick={onBackClick}
+        variant='link'
+        className='w-fit p-0 text-primary'
+      >
         <Icon icon='uil:arrow-left' width={24} height={24} />
         Kembali
       </Button>
@@ -18,6 +30,7 @@ export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
         {type === 'add' && `Tambah ${title}`}
         {type === 'edit' && `Edit ${title}`}
         {type === 'detail' && `Detail ${title}`}
+        {!type && title}
       </h1>
     </header>
   );
diff --git a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
index eb35e666..c8357e88 100644
--- a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
+++ b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
@@ -7,7 +7,8 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { cn } from '@/lib/helper';
-import { SalesOrder } from '@/types/api/marketing/marketing';
+import { Marketing, MarketingProducts } from '@/types/api/marketing/marketing';
+import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
 import { CellContext } from '@tanstack/react-table';
 import { useCallback, useState } from 'react';
@@ -18,7 +19,7 @@ const RowsOptionsMenu = ({
   deleteClickHandler,
 }: {
   type: 'dropdown' | 'collapse';
-  props: CellContext<SalesOrder, unknown>;
+  props: CellContext<Marketing, unknown>;
   deleteClickHandler: () => void;
 }) => {
   return (
@@ -111,7 +112,59 @@ const SalesOrderTable = () => {
         />
       </div>
       <Table
-        data={[]}
+        data={[
+          {
+            id: 1,
+            so_number: 'SO-001',
+            so_date: '2024-01-01',
+            so_docs: 'Dokumen SO 1.pdf',
+            customer: {
+              id: 1,
+              name: 'Customer A',
+            } as Customer,
+            sales_person: {
+              id: 1,
+              name: 'Sales Person A',
+            },
+            notes: 'Catatan untuk SO 1',
+            grand_total: 1000000,
+            approval: {
+              step_name: 'Approved',
+            },
+            marketing_products: [
+              {
+                id: 1,
+                qty: 10,
+                unit_price: 100000,
+                avg_weigth: 1.5,
+                total_weight: 15,
+                total_price: 1000000,
+                product_warehouse: {
+                  id: 1,
+                  product: {
+                    id: 1,
+                    name: 'Product A',
+                  },
+                },
+              } as MarketingProducts,
+              {
+                id: 2,
+                qty: 5,
+                unit_price: 200000,
+                avg_weigth: 2.0,
+                total_weight: 10,
+                total_price: 1000000,
+                product_warehouse: {
+                  id: 2,
+                  product: {
+                    id: 2,
+                    name: 'Product B',
+                  },
+                },
+              } as MarketingProducts,
+            ],
+          } as Marketing,
+        ]}
         columns={[
           {
             header: '#',
@@ -122,7 +175,7 @@ const SalesOrderTable = () => {
             header: 'No. Order',
           },
           {
-            accessorKey: 'tanggal',
+            accessorKey: 'so_date',
             header: 'Tanggal',
           },
           {
@@ -130,7 +183,7 @@ const SalesOrderTable = () => {
             header: 'Status',
           },
           {
-            accessorKey: 'customer',
+            accessorKey: 'customer.name',
             header: 'Customer',
           },
           {
@@ -138,8 +191,18 @@ const SalesOrderTable = () => {
             header: 'Grand Total',
           },
           {
-            accessorKey: 'product_details',
+            accessorKey: 'marketing_products.length',
             header: 'Product Details',
+            cell: (props) => (
+              <ul className='list-disc list-inside'>
+                {props.row.original.marketing_products?.map((product) => (
+                  <li key={product.id}>
+                    {product.product_warehouse.product.name} - Qty:{' '}
+                    {product.qty}
+                  </li>
+                ))}
+              </ul>
+            ),
           },
           {
             header: 'Aksi',
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index cd52c154..db5265c8 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -87,7 +87,7 @@ const ChickinTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <Button
-              href='/production/chickin/add?projectFlockId=1'
+              href='/production/project-flock/chickin/add?projectFlockId=1'
               variant='outline'
               color='primary'
               className='w-full sm:w-fit'
@@ -260,14 +260,14 @@ const ChickinTable = () => {
             />
           </Button>
         </div>
-        <ChickinForm
+        {/* <ChickinForm
           initialValues={selectedChickin}
           formType='edit'
           afterSubmit={() => {
             refreshChickins();
             chickinModal.closeModal();
           }}
-        />
+        /> */}
       </Modal>
     </>
   );
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
+        href={`/production/project-flock/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
diff --git a/src/components/pages/production/chickin/form/ChickinForm.schema.ts b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
index 606c6583..b8abf232 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.schema.ts
+++ b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
@@ -1,13 +1,3 @@
 import * as Yup from 'yup';
-
-export const ChickinFormSchema = Yup.object({
-  chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
-  note: Yup.string().required('Catatan wajib diisi!'),
-  quantity: Yup.number()
-    .min(1, 'Jumlah wajib diisi!')
-    .required('Jumlah wajib diisi!'),
-});
-
-export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
-
-export const UpdateChickinFormSchema = ChickinFormSchema;
+import { Product } from '@/types/api/master-data/product';
+import { Supplier } from '@/types/api/master-data/supplier';
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index 8ac6b6ee..dc83eddb 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -1,220 +1,227 @@
 'use client';
 
 import Button from '@/components/Button';
-import {
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload,
-} from '@/types/api/production/chickin';
-import {
-  ChickinFormSchema,
-  ChickinFormValues,
-  UpdateChickinFormSchema,
-} from '@/components/pages/production/chickin/form/ChickinForm.schema';
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
-import { useFormik } from 'formik';
-import { ChickinApi } from '@/services/api/production';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
 import DateInput from '@/components/input/DateInput';
-import { isResponseError } from '@/lib/api-helper';
-import toast from 'react-hot-toast';
-import { Icon } from '@iconify/react';
-import TextArea from '@/components/input/TextArea';
-import TextInput from '@/components/input/TextInput';
+import FileInput from '@/components/input/FileInput';
 import NumberInput from '@/components/input/NumberInput';
+import SelectInput from '@/components/input/SelectInput';
+import TextInput from '@/components/input/TextInput';
+import Table from '@/components/Table';
+import { formatNumber } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import {
+  AvailableQty,
+  ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { useRouter } from 'next/navigation';
 
-interface ChickinFormProps {
-  formType?: 'add' | 'detail' | 'edit';
-  initialValues?: Chickin;
-  afterSubmit?: () => void;
-}
-
-const ChickinForm = ({
+const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
   afterSubmit,
-}: ChickinFormProps) => {
-  // Helper Function
-  const formatDateForInput = (dateString?: string): string => {
-    if (!dateString) return '';
-    return new Date(dateString).toISOString().split('T')[0];
-  };
-
-  // State
-  const [chickinFormErrorMessage, setChickinFormErrorMessage] = useState('');
-
-  // Initial Value
-  const formikInitialValue = useMemo<ChickinFormValues>(() => {
-    return {
-      chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
-      note: initialValues?.note ?? '',
-      quantity:
-        initialValues?.quantity ??
-        initialValues?.project_flock_kandang?.available_quantity ??
-        0,
-    };
-  }, [initialValues]);
-
-  // Handle Submit Function
-  const handleCreate = useCallback(
-    async (
-      payload: CreateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.create(payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-  const handleUpdate = useCallback(
-    async (
-      payload: UpdateChickinPayload,
-      afterSubmit: (() => void) | undefined
-    ) => {
-      const res = await ChickinApi.update(payload.id, payload);
-      if (isResponseError(res)) {
-        setChickinFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      afterSubmit?.();
-    },
-    []
-  );
-
-  // Formik
-  const formik = useFormik<ChickinFormValues>({
-    initialValues: formikInitialValue,
-    enableReinitialize: true,
-    validationSchema:
-      formType === 'edit' ? UpdateChickinFormSchema : ChickinFormSchema,
-    onSubmit: async (values) => {
-      // reset error message
-      setChickinFormErrorMessage('');
-
-      if (
-        initialValues?.project_flock_kandang?.id == undefined ||
-        (formType == 'edit' && initialValues?.id == undefined)
-      ) {
-        return;
-      }
-
-      // create payload
-      const payload = {
-        chick_in_date: values.chick_in_date,
-        project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
-        note: values.note,
-        quantity: values.quantity,
-        id: initialValues.id ?? 0,
-      };
-
-      // cek type form yang disubmit
-      console.log(formType);
-      switch (formType) {
-        case 'add':
-          handleCreate(payload, afterSubmit);
-          break;
-        case 'edit':
-          handleUpdate(payload, afterSubmit);
-          break;
-        default:
-          break;
-      }
-    },
-  });
-
-  // Initialize Formik
-  const { setValues: formikSetValues } = formik;
-  useEffect(() => {
-    formikSetValues(formikInitialValue);
-  }, [formikSetValues, formikInitialValue]);
-
+}: {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const router = useRouter();
   return (
-    <>
-      <form
-        className='min-h-48 flex flex-col gap-4'
-        onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
+    <div className='flex flex-col gap-4'>
+      <FormHeader
+        type='add'
+        title='Chick In DOC'
+        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues.project_flock.id}`}
+      />
+      <Card
+        title='Informasi Kandang'
+        className={{
+          wrapper: 'w-full bg-white mt-4',
+        }}
       >
-        <DateInput
-          value={formik.values.chick_in_date}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          name='chick_in_date'
-          label='Tanggal Chickin'
-          required
-          isError={
-            formik.touched.chick_in_date && Boolean(formik.errors.chick_in_date)
+        <Table<Kandang>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Informasi Kandang belum tersedia...
+              </span>
+            </div>
           }
-          errorMessage={formik.errors.chick_in_date}
+          data={[initialValues.kandang]}
+          columns={[
+            {
+              header: 'Area',
+              accessorFn: () => initialValues.project_flock?.area.name || '-',
+            },
+            {
+              header: 'Lokasi',
+              accessorFn: () =>
+                initialValues.project_flock?.location.name || '-',
+            },
+            {
+              header: 'Flock',
+              accessorFn: () => initialValues.project_flock?.flock.name || '-',
+            },
+            {
+              header: 'Kandang',
+              accessorFn: (row) => row?.name || '-',
+            },
+            {
+              header: 'Kapasitas',
+              accessorFn: (row) =>
+                (row?.capacity && formatNumber(row?.capacity)) || '-',
+            },
+            {
+              header: 'Penanggung Jawab',
+              accessorFn: (row) => row?.pic?.name || '-',
+            },
+          ]}
+          className={{
+            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',
+            paginationClassName: 'hidden',
+          }}
         />
-        <NumberInput
-          value={formik.values.quantity}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          name='quantity'
-          label='Jumlah (Ekor)'
-          required
-          isError={
-            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
-            formik.values.quantity == 0
+      </Card>
+      <Card
+        title='Informasi Chick In DOC'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<AvailableQty>
+          data={initialValues.available_qtys || []}
+          columns={[
+            {
+              accessorFn: (row) => row.chick_in_date,
+              header: 'Tanggal Chick In',
+              cell(props) {
+                return (
+                  <DateInput
+                    name='chick_in_date[]'
+                    value={props.row.original.chick_in_date}
+                    onChange={(e) => {
+                      props.row.original.chick_in_date = e.target.value;
+                    }}
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.po_number,
+              header: 'No. Surat Jalan',
+              cell(props) {
+                return (
+                  <TextInput
+                    name='po_number[]'
+                    value={props.row.original.po_number}
+                    onChange={(e) => {
+                      props.row.original.po_number = e.target.value;
+                    }}
+                  />
+                );
+              },
+            },
+            {
+              header: 'Dokumen Surat Jalan',
+              cell(props) {
+                return (
+                  <FileInput
+                    name='document_path[]'
+                    onChange={(e) => {
+                      props.row.original.document_path = e.target.value;
+                    }}
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.supplier?.name,
+              header: 'Supplier',
+              cell(props) {
+                return (
+                  <SelectInput
+                    value={
+                      props.row.original.supplier?.name &&
+                      props.row.original.supplier?.id
+                        ? {
+                            label: props.row.original.supplier.name,
+                            value: props.row.original.supplier.id,
+                          }
+                        : undefined
+                    }
+                    options={[]}
+                    isDisabled
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse.product.name,
+              header: 'Produk',
+              cell(props) {
+                return (
+                  <SelectInput
+                    value={{
+                      label: props.row.original.product_warehouse.product.name,
+                      value: props.row.original.product_warehouse.product.id,
+                    }}
+                    options={[]}
+                    isDisabled
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse.quantity,
+              header: 'Jumlah (ekor)',
+              cell(props) {
+                return (
+                  <NumberInput
+                    name='qty[]'
+                    value={props.row.original.product_warehouse.quantity}
+                  />
+                );
+              },
+            },
+          ]}
+          className={{
+            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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Isi persediaan DOC untuk kandang belum tersedia...
+              </span>
+            </div>
           }
-          errorMessage={
-            formik.values.quantity == 0
-              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
-              : formik.errors.quantity
-          }
-          readOnly
         />
-        <TextArea
-          required
-          label='Catatan'
-          name='note'
-          placeholder='Masukan catatan chickin'
-          value={formik.values.note}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          isError={formik.touched.note && Boolean(formik.errors.note)}
-          errorMessage={formik.errors.note}
-        />
-        {initialValues?.project_flock_kandang?.id == undefined && (
-          <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
-        )}
-        {chickinFormErrorMessage && (
-          <div
-            role='alert'
-            className='alert alert-error'
-            onClick={() => {
-              setChickinFormErrorMessage('');
-            }}
-          >
-            <Icon icon='mdi:times' />
-            <span>{chickinFormErrorMessage}</span>
-          </div>
-        )}
-        <div className='flex justify-center mt-auto gap-2'>
-          <Button color='warning' type='reset'>
-            Reset
-          </Button>
-          <Button
-            type='submit'
-            isLoading={formik.isSubmitting}
-            disabled={
-              !formik.isValid ||
-              formik.isSubmitting ||
-              !initialValues?.project_flock_kandang?.id
-            }
-          >
-            Submit
-          </Button>
-        </div>
-      </form>
-    </>
+      </Card>
+      <div className='flex flex-row justify-center gap-3'>
+        <Button type='reset' color='warning'>
+          Reset
+        </Button>
+        <Button type='submit' color='primary'>
+          Submit
+        </Button>
+      </div>
+    </div>
   );
 };
 
-export default ChickinForm;
+export default ChickinFormKandang;
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 0de82395..b1a60ac5 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -9,7 +9,6 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -60,7 +59,7 @@ const RowOptionsMenu = ({
         </Button>
         {props.row.original.approval.step_name === 'Aktif' && (
           <Button
-            href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
+            href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
             variant='ghost'
             color='success'
             className='justify-start text-sm'
@@ -84,13 +83,12 @@ const RowOptionsMenu = ({
           onClick={deleteClickHandler}
           variant='ghost'
           color='error'
-          className='text-error hover:text-inherit'
+          className='text-error hover:text-inherit justify-start text-sm'
         >
           <Icon
             icon='material-symbols:delete-outline-rounded'
             width={16}
             height={16}
-            className='justify-start text-sm'
           />
           Delete
         </Button>
@@ -499,7 +497,7 @@ const ProjectFlockTable = () => {
 
                   return (
                     <>
-                      {currentPageSize > 1 && (
+                      {currentPageSize > 2 && (
                         <RowDropdownOptions isLast2Rows={isLast2Rows}>
                           <RowOptionsMenu
                             type='dropdown'
@@ -509,7 +507,7 @@ const ProjectFlockTable = () => {
                         </RowDropdownOptions>
                       )}
 
-                      {currentPageSize <= 1 && (
+                      {currentPageSize <= 2 && (
                         <RowCollapseOptions>
                           <RowOptionsMenu
                             type='collapse'
@@ -576,18 +574,6 @@ const ProjectFlockTable = () => {
         ref={confirmModal.ref}
         type='success'
         text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
-        // text={
-        //   selectedFlocks.length > 0
-        //     ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
-        //         .map(
-        //           (flock) =>
-        //             `${flock.flock?.name ?? '(Tanpa nama)'} - ${
-        //               flock.area?.name ?? '-'
-        //             }`
-        //         )
-        //         .join(', ')})`
-        //     : 'Tidak ada Project Flock yang dipilih.'
-        // }
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
new file mode 100644
index 00000000..eeac108d
--- /dev/null
+++ b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
@@ -0,0 +1,308 @@
+'use client';
+
+import Badge from '@/components/Badge';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+const ProjectFlockChickinDetail = ({
+  projectFlockId,
+}: {
+  projectFlockId: number | undefined;
+}) => {
+  const router = useRouter();
+
+  // Tables Props
+  const { state: tableFilterState } = useTableFilter({
+    initial: { search: '' },
+    paramMap: { page: 'page', pageSize: 'limit' },
+  });
+
+  // States
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<OptionType | null>(null);
+  const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
+
+  // Fetch Data
+  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
+        search: searchProjectFlock,
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
+    );
+
+  // Mapping Options
+  const options = isResponseSuccess(listProjectFlock)
+    ? listProjectFlock?.data.map((projectFlock) => {
+        return {
+          value: projectFlock.id,
+          label: `${projectFlock?.flock?.name} - Periode ${projectFlock?.period}`,
+        };
+      })
+    : [];
+
+  // Handle Function
+  const handleChickinClick = async (kandang: Kandang) => {
+    router.push(
+      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${kandang.project_flock_kandang_id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
+    );
+  };
+
+  const handleChangeProjectFlock = (val: OptionType | null) => {
+    setSelectedProjectFlock(val);
+    if (isResponseSuccess(listProjectFlock) && val) {
+      const selected = listProjectFlock.data.find(
+        (pf) => pf.id === Number(val.value)
+      );
+      setProjectFlock(selected);
+    } else {
+      setProjectFlock(undefined);
+    }
+    if (projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+    if (!val && projectFlockId) {
+      router.push('/production/project-flock/chickin/add');
+    }
+  };
+
+  useEffect(() => {
+    if (projectFlockId && isResponseSuccess(listProjectFlock)) {
+      setProjectFlock(
+        listProjectFlock.data.find((pf) => pf.id === Number(projectFlockId))
+      );
+    }
+  }, [projectFlockId, listProjectFlock]);
+  return (
+    <>
+      <div className='flex flex-col gap-4 w-full my-4'>
+        <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
+          <SelectInput
+            required
+            label='Ganti Project Flock'
+            placeholder='Pilih Project Flock'
+            options={options}
+            onInputChange={(val) => {
+              setSearchProjectFlock(val);
+            }}
+            isLoading={isLoadingListProjectFlock}
+            value={
+              projectFlock
+                ? {
+                    label: `${projectFlock?.flock?.name}`,
+                    value: projectFlock?.id,
+                  }
+                : null
+            }
+            onChange={(val) => {
+              handleChangeProjectFlock(val as OptionType | null);
+            }}
+            isSearchable
+            isClearable
+            startAdornment={
+              projectFlock && (
+                <Badge
+                  variant='soft'
+                  color='success'
+                  size='sm'
+                  className={{
+                    badge: 'whitespace-nowrap font-semibold',
+                  }}
+                >
+                  Periode {projectFlock?.period}
+                </Badge>
+              )
+            }
+          />
+        </div>
+      </div>
+      <Card
+        title='Informasi Flock'
+        className={{
+          wrapper: 'w-full bg-white mb-3',
+        }}
+      >
+        <Table<ProjectFlock>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={projectFlock ? [projectFlock] : []}
+          columns={[
+            {
+              header: 'Area',
+              accessorKey: 'area.name',
+            },
+            {
+              header: 'Lokasi',
+              accessorKey: 'location.name',
+            },
+            {
+              header: 'Nama Flock',
+              accessorKey: 'flock.name',
+            },
+            {
+              header: 'Kategori',
+              accessorKey: 'category',
+            },
+            {
+              header: 'Status',
+              accessorKey: 'status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'AKTIF':
+                          return 'red';
+                        case 'PENGAJUAN':
+                          return 'green';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : (
+                  '-'
+                );
+              },
+            },
+            {
+              header: 'Periode',
+              accessorKey: 'period',
+            },
+            {
+              header: 'FCR Layer',
+              accessorKey: 'fcr.name',
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.kandangs?.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',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Card>
+      <Card
+        title='Daftar Kandang'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<Kandang>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Pilih project flock terlebih dahulu...
+              </span>
+            </div>
+          }
+          data={projectFlock ? projectFlock.kandangs : []}
+          columns={[
+            {
+              header: '#',
+              cell: (props) =>
+                tableFilterState.pageSize * (tableFilterState.page - 1) +
+                props.row.index +
+                1,
+            },
+            {
+              accessorFn: () => (projectFlock ? projectFlock.area.name : ''),
+              header: 'Area',
+            },
+            {
+              accessorFn: () =>
+                projectFlock ? projectFlock.location.name : '',
+              header: 'Lokasi',
+            },
+            {
+              accessorKey: 'name',
+              header: 'Kandang',
+            },
+            {
+              accessorKey: 'capacity',
+              header: 'Kapasitas',
+            },
+            {
+              accessorKey: 'pic.name',
+              header: 'Penanggung Jawab',
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                return (
+                  <>
+                    <Button
+                      color='success'
+                      variant='outline'
+                      onClick={() => {
+                        handleChickinClick(props.row.original);
+                      }}
+                    >
+                      <Icon
+                        icon='mdi:home-import-outline'
+                        width={24}
+                        height={24}
+                      />
+                      Chickin
+                    </Button>
+                  </>
+                );
+              },
+            },
+          ]}
+          page={undefined}
+          className={{
+            containerClassName: cn({
+              'mb-20': projectFlock && projectFlock.kandangs?.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',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default ProjectFlockChickinDetail;
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 999fdfcb..e0ce5778 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -77,7 +77,7 @@ const ProjectFlockForm = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isApprovedDisabled, setIsApprovedDisabled] = useState(
-    initialValues?.approval.step_name == 'Pengajuan' ? false : true
+    initialValues?.approval?.step_name == 'Pengajuan' ? false : true
   );
   const [isRejectedDisabled, setIsRejectedDisabled] =
     useState(!isApprovedDisabled);
@@ -726,7 +726,25 @@ const ProjectFlockForm = ({
           </div>
         </form>
         {formType != 'add' && (
-          <div className='w-full'>
+          <div className='flex flex-row gap-2 mb-6'>
+            {formType != 'edit' && (
+              <Button
+                onClick={() => {
+                  router.push(
+                    `/production/project-flock/detail/edit?projectFlockId=${initialValues?.id}`
+                  );
+                }}
+                color='warning'
+              >
+                <Icon
+                  icon='mdi:pencil-outline'
+                  width={16}
+                  height={16}
+                  className='justify-start text-sm'
+                />
+                Edit
+              </Button>
+            )}
             <Button
               onClick={() => {
                 if (initialValues?.id) {
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
index f0cfbe11..759e44d8 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -121,6 +121,10 @@ const ProjectFlockKandangTable = ({
             );
           },
         },
+        {
+          accessorFn: (row) => row.capacity,
+          header: 'Kapasitas',
+        },
         {
           accessorFn: (row) => row.pic?.name,
           header: 'Penanggung Jawab',
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 840f5c32..933ba2ab 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -22,11 +22,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         link: '/production/project-flock',
         icon: 'material-symbols:list-alt-add-outline-rounded',
       },
-      {
-        title: 'Chick In',
-        link: '/production/chickin',
-        icon: 'mdi:home-import-outline',
-      },
+      // { // DI HILANGKAN PADA VERSI REFACTORING
+      //   title: 'Chick In',
+      //   link: '/production/chickin',
+      //   icon: 'mdi:home-import-outline',
+      // },
       {
         title: 'Recording',
         link: '/production/recording',
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 6d33af07..c4434f16 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -1,4 +1,4 @@
-import { BaseApiService } from './base';
+import { BaseApiService } from '@/services/api/base';
 import {
   CreateProjectFlockPayload,
   ProjectFlock,
@@ -14,12 +14,18 @@ import {
   CreateChickinPayload,
   UpdateChickinPayload,
 } from '@/types/api/production/chickin';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
 export const ProjectFlockApi = new BaseApiService<
   ProjectFlock,
   CreateProjectFlockPayload,
   UpdateProjectFlockPayload
 >('/production/project_flocks');
+export const ProjectFlockKandangApi = new BaseApiService<
+  ProjectFlockKandang,
+  unknown,
+  unknown
+>('/production/project-flock-kandangs');
 export const RecordingApi = new BaseApiService<
   Recording,
   CreateRecordingPayload,
diff --git a/src/services/api/production/project-flock.ts b/src/services/api/production/project-flock.ts
new file mode 100644
index 00000000..ad806c1d
--- /dev/null
+++ b/src/services/api/production/project-flock.ts
@@ -0,0 +1,30 @@
+import {
+  CreateProjectFlockPayload,
+  ProjectFlock,
+  UpdateProjectFlockPayload,
+} from '@/types/api/production/project-flock';
+import { BaseApiService } from '../base';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { sleep } from '@/lib/helper';
+import { httpClient } from '@/services/http/client';
+import axios from 'axios';
+
+export class ProjectFlockService extends BaseApiService<
+  ProjectFlock,
+  CreateProjectFlockPayload,
+  UpdateProjectFlockPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+  async getSingleProjectFlockKandang(): Promise<BaseApiResponse | undefined> {
+    try {
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+}
diff --git a/src/types/api/marketing/marketing.d.ts b/src/types/api/marketing/marketing.d.ts
index b577802a..14c6c115 100644
--- a/src/types/api/marketing/marketing.d.ts
+++ b/src/types/api/marketing/marketing.d.ts
@@ -15,6 +15,9 @@ export type BaseMarketing = {
   so_date: string;
   sales_person: CreatedUser;
   notes: string;
+  grand_total: number;
+  approval: BaseApproval;
+  marketing_products?: MarketingProducts[];
 };
 
 export type MarketingProducts = {
@@ -22,18 +25,29 @@ export type MarketingProducts = {
   qty: number;
   unit_price: number;
   avg_weigth: number;
+  total_weight: number;
   total_price: number;
   product_warehouse: ProductWarehouse;
-  delivery_date?: string;
-  vehicle_number?: string;
+  marketing_delivery_products?: MarketingDeliveryProducts;
 };
 
-export type SalesOrder = BaseMetadata & BaseMarketing;
+export type MarketingDeliveryProducts = {
+  id: number;
+  qty: number;
+  unit_price: number;
+  avg_weigth: number;
+  total_weight: number;
+  total_price: number;
+  delivery_date: string;
+  vehicle_number: string;
+};
 
-export type CreateSalesOrderPayload = {
+export type Marketing = BaseMetadata & BaseMarketing;
+
+export type CreateMarketingPayload = {
   customer_id: number;
   date: string;
   notes: string;
 };
 
-export type UpdateSalesOrderPayload = CreateSalesOrderPayload;
+export type UpdateMarketingPayload = CreateMarketingPayload;
diff --git a/src/types/api/master-data/kandang.d.ts b/src/types/api/master-data/kandang.d.ts
index 8ad20f15..eafa0334 100644
--- a/src/types/api/master-data/kandang.d.ts
+++ b/src/types/api/master-data/kandang.d.ts
@@ -9,6 +9,7 @@ export type BaseKandang = {
   location: BaseLocation;
   capacity: number;
   pic: BaseUser;
+  project_flock_kandang_id?: number;
 };
 
 export type Kandang = BaseMetadata & BaseKandang;
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index 25c1c153..2cb2503d 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -1,5 +1,7 @@
 import { Kandang } from '@/type/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Supplier } from '../master-data/supplier';
 
 export type BaseProjectFlockKandang = {
   id: number;
@@ -7,7 +9,15 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
-  available_quantity?: number;
+  available_qtys?: AvailableQty[];
+};
+
+export type AvailableQty = {
+  chick_in_date?: string;
+  po_number?: string;
+  document_path?: string;
+  supplier?: Supplier;
+  product_warehouse: ProductWarehouse;
 };
 
 export type ProjectFlockKandang = BaseProjectFlockKandang;

From 158971d9049df56a7e83d5d989afb3d87e35ae14 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 6 Nov 2025 13:45:52 +0700
Subject: [PATCH 201/212] feat(FE-166-169): Slicing UI Penjualan Form dan
 Client side validation

---
 src/app/globals.css                           |   5 +
 src/app/marketing/sales-orders/add/page.tsx   |   6 +-
 src/components/Modal.tsx                      |  10 +-
 src/components/input/PatternInput.tsx         |  90 ++++
 src/components/input/SelectInput.tsx          |  16 +-
 .../sales-orders/SalesOrderTable.tsx          | 415 ++++++++++------
 .../sales-orders/form/SalesForm.schema.ts     |  27 ++
 .../marketing/sales-orders/form/SalesForm.tsx | 448 ++++++++++++++++++
 .../form/repeater/MarketingProduct.schema.ts  |  62 +++
 .../form/repeater/MarketingProductForm.tsx    | 358 ++++++++++++++
 src/lib/helper.ts                             |  23 +
 src/services/api/marketing.ts                 |   6 +
 src/types/api/marketing/marketing.d.ts        |  30 +-
 13 files changed, 1344 insertions(+), 152 deletions(-)
 create mode 100644 src/components/input/PatternInput.tsx
 create mode 100644 src/components/pages/marketing/sales-orders/form/repeater/MarketingProduct.schema.ts
 create mode 100644 src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx
 create mode 100644 src/services/api/marketing.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index c3d05c67..e50e020d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,3 +48,8 @@
 html {
   scrollbar-gutter: initial;
 }
+
+.react-select__menu-portal {
+  position: relative;
+  z-index: 99999 !important;
+}
diff --git a/src/app/marketing/sales-orders/add/page.tsx b/src/app/marketing/sales-orders/add/page.tsx
index ed193137..e60085ef 100644
--- a/src/app/marketing/sales-orders/add/page.tsx
+++ b/src/app/marketing/sales-orders/add/page.tsx
@@ -1,7 +1,9 @@
+import SalesForm from '@/components/pages/marketing/sales-orders/form/SalesForm';
+
 const AddSalesOrder = () => {
   return (
-    <div>
-      <p>Tambah Sales Order</p>
+    <div className='size-full p-4'>
+      <SalesForm />
     </div>
   );
 };
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 958d88dd..ea53d2c9 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -48,6 +48,7 @@ export const useModal = () => {
 
 interface ModalProps {
   ref: RefObject<HTMLDialogElement | null>;
+  id?: string;
   children?: ReactNode;
   closeOnBackdrop?: boolean;
   className?: {
@@ -56,7 +57,13 @@ interface ModalProps {
   };
 }
 
-const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
+const Modal = ({
+  ref,
+  id,
+  children,
+  closeOnBackdrop,
+  className,
+}: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
       ref.current?.close();
@@ -66,6 +73,7 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
   return (
     <dialog
       ref={ref}
+      id={id}
       className={cn('modal', className?.modal)}
       onClick={handleBackdropClick}
     >
diff --git a/src/components/input/PatternInput.tsx b/src/components/input/PatternInput.tsx
new file mode 100644
index 00000000..9af1b68e
--- /dev/null
+++ b/src/components/input/PatternInput.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { ChangeEvent } from 'react';
+import {
+  PatternFormat,
+  NumberFormatBase,
+  NumberFormatBaseProps,
+  OnValueChange,
+} from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface PatternInputProps extends Omit<TextInputProps, 'type'> {
+  /**
+   * Format pattern, contoh: "##/##/####", "(###) ###-####", "####-####-####"
+   */
+  format: string;
+  /** Mask karakter kosong, misal "_" */
+  mask?: string;
+  /** Menampilkan mask walau value kosong */
+  allowEmptyFormatting?: boolean;
+  /** Placeholder karakter format, default: "#" */
+  patternChar?: string;
+  /** Jika true, izinkan huruf (A-Z) selain angka */
+  inputVehicleNumber?: boolean;
+  type?: 'text' | 'password' | 'tel';
+}
+
+/**
+ * PatternInput – tetap backward-compatible dengan Storybook
+ * tapi bisa menerima huruf jika `allowCharacters={true}`
+ */
+const PatternInput = ({
+  type = 'text',
+  format,
+  mask = '_',
+  allowEmptyFormatting = false,
+  patternChar = '#',
+  inputVehicleNumber = false,
+  onChange,
+  ...restProps
+}: PatternInputProps) => {
+  const handleValueChange: OnValueChange = (values, { event }) => {
+    const newEvent = event as ChangeEvent<HTMLInputElement> | undefined;
+    if (newEvent) {
+      newEvent.target.value = values.value.toUpperCase();
+      onChange?.(newEvent);
+    }
+  };
+
+  if (inputVehicleNumber) {
+    return (
+      <NumberFormatBase
+        {...restProps}
+        type={type}
+        customInput={TextInput}
+        format={(value) => {
+          const clean = value.replace(/[^a-z0-9]/gi, '').toUpperCase();
+
+          const match = clean.match(/^([A-Z]{0,2})(\d{0,4})([A-Z]{0,3})$/);
+          if (!match) return clean;
+          const [, prefix, number, suffix] = match;
+          return [prefix, number, suffix].filter(Boolean).join(' ');
+        }}
+        removeFormatting={(val) => val.replace(/\s+/g, '')}
+        isValidInputCharacter={(char) => /^[a-z0-9]$/i.test(char)}
+        getCaretBoundary={(val) =>
+          Array(val.length + 1)
+            .fill(true)
+            .map(Boolean)
+        }
+        onValueChange={handleValueChange}
+      />
+    );
+  }
+
+  return (
+    <PatternFormat
+      {...restProps}
+      type={type}
+      format={format}
+      mask={mask}
+      allowEmptyFormatting={allowEmptyFormatting}
+      patternChar={patternChar}
+      customInput={TextInput}
+      onValueChange={handleValueChange}
+    />
+  );
+};
+
+export default PatternInput;
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 8db939bd..8fa8b555 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -55,6 +55,7 @@ interface SelectInputBaseProps<T = OptionType> {
   delay?: number;
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
+  menuPortalTarget?: HTMLElement | null;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -68,7 +69,7 @@ const animatedComponents = makeAnimated();
 const CustomControl = <
   Option,
   IsMulti extends boolean,
-  Group extends GroupBase<Option>
+  Group extends GroupBase<Option>,
 >(
   props: ControlProps<Option, IsMulti, Group>
 ) => {
@@ -117,6 +118,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     createables = false,
     onInputChange,
     startAdornment,
+    menuPortalTarget,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -186,7 +188,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
-        value={value ?? (isMulti ? [] : undefined)}
+        value={value ?? (isMulti ? [] : null)}
         onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}
@@ -257,7 +259,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           startAdornment,
         })}
         menuPortalTarget={
-          typeof document !== 'undefined' ? document.body : undefined
+          typeof document !== 'undefined'
+            ? (menuPortalTarget ?? document.body)
+            : undefined
         }
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -274,8 +278,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
 const useSelect = <T,>(
   basePath: string,
-  valueKey: keyof T,
-  labelKey: keyof T,
+  valueKey: keyof T | string,
+  labelKey: keyof T | string,
   searchKey: string = 'search',
   params?: { [key: string]: string }
 ) => {
@@ -286,7 +290,7 @@ const useSelect = <T,>(
       [searchKey]: inputValue ?? '',
       ...params,
     }).toString();
-  }, [inputValue, searchKey]);
+  }, [inputValue, searchKey, params]);
 
   const optionsUrl = `${basePath}?${optionsUrlParams}`;
 
diff --git a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
index c8357e88..52a67b58 100644
--- a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
+++ b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
@@ -1,13 +1,19 @@
 'use client';
 
 import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { cn } from '@/lib/helper';
-import { Marketing, MarketingProducts } from '@/types/api/marketing/marketing';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
 import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
 import { CellContext } from '@tanstack/react-table';
@@ -35,7 +41,7 @@ const RowsOptionsMenu = ({
     >
       <div className='flex flex-col gap-1'>
         <Button
-          href={`recording/detail/?recordingId=${props.row.original.id}`}
+          href={`/marketing/sales-orders/detail/?salesOrderId=${props.row.original.id}`}
           variant='ghost'
           color='primary'
           className='justify-start text-sm'
@@ -44,7 +50,7 @@ const RowsOptionsMenu = ({
           Detail
         </Button>
         <Button
-          href={`recording/detail/edit/?recordingId=${props.row.original.id}`}
+          href={`/marketing/sales-orders/detail/edit/?salesOrderId=${props.row.original.id}`}
           variant='ghost'
           color='warning'
           className='justify-start text-sm'
@@ -56,25 +62,32 @@ const RowsOptionsMenu = ({
           onClick={deleteClickHandler}
           variant='ghost'
           color='error'
-          className='text-error hover:text-inherit'
+          className='text-error hover:text-inherit justify-start text-sm'
         >
-          <Icon
-            icon='mdi:delete-outline'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
+          <Icon icon='mdi:delete-outline' width={16} height={16} />
           Delete
         </Button>
       </div>
     </div>
   );
 };
+
 const SalesOrderTable = () => {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
+  const [approveAction, setApproveAction] = useState<
+    'approve' | 'reject' | null
+  >(null);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).filter(
+    (id) => rowSelection[id]
+  );
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setSearch(e.target.value);
@@ -91,139 +104,267 @@ const SalesOrderTable = () => {
     []
   );
 
+  const approveClickHandler = () => {
+    setApproveAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApproveAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    toQueryString: getTableFilterToQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+    },
+  });
+
   return (
-    <div className='flex flex-col gap-4'>
-      <div className='flex flex-col gap-2 mb-4'>
-        <TableToolbar
-          addButton={{
-            href: 'recording/add',
-            label: 'Tambah Sales Order',
+    <>
+      <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <TableToolbar
+            addButton={{
+              href: '/marketing/sales-orders/add',
+              label: 'Tambah Sales Order',
+            }}
+            search={{
+              value: search,
+              onChange: searchChangeHandler,
+              placeholder: 'Cari Sales Order',
+            }}
+          />
+          <TableRowSizeSelector
+            value={pageSize}
+            onChange={pageSizeChangeHandler}
+            options={ROWS_OPTIONS}
+          />
+          <div className='flex flex-row gap-2'>
+            <Button
+              color='success'
+              onClick={approveClickHandler}
+              className='justify-start text-sm'
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              color='error'
+              onClick={rejectClickHandler}
+              className='justify-start text-sm'
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
+        </div>
+        <Table
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          data={[
+            {
+              id: 1,
+              so_number: 'SO-001',
+              so_date: '2024-01-01',
+              so_docs: 'Dokumen SO 1.pdf',
+              customer: {
+                id: 1,
+                name: 'Customer A',
+              } as Customer,
+              sales_person: {
+                id: 1,
+                name: 'Sales Person A',
+              },
+              notes: 'Catatan untuk SO 1',
+              grand_total: 1000000,
+              approval: {
+                step_name: 'Approved',
+              },
+              marketing_products: [
+                {
+                  id: 1,
+                  qty: 10,
+                  unit_price: 100000,
+                  avg_weight: 1.5,
+                  total_weight: 15,
+                  total_price: 1000000,
+                  product_warehouse: {
+                    id: 1,
+                    product: {
+                      id: 1,
+                      name: 'Product A',
+                    },
+                  },
+                } as MarketingProduct,
+                {
+                  id: 2,
+                  qty: 5,
+                  unit_price: 200000,
+                  avg_weight: 2.0,
+                  total_weight: 10,
+                  total_price: 1000000,
+                  product_warehouse: {
+                    id: 2,
+                    product: {
+                      id: 2,
+                      name: 'Product B',
+                    },
+                  },
+                } as MarketingProduct,
+              ],
+            } as Marketing,
+          ]}
+          columns={[
+            {
+              id: 'select',
+              header: ({ table }) => (
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={table.getIsAllRowsSelected()}
+                    indeterminate={table.getIsSomeRowsSelected()}
+                    onChange={table.getToggleAllRowsSelectedHandler()}
+                  />
+                </div>
+              ),
+              cell: ({ row }) => (
+                <div>
+                  <CheckboxInput
+                    name='row'
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
+              ),
+            },
+            {
+              accessorKey: 'so_number',
+              header: 'No. Order',
+            },
+            {
+              accessorKey: 'so_date',
+              header: 'Tanggal',
+            },
+            {
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+            },
+            {
+              accessorKey: 'customer.name',
+              header: 'Customer',
+            },
+            {
+              accessorKey: 'grand_total',
+              header: 'Grand Total',
+            },
+            {
+              accessorKey: 'marketing_products.length',
+              header: 'Product Details',
+              cell: (props) => (
+                <ul className='list-disc list-inside'>
+                  {props.row.original.marketing_products?.map((product) => (
+                    <li key={product.id}>
+                      {product.product_warehouse.product.name} - Qty:{' '}
+                      {product.qty}
+                    </li>
+                  ))}
+                </ul>
+              ),
+            },
+            {
+              header: 'Aksi',
+              cell: (props) => {
+                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 = () => {};
+
+                return (
+                  <>
+                    {currentPageSize > 2 && (
+                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                        <RowsOptionsMenu
+                          type='dropdown'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowDropdownOptions>
+                    )}
+
+                    {currentPageSize <= 2 && (
+                      <RowCollapseOptions>
+                        <RowsOptionsMenu
+                          type='collapse'
+                          props={props}
+                          deleteClickHandler={deleteClickHandler}
+                        />
+                      </RowCollapseOptions>
+                    )}
+                  </>
+                );
+              },
+            },
+          ]}
+          pageSize={pageSize}
+          page={page}
+          onPageChange={setPage}
+          className={{
+            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',
           }}
-          search={{
-            value: search,
-            onChange: searchChangeHandler,
-            placeholder: 'Cari Sales Order',
-          }}
-        />
-        <TableRowSizeSelector
-          value={pageSize}
-          onChange={pageSizeChangeHandler}
-          options={ROWS_OPTIONS}
         />
       </div>
-      <Table
-        data={[
-          {
-            id: 1,
-            so_number: 'SO-001',
-            so_date: '2024-01-01',
-            so_docs: 'Dokumen SO 1.pdf',
-            customer: {
-              id: 1,
-              name: 'Customer A',
-            } as Customer,
-            sales_person: {
-              id: 1,
-              name: 'Sales Person A',
-            },
-            notes: 'Catatan untuk SO 1',
-            grand_total: 1000000,
-            approval: {
-              step_name: 'Approved',
-            },
-            marketing_products: [
-              {
-                id: 1,
-                qty: 10,
-                unit_price: 100000,
-                avg_weigth: 1.5,
-                total_weight: 15,
-                total_price: 1000000,
-                product_warehouse: {
-                  id: 1,
-                  product: {
-                    id: 1,
-                    name: 'Product A',
-                  },
-                },
-              } as MarketingProducts,
-              {
-                id: 2,
-                qty: 5,
-                unit_price: 200000,
-                avg_weigth: 2.0,
-                total_weight: 10,
-                total_price: 1000000,
-                product_warehouse: {
-                  id: 2,
-                  product: {
-                    id: 2,
-                    name: 'Product B',
-                  },
-                },
-              } as MarketingProducts,
-            ],
-          } as Marketing,
-        ]}
-        columns={[
-          {
-            header: '#',
-            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
-          },
-          {
-            accessorKey: 'so_number',
-            header: 'No. Order',
-          },
-          {
-            accessorKey: 'so_date',
-            header: 'Tanggal',
-          },
-          {
-            accessorKey: 'approval.step_name',
-            header: 'Status',
-          },
-          {
-            accessorKey: 'customer.name',
-            header: 'Customer',
-          },
-          {
-            accessorKey: 'grand_total',
-            header: 'Grand Total',
-          },
-          {
-            accessorKey: 'marketing_products.length',
-            header: 'Product Details',
-            cell: (props) => (
-              <ul className='list-disc list-inside'>
-                {props.row.original.marketing_products?.map((product) => (
-                  <li key={product.id}>
-                    {product.product_warehouse.product.name} - Qty:{' '}
-                    {product.qty}
-                  </li>
-                ))}
-              </ul>
-            ),
-          },
-          {
-            header: 'Aksi',
-            cell: (props) => {},
-          },
-        ]}
-        pageSize={pageSize}
-        page={page}
-        onPageChange={setPage}
-        className={{
-          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 Project Flock ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
         }}
       />
-    </div>
+
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approveAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approveAction} data penjualan (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approveAction === 'approve' ? 'success' : 'error',
+        }}
+      />
+    </>
   );
 };
 export default SalesOrderTable;
diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts b/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
index e69de29b..cc6c5ee5 100644
--- a/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
+++ b/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
@@ -0,0 +1,27 @@
+import * as Yup from 'yup';
+import { MarketingProduct } from '@/types/api/marketing/marketing';
+import {
+  MarketingProductFormValues,
+  MarketingProductSchema,
+} from './repeater/MarketingProduct.schema';
+
+type MarketingSchema = {
+  customer_id: number | undefined;
+  so_date: string | undefined;
+  notes: string | undefined;
+  marketing_products: MarketingProductFormValues[];
+};
+
+export const MarketingSchema: Yup.ObjectSchema<MarketingSchema> = Yup.object({
+  customer_id: Yup.number().required('Customer wajib diisi!'),
+  so_date: Yup.string().required('Tanggal wajib diisi!'),
+  notes: Yup.string().required('Catatan wajib diisi!'),
+  marketing_products: Yup.array()
+    .of(MarketingProductSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+});
+
+export const UpdateMarketingSchema = MarketingSchema;
+
+export type MarketingFormValues = Yup.InferType<typeof MarketingSchema>;
diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
index e69de29b..ec7a7076 100644
--- a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
+++ b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
@@ -0,0 +1,448 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import TextArea from '@/components/input/TextArea';
+import Modal, { useModal } from '@/components/Modal';
+import Table from '@/components/Table';
+import { cn, formatCurrency, formatNumber } from '@/lib/helper';
+import {
+  CreateMarketingPayload,
+  CreateMarketingProductPayload,
+  Marketing,
+  MarketingProduct,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useEffect, useState } from 'react';
+import MarketingProductForm from './repeater/MarketingProductForm';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import { Customer } from '@/types/api/master-data/customer';
+import { CustomerApi } from '@/services/api/master-data';
+import { useFormik } from 'formik';
+import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing';
+import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
+
+const SalesForm = ({
+  formType = 'add',
+  initialValues,
+}: {
+  formType?: 'add' | 'edit';
+  initialValues?: Marketing;
+}) => {
+  const addProductModal = useModal();
+
+  const [selectedMarketingProduct, setSelectedMarketingProduct] =
+    useState<MarketingProduct | null>(null);
+  const [marketingProducts, setMarketingProducts] = useState<
+    MarketingProduct[]
+  >(initialValues?.marketing_products || []);
+  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
+    null
+  );
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+  const [grandTotal, setGrandTotal] = useState<number>(0);
+
+  const {
+    options: customerOptions,
+    rawData: customerRawData,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  const handleAddProduct = () => {
+    addProductModal.openModal();
+  };
+  const handleDeleteProduct = (id: number) => {
+    setMarketingProducts((prev) => prev.filter((product) => product.id !== id));
+  };
+  const handleBulkDeleteProduct = () => {
+    setMarketingProducts((prev) =>
+      prev.filter((product) => !selectedRowIds.includes(product.id))
+    );
+  };
+  const handleAddSubmitProduct = async (
+    values: CreateMarketingProductPayload
+  ) => {
+    const newMarketingProduct: MarketingProduct = {
+      id: marketingProducts.length + 1,
+      product_warehouse: values.product_warehouse!,
+      unit_price: values.unit_price as number,
+      total_weight: values.total_weight as number,
+      qty: values.qty as number,
+      avg_weight: values.avg_weight as number,
+      total_price: values.total_price as number,
+      marketing_delivery_products: {
+        id: marketingProducts.length + 1,
+        vehicle_number: values.vehicle_number as string,
+        delivery_date: values.delivery_date as string,
+        unit_price: values.unit_price as number,
+        total_weight: values.total_weight as number,
+        qty: values.qty as number,
+        avg_weight: values.avg_weight as number,
+        total_price: values.total_price as number,
+      },
+    };
+    const newMarketingProductPayload: MarketingProductFormValues = {
+      vehicle_number: values.vehicle_number as string,
+      kandang_id: values.kandang_id as number,
+      kandang: {
+        value: values.kandang_id as number,
+        label: values.kandang?.name as string,
+      },
+      product_warehouse_id: values.product_warehouse_id as number,
+      product_warehouse: {
+        value: values.product_warehouse?.id as number,
+        label: values.product_warehouse?.product.name as string,
+      },
+      unit_price: values.unit_price,
+      total_weight: values.total_weight,
+      qty: values.qty,
+      uom: values.uom as string,
+      avg_weight: values.avg_weight,
+      total_price: values.total_price,
+      delivery_date: values.delivery_date as string,
+    };
+    setMarketingProducts((prev) => [...prev, newMarketingProduct]);
+    formik.setValues({
+      ...formik.values,
+      marketing_products: [
+        ...formik.values.marketing_products,
+        newMarketingProductPayload,
+      ],
+    });
+    setGrandTotal((prev) => prev + (values.total_price as number));
+    addProductModal.closeModal();
+  };
+  const handleChangeCustomer = (val: OptionType | OptionType[] | null) => {
+    setSelectedCustomer(val as OptionType);
+    formik.setFieldValue('customer_id', (val as OptionType)?.value);
+  };
+
+  const createProjectFlockHandler = async (values: CreateMarketingPayload) => {
+    console.log(values);
+    const createMarketingRes = await MarketingApi.create(values);
+    if (isResponseSuccess(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    if (isResponseError(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+  };
+  const updateProjectFlockHandler = async (values: CreateMarketingPayload) => {
+    console.log(values);
+    const createMarketingRes = await MarketingApi.update(
+      initialValues?.id as number,
+      values
+    );
+    if (isResponseSuccess(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+    if (isResponseError(createMarketingRes)) {
+      console.log(createMarketingRes);
+    }
+  };
+
+  const formik = useFormik<MarketingFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      so_date: undefined,
+      notes: '',
+      customer_id: initialValues?.customer?.id || undefined,
+      marketing_products: [],
+    },
+    validationSchema: MarketingSchema,
+    onSubmit: async (values) => {
+      const payload = {
+        customer_id: values.customer_id as number,
+        date: values.so_date as string,
+        notes: values.notes as string,
+        marketing_products: values.marketing_products,
+      } as CreateMarketingPayload;
+      switch (formType) {
+        case 'add':
+          createProjectFlockHandler(payload);
+          break;
+        case 'edit':
+          updateProjectFlockHandler(payload);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues(formik.initialValues);
+  }, [formikSetValues, formik.initialValues]);
+
+  return (
+    <>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+      >
+        <FormHeader
+          title='Tambah Sales Order'
+          backUrl='/marketing/sales-orders'
+        />
+        <Card
+          title='Informasi Order'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <div className='grid grid-cols-2 gap-3 mt-3'>
+            <SelectInput
+              label='Pelanggan'
+              options={customerOptions}
+              isLoading={isLoadingCustomerOptions}
+              value={selectedCustomer}
+              onChange={handleChangeCustomer}
+              isError={
+                formik.touched.customer_id && Boolean(formik.errors.customer_id)
+              }
+              errorMessage={formik.errors.customer_id}
+              isClearable
+              placeholder='Pilih Pelanggan'
+            />
+            <DateInput
+              name='so_date'
+              label='Tanggal'
+              value={formik.values.so_date}
+              onChange={formik.handleChange}
+              isError={formik.touched.so_date && Boolean(formik.errors.so_date)}
+              errorMessage={formik.errors.so_date}
+              placeholder='Pilih Tanggal'
+            />
+          </div>
+        </Card>
+        <Card
+          title='Daftar Produk'
+          className={{
+            wrapper: 'bg-white w-full',
+          }}
+        >
+          <Table<MarketingProduct>
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            data={marketingProducts}
+            columns={[
+              {
+                id: 'select',
+                header: ({ table }) => (
+                  <div className='w-full flex flex-row justify-center'>
+                    <CheckboxInput
+                      name='allRow'
+                      checked={table.getIsAllRowsSelected()}
+                      indeterminate={table.getIsSomeRowsSelected()}
+                      onChange={table.getToggleAllRowsSelectedHandler()}
+                    />
+                  </div>
+                ),
+                cell: ({ row }) => (
+                  <div>
+                    <CheckboxInput
+                      name='row'
+                      checked={row.getIsSelected()}
+                      disabled={!row.getCanSelect()}
+                      indeterminate={row.getIsSomeSelected()}
+                      onChange={row.getToggleSelectedHandler()}
+                    />
+                  </div>
+                ),
+              },
+              {
+                accessorFn(row) {
+                  return row.marketing_delivery_products?.vehicle_number;
+                },
+                header: 'No. Polisi',
+              },
+              {
+                accessorFn(row) {
+                  return row.product_warehouse.warehouse.name;
+                },
+                header: 'Kandang',
+              },
+              {
+                accessorFn(row) {
+                  return row.product_warehouse.product.name;
+                },
+                header: 'Produk',
+              },
+              {
+                accessorFn(row) {
+                  return formatCurrency(row.unit_price);
+                },
+                header: 'Harga Satuan (Rp)',
+              },
+              {
+                accessorFn(row) {
+                  return formatNumber(row.total_weight);
+                },
+                header: 'Total Bobot (Kg)',
+              },
+              {
+                accessorFn(row) {
+                  return formatNumber(row.qty);
+                },
+                header: 'Kuantitas',
+              },
+              {
+                accessorFn(row) {
+                  return formatNumber(row.avg_weight);
+                },
+                header: 'Avg. Bobot (Kg)',
+              },
+              {
+                accessorFn(row) {
+                  return formatCurrency(row.total_price);
+                },
+                header: 'Total Penjualan (Rp)',
+              },
+              {
+                header: 'Aksi',
+                cell: (props) => {
+                  return (
+                    <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+                      <Button
+                        color='error'
+                        className='p-1'
+                        onClick={() => {
+                          handleDeleteProduct(props.row.original.id);
+                        }}
+                      >
+                        <Icon icon='mdi:trash' width={16} height={16} />
+                      </Button>
+                    </div>
+                  );
+                },
+              },
+            ]}
+            className={{
+              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-2 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-end',
+              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyColumnClassName:
+                'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
+              paginationClassName: 'hidden',
+            }}
+            emptyContent={
+              <div
+                className={cn(
+                  'w-full h-16 flex flex-col justify-center items-center gap-2'
+                )}
+              >
+                <span className='text-gray-500'>Belum ada data penjualan</span>
+              </div>
+            }
+          />
+          <div className='flex flex-row gap-3 mt-3'>
+            <Button
+              type='button'
+              variant='outline'
+              className='justify-start w-fit py-1 text-sm'
+              onClick={handleAddProduct}
+            >
+              <Icon icon='mdi:plus' width={16} height={16} />
+              Tambah Produk
+            </Button>
+            {selectedRowIds.length > 0 && (
+              <Button
+                type='button'
+                variant='outline'
+                color='error'
+                className='justify-start w-fit py-1 text-sm'
+                onClick={handleBulkDeleteProduct}
+              >
+                <Icon icon='mdi:trash' width={16} height={16} />
+                Hapus
+                {selectedRowIds.length > 0
+                  ? ` (${selectedRowIds.length})`
+                  : ''}{' '}
+                Produk
+              </Button>
+            )}
+          </div>
+          {JSON.stringify(formik.errors)}
+        </Card>
+        <div className='grid grid-cols-2 gap-3'>
+          <TextArea
+            name='notes'
+            label='Catatan'
+            rows={3}
+            placeholder='Masukan catatan penjualan'
+            value={formik.values.notes}
+            onChange={formik.handleChange}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes}
+          />
+          <div className='flex flex-col h-full justify-between items-end py-6'>
+            <span>Total Penjualan</span>
+            <span className='text-lg font-semibold'>
+              {formatCurrency(grandTotal)}
+            </span>
+          </div>
+        </div>
+        <div className='flex flex-row items-start justify-center gap-2 mt-4'>
+          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+      <Modal
+        ref={addProductModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'max-w-4/5 z-100',
+        }}
+        id='marketing-product-modal'
+      >
+        <div className='flex flex-col gap-4'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3 className='text-lg font-semibold mb-4'>Tambah Produk</h3>
+            <Button
+              variant='ghost'
+              color='error'
+              className='rounded-full'
+              onClick={addProductModal.closeModal}
+            >
+              <Icon icon='mdi:close' width={20} height={20} />
+            </Button>
+          </div>
+          <div>
+            <MarketingProductForm
+              onSubmitForm={handleAddSubmitProduct}
+              modalRef={addProductModal.ref}
+              data={marketingProducts}
+              initialValues={selectedMarketingProduct ?? undefined}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default SalesForm;
diff --git a/src/components/pages/marketing/sales-orders/form/repeater/MarketingProduct.schema.ts b/src/components/pages/marketing/sales-orders/form/repeater/MarketingProduct.schema.ts
new file mode 100644
index 00000000..58705af3
--- /dev/null
+++ b/src/components/pages/marketing/sales-orders/form/repeater/MarketingProduct.schema.ts
@@ -0,0 +1,62 @@
+import * as Yup from 'yup';
+
+type MarketingProductSchemaType = {
+  vehicle_number: string | undefined;
+  kandang_id?: number;
+  kandang?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse_id?: number;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  uom: string | undefined | null;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  delivery_date?: string | undefined | null;
+};
+
+export const MarketingProductSchema: Yup.ObjectSchema<MarketingProductSchemaType> =
+  Yup.object({
+    vehicle_number: Yup.string().required('No. Polisi wajib diisi!'),
+    kandang: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    kandang_id: Yup.number()
+      .min(1, 'Kandang wajib diisi!')
+      .required('Kandang wajib diisi!'),
+    product_warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+    unit_price: Yup.number()
+      .min(1, 'Harga Satuan wajib diisi!')
+      .required('Harga Satuan wajib diisi!'),
+    total_weight: Yup.number()
+      .min(1, 'Total Bobot wajib diisi!')
+      .required('Total Bobot wajib diisi!'),
+    qty: Yup.number()
+      .min(1, 'Kuantitas wajib diisi!')
+      .required('Kuantitas wajib diisi!'),
+    uom: Yup.string().nullable(),
+    avg_weight: Yup.number()
+      .min(1, 'Avg. Bobot wajib diisi!')
+      .required('Avg. Bobot wajib diisi!'),
+    total_price: Yup.number()
+      .min(1, 'Total Penjualan wajib diisi!')
+      .required('Total Penjualan wajib diisi!'),
+    delivery_date: Yup.string().required().nullable(),
+  });
+
+export type MarketingProductFormValues = Yup.InferType<
+  typeof MarketingProductSchema
+>;
diff --git a/src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx b/src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx
new file mode 100644
index 00000000..7408bfb3
--- /dev/null
+++ b/src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx
@@ -0,0 +1,358 @@
+'use client';
+
+import TextInput from '@/components/input/TextInput';
+import {
+  CreateMarketingPayload,
+  CreateMarketingProductPayload,
+  MarketingProduct,
+} from '@/types/api/marketing/marketing';
+import { useFormik } from 'formik';
+import {
+  MarketingProductFormValues,
+  MarketingProductSchema,
+} from './MarketingProduct.schema';
+import { RefObject, use, useEffect, useRef, useState } from 'react';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { KandangApi } from '@/services/api/master-data';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { ProductWarehouseApi } from '@/services/api/inventory';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { isResponseSuccess } from '@/lib/api-helper';
+import PatternInput from '@/components/input/PatternInput';
+import { formatVechicleNumber } from '@/lib/helper';
+
+const MarketingProductForm = ({
+  initialValues,
+  data,
+  modalRef,
+  onSubmitForm,
+}: {
+  initialValues?: MarketingProduct;
+  data: MarketingProduct[];
+  modalRef?: RefObject<HTMLDialogElement | null>;
+  onSubmitForm?: (values: CreateMarketingProductPayload) => Promise<void>;
+}) => {
+  // State
+  const [selectedOptionsKandang, setSelectedOptionsKandang] =
+    useState<OptionType | null>(null);
+  const [selectedOptionsWarehouse, setSelectedOptionsWarehouse] = useState<
+    OptionType | null | undefined
+  >(undefined);
+  const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Options Data
+  const {
+    options: kandangSourceOptions,
+    rawData: kandangSourceRawData,
+    isLoadingOptions: isLoadingKandangSourceOptions,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+  const {
+    options: warehouseSourceOptions,
+    rawData: warehouseSourceRawData,
+    isLoadingOptions: isLoadingWarehouseSourceOptions,
+  } = useSelect<ProductWarehouse>(
+    ProductWarehouseApi.basePath,
+    'id',
+    'product.name',
+    'search',
+    {
+      warehouse_id: selectedOptionsKandang?.value?.toString() ?? '',
+    }
+  );
+
+  // Handler
+  const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedOptionsKandang(val as OptionType);
+    formik.setFieldValue('kandang', val as OptionType);
+    formik.setFieldValue('kandang_id', (val as OptionType)?.value);
+    formik.setFieldValue('product_warehouse_id', null);
+    formik.setFieldValue('qty', null);
+    warehouseChangeHandler(null);
+  };
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedOptionsWarehouse(val as OptionType);
+    formik.setFieldValue('product_warehouse', val as OptionType);
+    formik.setFieldValue('product_warehouse_id', (val as OptionType)?.value);
+    if (isResponseSuccess(warehouseSourceRawData)) {
+      const productWarehouse = warehouseSourceRawData?.data.find(
+        (item: ProductWarehouse) => item.id === (val as OptionType)?.value
+      );
+      if (selectedOptionsWarehouse?.value !== null) {
+        formik.setFieldValue('qty', productWarehouse?.quantity);
+        handleBlurField('qty');
+      } else {
+        formik.setFieldValue('qty', null);
+      }
+    }
+  };
+
+  // Formik
+  const formik = useFormik<MarketingProductFormValues>({
+    enableReinitialize: true,
+    initialValues: {
+      vehicle_number:
+        initialValues?.marketing_delivery_products?.vehicle_number || undefined,
+      kandang_id: initialValues?.product_warehouse.warehouse.id || undefined,
+      kandang: {
+        value: initialValues?.product_warehouse.warehouse.id as number,
+        label: initialValues?.product_warehouse.warehouse.name as string,
+      },
+      product_warehouse: {
+        value: initialValues?.product_warehouse.product.id as number,
+        label: initialValues?.product_warehouse.product.name as string,
+      },
+      product_warehouse_id:
+        initialValues?.product_warehouse.product.id || undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      uom: initialValues?.product_warehouse?.product?.uom?.name || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
+      delivery_date:
+        initialValues?.marketing_delivery_products?.delivery_date ||
+        new Date().toDateString() ||
+        undefined,
+    },
+    validationSchema: MarketingProductSchema,
+    onSubmit: async (values) => {
+      setFormErrorMessage('');
+      if (
+        isResponseSuccess(kandangSourceRawData) &&
+        isResponseSuccess(warehouseSourceRawData)
+      ) {
+        const productWarehouse = warehouseSourceRawData?.data.find(
+          (item: ProductWarehouse) => item.id === values.product_warehouse_id
+        );
+        const kandang = kandangSourceRawData?.data.find(
+          (item: Kandang) => item.id === values.kandang_id
+        );
+
+        const marketingProduct: CreateMarketingProductPayload = {
+          id: initialValues?.id || undefined,
+          vehicle_number: formatVechicleNumber(values.vehicle_number as string),
+          kandang_id: values.kandang_id as number,
+          kandang: kandang,
+          product_warehouse_id: values.product_warehouse_id as number,
+          product_warehouse: productWarehouse,
+          unit_price: values.unit_price as number,
+          total_weight: values.total_weight as number,
+          qty: values.qty as number,
+          uom: values.uom as string,
+          avg_weight: values.avg_weight as number,
+          total_price: values.total_price as number,
+          delivery_date: values.delivery_date as string,
+        };
+
+        onSubmitForm?.(marketingProduct);
+        handleResetForm();
+      }
+    },
+  });
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues(formik.initialValues);
+  }, [formikSetValues, formik.initialValues]);
+
+  const handleResetForm = () => {
+    setSelectedOptionsKandang(null);
+    setSelectedOptionsWarehouse(null);
+    setFormErrorMessage('');
+    formik.resetForm({
+      values: {
+        vehicle_number: '',
+        kandang_id: undefined,
+        kandang: null,
+        product_warehouse: null,
+        product_warehouse_id: undefined,
+        unit_price: '',
+        total_weight: '',
+        qty: '',
+        uom: '',
+        avg_weight: '',
+        total_price: '',
+        delivery_date: new Date().toDateString(),
+      },
+    });
+  };
+
+  const handleBlurField = (field: string) => {
+    const { qty, unit_price, total_price, avg_weight, total_weight } =
+      formik.values;
+
+    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
+      if (qty && unit_price && field === 'unit_price') {
+        formik.setFieldValue(
+          'total_price',
+          (qty as number) * (unit_price as number)
+        );
+      } else if (qty && total_price && field === 'total_price') {
+        formik.setFieldValue(
+          'unit_price',
+          (total_price as number) / (qty as number)
+        );
+      }
+    }
+
+    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
+      if (qty && avg_weight && field === 'avg_weight') {
+        formik.setFieldValue(
+          'total_weight',
+          (qty as number) * (avg_weight as number)
+        );
+      } else if (qty && total_weight && field === 'total_weight') {
+        formik.setFieldValue(
+          'avg_weight',
+          (total_weight as number) / (qty as number)
+        );
+      }
+    }
+  };
+
+  return (
+    <>
+      <form
+        className='size-full'
+        onSubmit={formik.handleSubmit}
+        onReset={handleResetForm}
+      >
+        <div className='grid grid-cols-2 gap-4 z-200'>
+          <PatternInput
+            name='vehicle_number'
+            label='No. Polisi'
+            format='AA #### AAA'
+            mask='_'
+            inputVehicleNumber
+            required
+            type='text'
+            placeholder='B 1234 CDE'
+            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={
+              formik.touched.vehicle_number &&
+              Boolean(formik.errors.vehicle_number)
+            }
+            errorMessage={formik.errors.vehicle_number}
+          />
+          <SelectInput
+            required
+            label='Kandang'
+            options={kandangSourceOptions}
+            isLoading={isLoadingKandangSourceOptions}
+            value={selectedOptionsKandang}
+            onChange={kandangChangeHandler}
+            isClearable
+            menuPortalTarget={modalRef?.current}
+            isError={
+              formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
+            }
+            errorMessage={formik.errors.kandang_id}
+            placeholder='Pilih Kandang'
+          />
+          <SelectInput
+            required
+            label='Produk'
+            options={warehouseSourceOptions}
+            isLoading={isLoadingWarehouseSourceOptions}
+            value={selectedOptionsWarehouse}
+            onChange={warehouseChangeHandler}
+            isClearable
+            menuPortalTarget={modalRef?.current}
+            placeholder='Pilih Kandang Terlebih Dahulu'
+            isDisabled={!selectedOptionsKandang?.value}
+            isError={
+              formik.touched.product_warehouse_id &&
+              Boolean(formik.errors.product_warehouse_id)
+            }
+            errorMessage={formik.errors.product_warehouse_id}
+          />
+          <NumberInput
+            required
+            label='Kuantitas'
+            name='qty'
+            value={formik.values.qty}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('qty')}
+            isError={formik.touched.qty && Boolean(formik.errors.qty)}
+            errorMessage={formik.errors.qty}
+            placeholder='Masukan Kuantitas'
+          />
+          <NumberInput
+            required
+            label='Avg. Bobot (Kg)'
+            name='avg_weight'
+            value={formik.values.avg_weight}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('avg_weight')}
+            isError={
+              formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
+            }
+            errorMessage={formik.errors.avg_weight}
+            placeholder='Masukan Bobot Rata-rata'
+          />
+          <NumberInput
+            required
+            label='Harga Satuan (Rp)'
+            name='unit_price'
+            value={formik.values.unit_price}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('unit_price')}
+            isError={
+              formik.touched.unit_price && Boolean(formik.errors.unit_price)
+            }
+            errorMessage={formik.errors.unit_price}
+            placeholder='Masukan Harga Satuan'
+          />
+          <NumberInput
+            required
+            label='Total Bobot (Kg)'
+            name='total_weight'
+            value={formik.values.total_weight}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('total_weight')}
+            isError={
+              formik.touched.total_weight && Boolean(formik.errors.total_weight)
+            }
+            errorMessage={formik.errors.total_weight}
+            placeholder='Masukan Total Bobot'
+          />
+          <NumberInput
+            required
+            label='Total Penjualan (Rp)'
+            name='total_price'
+            value={formik.values.total_price}
+            onChange={formik.handleChange}
+            onBlur={() => handleBlurField('total_price')}
+            isError={
+              formik.touched.total_price && Boolean(formik.errors.total_price)
+            }
+            errorMessage={formik.errors.total_price}
+            placeholder='Masukan Total Penjualan'
+          />
+        </div>
+        <div className='flex flex-row justify-end gap-3 mt-4'>
+          <Button type='reset' color='warning' onClick={handleResetForm}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default MarketingProductForm;
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index aeda46f6..777fa6dd 100644
--- a/src/lib/helper.ts
+++ b/src/lib/helper.ts
@@ -2,6 +2,7 @@ import moment from 'moment';
 import 'moment/locale/id';
 import { twMerge } from 'tailwind-merge';
 import clsx, { ClassValue } from 'clsx';
+import { ChangeEvent } from 'react';
 
 // set locale globally
 moment.locale('id');
@@ -29,6 +30,28 @@ export const formatNumber = (
   }).format(value);
 };
 
+export function formatVechicleNumber(value: string): string {
+  let result = '';
+  for (let i = 0; i < value.length; i++) {
+    const curr = value[i];
+    const prev = value[i - 1];
+
+    // Cek apakah terjadi perpindahan dari huruf ke angka atau angka ke huruf
+    if (i > 0) {
+      const isCurrDigit = /\d/.test(curr);
+      const isPrevDigit = /\d/.test(prev);
+
+      if (isCurrDigit !== isPrevDigit) {
+        result += ' ';
+      }
+    }
+
+    result += curr;
+  }
+
+  return result.trim().replace(/\s+/g, ' ');
+}
+
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
   currency = 'IDR',
diff --git a/src/services/api/marketing.ts b/src/services/api/marketing.ts
new file mode 100644
index 00000000..308158ee
--- /dev/null
+++ b/src/services/api/marketing.ts
@@ -0,0 +1,6 @@
+import { Marketing } from '@/types/api/marketing/marketing';
+import { BaseApiService } from './base';
+
+export const MarketingApi = new BaseApiService<Marketing, unknown, unknown>(
+  '/marketing/sales-orders'
+);
diff --git a/src/types/api/marketing/marketing.d.ts b/src/types/api/marketing/marketing.d.ts
index 14c6c115..1ff52fbb 100644
--- a/src/types/api/marketing/marketing.d.ts
+++ b/src/types/api/marketing/marketing.d.ts
@@ -4,7 +4,8 @@ import {
   BaseMetadata,
   CreatedUser,
 } from '@/types/api/api-general';
-import { ProductWarehouse } from '../inventory/product-warehouse';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Kandang } from '@/types/api/master-data/kandang';
 
 export type BaseMarketing = {
   id: number;
@@ -17,14 +18,14 @@ export type BaseMarketing = {
   notes: string;
   grand_total: number;
   approval: BaseApproval;
-  marketing_products?: MarketingProducts[];
+  marketing_products?: MarketingProduct[];
 };
 
-export type MarketingProducts = {
+export type MarketingProduct = {
   id: number;
   qty: number;
   unit_price: number;
-  avg_weigth: number;
+  avg_weight: number;
   total_weight: number;
   total_price: number;
   product_warehouse: ProductWarehouse;
@@ -35,7 +36,7 @@ export type MarketingDeliveryProducts = {
   id: number;
   qty: number;
   unit_price: number;
-  avg_weigth: number;
+  avg_weight: number;
   total_weight: number;
   total_price: number;
   delivery_date: string;
@@ -48,6 +49,23 @@ export type CreateMarketingPayload = {
   customer_id: number;
   date: string;
   notes: string;
+  marketing_products: CreateMarketingProductPayload[];
 };
-
 export type UpdateMarketingPayload = CreateMarketingPayload;
+
+export type CreateMarketingProductPayload = {
+  id?: number;
+  vehicle_number: string;
+  kandang_id: string | number | undefined;
+  kandang: Kandang | undefined;
+  product_warehouse_id: string | number | undefined;
+  product_warehouse: ProductWarehouse | undefined;
+  unit_price: string | number | undefined;
+  total_weight: string | number | undefined;
+  qty: string | number | undefined;
+  uom: string | undefined;
+  avg_weight: string | number | undefined;
+  total_price: string | number | undefined;
+  delivery_date?: string | null;
+};
+export type UpdateMarketingProductPayload = CreateMarketingProductPayload;

From fcc2fced06765b6124ab4d100404e9619b9f407a Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 6 Nov 2025 16:57:17 +0700
Subject: [PATCH 202/212] feat(FE-166-167-168): slicing ui create, edit dan
 detail sales order

---
 .../sales-orders/detail/edit/page.tsx         |  38 ++-
 .../marketing/sales-orders/detail/page.tsx    |  39 ++-
 .../sales-orders/SalesOrderTable.tsx          |  63 +---
 .../sales-orders/detail/SalesOrderDetail.tsx  | 258 ++++++++++++++++
 .../sales-orders/form/SalesForm.schema.ts     |  11 +
 .../marketing/sales-orders/form/SalesForm.tsx |  75 ++---
 .../form/repeater/MarketingProductForm.tsx    |   7 +-
 src/dummy/marketing.dummy.ts                  | 285 ++++++++++++++++++
 src/services/api/marketing.ts                 |   6 -
 src/services/api/marketing/marketing.ts       | 113 +++++++
 10 files changed, 785 insertions(+), 110 deletions(-)
 create mode 100644 src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
 create mode 100644 src/dummy/marketing.dummy.ts
 delete mode 100644 src/services/api/marketing.ts
 create mode 100644 src/services/api/marketing/marketing.ts

diff --git a/src/app/marketing/sales-orders/detail/edit/page.tsx b/src/app/marketing/sales-orders/detail/edit/page.tsx
index cc0722ea..86cafcb6 100644
--- a/src/app/marketing/sales-orders/detail/edit/page.tsx
+++ b/src/app/marketing/sales-orders/detail/edit/page.tsx
@@ -1,7 +1,41 @@
+'use client';
+
+import SalesForm from '@/components/pages/marketing/sales-orders/form/SalesForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
 const EditSalesOrder = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('salesOrderId');
+
+  const { data: marketing, isLoading: isLoading } = useSWR(soId, (id: number) =>
+    MarketingApi.getSingle(id)
+  );
+
+  if (!soId) {
+    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 (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
   return (
-    <div>
-      <p>Edit Sales Order</p>
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <SalesForm formType='edit' initialValues={marketing.data} />
+      )}
     </div>
   );
 };
diff --git a/src/app/marketing/sales-orders/detail/page.tsx b/src/app/marketing/sales-orders/detail/page.tsx
index ee377cfa..22d2651c 100644
--- a/src/app/marketing/sales-orders/detail/page.tsx
+++ b/src/app/marketing/sales-orders/detail/page.tsx
@@ -1,7 +1,42 @@
+'use client';
+
+import SalesOrderDetail from '@/components/pages/marketing/sales-orders/detail/SalesOrderDetail';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
 const DetailSalesOrder = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const soId = searchParams.get('salesOrderId');
+
+  const { data: marketing, isLoading: isLoading } = useSWR(soId, (id: number) =>
+    MarketingApi.getSingle(id)
+  );
+
+  if (!soId) {
+    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 (!isLoading && (!marketing || isResponseError(marketing))) {
+    router.replace('/404');
+    return;
+  }
+
   return (
-    <div>
-      <p>Detail Sales Order</p>
+    <div className='w-full p-4'>
+      {isLoading && <span className='loading loading-spinner loading-xl' />}
+      {!isLoading && isResponseSuccess(marketing) && (
+        <SalesOrderDetail initialValues={marketing.data} />
+      )}
     </div>
   );
 };
diff --git a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
index 52a67b58..dd5b03aa 100644
--- a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
+++ b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
@@ -11,13 +11,16 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
 import { Customer } from '@/types/api/master-data/customer';
 import { Icon } from '@iconify/react';
 import { CellContext } from '@tanstack/react-table';
 import { useCallback, useState } from 'react';
+import useSWR from 'swr';
 
 const RowsOptionsMenu = ({
   type = 'dropdown',
@@ -85,6 +88,12 @@ const SalesOrderTable = () => {
     (id) => rowSelection[id]
   );
 
+  const {
+    data: marketing,
+    isLoading: isLoadingMarketing,
+    mutate: refreshMarketing,
+  } = useSWR(MarketingApi.basePath, MarketingApi.getAllFetcher);
+
   const deleteModal = useModal();
   const confirmationModal = useModal();
 
@@ -171,59 +180,7 @@ const SalesOrderTable = () => {
         <Table
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
-          data={[
-            {
-              id: 1,
-              so_number: 'SO-001',
-              so_date: '2024-01-01',
-              so_docs: 'Dokumen SO 1.pdf',
-              customer: {
-                id: 1,
-                name: 'Customer A',
-              } as Customer,
-              sales_person: {
-                id: 1,
-                name: 'Sales Person A',
-              },
-              notes: 'Catatan untuk SO 1',
-              grand_total: 1000000,
-              approval: {
-                step_name: 'Approved',
-              },
-              marketing_products: [
-                {
-                  id: 1,
-                  qty: 10,
-                  unit_price: 100000,
-                  avg_weight: 1.5,
-                  total_weight: 15,
-                  total_price: 1000000,
-                  product_warehouse: {
-                    id: 1,
-                    product: {
-                      id: 1,
-                      name: 'Product A',
-                    },
-                  },
-                } as MarketingProduct,
-                {
-                  id: 2,
-                  qty: 5,
-                  unit_price: 200000,
-                  avg_weight: 2.0,
-                  total_weight: 10,
-                  total_price: 1000000,
-                  product_warehouse: {
-                    id: 2,
-                    product: {
-                      id: 2,
-                      name: 'Product B',
-                    },
-                  },
-                } as MarketingProduct,
-              ],
-            } as Marketing,
-          ]}
+          data={isResponseSuccess(marketing) ? marketing.data : []}
           columns={[
             {
               id: 'select',
diff --git a/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx b/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
new file mode 100644
index 00000000..d477384e
--- /dev/null
+++ b/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
@@ -0,0 +1,258 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import {
+  cn,
+  formatCurrency,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const SalesOrderDetail = ({
+  initialValues,
+  refreshValues,
+}: {
+  initialValues?: Marketing;
+  refreshValues?: () => void;
+}) => {
+  const [approvalAction, setApprovalAction] = useState<'approve' | 'reject'>(
+    'approve'
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+
+  const approveClickHandler = () => {
+    setApprovalAction('approve');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('reject');
+    confirmationModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delete(initialValues?.id as number);
+    setIsLoading(false);
+    deleteModal.closeModal();
+    toast.success('Successfully deleted Sales Order!');
+    refreshValues?.();
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsLoading(true);
+    await MarketingApi.singleApproval(
+      initialValues?.id as number,
+      approvalAction
+    );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success('Successfully approved Sales Order!');
+    refreshValues?.();
+  };
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader
+          title='Detail Sales Order'
+          backUrl='/marketing/sales-orders'
+        />
+        <div className='flex-row flex gap-3'>
+          <Button color='success' onClick={approveClickHandler}>
+            <Icon icon='mdi:check' width={24} height={24} />
+            Approve
+          </Button>
+          <Button color='error' onClick={rejectClickHandler}>
+            <Icon icon='mdi:close' width={24} height={24} />
+            Reject
+          </Button>
+        </div>
+        <Card
+          title='Informasi Sales Order'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%'>{initialValues?.so_number}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>{initialValues?.status}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{initialValues?.so_date}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>
+                    {formatCurrency(initialValues?.grand_total as number)}
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.marketing_products && (
+          <Card
+            title='Daftar Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<MarketingProduct>
+              data={initialValues?.marketing_products}
+              columns={[
+                {
+                  header: 'No. Polisi',
+                  accessorFn(row) {
+                    return formatVechicleNumber(
+                      row.marketing_delivery_products?.vehicle_number as string
+                    );
+                  },
+                },
+                {
+                  header: 'Kandang',
+                  accessorFn(row) {
+                    return row.product_warehouse.warehouse.name;
+                  },
+                },
+                {
+                  header: 'Produk',
+                  accessorFn(row) {
+                    return row.product_warehouse.product.name;
+                  },
+                },
+                {
+                  header: 'Harga Satuan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.unit_price);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.marketing_products &&
+                    initialValues?.marketing_products?.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',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          <Button color='warning'>
+            <Icon icon='mdi:pencil' width={24} height={24} />
+            Edit
+          </Button>
+          <Button color='error' onClick={deleteClickHandler}>
+            <Icon icon='mdi:delete' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+        }}
+      />
+      <ConfirmationModal
+        ref={confirmationModal.ref}
+        type={approvalAction === 'approve' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction} data penjualan (${initialValues?.id})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'approve' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SalesOrderDetail;
diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts b/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
index cc6c5ee5..c8e6ebc2 100644
--- a/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
+++ b/src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
@@ -7,6 +7,13 @@ import {
 
 type MarketingSchema = {
   customer_id: number | undefined;
+  customer:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
   so_date: string | undefined;
   notes: string | undefined;
   marketing_products: MarketingProductFormValues[];
@@ -14,6 +21,10 @@ type MarketingSchema = {
 
 export const MarketingSchema: Yup.ObjectSchema<MarketingSchema> = Yup.object({
   customer_id: Yup.number().required('Customer wajib diisi!'),
+  customer: Yup.object({
+    value: Yup.number().required(),
+    label: Yup.string().required(),
+  }).nullable(),
   so_date: Yup.string().required('Tanggal wajib diisi!'),
   notes: Yup.string().required('Catatan wajib diisi!'),
   marketing_products: Yup.array()
diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
index ec7a7076..32d03766 100644
--- a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
+++ b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
@@ -27,7 +27,7 @@ import { CustomerApi } from '@/services/api/master-data';
 import { useFormik } from 'formik';
 import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { MarketingApi } from '@/services/api/marketing';
+import { MarketingApi } from '@/services/api/marketing/marketing';
 import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
 
 const SalesForm = ({
@@ -45,7 +45,9 @@ const SalesForm = ({
     MarketingProduct[]
   >(initialValues?.marketing_products || []);
   const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
-    null
+    initialValues?.customer
+      ? { value: initialValues.customer.id, label: initialValues.customer.name }
+      : null
   );
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
@@ -71,56 +73,35 @@ const SalesForm = ({
     );
   };
   const handleAddSubmitProduct = async (
-    values: CreateMarketingProductPayload
+    tableValue: CreateMarketingProductPayload,
+    fieldValues: MarketingProductFormValues
   ) => {
     const newMarketingProduct: MarketingProduct = {
       id: marketingProducts.length + 1,
-      product_warehouse: values.product_warehouse!,
-      unit_price: values.unit_price as number,
-      total_weight: values.total_weight as number,
-      qty: values.qty as number,
-      avg_weight: values.avg_weight as number,
-      total_price: values.total_price as number,
+      product_warehouse: tableValue.product_warehouse!,
+      unit_price: tableValue.unit_price as number,
+      total_weight: tableValue.total_weight as number,
+      qty: tableValue.qty as number,
+      avg_weight: tableValue.avg_weight as number,
+      total_price: tableValue.total_price as number,
       marketing_delivery_products: {
         id: marketingProducts.length + 1,
-        vehicle_number: values.vehicle_number as string,
-        delivery_date: values.delivery_date as string,
-        unit_price: values.unit_price as number,
-        total_weight: values.total_weight as number,
-        qty: values.qty as number,
-        avg_weight: values.avg_weight as number,
-        total_price: values.total_price as number,
+        vehicle_number: tableValue.vehicle_number as string,
+        delivery_date: tableValue.delivery_date as string,
+        unit_price: tableValue.unit_price as number,
+        total_weight: tableValue.total_weight as number,
+        qty: tableValue.qty as number,
+        avg_weight: tableValue.avg_weight as number,
+        total_price: tableValue.total_price as number,
       },
     };
-    const newMarketingProductPayload: MarketingProductFormValues = {
-      vehicle_number: values.vehicle_number as string,
-      kandang_id: values.kandang_id as number,
-      kandang: {
-        value: values.kandang_id as number,
-        label: values.kandang?.name as string,
-      },
-      product_warehouse_id: values.product_warehouse_id as number,
-      product_warehouse: {
-        value: values.product_warehouse?.id as number,
-        label: values.product_warehouse?.product.name as string,
-      },
-      unit_price: values.unit_price,
-      total_weight: values.total_weight,
-      qty: values.qty,
-      uom: values.uom as string,
-      avg_weight: values.avg_weight,
-      total_price: values.total_price,
-      delivery_date: values.delivery_date as string,
-    };
+
     setMarketingProducts((prev) => [...prev, newMarketingProduct]);
     formik.setValues({
       ...formik.values,
-      marketing_products: [
-        ...formik.values.marketing_products,
-        newMarketingProductPayload,
-      ],
+      marketing_products: [...formik.values.marketing_products, fieldValues],
     });
-    setGrandTotal((prev) => prev + (values.total_price as number));
+    setGrandTotal((prev) => prev + (tableValue.total_price as number));
     addProductModal.closeModal();
   };
   const handleChangeCustomer = (val: OptionType | OptionType[] | null) => {
@@ -155,9 +136,13 @@ const SalesForm = ({
   const formik = useFormik<MarketingFormValues>({
     enableReinitialize: true,
     initialValues: {
-      so_date: undefined,
-      notes: '',
+      so_date: initialValues?.so_date || undefined,
+      notes: initialValues?.notes || undefined,
       customer_id: initialValues?.customer?.id || undefined,
+      customer: {
+        value: initialValues?.customer?.id as number,
+        label: initialValues?.customer?.name as string,
+      },
       marketing_products: [],
     },
     validationSchema: MarketingSchema,
@@ -195,7 +180,7 @@ const SalesForm = ({
         onReset={formik.handleReset}
       >
         <FormHeader
-          title='Tambah Sales Order'
+          title={`${formType === 'add' ? 'Tambah' : 'Edit'} Sales Order`}
           backUrl='/marketing/sales-orders'
         />
         <Card
@@ -379,10 +364,10 @@ const SalesForm = ({
               </Button>
             )}
           </div>
-          {JSON.stringify(formik.errors)}
         </Card>
         <div className='grid grid-cols-2 gap-3'>
           <TextArea
+            required
             name='notes'
             label='Catatan'
             rows={3}
diff --git a/src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx b/src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx
index 7408bfb3..0069a61e 100644
--- a/src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx
+++ b/src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx
@@ -35,7 +35,10 @@ const MarketingProductForm = ({
   initialValues?: MarketingProduct;
   data: MarketingProduct[];
   modalRef?: RefObject<HTMLDialogElement | null>;
-  onSubmitForm?: (values: CreateMarketingProductPayload) => Promise<void>;
+  onSubmitForm?: (
+    tableValues: CreateMarketingProductPayload,
+    fieldValues: MarketingProductFormValues
+  ) => Promise<void>;
 }) => {
   // State
   const [selectedOptionsKandang, setSelectedOptionsKandang] =
@@ -150,7 +153,7 @@ const MarketingProductForm = ({
           delivery_date: values.delivery_date as string,
         };
 
-        onSubmitForm?.(marketingProduct);
+        onSubmitForm?.(marketingProduct, values);
         handleResetForm();
       }
     },
diff --git a/src/dummy/marketing.dummy.ts b/src/dummy/marketing.dummy.ts
new file mode 100644
index 00000000..6eab9067
--- /dev/null
+++ b/src/dummy/marketing.dummy.ts
@@ -0,0 +1,285 @@
+import { format } from 'date-fns';
+import { Area } from '@/types/api/master-data/area';
+import { Location } from '@/types/api/master-data/location';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Marketing } from '@/types/api/marketing/marketing';
+import { CreatedUser } from '@/types/api/api-general';
+import { Product } from '@/types/api/master-data/product';
+
+// ======================
+// 👤 Created User
+// ======================
+export const createdUser: CreatedUser = {
+  id: 1,
+  id_user: 1,
+  email: 'admin@example.com',
+  name: 'Admin Utama',
+};
+
+// ======================
+// 📍 Area Dummy
+// ======================
+export const dummyAreas: Area[] = [
+  {
+    id: 1,
+    name: 'Bandung Barat',
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Cimahi Utara',
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🏢 Location Dummy
+// ======================
+export const dummyLocations: Location[] = [
+  {
+    id: 1,
+    name: 'Gudang A',
+    address: 'Jl. Sukajadi No. 12',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Gudang B',
+    address: 'Jl. Setiabudi No. 45',
+    area: dummyAreas[1],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🐔 Kandang Dummy
+// ======================
+export const dummyKandangs: Kandang[] = [
+  {
+    id: 1,
+    name: 'Kandang Ayam Layer 1',
+    status: 'AKTIF',
+    capacity: 500,
+    location: dummyLocations[0],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    name: 'Kandang Ayam Broiler 2',
+    status: 'NONAKTIF',
+    capacity: 300,
+    location: dummyLocations[1],
+    pic: createdUser,
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 🏭 Warehouse Dummy
+// ======================
+export const dummyWarehouses: Warehouse[] = [
+  {
+    id: 1,
+    type: 'AREA',
+    name: 'Gudang Wilayah Bandung Barat',
+    area: dummyAreas[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    type: 'LOKASI',
+    name: 'Gudang Produksi Sukajadi',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 3,
+    type: 'KANDANG',
+    name: 'Gudang Kandang Layer 1',
+    area: dummyAreas[0],
+    location: { ...dummyLocations[0], area: dummyAreas[0] },
+    kandang: {
+      ...dummyKandangs[0],
+      location: dummyLocations[0],
+      pic: createdUser,
+    },
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 📦 Product Warehouse Dummy
+// ======================
+export const dummyProductWarehouses: ProductWarehouse[] = [
+  {
+    id: 1,
+    product_id: 101,
+    warehouse_id: 1,
+    quantity: 1000,
+    product: {
+      id: 101,
+      name: 'Pakan Ayam Premium',
+      sku: 'PAK-001',
+      category: 'PAKAN',
+    } as unknown as Product, // bisa diganti sesuai tipe Product
+    warehouse: dummyWarehouses[0],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    product_id: 102,
+    warehouse_id: 2,
+    quantity: 500,
+    product: {
+      id: 102,
+      name: 'Vitamin Ayam Super',
+      sku: 'VIT-002',
+      category: 'VITAMIN',
+    } as unknown as Product, // bisa diganti sesuai tipe Product
+    warehouse: dummyWarehouses[1],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
+
+// ======================
+// 💼 Marketing Dummy
+// ======================
+export const dummyMarketings: Marketing[] = [
+  {
+    id: 1,
+    status: 'APPROVED',
+    so_number: 'SO-001-2025',
+    so_docs: 'https://example.com/docs/so001.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 1,
+      name: 'PT Maju Jaya',
+      pic_id: 1,
+      pic: createdUser,
+      type: 'Distributor',
+      address: 'Jl. Merdeka No. 1',
+      phone: '081212121212',
+      email: 'contact@majujaya.com',
+      account_number: '1234567890',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Pengiriman awal bulan.',
+    grand_total: 7500000,
+    approval: {
+      step_number: 1,
+      step_name: 'Manager Approval',
+      action: 'APPROVED',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 1,
+        qty: 100,
+        unit_price: 75000,
+        avg_weight: 2.5,
+        total_weight: 250,
+        total_price: 7500000,
+        product_warehouse: dummyProductWarehouses[0],
+        marketing_delivery_products: {
+          id: 1,
+          qty: 100,
+          unit_price: 75000,
+          avg_weight: 2.5,
+          total_weight: 250,
+          total_price: 7500000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'B 1234 XY',
+        },
+      },
+    ],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+  {
+    id: 2,
+    status: 'PENDING',
+    so_number: 'SO-002-2025',
+    so_docs: 'https://example.com/docs/so002.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 2,
+      name: 'CV Sumber Sehat',
+      pic_id: 2,
+      pic: createdUser,
+      type: 'Retail',
+      address: 'Jl. Cihampelas No. 5',
+      phone: '082222222222',
+      email: 'info@sumbersehat.com',
+      account_number: '9876543210',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Pesanan kedua untuk stok akhir tahun.',
+    grand_total: 3750000,
+    approval: {
+      step_number: 1,
+      step_name: 'Manager Approval',
+      action: 'PENDING',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 2,
+        qty: 50,
+        unit_price: 75000,
+        avg_weight: 2.5,
+        total_weight: 125,
+        total_price: 3750000,
+        product_warehouse: dummyProductWarehouses[1],
+        marketing_delivery_products: {
+          id: 2,
+          qty: 50,
+          unit_price: 75000,
+          avg_weight: 2.5,
+          total_weight: 125,
+          total_price: 3750000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'B 5678 YZ',
+        },
+      },
+    ],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
+];
diff --git a/src/services/api/marketing.ts b/src/services/api/marketing.ts
deleted file mode 100644
index 308158ee..00000000
--- a/src/services/api/marketing.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Marketing } from '@/types/api/marketing/marketing';
-import { BaseApiService } from './base';
-
-export const MarketingApi = new BaseApiService<Marketing, unknown, unknown>(
-  '/marketing/sales-orders'
-);
diff --git a/src/services/api/marketing/marketing.ts b/src/services/api/marketing/marketing.ts
new file mode 100644
index 00000000..1285a2e4
--- /dev/null
+++ b/src/services/api/marketing/marketing.ts
@@ -0,0 +1,113 @@
+import { dummyMarketings } from '@/dummy/marketing.dummy';
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Marketing,
+  CreateMarketingPayload,
+  UpdateMarketingPayload,
+} from '@/types/api/marketing/marketing';
+
+export class MarketingService extends BaseApiService<
+  Marketing,
+  CreateMarketingPayload,
+  UpdateMarketingPayload
+> {
+  constructor(basePath: string = '/marketing') {
+    super(basePath);
+  }
+
+  /**
+   * Override: Get all marketing data (dummy mode)
+   */
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<Marketing[]>> {
+    // simulasi loading
+    await sleep(750);
+
+    // data dummy sementara
+    const DUMMY_MARKETING_DATA: BaseApiResponse<Marketing[]> = {
+      code: 200,
+      status: 'success',
+      message: 'Berhasil mengambil data marketing (dummy)',
+      data: dummyMarketings,
+    };
+
+    return DUMMY_MARKETING_DATA;
+  }
+
+  /**
+   * Override: Get single marketing data (dummy mode)
+   */
+  override async getSingle(
+    id: number
+  ): Promise<BaseApiResponse<Marketing> | undefined> {
+    // simulasi delay
+    await new Promise((res) => setTimeout(res, 500));
+
+    // misalnya fetch dari dummy
+    return {
+      code: 200,
+      status: 'success',
+      message: 'Data marketing berhasil diambil.',
+      data: dummyMarketings[0],
+    };
+
+    // jika tidak ditemukan
+    throw {
+      code: 404,
+      status: 'error',
+      message: 'Data marketing tidak ditemukan.',
+    };
+  }
+
+  /**
+   * Approve single marketing data
+   */
+  async singleApproval(
+    id: number,
+    action: 'approve' | 'reject'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approval_ids: [id],
+          notes: `${action} marketing ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error approve marketing:', error);
+      return undefined;
+    }
+  }
+
+  /**
+   * Bulk approve
+   */
+  async bulkApprovals(
+    ids: number[],
+    action: 'approve' | 'reject'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approval_ids: ids,
+          notes: `${action} marketing ${ids.join(', ')}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error bulk approve marketing:', error);
+      return undefined;
+    }
+  }
+}
+
+export const MarketingApi = new MarketingService('/marketing');

From e0c347c3d5e938ae13e3c9c2dadd2efefc14383d Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 10 Nov 2025 04:08:08 +0700
Subject: [PATCH 203/212] refactor(FE-87-106): refactor api integration untuk
 project flock dan project flock kandang

---
 .../project-flock/chickin/detail/page.tsx     |  12 +-
 .../production/project-flock/detail/page.tsx  |  38 +-
 .../sales-orders/SalesOrderTable.tsx          | 103 ++++-
 .../sales-orders/detail/SalesOrderDetail.tsx  |  82 +++-
 .../marketing/sales-orders/form/SalesForm.tsx | 359 +++++++++------
 .../chickin/form/ChickinForm.schema.ts        |  38 +-
 .../production/chickin/form/ChickinForm.tsx   | 429 ++++++++++--------
 .../project-flock/ProjectFlockTable.tsx       |   2 +-
 .../chickin/ProjectFlockChickinDetail.tsx     | 103 +++--
 .../form/ProjectFlockForm.schema.ts           |   4 +-
 .../project-flock/form/ProjectFlockForm.tsx   | 139 +++---
 .../recording/form/RecordingForm.tsx          |   2 +-
 src/dummy/marketing.dummy.ts                  |  93 +++-
 src/services/api/marketing/marketing.ts       |  38 +-
 src/services/api/production.ts                |   2 +-
 src/types/api/marketing/marketing.d.ts        |   1 +
 src/types/api/production/chickin.d.ts         |   8 +-
 .../api/production/project-flock-kandang.d.ts |   7 +-
 src/types/api/production/project-flock.d.ts   |   7 +-
 19 files changed, 961 insertions(+), 506 deletions(-)

diff --git a/src/app/production/project-flock/chickin/detail/page.tsx b/src/app/production/project-flock/chickin/detail/page.tsx
index d77e5949..da0c8466 100644
--- a/src/app/production/project-flock/chickin/detail/page.tsx
+++ b/src/app/production/project-flock/chickin/detail/page.tsx
@@ -170,8 +170,8 @@ const DetailChickin = () => {
                   <div className='font-semibold text-sm'>Flock</div>
                   <div className='text-sm'>
                     {
-                      chickin.data.project_flock_kandang?.project_flock.flock
-                        .name
+                      chickin?.data?.project_flock_kandang?.project_flock?.flock
+                        ?.name
                     }
                   </div>
                 </div>
@@ -225,8 +225,8 @@ const DetailChickin = () => {
                   <div className='font-semibold text-sm'>Flock Kandang</div>
                   <div className='text-sm'>
                     {
-                      chickin.data.project_flock_kandang?.project_flock.flock
-                        .name
+                      chickin?.data?.project_flock_kandang?.project_flock?.flock
+                        ?.name
                     }{' '}
                     - {chickin.data.project_flock_kandang?.kandang.name}
                   </div>
@@ -280,7 +280,7 @@ const DetailChickin = () => {
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data?.project_flock_kandang?.project_flock.flock?.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -320,7 +320,7 @@ const DetailChickin = () => {
         text={`Apakah anda yakin ingin ${
           approvalAction == 'APPROVED' ? 'approve' : 'reject'
         } chickin berikut? (${
-          chickin?.data.project_flock_kandang?.project_flock.flock.name
+          chickin?.data?.project_flock_kandang?.project_flock?.flock?.name
         } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
         secondaryButton={{
           text: 'Tidak',
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index 6cf694c0..811aed54 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -2,8 +2,11 @@
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { FlockApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
 import useSWR from 'swr';
 
 const ProjectFlockDetail = () => {
@@ -12,12 +15,21 @@ const ProjectFlockDetail = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
+  const [projectName, setProjectName] = useState();
+
   const {
     data: projectFlock,
     isLoading: isLoadingProjectFlock,
     mutate: refreshProjectFlock,
   } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
+  const flockUrl = `${FlockApi.basePath}`;
+  const {
+    data: flock,
+    isLoading: isLoadingFlock,
+    mutate: refreshFlock,
+  } = useSWR(flockUrl, FlockApi.getAllFetcher);
+
   if (!projectFlockId) {
     router.back();
 
@@ -36,15 +48,37 @@ const ProjectFlockDetail = () => {
     return;
   }
 
+  // Attach flock id to project flock
+  let projectFlockAttached: ProjectFlock | undefined;
+
+  if (isResponseSuccess(projectFlock) && isResponseSuccess(flock)) {
+    projectFlockAttached = {
+      ...projectFlock.data,
+      flock: flock.data.find(
+        (flock) =>
+          flock.name ==
+          projectFlock.data.flock_name
+            .trim()
+            .split(/\s+/)
+            .slice(0, -1)
+            .join(' ')
+      ),
+    };
+    console.log('projectFlockAttached');
+    console.log(projectFlockAttached);
+    console.log('flocks');
+    console.log(flock.data);
+  }
+
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
       {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+      {projectFlockAttached && (
         <ProjectFlockForm
           formType='detail'
-          initialValues={projectFlock.data}
+          initialValues={projectFlockAttached}
           refreshProjectFlocks={refreshProjectFlock}
         />
       )}
diff --git a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
index dd5b03aa..1e8edaba 100644
--- a/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
+++ b/src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
@@ -3,7 +3,7 @@
 import Button from '@/components/Button';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { OptionType } from '@/components/input/SelectInput';
-import { useModal } from '@/components/Modal';
+import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
@@ -12,7 +12,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
+import { cn, formatCurrency, formatVechicleNumber } from '@/lib/helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
@@ -83,6 +83,7 @@ const SalesOrderTable = () => {
   const [approveAction, setApproveAction] = useState<
     'approve' | 'reject' | null
   >(null);
+  const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection).filter(
     (id) => rowSelection[id]
@@ -96,6 +97,7 @@ const SalesOrderTable = () => {
 
   const deleteModal = useModal();
   const confirmationModal = useModal();
+  const productsModal = useModal();
 
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -123,6 +125,11 @@ const SalesOrderTable = () => {
     confirmationModal.openModal();
   };
 
+  const productsClickHandler = (item: Marketing) => {
+    setSelectedItem(item);
+    productsModal.openModal();
+  };
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -162,6 +169,7 @@ const SalesOrderTable = () => {
               color='success'
               onClick={approveClickHandler}
               className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
             >
               <Icon icon='material-symbols:check' width={24} height={24} />
               Approve
@@ -171,6 +179,7 @@ const SalesOrderTable = () => {
               color='error'
               onClick={rejectClickHandler}
               className='justify-start text-sm'
+              disabled={!selectedRowIds.length}
             >
               <Icon icon='material-symbols:close' width={24} height={24} />
               Reject
@@ -229,16 +238,28 @@ const SalesOrderTable = () => {
             {
               accessorKey: 'marketing_products.length',
               header: 'Product Details',
-              cell: (props) => (
-                <ul className='list-disc list-inside'>
-                  {props.row.original.marketing_products?.map((product) => (
-                    <li key={product.id}>
-                      {product.product_warehouse.product.name} - Qty:{' '}
-                      {product.qty}
-                    </li>
-                  ))}
-                </ul>
-              ),
+              cell: (props) => {
+                if (props?.row?.original?.marketing_products?.length) {
+                  if (props?.row?.original?.marketing_products?.length > 1) {
+                    return (
+                      <Button
+                        variant='link'
+                        color='success'
+                        className='p-0 text-none'
+                        onClick={() => {
+                          productsClickHandler(props?.row?.original);
+                        }}
+                      >
+                        Lihat {props?.row?.original?.marketing_products?.length}{' '}
+                        Produk
+                      </Button>
+                    );
+                  } else {
+                    const product = props?.row?.original?.marketing_products[0];
+                    return <>{product?.product_warehouse?.product?.name}</>;
+                  }
+                }
+              },
             },
             {
               header: 'Aksi',
@@ -321,6 +342,64 @@ const SalesOrderTable = () => {
           color: approveAction === 'approve' ? 'success' : 'error',
         }}
       />
+
+      <Modal
+        ref={productsModal.ref}
+        className={{
+          modalBox: 'max-w-2/5 z-100',
+        }}
+        closeOnBackdrop
+      >
+        <div className='flex flex-row justify-between items-center mb-3'>
+          <h4 className='text-xl font-semibold'>Daftar Produk</h4>
+          <Button
+            variant='ghost'
+            color='error'
+            onClick={productsModal.closeModal}
+            className='justify-start text-sm rounded-full'
+          >
+            <Icon icon='mdi:close' width={16} height={16} />
+          </Button>
+        </div>
+        <Table<MarketingProduct>
+          data={
+            isResponseSuccess(marketing) && selectedItem
+              ? (selectedItem?.marketing_products ?? [])
+              : []
+          }
+          columns={[
+            {
+              header: 'Kandang',
+              accessorFn(row) {
+                return row.product_warehouse.warehouse.name;
+              },
+            },
+            {
+              header: 'Produk',
+              accessorFn(row) {
+                return row.product_warehouse.product.name;
+              },
+            },
+            {
+              header: 'Harga Satuan (Rp)',
+              accessorFn(row) {
+                return formatCurrency(row.unit_price);
+              },
+            },
+          ]}
+          className={{
+            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',
+            paginationClassName: 'hidden',
+          }}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx b/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
index d477384e..e67a0644 100644
--- a/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
+++ b/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
@@ -6,7 +6,6 @@ import { FormHeader } from '@/components/helper/form/FormHeader';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
-import { isResponseSuccess } from '@/lib/api-helper';
 import {
   cn,
   formatCurrency,
@@ -33,6 +32,7 @@ const SalesOrderDetail = ({
 
   const deleteModal = useModal();
   const confirmationModal = useModal();
+  const deliveryModal = useModal();
 
   const approveClickHandler = () => {
     setApprovalAction('approve');
@@ -44,6 +44,10 @@ const SalesOrderDetail = ({
     confirmationModal.openModal();
   };
 
+  const deliveryClickHandler = () => {
+    deliveryModal.openModal();
+  };
+
   const deleteClickHandler = () => {
     deleteModal.openModal();
   };
@@ -59,16 +63,25 @@ const SalesOrderDetail = ({
 
   const confirmationModalApproveClickHandler = async () => {
     setIsLoading(true);
-    await MarketingApi.singleApproval(
-      initialValues?.id as number,
-      approvalAction
-    );
+    // await MarketingApi.singleApproval(
+    //   initialValues?.id as number,
+    //   approvalAction
+    // );
     setIsLoading(false);
     confirmationModal.closeModal();
     toast.success('Successfully approved Sales Order!');
     refreshValues?.();
   };
 
+  const confirmationModalDeliveryClickHandler = async () => {
+    setIsLoading(true);
+    // await MarketingApi.delivery(initialValues?.id as number);
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success('Successfully delivered Sales Order!');
+    refreshValues?.();
+  };
+
   return (
     <>
       <div className='flex flex-col w-full gap-4'>
@@ -77,14 +90,32 @@ const SalesOrderDetail = ({
           backUrl='/marketing/sales-orders'
         />
         <div className='flex-row flex gap-3'>
-          <Button color='success' onClick={approveClickHandler}>
-            <Icon icon='mdi:check' width={24} height={24} />
-            Approve
-          </Button>
-          <Button color='error' onClick={rejectClickHandler}>
-            <Icon icon='mdi:close' width={24} height={24} />
-            Reject
-          </Button>
+          {initialValues?.approval?.step_number != 3 && (
+            <>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                disabled={initialValues?.approval?.step_number != 1}
+              >
+                <Icon icon='mdi:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                disabled={initialValues?.approval?.step_number != 2}
+              >
+                <Icon icon='mdi:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+          {initialValues?.approval?.step_number == 2 && (
+            <Button color='success' onClick={deliveryClickHandler}>
+              <Icon icon='mdi:check' width={24} height={24} />
+              Delivery Order
+            </Button>
+          )}
         </div>
         <Card
           title='Informasi Sales Order'
@@ -110,7 +141,7 @@ const SalesOrderDetail = ({
                 <tr>
                   <td className='font-semibold'>Status</td>
                   <td>:</td>
-                  <td>{initialValues?.status}</td>
+                  <td>{initialValues?.approval?.step_name}</td>
                 </tr>
                 <tr>
                   <td className='font-semibold'>Tanggal Penjualan</td>
@@ -214,7 +245,11 @@ const SalesOrderDetail = ({
           </Card>
         )}
         <div className='flex flex-row gap-3'>
-          <Button color='warning'>
+          <Button
+            color='warning'
+            type='button'
+            href={`/marketing/sales-orders/detail/edit?salesOrderId=${initialValues?.id}`}
+          >
             <Icon icon='mdi:pencil' width={24} height={24} />
             Edit
           </Button>
@@ -235,12 +270,13 @@ const SalesOrderDetail = ({
           text: 'Ya',
           color: 'error',
           isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
         }}
       />
       <ConfirmationModal
         ref={confirmationModal.ref}
         type={approvalAction === 'approve' ? 'success' : 'error'}
-        text={`Apakah anda yakin ingin ${approvalAction} data penjualan (${initialValues?.id})?`}
+        text={`Apakah anda yakin ingin ${approvalAction} data penjualan ini?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -251,6 +287,20 @@ const SalesOrderDetail = ({
           onClick: confirmationModalApproveClickHandler,
         }}
       />
+      <ConfirmationModal
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isLoading,
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
     </>
   );
 };
diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
index 32d03766..2a771833 100644
--- a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
+++ b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
@@ -10,7 +10,8 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import TextArea from '@/components/input/TextArea';
 import Modal, { useModal } from '@/components/Modal';
-import Table from '@/components/Table';
+import * as TanStack from '@tanstack/react-table';
+import Table from '@/components/Table'; // Keep this import
 import { cn, formatCurrency, formatNumber } from '@/lib/helper';
 import {
   CreateMarketingPayload,
@@ -19,7 +20,7 @@ import {
   MarketingProduct,
 } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import MarketingProductForm from './repeater/MarketingProductForm';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { Customer } from '@/types/api/master-data/customer';
@@ -29,6 +30,9 @@ import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { MarketingApi } from '@/services/api/marketing/marketing';
 import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/navigation';
 
 const SalesForm = ({
   formType = 'add',
@@ -37,11 +41,14 @@ const SalesForm = ({
   formType?: 'add' | 'edit';
   initialValues?: Marketing;
 }) => {
+  const router = useRouter();
   const addProductModal = useModal();
+  const deleteModal = useModal();
 
+  const [isLoading, setIsLoading] = useState(false);
   const [selectedMarketingProduct, setSelectedMarketingProduct] =
     useState<MarketingProduct | null>(null);
-  const [marketingProducts, setMarketingProducts] = useState<
+  const [rawMarketingProducts, setRawMarketingProducts] = useState<
     MarketingProduct[]
   >(initialValues?.marketing_products || []);
   const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
@@ -53,7 +60,13 @@ const SalesForm = ({
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
     parseInt(item)
   );
-  const [grandTotal, setGrandTotal] = useState<number>(0);
+  const [grandTotal, setGrandTotal] = useState<number>(
+    initialValues?.grand_total ?? 0
+  );
+  const marketingProducts = useMemo(
+    () => rawMarketingProducts,
+    [rawMarketingProducts]
+  );
 
   const {
     options: customerOptions,
@@ -61,55 +74,66 @@ const SalesForm = ({
     isLoadingOptions: isLoadingCustomerOptions,
   } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
 
-  const handleAddProduct = () => {
+  const handleAddProduct = useCallback(() => {
     addProductModal.openModal();
-  };
-  const handleDeleteProduct = (id: number) => {
-    setMarketingProducts((prev) => prev.filter((product) => product.id !== id));
-  };
+  }, [addProductModal]);
+  const handleDeleteProduct = useCallback((id: number) => {
+    setRawMarketingProducts((prev) => prev.filter((p) => p.id !== id));
+  }, []);
   const handleBulkDeleteProduct = () => {
-    setMarketingProducts((prev) =>
+    setRawMarketingProducts((prev) =>
       prev.filter((product) => !selectedRowIds.includes(product.id))
     );
   };
-  const handleAddSubmitProduct = async (
-    tableValue: CreateMarketingProductPayload,
-    fieldValues: MarketingProductFormValues
-  ) => {
-    const newMarketingProduct: MarketingProduct = {
-      id: marketingProducts.length + 1,
-      product_warehouse: tableValue.product_warehouse!,
-      unit_price: tableValue.unit_price as number,
-      total_weight: tableValue.total_weight as number,
-      qty: tableValue.qty as number,
-      avg_weight: tableValue.avg_weight as number,
-      total_price: tableValue.total_price as number,
-      marketing_delivery_products: {
-        id: marketingProducts.length + 1,
-        vehicle_number: tableValue.vehicle_number as string,
-        delivery_date: tableValue.delivery_date as string,
+  const handleDelete = () => {
+    deleteModal.openModal();
+  };
+
+  const handleAddSubmitProduct = useCallback(
+    async (
+      tableValue: CreateMarketingProductPayload,
+      fieldValues: MarketingProductFormValues
+    ) => {
+      const newMarketingProduct: MarketingProduct = {
+        id: rawMarketingProducts.length + 1,
+        product_warehouse: tableValue.product_warehouse!,
         unit_price: tableValue.unit_price as number,
         total_weight: tableValue.total_weight as number,
         qty: tableValue.qty as number,
         avg_weight: tableValue.avg_weight as number,
         total_price: tableValue.total_price as number,
-      },
-    };
+        marketing_delivery_products: {
+          id: rawMarketingProducts.length + 1,
+          vehicle_number: tableValue.vehicle_number as string,
+          delivery_date: tableValue.delivery_date as string,
+          unit_price: tableValue.unit_price as number,
+          total_weight: tableValue.total_weight as number,
+          qty: tableValue.qty as number,
+          avg_weight: tableValue.avg_weight as number,
+          total_price: tableValue.total_price as number,
+        },
+      };
 
-    setMarketingProducts((prev) => [...prev, newMarketingProduct]);
-    formik.setValues({
-      ...formik.values,
-      marketing_products: [...formik.values.marketing_products, fieldValues],
-    });
-    setGrandTotal((prev) => prev + (tableValue.total_price as number));
-    addProductModal.closeModal();
-  };
-  const handleChangeCustomer = (val: OptionType | OptionType[] | null) => {
-    setSelectedCustomer(val as OptionType);
-    formik.setFieldValue('customer_id', (val as OptionType)?.value);
-  };
+      setRawMarketingProducts((prev) => [...prev, newMarketingProduct]);
+      formik.setValues({
+        ...formik.values,
+        marketing_products: [...formik.values.marketing_products, fieldValues],
+      });
+      setGrandTotal((prev) => prev + (tableValue.total_price as number));
+      addProductModal.closeModal();
+    },
+    [rawMarketingProducts.length, addProductModal]
+  );
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      setSelectedCustomer(val as OptionType);
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    [selectedCustomer, setSelectedCustomer]
+  );
 
-  const createProjectFlockHandler = async (values: CreateMarketingPayload) => {
+  const createMarketingHandler = async (values: CreateMarketingPayload) => {
     console.log(values);
     const createMarketingRes = await MarketingApi.create(values);
     if (isResponseSuccess(createMarketingRes)) {
@@ -118,8 +142,10 @@ const SalesForm = ({
     if (isResponseError(createMarketingRes)) {
       console.log(createMarketingRes);
     }
+    toast.success('Successfully created Sales Order!');
+    router.push('/marketing/sales-orders');
   };
-  const updateProjectFlockHandler = async (values: CreateMarketingPayload) => {
+  const updateMarketingHandler = async (values: CreateMarketingPayload) => {
     console.log(values);
     const createMarketingRes = await MarketingApi.update(
       initialValues?.id as number,
@@ -131,6 +157,50 @@ const SalesForm = ({
     if (isResponseError(createMarketingRes)) {
       console.log(createMarketingRes);
     }
+    toast.success('Successfully updated Sales Order!');
+    router.push('/marketing/sales-orders');
+  };
+  const deleteMarketingHandler = async () => {
+    setIsLoading(true);
+    console.log(initialValues?.id);
+    const deleteMarketingRes = await MarketingApi.delete(
+      initialValues?.id as number
+    );
+    if (isResponseSuccess(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    if (isResponseError(deleteMarketingRes)) {
+      console.log(deleteMarketingRes);
+    }
+    toast.success('Successfully deleted Sales Order!');
+    setIsLoading(false);
+    deleteModal.closeModal();
+    router.push('/marketing/sales-orders');
+  };
+
+  const MarketingProductToFieldValues = (
+    product: MarketingProduct
+  ): MarketingProductFormValues => {
+    return {
+      vehicle_number: product.marketing_delivery_products?.vehicle_number,
+      kandang_id: product.product_warehouse.warehouse.id,
+      kandang: {
+        value: product.product_warehouse.warehouse.id,
+        label: product.product_warehouse.warehouse.name,
+      },
+      product_warehouse: {
+        value: product.product_warehouse.product.id,
+        label: product.product_warehouse.product.name,
+      },
+      product_warehouse_id: product.product_warehouse.product.id,
+      unit_price: product.unit_price,
+      total_weight: product.total_weight,
+      qty: product.qty,
+      uom: product.product_warehouse?.product?.uom?.name,
+      avg_weight: product.avg_weight,
+      total_price: product.total_price,
+      delivery_date: product.marketing_delivery_products?.delivery_date,
+    };
   };
 
   const formik = useFormik<MarketingFormValues>({
@@ -143,7 +213,10 @@ const SalesForm = ({
         value: initialValues?.customer?.id as number,
         label: initialValues?.customer?.name as string,
       },
-      marketing_products: [],
+      marketing_products:
+        initialValues?.marketing_products?.map((product) =>
+          MarketingProductToFieldValues(product)
+        ) ?? [],
     },
     validationSchema: MarketingSchema,
     onSubmit: async (values) => {
@@ -155,10 +228,10 @@ const SalesForm = ({
       } as CreateMarketingPayload;
       switch (formType) {
         case 'add':
-          createProjectFlockHandler(payload);
+          createMarketingHandler(payload);
           break;
         case 'edit':
-          updateProjectFlockHandler(payload);
+          updateMarketingHandler(payload);
           break;
         default:
           break;
@@ -172,6 +245,85 @@ const SalesForm = ({
     formikSetValues(formik.initialValues);
   }, [formikSetValues, formik.initialValues]);
 
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }: { table: TanStack.Table<MarketingProduct> }) => (
+          <div className='w-full flex flex-row justify-center'>
+            <CheckboxInput
+              name='allRow'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={table.getToggleAllRowsSelectedHandler()}
+            />
+          </div>
+        ),
+        cell: ({ row }: { row: TanStack.Row<MarketingProduct> }) => (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        ),
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.marketing_delivery_products?.vehicle_number,
+        header: 'No. Polisi',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.warehouse.name,
+        header: 'Kandang',
+      },
+      {
+        accessorFn: (row: MarketingProduct) =>
+          row.product_warehouse.product.name,
+        header: 'Produk',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.unit_price),
+        header: 'Harga Satuan (Rp)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.total_weight),
+        header: 'Total Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.qty),
+        header: 'Kuantitas',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatNumber(row.avg_weight),
+        header: 'Avg. Bobot (Kg)',
+      },
+      {
+        accessorFn: (row: MarketingProduct) => formatCurrency(row.total_price),
+        header: 'Total Penjualan (Rp)',
+      },
+      {
+        header: 'Aksi',
+        cell: (props: TanStack.CellContext<MarketingProduct, unknown>) => (
+          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='error'
+              className='p-1'
+              onClick={() => handleDeleteProduct(props.row.original.id)}
+            >
+              <Icon icon='mdi:trash' width={16} height={16} />
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    [handleDeleteProduct] // dependensi tunggal
+  );
+
   return (
     <>
       <form
@@ -224,98 +376,7 @@ const SalesForm = ({
             rowSelection={rowSelection}
             setRowSelection={setRowSelection}
             data={marketingProducts}
-            columns={[
-              {
-                id: 'select',
-                header: ({ table }) => (
-                  <div className='w-full flex flex-row justify-center'>
-                    <CheckboxInput
-                      name='allRow'
-                      checked={table.getIsAllRowsSelected()}
-                      indeterminate={table.getIsSomeRowsSelected()}
-                      onChange={table.getToggleAllRowsSelectedHandler()}
-                    />
-                  </div>
-                ),
-                cell: ({ row }) => (
-                  <div>
-                    <CheckboxInput
-                      name='row'
-                      checked={row.getIsSelected()}
-                      disabled={!row.getCanSelect()}
-                      indeterminate={row.getIsSomeSelected()}
-                      onChange={row.getToggleSelectedHandler()}
-                    />
-                  </div>
-                ),
-              },
-              {
-                accessorFn(row) {
-                  return row.marketing_delivery_products?.vehicle_number;
-                },
-                header: 'No. Polisi',
-              },
-              {
-                accessorFn(row) {
-                  return row.product_warehouse.warehouse.name;
-                },
-                header: 'Kandang',
-              },
-              {
-                accessorFn(row) {
-                  return row.product_warehouse.product.name;
-                },
-                header: 'Produk',
-              },
-              {
-                accessorFn(row) {
-                  return formatCurrency(row.unit_price);
-                },
-                header: 'Harga Satuan (Rp)',
-              },
-              {
-                accessorFn(row) {
-                  return formatNumber(row.total_weight);
-                },
-                header: 'Total Bobot (Kg)',
-              },
-              {
-                accessorFn(row) {
-                  return formatNumber(row.qty);
-                },
-                header: 'Kuantitas',
-              },
-              {
-                accessorFn(row) {
-                  return formatNumber(row.avg_weight);
-                },
-                header: 'Avg. Bobot (Kg)',
-              },
-              {
-                accessorFn(row) {
-                  return formatCurrency(row.total_price);
-                },
-                header: 'Total Penjualan (Rp)',
-              },
-              {
-                header: 'Aksi',
-                cell: (props) => {
-                  return (
-                    <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
-                      <Button
-                        color='error'
-                        className='p-1'
-                        onClick={() => {
-                          handleDeleteProduct(props.row.original.id);
-                        }}
-                      >
-                        <Icon icon='mdi:trash' width={16} height={16} />
-                      </Button>
-                    </div>
-                  );
-                },
-              },
-            ]}
+            columns={columns}
             className={{
               tableWrapperClassName: 'overflow-x-auto min-h-full!',
               tableClassName: 'font-inter w-full table-auto  min-h-full!',
@@ -395,7 +456,16 @@ const SalesForm = ({
             Submit
           </Button>
         </div>
+        {JSON.stringify(formik.errors)}
       </form>
+      {formType == 'edit' && (
+        <div className='flex flex-row justify-start'>
+          <Button type='button' color='error' onClick={handleDelete}>
+            <Icon icon='mdi:trash' width={24} height={24} />
+            Hapus
+          </Button>
+        </div>
+      )}
       <Modal
         ref={addProductModal.ref}
         closeOnBackdrop
@@ -420,12 +490,25 @@ const SalesForm = ({
             <MarketingProductForm
               onSubmitForm={handleAddSubmitProduct}
               modalRef={addProductModal.ref}
-              data={marketingProducts}
+              data={rawMarketingProducts}
               initialValues={selectedMarketingProduct ?? undefined}
             />
           </div>
         </div>
       </Modal>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: deleteMarketingHandler,
+        }}
+      />
     </>
   );
 };
diff --git a/src/components/pages/production/chickin/form/ChickinForm.schema.ts b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
index b8abf232..b9da9256 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.schema.ts
+++ b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
@@ -1,3 +1,37 @@
 import * as Yup from 'yup';
-import { Product } from '@/types/api/master-data/product';
-import { Supplier } from '@/types/api/master-data/supplier';
+
+type ChickinRequestSchemaType = {
+  chick_in_date: string;
+  note?: string | undefined | null;
+  product_warehouse_id: number;
+};
+
+type ChickinSchemaType = {
+  project_flock_kandang_id: number;
+  chickin_requests: ChickinRequestSchemaType[];
+};
+
+export const ChickinRequestSchema: Yup.ObjectSchema<ChickinRequestSchemaType> =
+  Yup.object({
+    chick_in_date: Yup.string().nullable().required('Tanggal wajib diisi!'),
+    note: Yup.string().nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+  });
+
+export const ChickinSchema: Yup.ObjectSchema<ChickinSchemaType> = Yup.object({
+  project_flock_kandang_id: Yup.number()
+    .min(1, 'Project Flock Kandang wajib diisi!')
+    .required('Project Flock Kandang wajib diisi!'),
+  chickin_requests: Yup.array()
+    .of(ChickinRequestSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+});
+
+export type ChickinRequestFormValues = Yup.InferType<
+  typeof ChickinRequestSchema
+>;
+
+export type ChickinFormValues = Yup.InferType<typeof ChickinSchema>;
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index dc83eddb..af9ccd66 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -6,7 +6,7 @@ import { FormHeader } from '@/components/helper/form/FormHeader';
 import DateInput from '@/components/input/DateInput';
 import FileInput from '@/components/input/FileInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput from '@/components/input/SelectInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import TextInput from '@/components/input/TextInput';
 import Table from '@/components/Table';
 import { formatNumber } from '@/lib/helper';
@@ -15,8 +15,19 @@ import {
   AvailableQty,
   ProjectFlockKandang,
 } from '@/types/api/production/project-flock-kandang';
+import { useFormik } from 'formik';
+import {
+  ChickinFormValues,
+  ChickinRequestFormValues,
+  ChickinSchema,
+} from './ChickinForm.schema';
+import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-
+import { CreateChickinPayload } from '@/types/api/production/chickin';
+import { ChickinApi } from '@/services/api/production';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { flushSync } from 'react-dom';
 const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
@@ -27,199 +38,263 @@ const ChickinFormKandang = ({
   afterSubmit?: () => void;
 }) => {
   const router = useRouter();
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const createChickin = useCallback(
+    async (payload: CreateChickinPayload) => {
+      const createChickinRes = await ChickinApi.create(payload);
+      if (isResponseError(createChickinRes)) {
+        setChickinErrorMessage(createChickinRes.message);
+        return;
+      }
+
+      toast.success(createChickinRes?.message as string);
+      router.push(
+        `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
+      );
+    },
+    [router]
+  );
+
+  const handleReset = async () => {
+    flushSync(() => {
+      formik.resetForm({
+        values: {
+          project_flock_kandang_id: initialValues?.id,
+          chickin_requests: initialValues?.available_qtys
+            ? initialValues.available_qtys.map((availableQty) => ({
+                chick_in_date: '',
+                product_warehouse_id: availableQty.product_warehouse.id,
+                available_qty: availableQty.available_qty,
+                note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+              }))
+            : [],
+        },
+      });
+    });
+
+    formik.setTouched({
+      chickin_requests: initialValues?.available_qtys?.map(() => ({
+        chick_in_date: true,
+      })),
+    });
+
+    const errors = await formik.validateForm();
+    formik.setErrors(errors);
+  };
+
+  const formik = useFormik<ChickinFormValues>({
+    enableReinitialize: true,
+    validationSchema: ChickinSchema,
+    initialValues: {
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    },
+    onSubmit: (values) => {
+      setChickinErrorMessage('');
+      createChickin(values as CreateChickinPayload);
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues({
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    });
+  }, [formikSetValues, initialValues]);
+
   return (
     <div className='flex flex-col gap-4'>
       <FormHeader
         type='add'
         title='Chick In DOC'
-        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues.project_flock.id}`}
+        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
       />
-      <Card
-        title='Informasi Kandang'
-        className={{
-          wrapper: 'w-full bg-white mt-4',
+      <form
+        className='flex flex-col gap-4'
+        onReset={(e) => {
+          handleReset();
         }}
+        onSubmit={formik.handleSubmit}
       >
-        <Table<Kandang>
-          emptyContent={
-            <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>
-                Informasi Kandang belum tersedia...
-              </span>
-            </div>
-          }
-          data={[initialValues.kandang]}
-          columns={[
-            {
-              header: 'Area',
-              accessorFn: () => initialValues.project_flock?.area.name || '-',
-            },
-            {
-              header: 'Lokasi',
-              accessorFn: () =>
-                initialValues.project_flock?.location.name || '-',
-            },
-            {
-              header: 'Flock',
-              accessorFn: () => initialValues.project_flock?.flock.name || '-',
-            },
-            {
-              header: 'Kandang',
-              accessorFn: (row) => row?.name || '-',
-            },
-            {
-              header: 'Kapasitas',
-              accessorFn: (row) =>
-                (row?.capacity && formatNumber(row?.capacity)) || '-',
-            },
-            {
-              header: 'Penanggung Jawab',
-              accessorFn: (row) => row?.pic?.name || '-',
-            },
-          ]}
+        <Card
+          title='Informasi Kandang'
           className={{
-            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',
-            paginationClassName: 'hidden',
+            wrapper: 'w-full bg-white mt-4',
           }}
-        />
-      </Card>
-      <Card
-        title='Informasi Chick In DOC'
-        className={{
-          wrapper: 'w-full bg-white',
-        }}
-      >
-        <Table<AvailableQty>
-          data={initialValues.available_qtys || []}
-          columns={[
-            {
-              accessorFn: (row) => row.chick_in_date,
-              header: 'Tanggal Chick In',
-              cell(props) {
-                return (
-                  <DateInput
-                    name='chick_in_date[]'
-                    value={props.row.original.chick_in_date}
-                    onChange={(e) => {
-                      props.row.original.chick_in_date = e.target.value;
-                    }}
-                  />
-                );
+        >
+          <Table<Kandang>
+            emptyContent={
+              <div className='w-full p-5 text-center'>
+                <span className='text-lg opacity-50'>
+                  Informasi Kandang belum tersedia...
+                </span>
+              </div>
+            }
+            data={[initialValues?.kandang]}
+            columns={[
+              {
+                header: 'Area',
+                accessorFn: () =>
+                  initialValues?.project_flock?.area.name || '-',
               },
-            },
-            {
-              accessorFn: (row) => row.po_number,
-              header: 'No. Surat Jalan',
-              cell(props) {
-                return (
-                  <TextInput
-                    name='po_number[]'
-                    value={props.row.original.po_number}
-                    onChange={(e) => {
-                      props.row.original.po_number = e.target.value;
-                    }}
-                  />
-                );
+              {
+                header: 'Lokasi',
+                accessorFn: () =>
+                  initialValues?.project_flock?.location.name || '-',
               },
-            },
-            {
-              header: 'Dokumen Surat Jalan',
-              cell(props) {
-                return (
-                  <FileInput
-                    name='document_path[]'
-                    onChange={(e) => {
-                      props.row.original.document_path = e.target.value;
-                    }}
-                  />
-                );
+              {
+                header: 'Flock',
+                accessorFn: () =>
+                  initialValues?.project_flock?.flock_name || '-',
               },
-            },
-            {
-              accessorFn: (row) => row.supplier?.name,
-              header: 'Supplier',
-              cell(props) {
-                return (
-                  <SelectInput
-                    value={
-                      props.row.original.supplier?.name &&
-                      props.row.original.supplier?.id
-                        ? {
-                            label: props.row.original.supplier.name,
-                            value: props.row.original.supplier.id,
-                          }
-                        : undefined
-                    }
-                    options={[]}
-                    isDisabled
-                  />
-                );
+              {
+                header: 'Kandang',
+                accessorFn: (row) => row?.name || '-',
               },
-            },
-            {
-              accessorFn: (row) => row.product_warehouse.product.name,
-              header: 'Produk',
-              cell(props) {
-                return (
-                  <SelectInput
-                    value={{
-                      label: props.row.original.product_warehouse.product.name,
-                      value: props.row.original.product_warehouse.product.id,
-                    }}
-                    options={[]}
-                    isDisabled
-                  />
-                );
+              {
+                header: 'Kapasitas',
+                accessorFn: (row) =>
+                  (row?.capacity && formatNumber(row?.capacity)) || '-',
               },
-            },
-            {
-              accessorFn: (row) => row.product_warehouse.quantity,
-              header: 'Jumlah (ekor)',
-              cell(props) {
-                return (
-                  <NumberInput
-                    name='qty[]'
-                    value={props.row.original.product_warehouse.quantity}
-                  />
-                );
+              {
+                header: 'Penanggung Jawab',
+                accessorFn: (row) => row?.pic?.name || '-',
               },
-            },
-          ]}
+            ]}
+            className={{
+              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',
+              paginationClassName: 'hidden',
+            }}
+          />
+        </Card>
+        <Card
+          title='Informasi Chick In DOC'
           className={{
-            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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
-            paginationClassName: 'hidden',
+            wrapper: 'w-full bg-white',
           }}
-          emptyContent={
-            <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>
-                Isi persediaan DOC untuk kandang belum tersedia...
-              </span>
-            </div>
-          }
-        />
-      </Card>
-      <div className='flex flex-row justify-center gap-3'>
-        <Button type='reset' color='warning'>
-          Reset
-        </Button>
-        <Button type='submit' color='primary'>
-          Submit
-        </Button>
-      </div>
+        >
+          <Table<ChickinRequestFormValues>
+            data={formik.values.chickin_requests || []}
+            columns={[
+              {
+                accessorFn: (row) => row.chick_in_date,
+                header: 'Tanggal Chick In',
+                cell(props) {
+                  return (
+                    <DateInput
+                      name={`chickin_requests[${props.row.index}].chick_in_date`}
+                      value={
+                        formik.values.chickin_requests[props.row.index]
+                          ?.chick_in_date as string
+                      }
+                      onChange={formik.handleChange}
+                    />
+                  );
+                },
+              },
+              {
+                accessorFn: (row) => row.product_warehouse_id,
+                header: 'Produk',
+                cell(props) {
+                  const availableQty = initialValues?.available_qtys?.find(
+                    (availableQty) =>
+                      availableQty.product_warehouse.id ===
+                      props.row.original.product_warehouse_id
+                  );
+                  return (
+                    <SelectInput
+                      value={
+                        {
+                          label: availableQty?.product_warehouse?.product?.name,
+                          value: availableQty?.product_warehouse?.product?.id,
+                        } as OptionType
+                      }
+                      options={[]}
+                      isDisabled
+                    />
+                  );
+                },
+              },
+              {
+                accessorFn: (row) => row.product_warehouse_id,
+                header: 'Jumlah (ekor)',
+                cell(props) {
+                  const availableQty = initialValues?.available_qtys?.find(
+                    (availableQty) =>
+                      availableQty.product_warehouse.id ===
+                      props.row.original.product_warehouse_id
+                  );
+                  return (
+                    <NumberInput
+                      name='qty[]'
+                      value={availableQty?.available_qty}
+                    />
+                  );
+                },
+              },
+            ]}
+            className={{
+              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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
+              paginationClassName: 'hidden',
+            }}
+            emptyContent={
+              <div className='w-full p-5 text-center'>
+                <span className='text-lg opacity-50'>
+                  Isi persediaan DOC untuk kandang belum tersedia...
+                </span>
+              </div>
+            }
+          />
+        </Card>
+        {JSON.stringify(formik.values)}
+        <div className='flex flex-row justify-center gap-3'>
+          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            color='primary'
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+        {JSON.stringify(formik.errors)}
+      </form>
     </div>
   );
 };
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index b1a60ac5..fb876acb 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -426,7 +426,7 @@ const ProjectFlockTable = () => {
               },
 
               {
-                accessorKey: 'flock.name',
+                accessorKey: 'flock_name',
                 header: 'Flock',
               },
               {
diff --git a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
index eeac108d..e965fb97 100644
--- a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
+++ b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
@@ -3,15 +3,22 @@
 import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
-import { ProjectFlockApi } from '@/services/api/production';
+import {
+  ProjectFlockApi,
+  ProjectFlockKandangApi,
+} from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -37,28 +44,30 @@ const ProjectFlockChickinDetail = ({
   const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
 
   // Fetch Data
-  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(
-      `${ProjectFlockApi.basePath}?${new URLSearchParams({
-        search: searchProjectFlock,
-      }).toString()}`,
-      ProjectFlockApi.getAllFetcher
-    );
+  const {
+    data: listProjectFlockKandang,
+    isLoading: isLoadingListProjectFlockKandang,
+  } = useSWR(
+    `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+      project_flock_id:
+        projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
+    }).toString()}`,
+    ProjectFlockKandangApi.getAllFetcher
+  );
 
-  // Mapping Options
-  const options = isResponseSuccess(listProjectFlock)
-    ? listProjectFlock?.data.map((projectFlock) => {
-        return {
-          value: projectFlock.id,
-          label: `${projectFlock?.flock?.name} - Periode ${projectFlock?.period}`,
-        };
-      })
-    : [];
+  const {
+    options: options,
+    isLoadingOptions: isLoadingListProjectFlock,
+    rawData: listProjectFlock,
+  } = useSelect<ProjectFlock>(ProjectFlockApi.basePath, 'id', 'flock_name');
 
   // Handle Function
-  const handleChickinClick = async (kandang: Kandang) => {
+  const handleChickinClick = async (
+    projectFlockKandang: ProjectFlockKandang
+  ) => {
     router.push(
-      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${kandang.project_flock_kandang_id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
+      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
     );
   };
 
@@ -146,6 +155,10 @@ const ProjectFlockChickinDetail = ({
           }
           data={projectFlock ? [projectFlock] : []}
           columns={[
+            {
+              header: 'ID',
+              accessorKey: 'id',
+            },
             {
               header: 'Area',
               accessorKey: 'area.name',
@@ -222,7 +235,7 @@ const ProjectFlockChickinDetail = ({
           wrapper: 'w-full bg-white',
         }}
       >
-        <Table<Kandang>
+        <Table<ProjectFlockKandang>
           emptyContent={
             <div className='w-full p-5 text-center'>
               <span className='text-lg opacity-50'>
@@ -230,7 +243,11 @@ const ProjectFlockChickinDetail = ({
               </span>
             </div>
           }
-          data={projectFlock ? projectFlock.kandangs : []}
+          data={
+            isResponseSuccess(listProjectFlockKandang)
+              ? listProjectFlockKandang.data
+              : []
+          }
           columns={[
             {
               header: '#',
@@ -240,25 +257,48 @@ const ProjectFlockChickinDetail = ({
                 1,
             },
             {
-              accessorFn: () => (projectFlock ? projectFlock.area.name : ''),
+              accessorFn: (row) => row?.project_flock?.area?.name,
               header: 'Area',
             },
             {
-              accessorFn: () =>
-                projectFlock ? projectFlock.location.name : '',
+              accessorFn: (row) => row?.project_flock?.location?.name,
               header: 'Lokasi',
             },
             {
-              accessorKey: 'name',
+              accessorKey: 'kandang.name',
               header: 'Kandang',
             },
             {
-              accessorKey: 'capacity',
+              accessorKey: 'kandang.capacity',
               header: 'Kapasitas',
             },
             {
-              accessorKey: 'pic.name',
-              header: 'Penanggung Jawab',
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'DISETUJUI':
+                          return 'green';
+                        case 'DITOLAK':
+                          return 'red';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : (
+                  <PillBadge color='gray' content={'Belum Chick In'} />
+                );
+              },
             },
             {
               header: 'Aksi',
@@ -271,11 +311,12 @@ const ProjectFlockChickinDetail = ({
                       onClick={() => {
                         handleChickinClick(props.row.original);
                       }}
+                      className='p-1'
                     >
                       <Icon
                         icon='mdi:home-import-outline'
-                        width={24}
-                        height={24}
+                        width={18}
+                        height={18}
                       />
                       Chickin
                     </Button>
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
index 8607a7e6..da5deccb 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -6,9 +6,7 @@ export const ProjectFlockFormSchema = Yup.object({
     value: Yup.number().required('ID Flock wajib diisi!'),
     label: Yup.string().required('Nama Flock wajib diisi!'),
   }).nullable(),
-  flock_id: Yup.number()
-    .min(1, 'Flock wajib diisi!')
-    .required('Flock wajib diisi!'),
+  flock_name: Yup.string().required('Nama Flock wajib diisi!'),
 
   // Area
   area: Yup.object({
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index e0ce5778..6136aaa7 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -1,7 +1,10 @@
 'use client';
 
 import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
   AreaApi,
@@ -13,7 +16,7 @@ import {
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { use, useEffect, useMemo, useState } from 'react';
 import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockFormSchema,
@@ -58,7 +61,6 @@ const ProjectFlockForm = ({
 
   const [selectedLocation, setSelectedLocation] = useState('');
   const [disabledLocation, setDisabledLocation] = useState(true);
-  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
 
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
@@ -105,38 +107,29 @@ const ProjectFlockForm = ({
   }, [initialValues]);
 
   // Fetch Data
-  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
-    flockUrl,
-    FlockApi.getAllFetcher
-  );
+  const {
+    rawData: flocks,
+    isLoadingOptions: isLoadingFlocks,
+    options: optionsFlock,
+  } = useSelect(FlockApi.basePath, 'id', 'name');
 
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areaUrl,
-    AreaApi.getAllFetcher
-  );
+  const {
+    options: optionsArea,
+    isLoadingOptions: isLoadingAreas,
+    rawData: areas,
+  } = useSelect(AreaApi.basePath, 'id', 'name');
 
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: '',
-    area_id: selectedArea,
-  }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationUrl,
-    LocationApi.getAllFetcher
-  );
+  const {
+    options: optionsLocation,
+    isLoadingOptions: isLoadingLocations,
+    rawData: locations,
+  } = useSelect(LocationApi.basePath, 'id', 'name');
 
-  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
-    fcrUrl,
-    FcrApi.getAllFetcher
-  );
+  const {
+    options: optionsFcr,
+    isLoadingOptions: isLoadingFcrs,
+    rawData: fcrs,
+  } = useSelect(FcrApi.basePath, 'id', 'name');
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
@@ -159,36 +152,6 @@ const ProjectFlockForm = ({
       )
   );
 
-  // Map Data to Options
-  const optionsArea = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
-  const optionsFcr = isResponseSuccess(fcrs)
-    ? fcrs?.data.map((fcr) => ({
-        value: fcr.id,
-        label: fcr.name,
-      }))
-    : [];
-  const optionsFlock = isResponseSuccess(flocks)
-    ? flocks?.data.map((flock) => ({
-        value: flock.id,
-        label: flock.name,
-      }))
-    : [];
-
-  useEffect(() => {
-    if (isResponseSuccess(locations)) {
-      const options = locations.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }));
-      setOptionsLocation(options);
-    }
-  }, [locations, setSelectedLocation]);
-
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
       if (selectedLocation) {
@@ -246,8 +209,13 @@ const ProjectFlockForm = ({
       `${inputName}_id`,
       val ? (val as OptionType)?.value : 0
     );
+    formik.setFieldValue(
+      `${inputName}_name`,
+      val ? (val as OptionType)?.label : 0
+    );
 
     formik.setFieldTouched(`${inputName}_id`, true);
+    formik.setFieldTouched(`${inputName}_name`, true);
   };
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -293,15 +261,15 @@ const ProjectFlockForm = ({
   const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
     return {
       name: initialValues?.name ?? '',
-      flock: initialValues?.flock
+      flock: initialValues?.flock_name
         ? {
-            value: initialValues.flock.id,
-            label: initialValues.flock.name,
+            value: initialValues?.flock?.id ?? 0,
+            label: initialValues?.flock_name,
           }
         : null,
       area: initialValues?.area
         ? {
-            value: initialValues.area.id,
+            value: initialValues.area?.id,
             label: initialValues.area.name,
           }
         : null,
@@ -313,30 +281,31 @@ const ProjectFlockForm = ({
         : null,
       fcr: initialValues?.fcr
         ? {
-            value: initialValues.fcr.id,
+            value: initialValues.fcr?.id,
             label: initialValues.fcr.name,
           }
         : null,
       location: initialValues?.location
         ? {
-            value: initialValues.location.id,
+            value: initialValues.location?.id,
             label: initialValues.location.name,
           }
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
       area_id: initialValues?.area?.id ?? 0,
       category: initialValues?.category as NonNullable<
         'GROWING' | 'LAYING' | undefined
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 0,
+      period: initialValues?.period ?? 1,
       kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
         | number
         | undefined
       )[],
     };
-  }, [initialValues]);
+  }, [initialValues, flocks]);
 
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
@@ -350,7 +319,7 @@ const ProjectFlockForm = ({
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        flock_id: values.flock_id as number,
+        flock_name: values.flock_name as string,
         area_id: values.area_id as number,
         category: values.category as string,
         fcr_id: values.fcr_id as number,
@@ -377,8 +346,8 @@ const ProjectFlockForm = ({
   useEffect(() => {
     if (formType == 'detail') {
       formik.setFieldValue('area', {
-        value: initialValues?.area.id,
-        label: initialValues?.area.name,
+        value: initialValues?.area?.id,
+        label: initialValues?.area?.name,
       });
       formik.setFieldValue('area_id', initialValues?.area_id);
       if (initialValues?.area_id) {
@@ -402,9 +371,11 @@ const ProjectFlockForm = ({
 
   // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
   useEffect(() => {
-    if (formType != 'add' && initialValues?.location?.id) {
-      setSelectedLocation(initialValues.location?.id.toString());
-      setDisabledLocation(false); // biar dropdown lokasi aktif juga
+    if (formType != 'add') {
+      if (initialValues?.location?.id) {
+        setSelectedLocation(initialValues.location?.id.toString());
+        setDisabledLocation(false); // biar dropdown lokasi aktif juga
+      }
     }
   }, [formType, initialValues]);
 
@@ -459,7 +430,7 @@ const ProjectFlockForm = ({
       method: 'POST',
       payload: {
         action: action,
-        approvable_ids: [initialValues.id],
+        approvable_ids: [initialValues?.id],
       },
     });
 
@@ -467,14 +438,6 @@ const ProjectFlockForm = ({
       if (refreshProjectFlocks) {
         await refreshProjectFlocks();
       }
-      // if (action == 'APPROVED') {
-      //   setIsApprovedDisabled(true);
-      //   setIsRejectedDisabled(false);
-      // }
-      // if (action == 'REJECTED') {
-      //   setIsRejectedDisabled(true);
-      //   setIsApprovedDisabled(false);
-      // }
       toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
@@ -591,9 +554,10 @@ const ProjectFlockForm = ({
                   options={optionsFlock}
                   isLoading={isLoadingFlocks}
                   isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                    formik.touched.flock_name &&
+                    Boolean(formik.errors.flock_name)
                   }
-                  errorMessage={formik.errors.flock_id as string}
+                  errorMessage={formik.errors.flock_name as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -724,6 +688,7 @@ const ProjectFlockForm = ({
               </div>
             )}
           </div>
+          {JSON.stringify(formik.errors)}
         </form>
         {formType != 'add' && (
           <div className='flex flex-row gap-2 mb-6'>
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 2f08aaba..68a24ef4 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -215,7 +215,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const flockOptions = isResponseSuccess(projectFlocks)
     ? projectFlocks.data.map((flock) => ({
         value: flock.id,
-        label: flock.flock.name,
+        label: flock.flock?.name || '',
       }))
     : [];
 
diff --git a/src/dummy/marketing.dummy.ts b/src/dummy/marketing.dummy.ts
index 6eab9067..7cbf4317 100644
--- a/src/dummy/marketing.dummy.ts
+++ b/src/dummy/marketing.dummy.ts
@@ -144,7 +144,7 @@ export const dummyProductWarehouses: ProductWarehouse[] = [
       name: 'Pakan Ayam Premium',
       sku: 'PAK-001',
       category: 'PAKAN',
-    } as unknown as Product, // bisa diganti sesuai tipe Product
+    } as unknown as Product,
     warehouse: dummyWarehouses[0],
     created_user: createdUser,
     created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
@@ -160,7 +160,7 @@ export const dummyProductWarehouses: ProductWarehouse[] = [
       name: 'Vitamin Ayam Super',
       sku: 'VIT-002',
       category: 'VITAMIN',
-    } as unknown as Product, // bisa diganti sesuai tipe Product
+    } as unknown as Product,
     warehouse: dummyWarehouses[1],
     created_user: createdUser,
     created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
@@ -172,6 +172,7 @@ export const dummyProductWarehouses: ProductWarehouse[] = [
 // 💼 Marketing Dummy
 // ======================
 export const dummyMarketings: Marketing[] = [
+  // Step 1: Pengajuan Order
   {
     id: 1,
     status: 'APPROVED',
@@ -197,7 +198,7 @@ export const dummyMarketings: Marketing[] = [
     grand_total: 7500000,
     approval: {
       step_number: 1,
-      step_name: 'Manager Approval',
+      step_name: 'Pengajuan Order',
       action: 'APPROVED',
       action_by: createdUser,
       action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
@@ -227,9 +228,11 @@ export const dummyMarketings: Marketing[] = [
     created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
     updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
   },
+
+  // Step 2: Sales Order
   {
     id: 2,
-    status: 'PENDING',
+    status: 'APPROVED',
     so_number: 'SO-002-2025',
     so_docs: 'https://example.com/docs/so002.pdf',
     so_date: format(new Date(), 'yyyy-MM-dd'),
@@ -251,9 +254,9 @@ export const dummyMarketings: Marketing[] = [
     notes: 'Pesanan kedua untuk stok akhir tahun.',
     grand_total: 3750000,
     approval: {
-      step_number: 1,
-      step_name: 'Manager Approval',
-      action: 'PENDING',
+      step_number: 2,
+      step_name: 'Sales Order',
+      action: 'APPROVED',
       action_by: createdUser,
       action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
     },
@@ -282,4 +285,80 @@ export const dummyMarketings: Marketing[] = [
     created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
     updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
   },
+
+  // Step 3: Delivery Order
+  {
+    id: 3,
+    status: 'APPROVED',
+    so_number: 'SO-003-2025',
+    so_docs: 'https://example.com/docs/so003.pdf',
+    so_date: format(new Date(), 'yyyy-MM-dd'),
+    customer: {
+      id: 3,
+      name: 'UD Ternak Sejahtera',
+      pic_id: 3,
+      pic: createdUser,
+      type: 'Reseller',
+      address: 'Jl. Pasteur No. 88',
+      phone: '083333333333',
+      email: 'halo@ternaksejahtera.com',
+      account_number: '1122334455',
+      created_user: createdUser,
+      created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    sales_person: createdUser,
+    notes: 'Order untuk pengiriman ke luar kota.',
+    grand_total: 5600000,
+    approval: {
+      step_number: 3,
+      step_name: 'Delivery Order',
+      action: 'APPROVED',
+      action_by: createdUser,
+      action_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    },
+    marketing_products: [
+      {
+        id: 3,
+        qty: 80,
+        unit_price: 70000,
+        avg_weight: 2.4,
+        total_weight: 192,
+        total_price: 5600000,
+        product_warehouse: dummyProductWarehouses[0],
+        marketing_delivery_products: {
+          id: 3,
+          qty: 80,
+          unit_price: 70000,
+          avg_weight: 2.4,
+          total_weight: 192,
+          total_price: 5600000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'D 9090 ZZ',
+        },
+      },
+      {
+        id: 4,
+        qty: 80,
+        unit_price: 70000,
+        avg_weight: 2.4,
+        total_weight: 192,
+        total_price: 5600000,
+        product_warehouse: dummyProductWarehouses[0],
+        marketing_delivery_products: {
+          id: 3,
+          qty: 80,
+          unit_price: 70000,
+          avg_weight: 2.4,
+          total_weight: 192,
+          total_price: 5600000,
+          delivery_date: format(new Date(), 'yyyy-MM-dd'),
+          vehicle_number: 'D 9090 ZZ',
+        },
+      },
+    ],
+    created_user: createdUser,
+    created_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    updated_at: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+  },
 ];
diff --git a/src/services/api/marketing/marketing.ts b/src/services/api/marketing/marketing.ts
index 1285a2e4..a5c3b8fb 100644
--- a/src/services/api/marketing/marketing.ts
+++ b/src/services/api/marketing/marketing.ts
@@ -47,20 +47,32 @@ export class MarketingService extends BaseApiService<
     // simulasi delay
     await new Promise((res) => setTimeout(res, 500));
 
-    // misalnya fetch dari dummy
-    return {
-      code: 200,
-      status: 'success',
-      message: 'Data marketing berhasil diambil.',
-      data: dummyMarketings[0],
-    };
+    const marketing = dummyMarketings.find((marketing) => {
+      console.log('marketing', marketing);
+      console.log('id-m', marketing.id);
+      console.log('id-p', id);
+      console.log('id', marketing.id == id);
+      return marketing.id == id;
+    });
+    console.log('marketings', dummyMarketings);
+    console.log('marketing', marketing);
 
-    // jika tidak ditemukan
-    throw {
-      code: 404,
-      status: 'error',
-      message: 'Data marketing tidak ditemukan.',
-    };
+    if (marketing) {
+      // misalnya fetch dari dummy
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Data marketing berhasil diambil.',
+        data: marketing,
+      };
+    } else {
+      // jika tidak ditemukan
+      throw {
+        code: 404,
+        status: 'error',
+        message: 'Data marketing tidak ditemukan.',
+      };
+    }
   }
 
   /**
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index c4434f16..a69818e6 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -20,7 +20,7 @@ export const ProjectFlockApi = new BaseApiService<
   ProjectFlock,
   CreateProjectFlockPayload,
   UpdateProjectFlockPayload
->('/production/project_flocks');
+>('/production/project-flocks');
 export const ProjectFlockKandangApi = new BaseApiService<
   ProjectFlockKandang,
   unknown,
diff --git a/src/types/api/marketing/marketing.d.ts b/src/types/api/marketing/marketing.d.ts
index 1ff52fbb..331d95d3 100644
--- a/src/types/api/marketing/marketing.d.ts
+++ b/src/types/api/marketing/marketing.d.ts
@@ -41,6 +41,7 @@ export type MarketingDeliveryProducts = {
   total_price: number;
   delivery_date: string;
   vehicle_number: string;
+  do_number?: string | undefined;
 };
 
 export type Marketing = BaseMetadata & BaseMarketing;
diff --git a/src/types/api/production/chickin.d.ts b/src/types/api/production/chickin.d.ts
index 3f5263a6..8b1dcb67 100644
--- a/src/types/api/production/chickin.d.ts
+++ b/src/types/api/production/chickin.d.ts
@@ -14,9 +14,11 @@ export type Chickin = BaseMetadata & BaseChickin;
 
 export type CreateChickinPayload = {
   project_flock_kandang_id: number;
-  chick_in_date: string;
-  note: string;
-  quantity?: number;
+  chickin_requests: {
+    chick_in_date: string;
+    note?: string;
+    product_warehouse_id: number;
+  }[];
 };
 
 export type UpdateChickinPayload = CreateChickinPayload & {
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index 2cb2503d..222096f4 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -2,6 +2,7 @@ import { Kandang } from '@/type/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { Supplier } from '../master-data/supplier';
+import { BaseApproval } from '../api-general';
 
 export type BaseProjectFlockKandang = {
   id: number;
@@ -10,14 +11,14 @@ export type BaseProjectFlockKandang = {
   kandang: Kandang;
   project_flock: ProjectFlock;
   available_qtys?: AvailableQty[];
+  approval: BaseApproval;
 };
 
 export type AvailableQty = {
   chick_in_date?: string;
-  po_number?: string;
-  document_path?: string;
-  supplier?: Supplier;
+  available_qty: number;
   product_warehouse: ProductWarehouse;
+  note?: string;
 };
 
 export type ProjectFlockKandang = BaseProjectFlockKandang;
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index be14302d..15f60af9 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -9,8 +9,9 @@ export type BaseProjectFlock = {
   id: number;
   name: string;
   status: string;
-  flock: Flock;
-  flock_id: number;
+  flock?: Flock;
+  flock_i?: number;
+  flock_name: string;
   area: Area;
   area_id: number;
   category: string;
@@ -32,7 +33,7 @@ export type PeriodFlock = {
 export type ProjectFlock = BaseMetadata & BaseProjectFlock;
 
 export type CreateProjectFlockPayload = {
-  flock_id: number;
+  flock_name: string;
   area_id: number;
   category: string;
   fcr_id: number;

From 9f4f1400185e0ba2131212f21c88b1c718f1df1f Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 10 Nov 2025 06:07:02 +0700
Subject: [PATCH 204/212] refactor(FE-239-238): Refactor UI & API Integration
 For  Form Chickin & Chickin Details

---
 .../chickin/add/kandang/page.tsx              |  18 +-
 .../project-flock/chickin/detail/page.tsx     |   2 +-
 .../production/project-flock/detail/page.tsx  |   2 +-
 .../pages/production/chickin/ChickinTable.tsx |   2 +-
 .../production/chickin/form/ChickinForm.tsx   | 357 +++++-------------
 .../project-flock/ProjectFlockTable.tsx       |   2 +-
 .../chickin/ProjectFlockChickinDetail.tsx     |   4 +-
 .../project-flock/form/ProjectFlockForm.tsx   |   1 -
 src/services/api/production.ts                |  10 -
 .../api/production/project-flock-kandang.d.ts |  12 +
 10 files changed, 122 insertions(+), 288 deletions(-)

diff --git a/src/app/production/project-flock/chickin/add/kandang/page.tsx b/src/app/production/project-flock/chickin/add/kandang/page.tsx
index 56dfc2db..0805f010 100644
--- a/src/app/production/project-flock/chickin/add/kandang/page.tsx
+++ b/src/app/production/project-flock/chickin/add/kandang/page.tsx
@@ -12,9 +12,12 @@ export default function AddChickinKandang() {
   const projectFlockId = searchParams.get('projectFlockId');
   const router = useRouter();
 
-  const { data: projectFlockKandang, isLoading: isLoading } = useSWR(
-    projectFlockKandangId,
-    (id: number) => ProjectFlockKandangApi.getSingle(id)
+  const {
+    data: projectFlockKandang,
+    isLoading: isLoading,
+    mutate: refreshProjectFlockKandang,
+  } = useSWR(projectFlockKandangId, (id: number) =>
+    ProjectFlockKandangApi.getSingle(id)
   );
 
   if (!projectFlockKandangId) {
@@ -31,6 +34,10 @@ export default function AddChickinKandang() {
     return;
   }
 
+  const handleAfterSubmit = () => {
+    refreshProjectFlockKandang();
+  };
+
   return (
     <>
       <section className='w-full p-4'>
@@ -38,7 +45,10 @@ export default function AddChickinKandang() {
         {!isLoading &&
           isResponseSuccess(projectFlockKandang) &&
           projectFlockId && (
-            <ChickinForm initialValues={projectFlockKandang.data} />
+            <ChickinForm
+              initialValues={projectFlockKandang.data}
+              afterSubmit={handleAfterSubmit}
+            />
           )}
       </section>
     </>
diff --git a/src/app/production/project-flock/chickin/detail/page.tsx b/src/app/production/project-flock/chickin/detail/page.tsx
index da0c8466..daea0f0a 100644
--- a/src/app/production/project-flock/chickin/detail/page.tsx
+++ b/src/app/production/project-flock/chickin/detail/page.tsx
@@ -6,7 +6,7 @@ import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { ChickinApi } from '@/services/api/production';
+import { ChickinApi } from '@/services/api/production/chickin';
 import { BaseApiResponse } from '@/types/api/api-general';
 import {
   Chickin,
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index 811aed54..e64005d4 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -57,7 +57,7 @@ const ProjectFlockDetail = () => {
       flock: flock.data.find(
         (flock) =>
           flock.name ==
-          projectFlock.data.flock_name
+          projectFlock?.data?.flock_name
             .trim()
             .split(/\s+/)
             .slice(0, -1)
diff --git a/src/components/pages/production/chickin/ChickinTable.tsx b/src/components/pages/production/chickin/ChickinTable.tsx
index db5265c8..d76115c5 100644
--- a/src/components/pages/production/chickin/ChickinTable.tsx
+++ b/src/components/pages/production/chickin/ChickinTable.tsx
@@ -13,7 +13,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatNumber } from '@/lib/helper';
-import { ChickinApi } from '@/services/api/production';
+import { ChickinApi } from '@/services/api/production/chickin';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index af9ccd66..f007a1cf 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -1,33 +1,15 @@
 'use client';
 
-import Button from '@/components/Button';
 import Card from '@/components/Card';
 import { FormHeader } from '@/components/helper/form/FormHeader';
-import DateInput from '@/components/input/DateInput';
-import FileInput from '@/components/input/FileInput';
-import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import TextInput from '@/components/input/TextInput';
 import Table from '@/components/Table';
 import { formatNumber } from '@/lib/helper';
 import { Kandang } from '@/types/api/master-data/kandang';
-import {
-  AvailableQty,
-  ProjectFlockKandang,
-} from '@/types/api/production/project-flock-kandang';
-import { useFormik } from 'formik';
-import {
-  ChickinFormValues,
-  ChickinRequestFormValues,
-  ChickinSchema,
-} from './ChickinForm.schema';
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { CreateChickinPayload } from '@/types/api/production/chickin';
-import { ChickinApi } from '@/services/api/production';
-import { isResponseError } from '@/lib/api-helper';
-import toast from 'react-hot-toast';
-import { flushSync } from 'react-dom';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import Tabs from '@/components/Tabs';
+import ChickinFormView from './tabs/ChickinFormView';
+import ChickinLogsView from './tabs/ChickLogsView';
+import { useState } from 'react';
 const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
@@ -37,91 +19,13 @@ const ChickinFormKandang = ({
   initialValues: ProjectFlockKandang;
   afterSubmit?: () => void;
 }) => {
-  const router = useRouter();
-  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+  const [activeTabId, setActiveTabId] = useState<string>('formChickIn');
 
-  const createChickin = useCallback(
-    async (payload: CreateChickinPayload) => {
-      const createChickinRes = await ChickinApi.create(payload);
-      if (isResponseError(createChickinRes)) {
-        setChickinErrorMessage(createChickinRes.message);
-        return;
-      }
-
-      toast.success(createChickinRes?.message as string);
-      router.push(
-        `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
-      );
-    },
-    [router]
-  );
-
-  const handleReset = async () => {
-    flushSync(() => {
-      formik.resetForm({
-        values: {
-          project_flock_kandang_id: initialValues?.id,
-          chickin_requests: initialValues?.available_qtys
-            ? initialValues.available_qtys.map((availableQty) => ({
-                chick_in_date: '',
-                product_warehouse_id: availableQty.product_warehouse.id,
-                available_qty: availableQty.available_qty,
-                note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
-              }))
-            : [],
-        },
-      });
-    });
-
-    formik.setTouched({
-      chickin_requests: initialValues?.available_qtys?.map(() => ({
-        chick_in_date: true,
-      })),
-    });
-
-    const errors = await formik.validateForm();
-    formik.setErrors(errors);
+  const afterSubmitFormChickin = () => {
+    setActiveTabId('logsChickIn');
+    afterSubmit && afterSubmit();
   };
 
-  const formik = useFormik<ChickinFormValues>({
-    enableReinitialize: true,
-    validationSchema: ChickinSchema,
-    initialValues: {
-      project_flock_kandang_id: initialValues?.id,
-      chickin_requests: initialValues?.available_qtys
-        ? initialValues.available_qtys.map((availableQty) => ({
-            chick_in_date: '',
-            product_warehouse_id: availableQty.product_warehouse.id,
-            available_qty: availableQty.available_qty,
-            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
-          }))
-        : [],
-    },
-    onSubmit: (values) => {
-      setChickinErrorMessage('');
-      createChickin(values as CreateChickinPayload);
-      if (afterSubmit) {
-        afterSubmit();
-      }
-    },
-  });
-
-  const { setValues: formikSetValues } = formik;
-
-  useEffect(() => {
-    formikSetValues({
-      project_flock_kandang_id: initialValues?.id,
-      chickin_requests: initialValues?.available_qtys
-        ? initialValues.available_qtys.map((availableQty) => ({
-            chick_in_date: '',
-            product_warehouse_id: availableQty.product_warehouse.id,
-            available_qty: availableQty.available_qty,
-            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
-          }))
-        : [],
-    });
-  }, [formikSetValues, initialValues]);
-
   return (
     <div className='flex flex-col gap-4'>
       <FormHeader
@@ -129,172 +33,91 @@ const ChickinFormKandang = ({
         title='Chick In DOC'
         backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
       />
-      <form
-        className='flex flex-col gap-4'
-        onReset={(e) => {
-          handleReset();
+      <Card
+        title='Informasi Kandang'
+        className={{
+          wrapper: 'w-full bg-white mt-4',
         }}
-        onSubmit={formik.handleSubmit}
       >
-        <Card
-          title='Informasi Kandang'
+        <Table<Kandang>
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Informasi Kandang belum tersedia...
+              </span>
+            </div>
+          }
+          data={[initialValues?.kandang]}
+          columns={[
+            {
+              header: 'Area',
+              accessorFn: () => initialValues?.project_flock?.area.name || '-',
+            },
+            {
+              header: 'Lokasi',
+              accessorFn: () =>
+                initialValues?.project_flock?.location.name || '-',
+            },
+            {
+              header: 'Flock',
+              accessorFn: () => initialValues?.project_flock?.flock_name || '-',
+            },
+            {
+              header: 'Kandang',
+              accessorFn: (row) => row?.name || '-',
+            },
+            {
+              header: 'Kapasitas',
+              accessorFn: (row) =>
+                (row?.capacity && formatNumber(row?.capacity)) || '-',
+            },
+            {
+              header: 'Penanggung Jawab',
+              accessorFn: (row) => row?.pic?.name || '-',
+            },
+          ]}
           className={{
-            wrapper: 'w-full bg-white mt-4',
+            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',
+            paginationClassName: 'hidden',
           }}
-        >
-          <Table<Kandang>
-            emptyContent={
-              <div className='w-full p-5 text-center'>
-                <span className='text-lg opacity-50'>
-                  Informasi Kandang belum tersedia...
-                </span>
-              </div>
-            }
-            data={[initialValues?.kandang]}
-            columns={[
-              {
-                header: 'Area',
-                accessorFn: () =>
-                  initialValues?.project_flock?.area.name || '-',
-              },
-              {
-                header: 'Lokasi',
-                accessorFn: () =>
-                  initialValues?.project_flock?.location.name || '-',
-              },
-              {
-                header: 'Flock',
-                accessorFn: () =>
-                  initialValues?.project_flock?.flock_name || '-',
-              },
-              {
-                header: 'Kandang',
-                accessorFn: (row) => row?.name || '-',
-              },
-              {
-                header: 'Kapasitas',
-                accessorFn: (row) =>
-                  (row?.capacity && formatNumber(row?.capacity)) || '-',
-              },
-              {
-                header: 'Penanggung Jawab',
-                accessorFn: (row) => row?.pic?.name || '-',
-              },
-            ]}
-            className={{
-              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',
-              paginationClassName: 'hidden',
-            }}
-          />
-        </Card>
-        <Card
-          title='Informasi Chick In DOC'
-          className={{
-            wrapper: 'w-full bg-white',
-          }}
-        >
-          <Table<ChickinRequestFormValues>
-            data={formik.values.chickin_requests || []}
-            columns={[
-              {
-                accessorFn: (row) => row.chick_in_date,
-                header: 'Tanggal Chick In',
-                cell(props) {
-                  return (
-                    <DateInput
-                      name={`chickin_requests[${props.row.index}].chick_in_date`}
-                      value={
-                        formik.values.chickin_requests[props.row.index]
-                          ?.chick_in_date as string
-                      }
-                      onChange={formik.handleChange}
-                    />
-                  );
-                },
-              },
-              {
-                accessorFn: (row) => row.product_warehouse_id,
-                header: 'Produk',
-                cell(props) {
-                  const availableQty = initialValues?.available_qtys?.find(
-                    (availableQty) =>
-                      availableQty.product_warehouse.id ===
-                      props.row.original.product_warehouse_id
-                  );
-                  return (
-                    <SelectInput
-                      value={
-                        {
-                          label: availableQty?.product_warehouse?.product?.name,
-                          value: availableQty?.product_warehouse?.product?.id,
-                        } as OptionType
-                      }
-                      options={[]}
-                      isDisabled
-                    />
-                  );
-                },
-              },
-              {
-                accessorFn: (row) => row.product_warehouse_id,
-                header: 'Jumlah (ekor)',
-                cell(props) {
-                  const availableQty = initialValues?.available_qtys?.find(
-                    (availableQty) =>
-                      availableQty.product_warehouse.id ===
-                      props.row.original.product_warehouse_id
-                  );
-                  return (
-                    <NumberInput
-                      name='qty[]'
-                      value={availableQty?.available_qty}
-                    />
-                  );
-                },
-              },
-            ]}
-            className={{
-              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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
-              paginationClassName: 'hidden',
-            }}
-            emptyContent={
-              <div className='w-full p-5 text-center'>
-                <span className='text-lg opacity-50'>
-                  Isi persediaan DOC untuk kandang belum tersedia...
-                </span>
-              </div>
-            }
-          />
-        </Card>
-        {JSON.stringify(formik.values)}
-        <div className='flex flex-row justify-center gap-3'>
-          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
-            Reset
-          </Button>
-          <Button
-            type='submit'
-            color='primary'
-            disabled={!formik.isValid || formik.isSubmitting}
-          >
-            Submit
-          </Button>
-        </div>
-        {JSON.stringify(formik.errors)}
-      </form>
+        />
+      </Card>
+      <Tabs
+        className='bg-white p-2'
+        onTabChange={setActiveTabId}
+        activeTabId={activeTabId}
+        tabs={[
+          {
+            id: 'formChickIn',
+            label: 'Form Chick In',
+            content: (
+              <ChickinFormView
+                initialValues={initialValues}
+                formType={formType}
+                afterSubmit={afterSubmitFormChickin}
+              />
+            ),
+          },
+          {
+            content: (
+              <ChickinLogsView
+                initialValues={initialValues}
+                afterSubmit={afterSubmit}
+              />
+            ),
+            id: 'logsChickIn',
+            label: 'Riwayat Chick In',
+          },
+        ]}
+        variant='lifted'
+      />
     </div>
   );
 };
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index fb876acb..4bafac88 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -573,7 +573,7 @@ const ProjectFlockTable = () => {
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
-        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        text={`Apakah anda yakin ingin approve data Project Flock ini (${selectedRowIds.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
index e965fb97..8052d958 100644
--- a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
+++ b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
@@ -284,8 +284,8 @@ const ProjectFlockChickinDetail = ({
                       ) {
                         case 'DISETUJUI':
                           return 'green';
-                        case 'DITOLAK':
-                          return 'red';
+                        case 'PENGAJUAN':
+                          return 'yellow';
                         default:
                           return 'gray';
                       }
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 6136aaa7..d3670f29 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -688,7 +688,6 @@ const ProjectFlockForm = ({
               </div>
             )}
           </div>
-          {JSON.stringify(formik.errors)}
         </form>
         {formType != 'add' && (
           <div className='flex flex-row gap-2 mb-6'>
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index a69818e6..5a15bb8b 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -9,11 +9,6 @@ import {
   Recording,
   UpdateRecordingPayload,
 } from '@/types/api/production/recording';
-import {
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload,
-} from '@/types/api/production/chickin';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
 export const ProjectFlockApi = new BaseApiService<
@@ -31,8 +26,3 @@ export const RecordingApi = new BaseApiService<
   CreateRecordingPayload,
   UpdateRecordingPayload
 >('/flock/recordings');
-export const ChickinApi = new BaseApiService<
-  Chickin,
-  CreateChickinPayload,
-  UpdateChickinPayload
->('/production/chickins');
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index 222096f4..dafd9aa5 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -11,6 +11,7 @@ export type BaseProjectFlockKandang = {
   kandang: Kandang;
   project_flock: ProjectFlock;
   available_qtys?: AvailableQty[];
+  chickins?: Chickin[];
   approval: BaseApproval;
 };
 
@@ -21,6 +22,17 @@ export type AvailableQty = {
   note?: string;
 };
 
+export type Chickin = {
+  id: number;
+  project_flock_kandang_id: number;
+  chick_in_date: string;
+  product_warehouse_id: number;
+  product_warehouse: ProductWarehouse;
+  usage_qty: number;
+  pending_usage_qty: number;
+  note: string;
+};
+
 export type ProjectFlockKandang = BaseProjectFlockKandang;
 
 export type LookupProjectFlockKandangPayload = {

From f63d3d3870c1b24d2123fdf566bf00cedb04618f Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Mon, 10 Nov 2025 17:05:24 +0700
Subject: [PATCH 205/212] refactor(FE): Refactor project flock api & implement
 approval component in project flock details

---
 .../project-flock/form/ProjectFlockForm.tsx   | 112 +++++++++--
 src/config/constant.ts                        |  33 ++++
 src/services/api/production/project-flock.ts  | 186 +++++++++++++++++-
 3 files changed, 313 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index d3670f29..932b87f8 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -33,12 +33,18 @@ import toast from 'react-hot-toast';
 import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { BaseApiResponse } from '@/types/api/api-general';
-import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
+import { APPROVAL_WORKFLOWS, FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ProjectFlockKandangTable from './ProjectFlockKandangTable';
+import ApprovalSteps from '@/components/pages/ApprovalSteps';
+import Steps from '@/components/steps/Steps';
+import StepItem from '@/components/steps/StepItem';
+import Tooltip from '@/components/Tooltip';
+import { id, is } from 'react-day-picker/locale';
+import { formatDate } from '@/lib/helper';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -55,20 +61,22 @@ const ProjectFlockForm = ({
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
+
+  const projectFlockSteps = APPROVAL_WORKFLOWS.find(
+    (step) => step.key === 'PROJECT_FLOCKS'
+  );
+
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
-
   const [selectedLocation, setSelectedLocation] = useState('');
   const [disabledLocation, setDisabledLocation] = useState(true);
-
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
   );
   const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
     initialValues?.kandangs ?? []
   );
-
   const [selectedFlock, setSelectedFlock] = useState<number>(
     initialValues?.flock?.id ?? 0
   );
@@ -141,15 +149,14 @@ const ProjectFlockForm = ({
     mutate: refreshKandang,
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
-  const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
-
   const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
-    getPeriodFlocksUrl,
-    () =>
-      ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
-        getPeriodFlocksUrl,
-        { method: 'GET' }
-      )
+    `${selectedFlock.toString()}/periods`,
+    (id: string) => ProjectFlockApi.getNextPeriod(id)
+  );
+
+  const { data: approvalLines, isLoading: isLoadingApprovalLines } = useSWR(
+    selectedFlock.toString(),
+    (id: number) => ProjectFlockApi.getApprovalLines(id)
   );
 
   useEffect(() => {
@@ -387,7 +394,10 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
-  }, [periodFlocks]);
+    if (isResponseError(periodFlocks)) {
+      console.log(periodFlocks?.message as string);
+    }
+  }, [periodFlocks, toast]);
 
   useEffect(() => {
     const selectedRowIds = Object.keys(rowSelection)
@@ -485,6 +495,80 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
+        {formType == 'detail' && isResponseSuccess(approvalLines) && (
+          <div className='w-full flex items-center gap-2 my-4'>
+            <Steps className='w-full'>
+              {projectFlockSteps?.steps.map((step, idx) => {
+                const approvalLogs = approvalLines.data.find(
+                  (approve) => approve.step_number == step.step_number
+                );
+                return (
+                  <StepItem
+                    key={step.step_number}
+                    color={
+                      step.step_number <=
+                      (initialValues?.approval.step_number ?? 0)
+                        ? 'success'
+                        : undefined
+                    }
+                    icon={
+                      <Tooltip
+                        color={
+                          step.step_number <=
+                          (initialValues?.approval.step_number ?? 0)
+                            ? 'success'
+                            : undefined
+                        }
+                        position='bottom'
+                        content={
+                          <ul>
+                            {approvalLogs &&
+                              approvalLogs.approvals.map((approval, idx) => {
+                                return (
+                                  <li className='mb-2' key={`key-logs-${idx}`}>
+                                    <div className='flex flex-col w-full text-start  text-base'>
+                                      <span>Status: {approval.step_name}</span>
+                                      <span>
+                                        Oleh: {approval.action_by.name}
+                                      </span>
+                                      <span>
+                                        Tanggal:{' '}
+                                        {formatDate(
+                                          approval.action_at,
+                                          'DD-MM-yyyy HH:mm:ss'
+                                        )}
+                                      </span>
+                                    </div>
+                                  </li>
+                                );
+                              })}
+                          </ul>
+                        }
+                      >
+                        {step.step_number <=
+                        (initialValues?.approval.step_number ?? 0) ? (
+                          <Icon
+                            icon='material-symbols:check-rounded'
+                            width={24}
+                            height={24}
+                          />
+                        ) : (
+                          <Icon
+                            icon='material-symbols:check-rounded'
+                            width={24}
+                            height={24}
+                          />
+                        )}
+                      </Tooltip>
+                    }
+                  >
+                    {step.step_name}
+                  </StepItem>
+                );
+              })}
+            </Steps>
+          </div>
+        )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 933ba2ab..008ba5f8 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -231,3 +231,36 @@ export const RECORDING_FLAG_OPTIONS = [
   { label: 'Ayam Culling', value: 'Ayam Culling' },
   { label: 'Ayam Mati', value: 'Ayam Mati' },
 ];
+
+export const APPROVAL_WORKFLOWS = [
+  {
+    key: 'PROJECT_FLOCKS',
+    steps: [
+      {
+        step_number: 1,
+        step_name: 'Pengajuan',
+      },
+      {
+        step_number: 2,
+        step_name: 'Aktif',
+      },
+    ],
+  },
+  {
+    key: 'RECORDINGS',
+    steps: [
+      {
+        step_number: 1,
+        step_name: 'Grading-Telur',
+      },
+      {
+        step_number: 2,
+        step_name: 'Pengajuan',
+      },
+      {
+        step_number: 3,
+        step_name: 'Disetujui',
+      },
+    ],
+  },
+];
diff --git a/src/services/api/production/project-flock.ts b/src/services/api/production/project-flock.ts
index ad806c1d..f1f47994 100644
--- a/src/services/api/production/project-flock.ts
+++ b/src/services/api/production/project-flock.ts
@@ -4,10 +4,19 @@ import {
   UpdateProjectFlockPayload,
 } from '@/types/api/production/project-flock';
 import { BaseApiService } from '../base';
-import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  BaseApiResponse,
+  BaseGroupedApproval,
+  ErrorApiResponse,
+  GroupedApprovals,
+  SuccessApiResponse,
+} from '@/types/api/api-general';
 import { sleep } from '@/lib/helper';
 import { httpClient } from '@/services/http/client';
 import axios from 'axios';
+import { Flock } from '@/types/api/master-data/flock';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { RequestOptions } from '@/services/http/base';
 
 export class ProjectFlockService extends BaseApiService<
   ProjectFlock,
@@ -17,14 +26,183 @@ export class ProjectFlockService extends BaseApiService<
   constructor(basePath: string = '') {
     super(basePath);
   }
-  async getSingleProjectFlockKandang(): Promise<BaseApiResponse | undefined> {
+  /**
+   * Get Approval Lines
+   */
+  async getApprovalLines(
+    id: number
+  ): Promise<
+    | BaseApiResponse<BaseGroupedApproval[]>
+    | ErrorApiResponse
+    | SuccessApiResponse<BaseGroupedApproval[]>
+    | undefined
+  > {
+    const path = `/approvals`;
     try {
+      console.log({
+        module_id: id,
+        module_name: 'PROJECT_FLOCKS',
+        group_step_number: true,
+      });
+      return await httpClient<SuccessApiResponse<BaseGroupedApproval[]>>(path, {
+        method: 'GET',
+        query: {
+          module_id: id,
+          module_name: 'PROJECT_FLOCKS',
+          group_step_number: true,
+        },
+      } as RequestOptions);
     } catch (error) {
       if (axios.isAxiosError<BaseApiResponse>(error)) {
-        return error.response?.data;
+        return error.response?.data as ErrorApiResponse;
+      } else {
+        return undefined;
       }
+    }
+  }
 
-      return undefined;
+  /**
+   * Lookup for Project Flock Kandang
+   */
+  async lookupProjectFlockKandang(
+    projectFlockId: number,
+    kandangId: number
+  ): Promise<
+    | BaseApiResponse<
+        | ErrorApiResponse
+        | SuccessApiResponse<{
+            id: number;
+            kandang_id: Kandang;
+            project_flock: ProjectFlock;
+            available_quantity: number;
+          }>
+      >
+    | undefined
+  > {
+    try {
+      const path = `${this.basePath}/kandangs/lookup`;
+      return await httpClient<
+        BaseApiResponse<
+          SuccessApiResponse<{
+            id: number;
+            kandang_id: Kandang;
+            project_flock: ProjectFlock;
+            available_quantity: number;
+          }>
+        >
+      >(path, {
+        method: 'GET',
+        body: {
+          project_flock_id: projectFlockId,
+          kandang_id: kandangId,
+        },
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ErrorApiResponse>>(error)) {
+        return error.response?.data;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Get Next Period of Project Flock
+   */
+  async getNextPeriod(id: string): Promise<
+    | BaseApiResponse<{
+        flock: Flock;
+        next_period: number;
+      }>
+    | ErrorApiResponse
+    | SuccessApiResponse<{
+        flock: Flock;
+        next_period: number;
+      }>
+    | undefined
+  > {
+    try {
+      const path = `${this.basePath}/kandangs/${id}`;
+      return await httpClient<
+        SuccessApiResponse<{
+          flock: Flock;
+          next_period: number;
+        }>
+      >(path, {
+        method: 'GET',
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ErrorApiResponse>>(error)) {
+        return error.response?.data as ErrorApiResponse;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Approve single Project Flock
+   */
+  async approve(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction([id], 'APPROVED');
+  }
+
+  /**
+   * Reject single Project Flock
+   */
+  async reject(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction([id], 'REJECTED');
+  }
+
+  /**
+   * Approve Bulk Project Flock
+   */
+  async bulkApprove(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction(ids, 'APPROVED');
+  }
+
+  /**
+   * Reject Bulk Project Flock
+   */
+  async bulkReject(
+    ids: number[]
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.bulkApprovalAction(ids, 'REJECTED');
+  }
+
+  /**
+   * Approve Bulk Project Flock
+   */
+  async bulkApprovalAction(
+    ids: number[],
+    action: 'APPROVED' | 'REJECTED'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: ids,
+          notes: `Bulk ${action} Project Flock ${ids.join(', ')}`,
+        },
+      });
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      } else {
+        return undefined;
+      }
     }
   }
 }
+
+export const ProjectFlockApi = new ProjectFlockService(
+  '/production/project-flocks'
+);

From 5dccaf40cb011956c6cf65cc06cbd75bae03ad5b Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 12 Nov 2025 09:04:23 +0700
Subject: [PATCH 206/212] refactor(FE-88): memisahkan file api project flock &
 penyesuaian tipe data dan paylod dengan BE

---
 .../project-flock/detail/edit/page.tsx        |  28 +-
 .../production/project-flock/detail/page.tsx  |  49 ++--
 src/components/Tabs.tsx                       | 129 ++++++++++
 .../production/chickin/form/ChickinForm.tsx   |   3 +-
 .../chickin/form/tabs/ChickLogsView.tsx       | 172 +++++++++++++
 .../chickin/form/tabs/ChickinFormView.tsx     | 236 +++++++++++++++++
 .../project-flock/ProjectFlockTable.tsx       |   2 +-
 .../chickin/ProjectFlockChickinDetail.tsx     |   6 +-
 .../project-flock/form/ProjectFlockForm.tsx   | 176 ++++++++++---
 .../form/ProjectFlockKandangTable.tsx         | 243 +++++++++---------
 .../recording/form/RecordingForm.tsx          |   2 +-
 src/services/api/production.ts                |  10 -
 src/services/api/production/chickin.ts        |  43 ++++
 13 files changed, 888 insertions(+), 211 deletions(-)
 create mode 100644 src/components/Tabs.tsx
 create mode 100644 src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
 create mode 100644 src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
 create mode 100644 src/services/api/production/chickin.ts

diff --git a/src/app/production/project-flock/detail/edit/page.tsx b/src/app/production/project-flock/detail/edit/page.tsx
index 7576cc27..2af068ab 100644
--- a/src/app/production/project-flock/detail/edit/page.tsx
+++ b/src/app/production/project-flock/detail/edit/page.tsx
@@ -2,7 +2,7 @@
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
@@ -12,10 +12,11 @@ const ProjectFlockEdit = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlocks,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
   if (!projectFlockId) {
     router.back();
@@ -27,18 +28,25 @@ const ProjectFlockEdit = () => {
     );
   }
 
-  if (!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))) {
+  if (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
     router.replace('/404');
     return;
   }
 
   return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingCostumer && (
+    <div className='w-full p-4 flex flex-col justify-center'>
+      {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+        <>
+          {JSON.stringify(projectFlock.data)}
+
+          <ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
+        </>
       )}
     </div>
   );
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index e64005d4..28a577ff 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -3,7 +3,7 @@
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { FlockApi } from '@/services/api/master-data';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
@@ -23,12 +23,13 @@ const ProjectFlockDetail = () => {
     mutate: refreshProjectFlock,
   } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
-  const flockUrl = `${FlockApi.basePath}`;
   const {
-    data: flock,
-    isLoading: isLoadingFlock,
-    mutate: refreshFlock,
-  } = useSWR(flockUrl, FlockApi.getAllFetcher);
+    data: approvalLines,
+    isLoading: isLoadingApprovalLines,
+    mutate: refreshApprovalLines,
+  } = useSWR('approvals', (id: number) =>
+    ProjectFlockApi.getApprovalLines((projectFlockId ?? 0) as number)
+  );
 
   if (!projectFlockId) {
     router.back();
@@ -48,37 +49,17 @@ const ProjectFlockDetail = () => {
     return;
   }
 
-  // Attach flock id to project flock
-  let projectFlockAttached: ProjectFlock | undefined;
-
-  if (isResponseSuccess(projectFlock) && isResponseSuccess(flock)) {
-    projectFlockAttached = {
-      ...projectFlock.data,
-      flock: flock.data.find(
-        (flock) =>
-          flock.name ==
-          projectFlock?.data?.flock_name
-            .trim()
-            .split(/\s+/)
-            .slice(0, -1)
-            .join(' ')
-      ),
-    };
-    console.log('projectFlockAttached');
-    console.log(projectFlockAttached);
-    console.log('flocks');
-    console.log(flock.data);
-  }
-
   return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingProjectFlock && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {projectFlockAttached && (
+    <div className='w-full p-4 flex flex-col justify-center'>
+      {isLoadingProjectFlock ||
+        (isLoadingApprovalLines && (
+          <span className='loading loading-spinner loading-xl' />
+        ))}
+      {isResponseSuccess(projectFlock) && isResponseSuccess(approvalLines) && (
         <ProjectFlockForm
           formType='detail'
-          initialValues={projectFlockAttached}
+          initialValues={projectFlock.data}
+          initialApprovals={approvalLines.data}
           refreshProjectFlocks={refreshProjectFlock}
         />
       )}
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
new file mode 100644
index 00000000..2ad2477d
--- /dev/null
+++ b/src/components/Tabs.tsx
@@ -0,0 +1,129 @@
+import { HTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  content?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  tabs: TabItem[];
+  variant?: 'bordered' | 'lifted' | 'boxed';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  placement?: 'top' | 'bottom';
+  /** Tab yang aktif secara default (uncontrolled mode) */
+  defaultActiveId?: string;
+  /** Tab yang aktif (controlled mode, dikontrol parent) */
+  activeTabId?: string;
+  className?:
+    | string
+    | {
+        wrapper?: string;
+        tab?: string;
+        content?: string;
+      };
+  onTabChange?: (tabId: string) => void;
+}
+
+const Tabs = ({
+  tabs,
+  variant,
+  size = 'md',
+  placement = 'top',
+  defaultActiveId,
+  activeTabId: controlledActiveId,
+  className,
+  onTabChange,
+  ...props
+}: TabsProps) => {
+  // State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
+  const [uncontrolledActiveId, setUncontrolledActiveId] = useState(
+    defaultActiveId || tabs[0]?.id || ''
+  );
+
+  const isControlled = controlledActiveId !== undefined;
+  const activeTabId = isControlled ? controlledActiveId : uncontrolledActiveId;
+
+  const handleTabChange = (tabId: string) => {
+    if (tabId === activeTabId) return;
+    if (!isControlled) setUncontrolledActiveId(tabId);
+    onTabChange?.(tabId);
+  };
+
+  const { wrapper: wrapperClassName, tab: tabClassName } =
+    typeof className === 'object'
+      ? className
+      : { wrapper: className, tab: undefined };
+
+  const getTabsClasses = () => {
+    const variantClasses: Record<string, string> = {
+      bordered: 'tabs-bordered',
+      lifted: 'tabs-lift',
+      boxed: 'tabs-box',
+    };
+
+    const sizeClasses: Record<string, string> = {
+      xs: 'tabs-xs',
+      sm: 'tabs-sm',
+      md: '',
+      lg: 'tabs-lg',
+      xl: 'tabs-xl',
+    };
+
+    const placementClasses: Record<string, string> = {
+      top: '',
+      bottom: 'tabs-bottom',
+    };
+
+    return cn(
+      'tabs',
+      variant && variantClasses[variant],
+      sizeClasses[size],
+      placementClasses[placement],
+      wrapperClassName
+    );
+  };
+
+  const getTabClasses = (isActive: boolean, isDisabled?: boolean) =>
+    cn(
+      'tab',
+      {
+        'tab-active': isActive,
+        'tab-disabled': isDisabled,
+      },
+      tabClassName
+    );
+
+  const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'w-full',
+        typeof className === 'string' ? className : undefined
+      )}
+    >
+      <div role='tablist' className={getTabsClasses()}>
+        {tabs.map(({ id, label, disabled }) => (
+          <button
+            key={id}
+            role='tab'
+            className={getTabClasses(id === activeTabId, disabled)}
+            onClick={() => !disabled && handleTabChange(id)}
+            disabled={disabled}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {activeContent && <div className='mt-4'>{activeContent}</div>}
+    </div>
+  );
+};
+
+export default Tabs;
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index f007a1cf..30575d17 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -29,7 +29,6 @@ const ChickinFormKandang = ({
   return (
     <div className='flex flex-col gap-4'>
       <FormHeader
-        type='add'
         title='Chick In DOC'
         backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
       />
@@ -96,7 +95,7 @@ const ChickinFormKandang = ({
         tabs={[
           {
             id: 'formChickIn',
-            label: 'Form Chick In',
+            label: 'Tambah Chick In',
             content: (
               <ChickinFormView
                 initialValues={initialValues}
diff --git a/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
new file mode 100644
index 00000000..2274e64b
--- /dev/null
+++ b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
@@ -0,0 +1,172 @@
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production/chickin';
+import {
+  Chickin,
+  ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const ChickinLogsView = ({
+  initialValues,
+  afterSubmit,
+}: {
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const confirmModal = useModal();
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const handleClickApprove = () => {
+    confirmModal.openModal();
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setChickinErrorMessage('');
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.singleApproval(
+      initialValues?.id as number,
+      'APPROVED'
+    );
+    if (isResponseSuccess(approveChickinRes)) {
+      toast.success(approveChickinRes?.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+      setChickinErrorMessage(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+    if (afterSubmit) {
+      afterSubmit();
+    }
+  };
+
+  return (
+    <>
+      <Card
+        title='Riwayat Chick In'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <div className='flex flex-row justify-start gap-3 mt-3'>
+          <Button
+            color='success'
+            variant='outline'
+            onClick={handleClickApprove}
+          >
+            <Icon width={24} height={24} icon='material-symbols:check' />
+            Approve
+          </Button>
+        </div>
+        <Table<Chickin>
+          data={initialValues?.chickins || []}
+          columns={[
+            {
+              header: '#',
+              cell: (props) => props.row.index + 1,
+            },
+            {
+              accessorFn: (row) => row.chick_in_date,
+              header: 'Tanggal Chick In',
+              cell: (props) => {
+                return formatDate(props.getValue() as string, 'DD MMM YYYY');
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse?.warehouse?.name,
+              header: 'Kandang',
+            },
+            {
+              accessorFn: (row) => row.product_warehouse?.product?.name,
+              header: 'Produk',
+            },
+            {
+              accessorFn: (row) => row.usage_qty ?? row.pending_usage_qty,
+              header: 'Jumlah Chick In',
+              cell: (props) => {
+                if (props.row.original.usage_qty != 0) {
+                  return formatNumber(props.row.original.usage_qty);
+                } else if (props.row.original.pending_usage_qty != 0) {
+                  return formatNumber(props.row.original.pending_usage_qty);
+                } else {
+                  return '-';
+                }
+              },
+            },
+            {
+              accessorFn: (row) => row.pending_usage_qty,
+              header: 'Status',
+              cell: (props) => {
+                return (
+                  <PillBadge
+                    content={
+                      props.row.original.usage_qty !== 0
+                        ? 'Disetujui'
+                        : props.row.original.pending_usage_qty !== 0
+                          ? 'Pending'
+                          : '-'
+                    }
+                    color={
+                      props.row.original.usage_qty !== 0
+                        ? 'green'
+                        : props.row.original.pending_usage_qty !== 0
+                          ? 'yellow'
+                          : 'gray'
+                    }
+                  />
+                );
+              },
+            },
+          ]}
+          className={{
+            containerClassName: cn({
+              'mb-20': initialValues?.chickins?.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',
+            paginationClassName: 'hidden',
+          }}
+        />
+        {chickinErrorMessage && (
+          <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+            <Alert color='error'>{chickinErrorMessage}</Alert>
+          </div>
+        )}
+      </Card>
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data Chickin yang Pending?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          onClick: confirmationModalApproveClickHandler,
+          isLoading: isApproveLoading,
+        }}
+      />
+    </>
+  );
+};
+
+export default ChickinLogsView;
diff --git a/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx b/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
new file mode 100644
index 00000000..1803b0a0
--- /dev/null
+++ b/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
@@ -0,0 +1,236 @@
+'use client';
+
+import Card from '@/components/Card';
+import Table from '@/components/Table';
+import {
+  ChickinFormValues,
+  ChickinRequestFormValues,
+  ChickinSchema,
+} from '../ChickinForm.schema';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import NumberInput from '@/components/input/NumberInput';
+import Button from '@/components/Button';
+import { useCallback, useEffect, useState } from 'react';
+import { useFormik } from 'formik';
+import { flushSync } from 'react-dom';
+import { CreateChickinPayload } from '@/types/api/production/chickin';
+import { ChickinApi } from '@/services/api/production/chickin';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { useRouter } from 'next/navigation';
+import Alert from '@/components/Alert';
+
+const ChickinFormView = ({
+  formType = 'add',
+  initialValues,
+  afterSubmit,
+}: {
+  formType?: 'add' | 'detail' | 'edit';
+  initialValues: ProjectFlockKandang;
+  afterSubmit?: () => void;
+}) => {
+  const router = useRouter();
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const createChickin = useCallback(
+    async (payload: CreateChickinPayload) => {
+      const createChickinRes = await ChickinApi.create(payload);
+      if (isResponseError(createChickinRes)) {
+        setChickinErrorMessage(createChickinRes.message);
+        return;
+      }
+
+      toast.success(createChickinRes?.message as string);
+      // router.push(
+      //   `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
+      // );
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+    [router]
+  );
+  const handleReset = async () => {
+    flushSync(() => {
+      formik.resetForm({
+        values: {
+          project_flock_kandang_id: initialValues?.id,
+          chickin_requests: initialValues?.available_qtys
+            ? initialValues.available_qtys.map((availableQty) => ({
+                chick_in_date: '',
+                product_warehouse_id: availableQty.product_warehouse.id,
+                available_qty: availableQty.available_qty,
+                note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+              }))
+            : [],
+        },
+      });
+    });
+
+    formik.setTouched({
+      chickin_requests: initialValues?.available_qtys?.map(() => ({
+        chick_in_date: true,
+      })),
+    });
+
+    const errors = await formik.validateForm();
+    formik.setErrors(errors);
+  };
+
+  const formik = useFormik<ChickinFormValues>({
+    enableReinitialize: true,
+    validationSchema: ChickinSchema,
+    initialValues: {
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    },
+    onSubmit: (values) => {
+      setChickinErrorMessage('');
+      createChickin(values as CreateChickinPayload);
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues({
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    });
+  }, [formikSetValues, initialValues]);
+
+  return (
+    <form
+      className='flex flex-col gap-4'
+      onReset={(e) => {
+        handleReset();
+      }}
+      onSubmit={formik.handleSubmit}
+    >
+      <Card
+        title='Informasi Chick In DOC'
+        className={{
+          wrapper: 'w-full bg-white',
+        }}
+      >
+        <Table<ChickinRequestFormValues>
+          data={formik.values.chickin_requests || []}
+          columns={[
+            {
+              accessorFn: (row) => row.chick_in_date,
+              header: 'Tanggal Chick In',
+              cell(props) {
+                return (
+                  <DateInput
+                    name={`chickin_requests[${props.row.index}].chick_in_date`}
+                    value={
+                      formik.values.chickin_requests[props.row.index]
+                        ?.chick_in_date as string
+                    }
+                    onChange={formik.handleChange}
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse_id,
+              header: 'Produk',
+              cell(props) {
+                const availableQty = initialValues?.available_qtys?.find(
+                  (availableQty) =>
+                    availableQty.product_warehouse.id ===
+                    props.row.original.product_warehouse_id
+                );
+                return (
+                  <SelectInput
+                    value={
+                      {
+                        label: availableQty?.product_warehouse?.product?.name,
+                        value: availableQty?.product_warehouse?.product?.id,
+                      } as OptionType
+                    }
+                    options={[]}
+                    isDisabled
+                  />
+                );
+              },
+            },
+            {
+              accessorFn: (row) => row.product_warehouse_id,
+              header: 'Jumlah (ekor)',
+              cell(props) {
+                const availableQty = initialValues?.available_qtys?.find(
+                  (availableQty) =>
+                    availableQty.product_warehouse.id ===
+                    props.row.original.product_warehouse_id
+                );
+                return (
+                  <NumberInput
+                    name='qty[]'
+                    value={availableQty?.available_qty}
+                  />
+                );
+              },
+            },
+          ]}
+          className={{
+            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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
+            paginationClassName: 'hidden',
+          }}
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Isi persediaan DOC untuk kandang belum tersedia...
+              </span>
+            </div>
+          }
+        />
+      </Card>
+      <div className='flex flex-row justify-center gap-3'>
+        <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+          Reset
+        </Button>
+        <Button
+          type='submit'
+          color='primary'
+          disabled={!formik.isValid || formik.isSubmitting}
+        >
+          Submit
+        </Button>
+      </div>
+      {chickinErrorMessage && (
+        <div className='w-full' onClick={() => setChickinErrorMessage('')}>
+          <Alert color='error'>{chickinErrorMessage}</Alert>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default ChickinFormView;
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 4bafac88..7c7c70ed 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -13,7 +13,7 @@ import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
diff --git a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
index 8052d958..9ed2a1e6 100644
--- a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
+++ b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
@@ -11,10 +11,8 @@ import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
-import {
-  ProjectFlockApi,
-  ProjectFlockKandangApi,
-} from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { ProjectFlockKandangApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 932b87f8..5b52e59d 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -34,7 +34,7 @@ import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { BaseApiResponse } from '@/types/api/api-general';
+import { BaseApiResponse, BaseGroupedApproval } from '@/types/api/api-general';
 import { APPROVAL_WORKFLOWS, FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -45,10 +45,12 @@ import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 import { id, is } from 'react-day-picker/locale';
 import { formatDate } from '@/lib/helper';
+import Card from '@/components/Card';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: ProjectFlock;
+  initialApprovals?: BaseGroupedApproval[];
   refreshProjectFlocks?: KeyedMutator<
     BaseApiResponse<ProjectFlock> | undefined
   >;
@@ -57,6 +59,7 @@ interface ProjectFlockFormProps {
 const ProjectFlockForm = ({
   formType = 'add',
   initialValues,
+  initialApprovals,
   refreshProjectFlocks,
 }: ProjectFlockFormProps) => {
   // State
@@ -70,14 +73,16 @@ const ProjectFlockForm = ({
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
   const [selectedLocation, setSelectedLocation] = useState('');
-  const [disabledLocation, setDisabledLocation] = useState(true);
+  const [disabledLocation, setDisabledLocation] = useState(
+    initialValues?.location?.id ? false : true
+  );
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
   );
   const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
     initialValues?.kandangs ?? []
   );
-  const [selectedFlock, setSelectedFlock] = useState<number>(
+  const [selectedFlock, setSelectedFlock] = useState<number | undefined>(
     initialValues?.flock?.id ?? 0
   );
 
@@ -131,7 +136,12 @@ const ProjectFlockForm = ({
     options: optionsLocation,
     isLoadingOptions: isLoadingLocations,
     rawData: locations,
-  } = useSelect(LocationApi.basePath, 'id', 'name');
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+  });
 
   const {
     options: optionsFcr,
@@ -150,27 +160,34 @@ const ProjectFlockForm = ({
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
   const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
-    `${selectedFlock.toString()}/periods`,
+    `${selectedFlock?.toString()}/periods`,
     (id: string) => ProjectFlockApi.getNextPeriod(id)
   );
 
-  const { data: approvalLines, isLoading: isLoadingApprovalLines } = useSWR(
-    selectedFlock.toString(),
-    (id: number) => ProjectFlockApi.getApprovalLines(id)
-  );
-
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
       if (selectedLocation) {
         setOptionsKandang(kandang.data);
         setOpenSelectKandangs(true);
       } else {
+        formik.setFieldValue('kandang_ids', []);
         setOptionsKandang([]);
         setOpenSelectKandangs(false);
-        formik.setFieldValue('kandang_ids', []);
+        const selectedRowIds = Object.keys(rowSelection)
+          .filter((id) => rowSelection[id])
+          .map((id) => parseInt(id));
+        if (
+          JSON.stringify(kandang.data.map((k) => k.id)) !==
+          JSON.stringify(formik.values.kandang_ids)
+        ) {
+          formik.setFieldValue('kandang_ids', []);
+          setRowSelection({});
+        } else {
+          formik.setFieldValue('kandang_ids', selectedRowIds);
+        }
       }
     }
-  }, [kandang]);
+  }, [kandang, selectedLocation]);
   useEffect(() => {
     if (initialValues?.kandangs) {
       refreshKandang();
@@ -181,7 +198,7 @@ const ProjectFlockForm = ({
       );
       setRowSelection(newRowSelection);
     }
-  }, [initialValues, refreshKandang]);
+  }, [initialValues, kandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -202,9 +219,13 @@ const ProjectFlockForm = ({
   };
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('kandang_ids', []);
     setSelectedLocation((val as OptionType)?.value as string);
     optionChangeHandler(val, 'location');
-    formik.setFieldValue('kandang_ids', []);
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formik.setFieldValue('kandang_ids', selectedRowIds);
   };
 
   const optionChangeHandler = (
@@ -216,13 +237,8 @@ const ProjectFlockForm = ({
       `${inputName}_id`,
       val ? (val as OptionType)?.value : 0
     );
-    formik.setFieldValue(
-      `${inputName}_name`,
-      val ? (val as OptionType)?.label : 0
-    );
 
     formik.setFieldTouched(`${inputName}_id`, true);
-    formik.setFieldTouched(`${inputName}_name`, true);
   };
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -267,11 +283,12 @@ const ProjectFlockForm = ({
   // Formik InitialValue
   const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
     return {
-      name: initialValues?.name ?? '',
-      flock: initialValues?.flock_name
+      name: initialValues?.flock_name,
+      flock: initialValues?.flock
         ? {
             value: initialValues?.flock?.id ?? 0,
-            label: initialValues?.flock_name,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
           }
         : null,
       area: initialValues?.area
@@ -312,11 +329,57 @@ const ProjectFlockForm = ({
         | undefined
       )[],
     };
-  }, [initialValues, flocks]);
+  }, [initialValues]);
 
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
-    initialValues: formikInitialValues,
+    initialValues: {
+      name: initialValues?.flock_name,
+      flock: initialValues?.flock
+        ? {
+            value: initialValues?.flock?.id ?? 0,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
+          }
+        : null,
+      area: initialValues?.area
+        ? {
+            value: initialValues.area?.id,
+            label: initialValues.area.name,
+          }
+        : null,
+      category_option: initialValues?.category
+        ? {
+            value: initialValues.category,
+            label: initialValues.category,
+          }
+        : null,
+      fcr: initialValues?.fcr
+        ? {
+            value: initialValues.fcr?.id,
+            label: initialValues.fcr.name,
+          }
+        : null,
+      location: initialValues?.location
+        ? {
+            value: initialValues.location?.id,
+            label: initialValues.location.name,
+          }
+        : null,
+      flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
+      area_id: initialValues?.area?.id ?? 0,
+      category: initialValues?.category as NonNullable<
+        'GROWING' | 'LAYING' | undefined
+      >,
+      fcr_id: initialValues?.fcr?.id ?? 0,
+      location_id: initialValues?.location?.id ?? 0,
+      period: initialValues?.period ?? 1,
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+        | number
+        | undefined
+      )[],
+    } as ProjectFlockFormValues,
     enableReinitialize: true,
     validationSchema:
       formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
@@ -326,7 +389,7 @@ const ProjectFlockForm = ({
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        flock_name: values.flock_name as string,
+        flock_name: values.flock?.label as string,
         area_id: values.area_id as number,
         category: values.category as string,
         fcr_id: values.fcr_id as number,
@@ -367,7 +430,7 @@ const ProjectFlockForm = ({
 
   useEffect(() => {
     formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
+  }, [formikSetValues]);
 
   // Aktifkan lokasi jika formType = 'detail'
   useEffect(() => {
@@ -397,7 +460,7 @@ const ProjectFlockForm = ({
     if (isResponseError(periodFlocks)) {
       console.log(periodFlocks?.message as string);
     }
-  }, [periodFlocks, toast]);
+  }, [periodFlocks]);
 
   useEffect(() => {
     const selectedRowIds = Object.keys(rowSelection)
@@ -495,11 +558,11 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
-        {formType == 'detail' && isResponseSuccess(approvalLines) && (
+        {formType == 'detail' && initialApprovals && (
           <div className='w-full flex items-center gap-2 my-4'>
             <Steps className='w-full'>
               {projectFlockSteps?.steps.map((step, idx) => {
-                const approvalLogs = approvalLines.data.find(
+                const approvalLogs = initialApprovals.find(
                   (approve) => approve.step_number == step.step_number
                 );
                 return (
@@ -523,7 +586,7 @@ const ProjectFlockForm = ({
                         content={
                           <ul>
                             {approvalLogs &&
-                              approvalLogs.approvals.map((approval, idx) => {
+                              approvalLogs?.approvals?.map((approval, idx) => {
                                 return (
                                   <li className='mb-2' key={`key-logs-${idx}`}>
                                     <div className='flex flex-col w-full text-start  text-base'>
@@ -601,8 +664,43 @@ const ProjectFlockForm = ({
               <Icon icon='mdi:times' width={24} height={24} />
               Reject
             </Button>
+            {initialValues?.approval?.step_number == 2 && (
+              <Button
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+                onClick={() => {
+                  router.push(
+                    `/production/project-flock/chickin/add?projectFlockId=${initialValues?.id}`
+                  );
+                }}
+              >
+                Chickin
+              </Button>
+            )}
           </div>
         )}
+        <Card
+          className={{
+            body: 'text-primary',
+          }}
+        >
+          {JSON.stringify(formik.values)}
+        </Card>
+        <Card
+          className={{
+            body: 'text-success',
+          }}
+        >
+          {JSON.stringify(formik.initialValues)}
+        </Card>
+        <Card
+          className={{
+            body: 'text-error',
+          }}
+        >
+          {JSON.stringify(formik.errors)}
+        </Card>
         <form
           className='w-auto h-auto'
           onSubmit={formik.handleSubmit}
@@ -634,6 +732,10 @@ const ProjectFlockForm = ({
                   onChange={(val) => {
                     optionChangeHandler(val, 'flock');
                     setSelectedFlock((val as OptionType)?.value as number);
+                    formik.setFieldValue(
+                      'flock_name',
+                      (val as OptionType)?.label
+                    );
                   }}
                   options={optionsFlock}
                   isLoading={isLoadingFlocks}
@@ -650,7 +752,11 @@ const ProjectFlockForm = ({
                   label='Lokasi'
                   value={formik.values.location as OptionType}
                   onChange={locationChangeHandler}
-                  options={optionsLocation}
+                  options={
+                    selectedArea != '' || initialValues?.area?.id
+                      ? optionsLocation
+                      : []
+                  }
                   isLoading={isLoadingLocations}
                   isError={
                     formik.touched.location_id &&
@@ -695,7 +801,7 @@ const ProjectFlockForm = ({
                   name='period'
                   label='Periode'
                   placeholder='Masukkan periode yang project'
-                  value={formik.values.period as number}
+                  value={formik.values.period ?? (1 as number)}
                   onChange={formik.handleChange}
                   isError={
                     formik.touched.period && Boolean(formik.errors.period)
@@ -743,6 +849,7 @@ const ProjectFlockForm = ({
                     setRowSelection={setRowSelection}
                     selectedIds={formik.values.kandang_ids}
                     formType={formType}
+                    initialValues={initialValues?.kandangs ?? []}
                   />
                 </div>
               </Collapse>
@@ -764,7 +871,10 @@ const ProjectFlockForm = ({
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={
+                    !formik.isValid || formik.isSubmitting
+                    // TODO: Add logic && ketika nilai kandang_ids sudah beda dari initial values
+                  }
                   className='px-4'
                 >
                   Submit
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
index 759e44d8..ef96a52b 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -5,148 +5,159 @@ import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { cn } from '@/lib/helper';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { OnChangeFn } from '@tanstack/react-table';
+import { OnChangeFn, Row } from '@tanstack/react-table';
+import { useMemo } from 'react';
 
 const ProjectFlockKandangTable = ({
   listKandang,
   rowSelection,
   setRowSelection,
   selectedIds,
+  initialValues,
   formType = 'add',
 }: {
   listKandang: Kandang[];
   rowSelection: Record<string, boolean>;
   setRowSelection: OnChangeFn<Record<string, boolean>>;
   selectedIds: (number | undefined)[];
+  initialValues?: Kandang[];
   formType: 'add' | 'edit' | 'detail';
 }) => {
-  console.log('selectedIds');
-  console.log(selectedIds);
+  const initialKandangIdSet = useMemo(() => {
+    return initialValues?.map((k) => k.id) ?? [];
+  }, [initialValues]);
+  const isRowEnabled = (row: Row<Kandang>) => {
+    const isDisabled =
+      !initialKandangIdSet.includes(row.original.id) &&
+      (row.original.status == 'ACTIVE' ||
+        row.original.status == 'PENGAJUAN' ||
+        formType == 'detail');
+    return !isDisabled;
+  };
   return (
-    <Table<Kandang>
-      data={listKandang}
-      columns={[
-        {
-          id: 'select',
-          header: ({ table }) => {
-            const allRows = table.getRowModel().rows;
-            const selectableRows = allRows.filter(
-              (row) =>
-                row.original.status == 'NON_ACTIVE' ||
-                row.original.status == 'PENGAJUAN'
-            );
+    <>
+      {JSON.stringify(initialKandangIdSet)}
+      <Table<Kandang>
+        data={listKandang}
+        columns={[
+          {
+            id: 'select',
+            header: ({ table }) => {
+              const allRows = table.getRowModel().rows;
+              // 1. Filter semua baris dengan logika yang sama persis seperti di cell
+              const selectableRows = allRows.filter(isRowEnabled);
 
-            const allSelected =
-              selectableRows.every((row) => row.getIsSelected()) &&
-              selectableRows.length != 0 &&
-              formType != 'detail';
+              // 2. Cek apakah SEMUA baris yang BISA DIPILIH sudah terpilih
+              const allSelected =
+                selectableRows.length > 0 &&
+                selectableRows.every((row) => row.getIsSelected());
 
-            const someSelected =
-              selectableRows.some((row) => row.getIsSelected()) &&
-              !allSelected &&
-              formType != 'detail';
+              // 3. Cek apakah BEBERAPA baris yang BISA DIPILIH sudah terpilih
+              const someSelected =
+                selectableRows.some((row) => row.getIsSelected()) &&
+                !allSelected;
 
-            const toggleSelectableRows = () => {
-              const shouldSelect = !allSelected;
-              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
-            };
+              // 4. Fungsi toggle HANYA akan mentoggle baris yang BISA DIPILIH
+              const toggleSelectableRows = () => {
+                const shouldSelect = !allSelected;
+                selectableRows.forEach((row) =>
+                  row.toggleSelected(shouldSelect)
+                );
+              };
 
-            return (
-              <div className='w-full flex flex-row justify-center'>
+              return (
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={allSelected}
+                    indeterminate={someSelected}
+                    onChange={toggleSelectableRows}
+                    disabled={
+                      selectableRows.length === 0 || formType == 'detail'
+                    }
+                  />
+                </div>
+              );
+            },
+            cell: ({ row }) => {
+              return (
                 <CheckboxInput
-                  name='allRow'
-                  checked={allSelected}
-                  indeterminate={someSelected}
-                  onChange={toggleSelectableRows}
+                  name='row'
+                  checked={
+                    (row.getIsSelected() &&
+                      (row.original.status == 'NON_ACTIVE' ||
+                        row.original.status == 'PENGAJUAN')) ||
+                    (selectedIds && selectedIds.includes(row.original.id))
+                  }
                   disabled={
-                    listKandang.filter(
-                      (kandang) =>
-                        kandang.status == 'NON_ACTIVE' ||
-                        kandang.status == 'PENGAJUAN'
-                    ).length == 0 || formType == 'detail'
+                    formType == 'detail' ||
+                    (!initialKandangIdSet.includes(row.original.id) &&
+                      (row.original.status == 'ACTIVE' ||
+                        row.original.status == 'PENGAJUAN'))
                   }
+                  indeterminate={row.getIsSomeSelected()}
+                  onChange={row.getToggleSelectedHandler()}
                 />
-              </div>
-            );
+              );
+            },
           },
-          cell: ({ row }) => {
-            return (
-              <CheckboxInput
-                name='row'
-                checked={
-                  (row.getIsSelected() &&
-                    (row.original.status == 'NON_ACTIVE' ||
-                      row.original.status == 'PENGAJUAN')) ||
-                  selectedIds.includes(row.original.id)
-                }
-                disabled={
-                  !row.getCanSelect() ||
-                  (row.original.status != 'NON_ACTIVE' &&
-                    row.original.status != 'PENGAJUAN') ||
-                  formType == 'detail'
-                }
-                indeterminate={row.getIsSomeSelected()}
-                onChange={row.getToggleSelectedHandler()}
-              />
-            );
+          {
+            accessorFn: (row) => row.name,
+            header: 'Kandang',
           },
-        },
-        {
-          accessorFn: (row) => row.name,
-          header: 'Kandang',
-        },
-        {
-          accessorFn: (row) => row.status,
-          header: 'Status',
-          cell: (props) => {
-            return (
-              <PillBadge
-                color={(() => {
-                  switch (props.row.original.status) {
-                    case 'ACTIVE':
-                      return 'red';
-                    case 'PENGAJUAN':
-                      return 'green';
-                    case 'NON_ACTIVE':
-                      return 'blue';
-                    default:
-                      return 'gray';
-                  }
-                })()}
-                content={props.row.original.status
-                  .toLowerCase()
-                  .replace(/_/g, ' ')
-                  .replace(/\b\w/g, (char) => char.toUpperCase())}
-              />
-            );
+          {
+            accessorFn: (row) => row.status,
+            header: 'Status',
+            cell: (props) => {
+              return (
+                <PillBadge
+                  color={(() => {
+                    switch (props.row.original.status) {
+                      case 'ACTIVE':
+                        return 'red';
+                      case 'PENGAJUAN':
+                        return 'green';
+                      case 'NON_ACTIVE':
+                        return 'blue';
+                      default:
+                        return 'gray';
+                    }
+                  })()}
+                  content={props.row.original.status
+                    .toLowerCase()
+                    .replace(/_/g, ' ')
+                    .replace(/\b\w/g, (char) => char.toUpperCase())}
+                />
+              );
+            },
           },
-        },
-        {
-          accessorFn: (row) => row.capacity,
-          header: 'Kapasitas',
-        },
-        {
-          accessorFn: (row) => row.pic?.name,
-          header: 'Penanggung Jawab',
-        },
-      ]}
-      className={{
-        containerClassName: cn({
-          'mb-20': listKandang?.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',
-        paginationClassName: 'hidden',
-      }}
-      rowSelection={rowSelection}
-      setRowSelection={setRowSelection}
-    />
+          {
+            accessorFn: (row) => row.capacity,
+            header: 'Kapasitas',
+          },
+          {
+            accessorFn: (row) => row.pic?.name,
+            header: 'Penanggung Jawab',
+          },
+        ]}
+        className={{
+          containerClassName: cn({
+            'mb-20': listKandang?.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',
+          paginationClassName: 'hidden',
+        }}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+      />
+    </>
   );
 };
 
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 68a24ef4..e3668237 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -22,7 +22,7 @@ import {
   UpdateRecordingFormSchema,
 } from './RecordingForm.schema';
 import { useRecordingFormHandlers } from './useRecordingFormHandlers';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
 import useSWR from 'swr';
diff --git a/src/services/api/production.ts b/src/services/api/production.ts
index 5a15bb8b..79617a75 100644
--- a/src/services/api/production.ts
+++ b/src/services/api/production.ts
@@ -1,9 +1,4 @@
 import { BaseApiService } from '@/services/api/base';
-import {
-  CreateProjectFlockPayload,
-  ProjectFlock,
-  UpdateProjectFlockPayload,
-} from '@/types/api/production/project-flock';
 import {
   CreateRecordingPayload,
   Recording,
@@ -11,11 +6,6 @@ import {
 } from '@/types/api/production/recording';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
-export const ProjectFlockApi = new BaseApiService<
-  ProjectFlock,
-  CreateProjectFlockPayload,
-  UpdateProjectFlockPayload
->('/production/project-flocks');
 export const ProjectFlockKandangApi = new BaseApiService<
   ProjectFlockKandang,
   unknown,
diff --git a/src/services/api/production/chickin.ts b/src/services/api/production/chickin.ts
new file mode 100644
index 00000000..39eb2501
--- /dev/null
+++ b/src/services/api/production/chickin.ts
@@ -0,0 +1,43 @@
+import {
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload,
+} from '@/types/api/production/chickin';
+import { BaseApiService } from '../base';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { httpClient } from '@/services/http/client';
+
+export class ChickinService extends BaseApiService<
+  Chickin,
+  CreateChickinPayload,
+  UpdateChickinPayload
+> {
+  constructor(basePath: string = '/production/chickins') {
+    super(basePath);
+  }
+
+  /**
+   * Approve single marketing data
+   */
+  async singleApproval(
+    id: number,
+    action: 'APPROVED' | 'REJECTED'
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      const path = `${this.basePath}/approvals`;
+      return await httpClient<BaseApiResponse<{ message: string }>>(path, {
+        method: 'POST',
+        body: {
+          action: action,
+          approvable_ids: [id],
+          notes: `${action} chickin ${id}`,
+        },
+      });
+    } catch (error) {
+      console.error('Error approve chickin:', error);
+      return undefined;
+    }
+  }
+}
+
+export const ChickinApi = new ChickinService('/production/chickins');

From b2f4317c08eb4aa93a636c10ab17849962ff47fe Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 12 Nov 2025 15:24:44 +0700
Subject: [PATCH 207/212] refactor(FE-238-239-240): implement approval workflow
 chickin & project flock, membuat custom hook useApprovals, dan handling error
 format approvals

---
 .../chickin/add/kandang/page.tsx              |   8 +-
 .../production/project-flock/detail/page.tsx  |  23 +--
 src/components/Modal.tsx                      |  13 +-
 src/components/pages/ApprovalSteps.tsx        | 165 ++++++++++++++---
 .../production/chickin/form/ChickinForm.tsx   |  21 ++-
 .../chickin/form/tabs/ChickLogsView.tsx       |   4 +-
 .../chickin/ProjectFlockChickinDetail.tsx     |  15 +-
 .../project-flock/form/ProjectFlockForm.tsx   | 172 ++++--------------
 .../form/ProjectFlockKandangTable.tsx         |   1 -
 src/config/constant.ts                        |  13 ++
 src/services/api/production/project-flock.ts  |   5 -
 src/types/api/api-general.d.ts                |   4 +
 src/types/config/constant.d.ts                |  14 ++
 13 files changed, 258 insertions(+), 200 deletions(-)

diff --git a/src/app/production/project-flock/chickin/add/kandang/page.tsx b/src/app/production/project-flock/chickin/add/kandang/page.tsx
index 0805f010..a22039d1 100644
--- a/src/app/production/project-flock/chickin/add/kandang/page.tsx
+++ b/src/app/production/project-flock/chickin/add/kandang/page.tsx
@@ -16,8 +16,12 @@ export default function AddChickinKandang() {
     data: projectFlockKandang,
     isLoading: isLoading,
     mutate: refreshProjectFlockKandang,
-  } = useSWR(projectFlockKandangId, (id: number) =>
-    ProjectFlockKandangApi.getSingle(id)
+  } = useSWR(
+    `get-single-project-flock-kandang/${projectFlockKandangId}`,
+    async () =>
+      ProjectFlockKandangApi.getSingle(
+        parseInt(projectFlockKandangId as string)
+      )
   );
 
   if (!projectFlockKandangId) {
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index 28a577ff..91d4dfd5 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -2,11 +2,8 @@
 
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { FlockApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { ProjectFlock } from '@/types/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
 import useSWR from 'swr';
 
 const ProjectFlockDetail = () => {
@@ -15,22 +12,12 @@ const ProjectFlockDetail = () => {
 
   const projectFlockId = searchParams.get('projectFlockId');
 
-  const [projectName, setProjectName] = useState();
-
   const {
     data: projectFlock,
     isLoading: isLoadingProjectFlock,
     mutate: refreshProjectFlock,
   } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
-  const {
-    data: approvalLines,
-    isLoading: isLoadingApprovalLines,
-    mutate: refreshApprovalLines,
-  } = useSWR('approvals', (id: number) =>
-    ProjectFlockApi.getApprovalLines((projectFlockId ?? 0) as number)
-  );
-
   if (!projectFlockId) {
     router.back();
 
@@ -51,15 +38,13 @@ const ProjectFlockDetail = () => {
 
   return (
     <div className='w-full p-4 flex flex-col justify-center'>
-      {isLoadingProjectFlock ||
-        (isLoadingApprovalLines && (
-          <span className='loading loading-spinner loading-xl' />
-        ))}
-      {isResponseSuccess(projectFlock) && isResponseSuccess(approvalLines) && (
+      {isLoadingProjectFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {isResponseSuccess(projectFlock) && (
         <ProjectFlockForm
           formType='detail'
           initialValues={projectFlock.data}
-          initialApprovals={approvalLines.data}
           refreshProjectFlocks={refreshProjectFlock}
         />
       )}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index ea53d2c9..a242b1e4 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -16,7 +16,7 @@ export const useModal = () => {
 
   const openModal = useCallback(() => {
     if (!ref.current) return;
-    ref.current.showModal();
+    ref.current.show();
     setOpen(true);
   }, []);
 
@@ -30,7 +30,6 @@ export const useModal = () => {
     open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
-  // Gunakan useEffect agar event listener tidak didaftarkan berulang kali
   useEffect(() => {
     const dialog = ref.current;
     if (!dialog) return;
@@ -48,7 +47,6 @@ export const useModal = () => {
 
 interface ModalProps {
   ref: RefObject<HTMLDialogElement | null>;
-  id?: string;
   children?: ReactNode;
   closeOnBackdrop?: boolean;
   className?: {
@@ -57,13 +55,7 @@ interface ModalProps {
   };
 }
 
-const Modal = ({
-  ref,
-  id,
-  children,
-  closeOnBackdrop,
-  className,
-}: ModalProps) => {
+const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
       ref.current?.close();
@@ -73,7 +65,6 @@ const Modal = ({
   return (
     <dialog
       ref={ref}
-      id={id}
       className={cn('modal', className?.modal)}
       onClick={handleBackdropClick}
     >
diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index daac4ab0..ba9bde3d 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -4,8 +4,17 @@ import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 
 import { cn, formatDate } from '@/lib/helper';
-import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
-import { ApprovalLine } from '@/types/config/constant';
+import {
+  BaseApiResponse,
+  BaseApproval,
+  BaseGroupedApproval,
+  ModuleWithApproval,
+} from '@/types/api/api-general';
+import { AppConfigData, ApprovalLine } from '@/types/config/constant';
+import useSWR from 'swr';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useCallback, useMemo } from 'react';
 
 export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
 
@@ -120,7 +129,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
       const currentStepNumber = approvalLineItem.step_number;
       const lastStepNumber =
-        groupedApprovals[groupedApprovals.length - 1].step_number;
+        groupedApprovals[groupedApprovals.length - 1]?.step_number;
 
       if (!approvalGroup && currentStepNumber <= lastStepNumber) {
         throw new Error(
@@ -137,22 +146,24 @@ export const formatGroupedApprovalsToApprovalSteps = (
         };
       }
 
-      let approvalStatus: ApprovalStepStatus;
+      let approvalStatus: ApprovalStepStatus = 'IDLE';
 
       if (approvalGroup.step_number <= latestApproval.step_number) {
-        switch (approvalGroup.approvals[0].action) {
-          case 'CREATED':
-          case 'APPROVED':
-            approvalStatus = 'APPROVED';
-            break;
+        if (approvalGroup.approvals) {
+          switch (approvalGroup?.approvals[0]?.action) {
+            case 'CREATED':
+            case 'APPROVED':
+              approvalStatus = 'APPROVED';
+              break;
 
-          case 'REJECTED':
-            approvalStatus = 'REJECTED';
-            break;
+            case 'REJECTED':
+              approvalStatus = 'REJECTED';
+              break;
 
-          default:
-            approvalStatus = 'IDLE';
-            break;
+            default:
+              approvalStatus = 'IDLE';
+              break;
+          }
         }
       } else if (approvalGroup.step_number === latestApproval.step_number + 1) {
         approvalStatus = 'WAITING';
@@ -160,13 +171,13 @@ export const formatGroupedApprovalsToApprovalSteps = (
         approvalStatus = 'IDLE';
       }
 
-      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals.map(
-        (approval) => ({
-          action_by: approval.action_by.name,
-          date: approval.action_at,
-          notes: approval.notes,
-        })
-      );
+      const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals
+        ? approvalGroup.approvals.map((approval) => ({
+            action_by: approval.action_by.name,
+            date: approval.action_at,
+            notes: approval.notes,
+          }))
+        : [];
 
       return {
         name: approvalGroup.step_name,
@@ -179,3 +190,113 @@ export const formatGroupedApprovalsToApprovalSteps = (
 };
 
 export default ApprovalSteps;
+
+const useApprovalSteps = <T extends ModuleWithApproval>({
+  moduleUrl,
+  moduleName,
+  moduleId,
+  params,
+}: {
+  moduleUrl: string;
+  moduleName: string;
+  moduleId: string;
+  params?: {
+    page: number;
+    limit: number;
+    search?: string;
+  };
+}) => {
+  const paramString = new URLSearchParams({
+    page: params?.page?.toString() || '',
+    limit: params?.limit?.toString() || '',
+    search: params?.search || '',
+  }).toString();
+
+  const SWR_KEY_CONSTANTS = '/constants';
+  const SWR_KEY_APPROVALS =
+    moduleName && moduleId
+      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}&group_step_number=true${
+          params ? `&${paramString}` : ''
+        }`
+      : null;
+  const SWR_KEY_CURRENT_DATA = moduleUrl;
+
+  // Get Approval Lines dari GET /constant
+  const { data: constData, isLoading: constIsLoading } = useSWR(
+    SWR_KEY_CONSTANTS,
+    async (url) => {
+      return await httpClientFetcher<AppConfigData>(url);
+    }
+  );
+
+  // Get Grouped Data dari GET /approvals
+  const {
+    data: approvalData,
+    isLoading: approvalIsLoading,
+    mutate: mutateApprovals,
+  } = useSWR(SWR_KEY_APPROVALS, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<BaseGroupedApproval[]>>(url);
+  });
+
+  // Get latest approval
+  const {
+    data: currentData,
+    isLoading: currentIsLoading,
+    mutate: mutateCurrentData,
+  } = useSWR(SWR_KEY_CURRENT_DATA, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<T>>(url);
+  });
+
+  // Fungsi Refresh
+  const refresh = useCallback(async () => {
+    await Promise.all([mutateApprovals(), mutateCurrentData()]);
+  }, [mutateApprovals, mutateCurrentData]);
+
+  const { approvalLine, groupedApprovals, latestApproval } = useMemo(() => {
+    const line = constData
+      ? (constData.approval_workflows.find((approval) => {
+          return approval.key === moduleName;
+        })?.steps ?? [])
+      : [];
+
+    const grouped = isResponseSuccess(approvalData) ? approvalData.data : [];
+
+    const latest = isResponseSuccess(currentData)
+      ? currentData.data?.approval
+      : undefined;
+
+    return {
+      approvalLine: line,
+      groupedApprovals: grouped,
+      latestApproval: latest,
+    };
+  }, [constData, approvalData, currentData, moduleName]);
+
+  const isLoading = constIsLoading || approvalIsLoading || currentIsLoading;
+
+  const approvals = useMemo(() => {
+    if (isLoading || !approvalLine.length || !latestApproval) {
+      return [];
+    }
+    try {
+      return formatGroupedApprovalsToApprovalSteps(
+        approvalLine,
+        groupedApprovals,
+        latestApproval as BaseApproval
+      );
+    } catch (error) {
+      console.warn('Gagal memformat approval steps:', error);
+      return [];
+    }
+  }, [isLoading, approvalLine, groupedApprovals, latestApproval]);
+
+  // Return Hook
+  return {
+    approvals,
+    isLoading,
+    rawData: isResponseSuccess(currentData) ? currentData.data : undefined,
+    refresh,
+  };
+};
+
+export { useApprovalSteps };
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index 30575d17..5bd23368 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -10,6 +10,9 @@ import Tabs from '@/components/Tabs';
 import ChickinFormView from './tabs/ChickinFormView';
 import ChickinLogsView from './tabs/ChickLogsView';
 import { useState } from 'react';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
 const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
@@ -21,9 +24,20 @@ const ChickinFormKandang = ({
 }) => {
   const [activeTabId, setActiveTabId] = useState<string>('formChickIn');
 
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    moduleUrl: `/production/project-flock-kandangs/${initialValues?.id}`,
+    moduleName: 'PROJECT_FLOCK_KANDANGS',
+    moduleId: initialValues?.id.toString() ?? '',
+  });
+
   const afterSubmitFormChickin = () => {
     setActiveTabId('logsChickIn');
     afterSubmit && afterSubmit();
+    refreshApprovals();
   };
 
   return (
@@ -32,6 +46,11 @@ const ChickinFormKandang = ({
         title='Chick In DOC'
         backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
       />
+
+      {approvals && !approvalsLoading && (
+        <ApprovalSteps approvals={approvals} />
+      )}
+
       <Card
         title='Informasi Kandang'
         className={{
@@ -108,7 +127,7 @@ const ChickinFormKandang = ({
             content: (
               <ChickinLogsView
                 initialValues={initialValues}
-                afterSubmit={afterSubmit}
+                afterSubmit={afterSubmitFormChickin}
               />
             ),
             id: 'logsChickIn',
diff --git a/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
index 2274e64b..6f7e564d 100644
--- a/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
+++ b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
@@ -47,9 +47,7 @@ const ChickinLogsView = ({
     }
     confirmModal.closeModal();
     setIsApproveLoading(false);
-    if (afterSubmit) {
-      afterSubmit();
-    }
+    afterSubmit && afterSubmit();
   };
 
   return (
diff --git a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
index 9ed2a1e6..7afac22b 100644
--- a/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
+++ b/src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx
@@ -58,7 +58,15 @@ const ProjectFlockChickinDetail = ({
     options: options,
     isLoadingOptions: isLoadingListProjectFlock,
     rawData: listProjectFlock,
-  } = useSelect<ProjectFlock>(ProjectFlockApi.basePath, 'id', 'flock_name');
+  } = useSelect<ProjectFlock>(
+    ProjectFlockApi.basePath,
+    'id',
+    'flock_name',
+    '',
+    {
+      search: searchProjectFlock,
+    }
+  );
 
   // Handle Function
   const handleChickinClick = async (
@@ -242,7 +250,7 @@ const ProjectFlockChickinDetail = ({
             </div>
           }
           data={
-            isResponseSuccess(listProjectFlockKandang)
+            projectFlock && isResponseSuccess(listProjectFlockKandang)
               ? listProjectFlockKandang.data
               : []
           }
@@ -293,6 +301,8 @@ const ProjectFlockChickinDetail = ({
                       .replace(/_/g, ' ')
                       .replace(/\b\w/g, (char) => char.toUpperCase())}
                   />
+                ) : projectFlock?.approval?.step_number === 1 ? (
+                  <PillBadge color='red' content={'Tidak Dapat Chick In'} />
                 ) : (
                   <PillBadge color='gray' content={'Belum Chick In'} />
                 );
@@ -310,6 +320,7 @@ const ProjectFlockChickinDetail = ({
                         handleChickinClick(props.row.original);
                       }}
                       className='p-1'
+                      disabled={projectFlock?.approval?.step_number === 1}
                     >
                       <Icon
                         icon='mdi:home-import-outline'
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 5b52e59d..265ad476 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -16,7 +16,7 @@ import {
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { use, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockFormSchema,
@@ -26,7 +26,6 @@ import {
 import {
   ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
-  PeriodFlock,
   ProjectFlock,
 } from '@/types/api/production/project-flock';
 import toast from 'react-hot-toast';
@@ -34,23 +33,19 @@ import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { BaseApiResponse, BaseGroupedApproval } from '@/types/api/api-general';
+import { BaseApiResponse } from '@/types/api/api-general';
 import { APPROVAL_WORKFLOWS, FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ProjectFlockKandangTable from './ProjectFlockKandangTable';
-import ApprovalSteps from '@/components/pages/ApprovalSteps';
-import Steps from '@/components/steps/Steps';
-import StepItem from '@/components/steps/StepItem';
-import Tooltip from '@/components/Tooltip';
-import { id, is } from 'react-day-picker/locale';
-import { formatDate } from '@/lib/helper';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
 import Card from '@/components/Card';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: ProjectFlock;
-  initialApprovals?: BaseGroupedApproval[];
   refreshProjectFlocks?: KeyedMutator<
     BaseApiResponse<ProjectFlock> | undefined
   >;
@@ -59,16 +54,11 @@ interface ProjectFlockFormProps {
 const ProjectFlockForm = ({
   formType = 'add',
   initialValues,
-  initialApprovals,
   refreshProjectFlocks,
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
 
-  const projectFlockSteps = APPROVAL_WORKFLOWS.find(
-    (step) => step.key === 'PROJECT_FLOCKS'
-  );
-
   const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
     useState('');
   const [selectedArea, setSelectedArea] = useState('');
@@ -120,34 +110,28 @@ const ProjectFlockForm = ({
   }, [initialValues]);
 
   // Fetch Data
-  const {
-    rawData: flocks,
-    isLoadingOptions: isLoadingFlocks,
-    options: optionsFlock,
-  } = useSelect(FlockApi.basePath, 'id', 'name');
+  const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
+    useSelect(FlockApi.basePath, 'id', 'name');
 
-  const {
-    options: optionsArea,
-    isLoadingOptions: isLoadingAreas,
-    rawData: areas,
-  } = useSelect(AreaApi.basePath, 'id', 'name');
+  const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
+    AreaApi.basePath,
+    'id',
+    'name'
+  );
 
-  const {
-    options: optionsLocation,
-    isLoadingOptions: isLoadingLocations,
-    rawData: locations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
-    area_id:
-      selectedArea != ''
-        ? selectedArea
-        : ((initialValues?.area?.id ?? '') as string),
-  });
+  const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
+    useSelect(LocationApi.basePath, 'id', 'name', '', {
+      area_id:
+        selectedArea != ''
+          ? selectedArea
+          : ((initialValues?.area?.id ?? '') as string),
+    });
 
-  const {
-    options: optionsFcr,
-    isLoadingOptions: isLoadingFcrs,
-    rawData: fcrs,
-  } = useSelect(FcrApi.basePath, 'id', 'name');
+  const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
+    FcrApi.basePath,
+    'id',
+    'name'
+  );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
@@ -164,6 +148,16 @@ const ProjectFlockForm = ({
     (id: string) => ProjectFlockApi.getNextPeriod(id)
   );
 
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    moduleUrl: `/production/project-flocks/${initialValues?.id}`,
+    moduleName: 'PROJECT_FLOCKS',
+    moduleId: initialValues?.id.toString() ?? '',
+  });
+
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
       if (selectedLocation) {
@@ -516,6 +510,7 @@ const ProjectFlockForm = ({
     if (isResponseError(approveProjectFlockRes)) {
       toast.error(approveProjectFlockRes?.message as string);
     }
+    refreshApprovals();
     confirmModal.closeModal();
     setIsApproveLoading(false);
   };
@@ -558,79 +553,8 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
-        {formType == 'detail' && initialApprovals && (
-          <div className='w-full flex items-center gap-2 my-4'>
-            <Steps className='w-full'>
-              {projectFlockSteps?.steps.map((step, idx) => {
-                const approvalLogs = initialApprovals.find(
-                  (approve) => approve.step_number == step.step_number
-                );
-                return (
-                  <StepItem
-                    key={step.step_number}
-                    color={
-                      step.step_number <=
-                      (initialValues?.approval.step_number ?? 0)
-                        ? 'success'
-                        : undefined
-                    }
-                    icon={
-                      <Tooltip
-                        color={
-                          step.step_number <=
-                          (initialValues?.approval.step_number ?? 0)
-                            ? 'success'
-                            : undefined
-                        }
-                        position='bottom'
-                        content={
-                          <ul>
-                            {approvalLogs &&
-                              approvalLogs?.approvals?.map((approval, idx) => {
-                                return (
-                                  <li className='mb-2' key={`key-logs-${idx}`}>
-                                    <div className='flex flex-col w-full text-start  text-base'>
-                                      <span>Status: {approval.step_name}</span>
-                                      <span>
-                                        Oleh: {approval.action_by.name}
-                                      </span>
-                                      <span>
-                                        Tanggal:{' '}
-                                        {formatDate(
-                                          approval.action_at,
-                                          'DD-MM-yyyy HH:mm:ss'
-                                        )}
-                                      </span>
-                                    </div>
-                                  </li>
-                                );
-                              })}
-                          </ul>
-                        }
-                      >
-                        {step.step_number <=
-                        (initialValues?.approval.step_number ?? 0) ? (
-                          <Icon
-                            icon='material-symbols:check-rounded'
-                            width={24}
-                            height={24}
-                          />
-                        ) : (
-                          <Icon
-                            icon='material-symbols:check-rounded'
-                            width={24}
-                            height={24}
-                          />
-                        )}
-                      </Tooltip>
-                    }
-                  >
-                    {step.step_name}
-                  </StepItem>
-                );
-              })}
-            </Steps>
-          </div>
+        {approvals && !approvalsLoading && (
+          <ApprovalSteps approvals={approvals} />
         )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
@@ -675,32 +599,12 @@ const ProjectFlockForm = ({
                   );
                 }}
               >
+                <Icon icon='mdi:home-import-outline' width={18} height={18} />
                 Chickin
               </Button>
             )}
           </div>
         )}
-        <Card
-          className={{
-            body: 'text-primary',
-          }}
-        >
-          {JSON.stringify(formik.values)}
-        </Card>
-        <Card
-          className={{
-            body: 'text-success',
-          }}
-        >
-          {JSON.stringify(formik.initialValues)}
-        </Card>
-        <Card
-          className={{
-            body: 'text-error',
-          }}
-        >
-          {JSON.stringify(formik.errors)}
-        </Card>
         <form
           className='w-auto h-auto'
           onSubmit={formik.handleSubmit}
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
index ef96a52b..5f1f9667 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
@@ -36,7 +36,6 @@ const ProjectFlockKandangTable = ({
   };
   return (
     <>
-      {JSON.stringify(initialKandangIdSet)}
       <Table<Kandang>
         data={listKandang}
         columns={[
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 008ba5f8..7e730635 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -246,6 +246,19 @@ export const APPROVAL_WORKFLOWS = [
       },
     ],
   },
+  {
+    key: 'PROJECT_FLOCK_KANDANGS',
+    steps: [
+      {
+        step_number: 1,
+        step_name: 'Pengajuan',
+      },
+      {
+        step_number: 2,
+        step_name: 'Disetujui',
+      },
+    ],
+  },
   {
     key: 'RECORDINGS',
     steps: [
diff --git a/src/services/api/production/project-flock.ts b/src/services/api/production/project-flock.ts
index f1f47994..f53d089e 100644
--- a/src/services/api/production/project-flock.ts
+++ b/src/services/api/production/project-flock.ts
@@ -39,11 +39,6 @@ export class ProjectFlockService extends BaseApiService<
   > {
     const path = `/approvals`;
     try {
-      console.log({
-        module_id: id,
-        module_name: 'PROJECT_FLOCKS',
-        group_step_number: true,
-      });
       return await httpClient<SuccessApiResponse<BaseGroupedApproval[]>>(path, {
         method: 'GET',
         query: {
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index af9144e2..37040654 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -112,6 +112,10 @@ export type BaseGroupedApproval = {
   approvals: BaseApproval[];
 };
 
+interface ModuleWithApproval {
+  approval?: BaseApproval;
+}
+
 export type Approvals = BaseApiResponse<BaseApproval>;
 
 export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;
diff --git a/src/types/config/constant.d.ts b/src/types/config/constant.d.ts
index 3e4371be..eeb0d7f6 100644
--- a/src/types/config/constant.d.ts
+++ b/src/types/config/constant.d.ts
@@ -2,3 +2,17 @@ export type ApprovalLine = {
   step_number: number;
   step_name: string;
 }[];
+
+export interface ApprovalWorkflow {
+  key: string;
+  steps: ApprovalLine;
+}
+
+export interface AppConfigData {
+  approval_workflows: ApprovalWorkflow[];
+  flags: string[];
+  warehouse_types: string[];
+  stock_log: string;
+  supplier_categories: string[];
+  customer_supplier_types: string[];
+}

From 6670f1e31bbbfe594950c40c0e343b3ef86e9e1e Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 12 Nov 2025 15:25:14 +0700
Subject: [PATCH 208/212] refactor(FE-238-239-240): implement approval workflow
 chickin & project flock, membuat custom hook useApprovals, dan handling error
 format approvals

---
 src/components/pages/marketing/sales-orders/form/SalesForm.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
index 2a771833..b181a381 100644
--- a/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
+++ b/src/components/pages/marketing/sales-orders/form/SalesForm.tsx
@@ -472,7 +472,6 @@ const SalesForm = ({
         className={{
           modalBox: 'max-w-4/5 z-100',
         }}
-        id='marketing-product-modal'
       >
         <div className='flex flex-col gap-4'>
           <div className='flex flex-row items-center justify-between'>

From fa3ba468106e7fd7441170bae34dd5b9b8fd59f1 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Wed, 12 Nov 2025 17:03:37 +0700
Subject: [PATCH 209/212] refactor(FE): menambahkan parameter params
 useApprovalSteps dan return rawData

---
 src/components/pages/ApprovalSteps.tsx        | 106 ++++++++++++++++--
 .../project-flock/form/ProjectFlockForm.tsx   |  10 +-
 src/types/api/api-general.d.ts                |   1 +
 3 files changed, 106 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index ba9bde3d..18d7fcfe 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -191,6 +191,53 @@ export const formatGroupedApprovalsToApprovalSteps = (
 
 export default ApprovalSteps;
 
+/**
+ * Mengubah array BaseApproval (datar) menjadi BaseGroupedApproval (berkelompok).
+ */
+const groupApprovalsByStep = (
+  approvals: BaseApproval[]
+): BaseGroupedApproval[] => {
+  const groups: Record<number, BaseGroupedApproval> = {};
+  for (const approval of approvals) {
+    if (!groups[approval.step_number]) {
+      groups[approval.step_number] = {
+        step_number: approval.step_number,
+        step_name: approval.step_name,
+        approvals: [],
+      };
+    }
+    groups[approval.step_number].approvals.push(approval);
+  }
+  return Object.values(groups);
+};
+
+/**
+ * Mengubah array BaseGroupedApproval (berkelompok) kembali menjadi BaseApproval[] (datar).
+ */
+const flattenGroupedApprovals = (
+  groupedApprovals: BaseGroupedApproval[]
+): BaseApproval[] => {
+  return groupedApprovals.flatMap((group) => group.approvals);
+};
+
+/**
+ * Type guard untuk memeriksa apakah data adalah BaseGroupedApproval[].
+ */
+const isGroupedApprovalData = (
+  data: BaseApproval[] | BaseGroupedApproval[]
+): data is BaseGroupedApproval[] => {
+  if (!data || data.length === 0) {
+    return true;
+  }
+  const firstElement = data[0];
+  return (
+    typeof firstElement === 'object' &&
+    firstElement !== null &&
+    'approvals' in firstElement &&
+    Array.isArray(firstElement.approvals)
+  );
+};
+
 const useApprovalSteps = <T extends ModuleWithApproval>({
   moduleUrl,
   moduleName,
@@ -204,6 +251,7 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     page: number;
     limit: number;
     search?: string;
+    group_step_number?: boolean;
   };
 }) => {
   const paramString = new URLSearchParams({
@@ -211,17 +259,15 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     limit: params?.limit?.toString() || '',
     search: params?.search || '',
   }).toString();
-
   const SWR_KEY_CONSTANTS = '/constants';
   const SWR_KEY_APPROVALS =
     moduleName && moduleId
-      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}&group_step_number=true${
+      ? `/approvals?module_name=${moduleName}&module_id=${moduleId}${
           params ? `&${paramString}` : ''
         }`
       : null;
   const SWR_KEY_CURRENT_DATA = moduleUrl;
 
-  // Get Approval Lines dari GET /constant
   const { data: constData, isLoading: constIsLoading } = useSWR(
     SWR_KEY_CONSTANTS,
     async (url) => {
@@ -229,16 +275,16 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     }
   );
 
-  // Get Grouped Data dari GET /approvals
   const {
     data: approvalData,
     isLoading: approvalIsLoading,
     mutate: mutateApprovals,
   } = useSWR(SWR_KEY_APPROVALS, async (url) => {
-    return await httpClientFetcher<BaseApiResponse<BaseGroupedApproval[]>>(url);
+    return await httpClientFetcher<
+      BaseApiResponse<BaseApproval[] | BaseGroupedApproval[]>
+    >(url);
   });
 
-  // Get latest approval
   const {
     data: currentData,
     isLoading: currentIsLoading,
@@ -259,15 +305,29 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
         })?.steps ?? [])
       : [];
 
-    const grouped = isResponseSuccess(approvalData) ? approvalData.data : [];
-
     const latest = isResponseSuccess(currentData)
       ? currentData.data?.approval
       : undefined;
 
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    let processedGroupedApprovals: BaseGroupedApproval[] = [];
+
+    if (rawData) {
+      if (isGroupedApprovalData(rawData)) {
+        processedGroupedApprovals = rawData;
+      } else {
+        processedGroupedApprovals = groupApprovalsByStep(
+          rawData as BaseApproval[]
+        );
+      }
+    }
+
     return {
       approvalLine: line,
-      groupedApprovals: grouped,
+      groupedApprovals: processedGroupedApprovals,
       latestApproval: latest,
     };
   }, [constData, approvalData, currentData, moduleName]);
@@ -290,11 +350,39 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     }
   }, [isLoading, approvalLine, groupedApprovals, latestApproval]);
 
+  const rawDataApprovals = useMemo(() => {
+    const rawData = isResponseSuccess(approvalData)
+      ? approvalData.data
+      : undefined;
+
+    if (!rawData) {
+      return undefined;
+    }
+
+    const isDataCurrentlyGrouped = isGroupedApprovalData(rawData);
+    const wantsGrouped = params?.group_step_number !== false;
+
+    if (wantsGrouped) {
+      if (isDataCurrentlyGrouped) {
+        return rawData as BaseGroupedApproval[];
+      } else {
+        return groupApprovalsByStep(rawData as BaseApproval[]);
+      }
+    } else {
+      if (isDataCurrentlyGrouped) {
+        return flattenGroupedApprovals(rawData as BaseGroupedApproval[]);
+      } else {
+        return rawData as BaseApproval[];
+      }
+    }
+  }, [approvalData, params?.group_step_number]);
+
   // Return Hook
   return {
     approvals,
     isLoading,
     rawData: isResponseSuccess(currentData) ? currentData.data : undefined,
+    rawDataApprovals: rawDataApprovals,
     refresh,
   };
 };
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 265ad476..bc268060 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -34,14 +34,13 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { BaseApiResponse } from '@/types/api/api-general';
-import { APPROVAL_WORKFLOWS, FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
+import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ProjectFlockKandangTable from './ProjectFlockKandangTable';
 import ApprovalSteps, {
   useApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
-import Card from '@/components/Card';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -151,11 +150,18 @@ const ProjectFlockForm = ({
   const {
     approvals,
     isLoading: approvalsLoading,
+    rawData: rawApprovals,
+    rawDataApprovals: rawDataApprovals,
     refresh: refreshApprovals,
   } = useApprovalSteps({
     moduleUrl: `/production/project-flocks/${initialValues?.id}`,
     moduleName: 'PROJECT_FLOCKS',
     moduleId: initialValues?.id.toString() ?? '',
+    params: {
+      page: 1,
+      limit: 10,
+      group_step_number: false,
+    },
   });
 
   useEffect(() => {
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index 37040654..f9e35512 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -98,6 +98,7 @@ export type flags =
   | 'OVK';
 
 export type BaseApproval = {
+  id?: number;
   step_number: number;
   step_name: string;
   action: string;

From 4485ea8181842a6ba36a2b6708075b056bcfd3a2 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 13 Nov 2025 09:54:51 +0700
Subject: [PATCH 210/212] fix(FE-238): mengubah ui form chick in

---
 .../chickin/form/tabs/ChickinFormView.tsx     | 25 ++++++++-----------
 .../project-flock/form/ProjectFlockForm.tsx   |  5 ----
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx b/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
index 1803b0a0..7c12cc60 100644
--- a/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
+++ b/src/components/pages/production/chickin/form/tabs/ChickinFormView.tsx
@@ -21,6 +21,7 @@ import toast from 'react-hot-toast';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { useRouter } from 'next/navigation';
 import Alert from '@/components/Alert';
+import { formatNumber } from '@/lib/helper';
 
 const ChickinFormView = ({
   formType = 'add',
@@ -141,6 +142,10 @@ const ChickinFormView = ({
               cell(props) {
                 return (
                   <DateInput
+                    className={{
+                      wrapper: 'w-fit',
+                      inputWrapper: 'bg-white',
+                    }}
                     name={`chickin_requests[${props.row.index}].chick_in_date`}
                     value={
                       formik.values.chickin_requests[props.row.index]
@@ -161,16 +166,7 @@ const ChickinFormView = ({
                     props.row.original.product_warehouse_id
                 );
                 return (
-                  <SelectInput
-                    value={
-                      {
-                        label: availableQty?.product_warehouse?.product?.name,
-                        value: availableQty?.product_warehouse?.product?.id,
-                      } as OptionType
-                    }
-                    options={[]}
-                    isDisabled
-                  />
+                  <div>{availableQty?.product_warehouse?.product?.name}</div>
                 );
               },
             },
@@ -184,10 +180,11 @@ const ChickinFormView = ({
                     props.row.original.product_warehouse_id
                 );
                 return (
-                  <NumberInput
-                    name='qty[]'
-                    value={availableQty?.available_qty}
-                  />
+                  <div>
+                    {availableQty?.available_qty
+                      ? formatNumber(availableQty?.available_qty)
+                      : '-'}
+                  </div>
                 );
               },
             },
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index bc268060..e78e2279 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -157,11 +157,6 @@ const ProjectFlockForm = ({
     moduleUrl: `/production/project-flocks/${initialValues?.id}`,
     moduleName: 'PROJECT_FLOCKS',
     moduleId: initialValues?.id.toString() ?? '',
-    params: {
-      page: 1,
-      limit: 10,
-      group_step_number: false,
-    },
   });
 
   useEffect(() => {

From def7ee4a0bf387c0a11464c79f949c74627080c2 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 13 Nov 2025 10:46:11 +0700
Subject: [PATCH 211/212] fix(FE-238): hide approval button when chickin on
 submission

---
 .../chickin/form/tabs/ChickLogsView.tsx        | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
index 6f7e564d..bb368c67 100644
--- a/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
+++ b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
@@ -59,14 +59,16 @@ const ChickinLogsView = ({
         }}
       >
         <div className='flex flex-row justify-start gap-3 mt-3'>
-          <Button
-            color='success'
-            variant='outline'
-            onClick={handleClickApprove}
-          >
-            <Icon width={24} height={24} icon='material-symbols:check' />
-            Approve
-          </Button>
+          {initialValues?.approval?.step_number == 1 && (
+            <Button
+              color='success'
+              variant='outline'
+              onClick={handleClickApprove}
+            >
+              <Icon width={24} height={24} icon='material-symbols:check' />
+              Approve
+            </Button>
+          )}
         </div>
         <Table<Chickin>
           data={initialValues?.chickins || []}

From e5318fd6b5efd32287f7081f3b5b6a25009a342d Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 13 Nov 2025 11:18:11 +0700
Subject: [PATCH 212/212] refactor(FE-238-86): change useApprovalSteps params,
 and minimize fetching data

---
 src/components/pages/ApprovalSteps.tsx        | 64 ++++++-------------
 .../production/chickin/form/ChickinForm.tsx   |  4 +-
 .../project-flock/form/ProjectFlockForm.tsx   |  5 +-
 src/config/approval-line.ts                   | 11 ++++
 src/config/constant.ts                        | 46 -------------
 src/types/api/api-general.d.ts                |  4 --
 src/types/config/constant.d.ts                | 14 ----
 7 files changed, 37 insertions(+), 111 deletions(-)

diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index 18d7fcfe..a56a85c8 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -8,9 +8,8 @@ import {
   BaseApiResponse,
   BaseApproval,
   BaseGroupedApproval,
-  ModuleWithApproval,
 } from '@/types/api/api-general';
-import { AppConfigData, ApprovalLine } from '@/types/config/constant';
+import { ApprovalLine } from '@/types/config/constant';
 import useSWR from 'swr';
 import { httpClientFetcher } from '@/services/http/client';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -238,13 +237,15 @@ const isGroupedApprovalData = (
   );
 };
 
-const useApprovalSteps = <T extends ModuleWithApproval>({
-  moduleUrl,
+const useApprovalSteps = ({
+  latestApproval,
+  approvalLines,
   moduleName,
   moduleId,
   params,
 }: {
-  moduleUrl: string;
+  latestApproval: BaseApproval | undefined;
+  approvalLines: ApprovalLine;
   moduleName: string;
   moduleId: string;
   params?: {
@@ -254,26 +255,20 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     group_step_number?: boolean;
   };
 }) => {
+  // Membuat URL Parameters
   const paramString = new URLSearchParams({
     page: params?.page?.toString() || '',
     limit: params?.limit?.toString() || '',
     search: params?.search || '',
   }).toString();
-  const SWR_KEY_CONSTANTS = '/constants';
+
+  // fetching data approvals
   const SWR_KEY_APPROVALS =
     moduleName && moduleId
       ? `/approvals?module_name=${moduleName}&module_id=${moduleId}${
           params ? `&${paramString}` : ''
         }`
       : null;
-  const SWR_KEY_CURRENT_DATA = moduleUrl;
-
-  const { data: constData, isLoading: constIsLoading } = useSWR(
-    SWR_KEY_CONSTANTS,
-    async (url) => {
-      return await httpClientFetcher<AppConfigData>(url);
-    }
-  );
 
   const {
     data: approvalData,
@@ -285,30 +280,12 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     >(url);
   });
 
-  const {
-    data: currentData,
-    isLoading: currentIsLoading,
-    mutate: mutateCurrentData,
-  } = useSWR(SWR_KEY_CURRENT_DATA, async (url) => {
-    return await httpClientFetcher<BaseApiResponse<T>>(url);
-  });
-
   // Fungsi Refresh
   const refresh = useCallback(async () => {
-    await Promise.all([mutateApprovals(), mutateCurrentData()]);
-  }, [mutateApprovals, mutateCurrentData]);
-
-  const { approvalLine, groupedApprovals, latestApproval } = useMemo(() => {
-    const line = constData
-      ? (constData.approval_workflows.find((approval) => {
-          return approval.key === moduleName;
-        })?.steps ?? [])
-      : [];
-
-    const latest = isResponseSuccess(currentData)
-      ? currentData.data?.approval
-      : undefined;
+    await mutateApprovals();
+  }, [mutateApprovals]);
 
+  const { groupedApprovals } = useMemo(() => {
     const rawData = isResponseSuccess(approvalData)
       ? approvalData.data
       : undefined;
@@ -326,30 +303,30 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
     }
 
     return {
-      approvalLine: line,
       groupedApprovals: processedGroupedApprovals,
-      latestApproval: latest,
     };
-  }, [constData, approvalData, currentData, moduleName]);
+  }, [approvalData]);
 
-  const isLoading = constIsLoading || approvalIsLoading || currentIsLoading;
+  const isLoading = approvalIsLoading;
 
+  // Formatting Akhir
   const approvals = useMemo(() => {
-    if (isLoading || !approvalLine.length || !latestApproval) {
+    if (isLoading || !approvalLines.length || !latestApproval) {
       return [];
     }
     try {
       return formatGroupedApprovalsToApprovalSteps(
-        approvalLine,
+        approvalLines,
         groupedApprovals,
-        latestApproval as BaseApproval
+        latestApproval
       );
     } catch (error) {
       console.warn('Gagal memformat approval steps:', error);
       return [];
     }
-  }, [isLoading, approvalLine, groupedApprovals, latestApproval]);
+  }, [isLoading, approvalLines, groupedApprovals, latestApproval]);
 
+  // Raw Data Approvals
   const rawDataApprovals = useMemo(() => {
     const rawData = isResponseSuccess(approvalData)
       ? approvalData.data
@@ -381,7 +358,6 @@ const useApprovalSteps = <T extends ModuleWithApproval>({
   return {
     approvals,
     isLoading,
-    rawData: isResponseSuccess(currentData) ? currentData.data : undefined,
     rawDataApprovals: rawDataApprovals,
     refresh,
   };
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index 5bd23368..1ed33b2c 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -13,6 +13,7 @@ import { useState } from 'react';
 import ApprovalSteps, {
   useApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_KANDANG_APPROVAL_LINE } from '@/config/approval-line';
 const ChickinFormKandang = ({
   formType = 'add',
   initialValues,
@@ -29,7 +30,8 @@ const ChickinFormKandang = ({
     isLoading: approvalsLoading,
     refresh: refreshApprovals,
   } = useApprovalSteps({
-    moduleUrl: `/production/project-flock-kandangs/${initialValues?.id}`,
+    latestApproval: initialValues?.approval,
+    approvalLines: PROJECT_FLOCK_KANDANG_APPROVAL_LINE,
     moduleName: 'PROJECT_FLOCK_KANDANGS',
     moduleId: initialValues?.id.toString() ?? '',
   });
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index e78e2279..ce3c1dce 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -41,6 +41,7 @@ import ProjectFlockKandangTable from './ProjectFlockKandangTable';
 import ApprovalSteps, {
   useApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -150,11 +151,11 @@ const ProjectFlockForm = ({
   const {
     approvals,
     isLoading: approvalsLoading,
-    rawData: rawApprovals,
     rawDataApprovals: rawDataApprovals,
     refresh: refreshApprovals,
   } = useApprovalSteps({
-    moduleUrl: `/production/project-flocks/${initialValues?.id}`,
+    latestApproval: initialValues?.approval,
+    approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
     moduleName: 'PROJECT_FLOCKS',
     moduleId: initialValues?.id.toString() ?? '',
   });
diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts
index 0a02d1f1..1ef0e1c3 100644
--- a/src/config/approval-line.ts
+++ b/src/config/approval-line.ts
@@ -10,3 +10,14 @@ export const PROJECT_FLOCK_APPROVAL_LINE: ApprovalLine = [
     step_name: 'Aktif',
   },
 ] as const;
+
+export const PROJECT_FLOCK_KANDANG_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Disetujui',
+  },
+] as const;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 7e730635..933ba2ab 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -231,49 +231,3 @@ export const RECORDING_FLAG_OPTIONS = [
   { label: 'Ayam Culling', value: 'Ayam Culling' },
   { label: 'Ayam Mati', value: 'Ayam Mati' },
 ];
-
-export const APPROVAL_WORKFLOWS = [
-  {
-    key: 'PROJECT_FLOCKS',
-    steps: [
-      {
-        step_number: 1,
-        step_name: 'Pengajuan',
-      },
-      {
-        step_number: 2,
-        step_name: 'Aktif',
-      },
-    ],
-  },
-  {
-    key: 'PROJECT_FLOCK_KANDANGS',
-    steps: [
-      {
-        step_number: 1,
-        step_name: 'Pengajuan',
-      },
-      {
-        step_number: 2,
-        step_name: 'Disetujui',
-      },
-    ],
-  },
-  {
-    key: 'RECORDINGS',
-    steps: [
-      {
-        step_number: 1,
-        step_name: 'Grading-Telur',
-      },
-      {
-        step_number: 2,
-        step_name: 'Pengajuan',
-      },
-      {
-        step_number: 3,
-        step_name: 'Disetujui',
-      },
-    ],
-  },
-];
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index f9e35512..5b9f04e3 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -113,10 +113,6 @@ export type BaseGroupedApproval = {
   approvals: BaseApproval[];
 };
 
-interface ModuleWithApproval {
-  approval?: BaseApproval;
-}
-
 export type Approvals = BaseApiResponse<BaseApproval>;
 
 export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;
diff --git a/src/types/config/constant.d.ts b/src/types/config/constant.d.ts
index eeb0d7f6..3e4371be 100644
--- a/src/types/config/constant.d.ts
+++ b/src/types/config/constant.d.ts
@@ -2,17 +2,3 @@ export type ApprovalLine = {
   step_number: number;
   step_name: string;
 }[];
-
-export interface ApprovalWorkflow {
-  key: string;
-  steps: ApprovalLine;
-}
-
-export interface AppConfigData {
-  approval_workflows: ApprovalWorkflow[];
-  flags: string[];
-  warehouse_types: string[];
-  stock_log: string;
-  supplier_categories: string[];
-  customer_supplier_types: string[];
-}