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 01/64] 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 02/64] 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 03/64] 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 04/64] 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 05/64] 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 06/64] 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 07/64] 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 08/64] 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 09/64] 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 10/64] 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 11/64] 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 12/64] 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 13/64] 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 14/64] 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 15/64] 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 16/64] 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 17/64] 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 18/64] 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 19/64] 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 20/64] 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 21/64] 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 56a9fc2349f8aa20ba56aa6c56e3ef433a516e3b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 15 Oct 2025 10:51:06 +0700
Subject: [PATCH 22/64] 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 23/64] 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 24/64] 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 25/64] 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 26/64] 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 27/64] 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 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 28/64] 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 eb0f04310ebe8f655f192b4d17dae7f17d4abf32 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Thu, 16 Oct 2025 10:01:00 +0700
Subject: [PATCH 29/64] 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 30/64] 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 31/64] 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 32/64] 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 33/64] 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 34/64] 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 c6a0c542aad1dcc2c4dc8c5361bfa95a6d9b01cd Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 16 Oct 2025 14:33:49 +0700
Subject: [PATCH 35/64] 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 36/64] 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 37/64] 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 38/64] 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 39/64] 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 40/64] 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 41/64] 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 42/64] 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 43/64] 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 44/64] 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 45/64] 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 7abe9b7dc6ac11f806dd5a8aeebd42f1acec643e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 17 Oct 2025 16:48:35 +0700
Subject: [PATCH 46/64] 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 47/64] 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 48/64] 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 49/64] 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 50/64] 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 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 51/64] 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 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 52/64] 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 53/64] 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 54/64] 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 376fa29f7edf4da9df926566f270f6053895f6de Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 20 Oct 2025 09:55:08 +0700
Subject: [PATCH 55/64] 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 d76f897840b37331c1eddcd54d90a6ed0c0575e0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 11:32:35 +0700
Subject: [PATCH 56/64] 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 57/64] 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 58/64] 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 c3338d3e05f8fd602fb88fcd3a6f359039f91b6c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 20 Oct 2025 15:23:18 +0700
Subject: [PATCH 59/64] 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 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 60/64] 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 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 61/64] 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 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 62/64] 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 63/64] 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 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 64/64] 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