From 215580215e68738c4b74d3595bd2d821c37d86f7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 29 Oct 2025 17:26:06 +0700
Subject: [PATCH 001/168] feat(FE-212): add types for purchase creation and
 updates

---
 src/types/api/purchasing/purchasing.d.ts | 47 ++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/types/api/purchasing/purchasing.d.ts

diff --git a/src/types/api/purchasing/purchasing.d.ts b/src/types/api/purchasing/purchasing.d.ts
new file mode 100644
index 00000000..479efd9c
--- /dev/null
+++ b/src/types/api/purchasing/purchasing.d.ts
@@ -0,0 +1,47 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+
+export type BasePurchase = {
+  id: number;
+  pr_number: string;
+  po_number: string;
+  po_date: string;
+  supplier: Supplier;
+  warehouse: Warehouse[];
+  credit_term: number;
+  due_date: string;
+  grand_total: number;
+  notes?: string | null;
+  deleted_at?: string | null;
+  created_by: number;
+};
+
+export type Purchase = BaseMetadata & BasePurchase;
+
+export type CreatePurchasePayload = {
+  pr_number: string;
+  po_number: string;
+  po_date: string;
+  supplier_id: number;
+  warehouse_ids: number[];
+  credit_term: number;
+  due_date: string;
+  grand_total: number;
+  notes?: string | null;
+  purchase_items: {
+    product_id: number;
+    product_warehouse_id?: number | null;
+    received_date?: string | null;
+    travel_number?: string | null;
+    travel_number_docs?: string | null;
+    vehicle_number?: string | null;
+    sub_qty: number;
+    total_qty: number;
+    total_used: number;
+    price: number;
+    total_price: number;
+  }[];
+};
+
+export type UpdatePurchasePayload = CreatePurchasePayload;

From 8b09a8d315007e22465bd66ac0d5bf3fbe002262 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 29 Oct 2025 17:26:26 +0700
Subject: [PATCH 002/168] feat(FE-212): implement PurchaseApi service for
 purchase requests

---
 src/services/api/purchasing.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/services/api/purchasing.ts

diff --git a/src/services/api/purchasing.ts b/src/services/api/purchasing.ts
new file mode 100644
index 00000000..71e6f60f
--- /dev/null
+++ b/src/services/api/purchasing.ts
@@ -0,0 +1,12 @@
+import { BaseApiService } from './base';
+import {
+  CreatePurchasePayload,
+  Purchase,
+  UpdatePurchasePayload,
+} from '@/types/api/purchasing/purchasing';
+
+export const PurchaseApi = new BaseApiService<
+  Purchase,
+  CreatePurchasePayload,
+  UpdatePurchasePayload
+>('/purchase-requests');

From c6fcb17b4d784b93f2b9a23a7a9da9539ab5800c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 29 Oct 2025 20:31:31 +0700
Subject: [PATCH 003/168] feat(FE-212): add validation schemas for purchase
 request and update forms

---
 .../purchase/form/PurchaseForm.schema.ts      | 165 ++++++++++++++++++
 src/types/api/purchasing/purchasing.d.ts      |  16 +-
 2 files changed, 167 insertions(+), 14 deletions(-)
 create mode 100644 src/components/pages/purchase/form/PurchaseForm.schema.ts

diff --git a/src/components/pages/purchase/form/PurchaseForm.schema.ts b/src/components/pages/purchase/form/PurchaseForm.schema.ts
new file mode 100644
index 00000000..49292e95
--- /dev/null
+++ b/src/components/pages/purchase/form/PurchaseForm.schema.ts
@@ -0,0 +1,165 @@
+import * as Yup from 'yup';
+import { CreatePurchaseRequestPayload } from '@/types/api/purchasing/purchasing';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+
+export const PurchaseRequestFormSchema = Yup.object({
+  supplier: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  supplier_id: Yup.number()
+    .default(0)
+    .typeError('Supplier wajib diisi!')
+    .test(
+      'is-valid-supplier',
+      'Supplier wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Supplier wajib diisi!'),
+  warehouse: Yup.array()
+    .of(
+      Yup.object({
+        value: Yup.number().min(1).required(),
+        label: Yup.string().required(),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 warehouse!')
+    .required('Warehouse wajib diisi!')
+    .nullable(),
+  warehouse_ids: Yup.array()
+    .of(Yup.number().min(1))
+    .min(1, 'Minimal harus ada 1 warehouse!')
+    .required('Warehouse wajib diisi!'),
+  credit_term: Yup.number()
+    .required('Termin kredit wajib diisi!')
+    .min(0, 'Termin kredit tidak boleh negatif!')
+    .typeError('Termin kredit harus berupa angka!'),
+  notes: Yup.string().optional().nullable(),
+  purchase_items: Yup.array()
+    .of(
+      Yup.object({
+        product_id: Yup.number()
+          .required('Produk wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Produk harus berupa angka!'),
+        product_warehouse_id: Yup.number()
+          .optional()
+          .nullable()
+          .typeError('Product warehouse harus berupa angka!'),
+        total_qty: Yup.number()
+          .required('Jumlah total wajib diisi!')
+          .min(0, 'Jumlah total tidak boleh negatif!')
+          .typeError('Jumlah total harus berupa angka!'),
+        price: Yup.number()
+          .required('Harga wajib diisi!')
+          .min(0, 'Harga tidak boleh negatif!')
+          .typeError('Harga harus berupa angka!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 item pembelian!')
+    .required('Item pembelian wajib diisi!'),
+});
+
+export const UpdatePurchaseRequestFormSchema = Yup.object({
+  supplier: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  supplier_id: Yup.number()
+    .default(0)
+    .typeError('Supplier wajib diisi!')
+    .test(
+      'is-valid-supplier',
+      'Supplier wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Supplier wajib diisi!'),
+  warehouse: Yup.array()
+    .of(
+      Yup.object({
+        value: Yup.number().min(1).required(),
+        label: Yup.string().required(),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 warehouse!')
+    .required('Warehouse wajib diisi!')
+    .nullable(),
+  warehouse_ids: Yup.array()
+    .of(Yup.number().min(1))
+    .min(1, 'Minimal harus ada 1 warehouse!')
+    .required('Warehouse wajib diisi!'),
+  credit_term: Yup.number()
+    .required('Termin kredit wajib diisi!')
+    .min(0, 'Termin kredit tidak boleh negatif!')
+    .typeError('Termin kredit harus berupa angka!'),
+  notes: Yup.string().optional().nullable(),
+  purchase_items: Yup.array()
+    .of(
+      Yup.object({
+        product_id: Yup.number()
+          .required('Produk wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Produk harus berupa angka!'),
+        product_warehouse_id: Yup.number()
+          .optional()
+          .nullable()
+          .typeError('Product warehouse harus berupa angka!'),
+        total_qty: Yup.number()
+          .required('Jumlah total wajib diisi!')
+          .min(0, 'Jumlah total tidak boleh negatif!')
+          .typeError('Jumlah total harus berupa angka!'),
+        price: Yup.number()
+          .required('Harga wajib diisi!')
+          .min(0, 'Harga tidak boleh negatif!')
+          .typeError('Harga harus berupa angka!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 item pembelian!')
+    .required('Item pembelian wajib diisi!'),
+});
+
+export type PurchaseRequestFormValues = Yup.InferType<
+  typeof PurchaseRequestFormSchema
+>;
+
+type PurchaseRequestFormData = Partial<CreatePurchaseRequestPayload> & {
+  supplier?: Supplier;
+  warehouse?: Warehouse[];
+  purchase_items?: CreatePurchaseRequestPayload['purchase_items'];
+};
+
+export const getPurchaseRequestFormInitialValues = (
+  initialValues?: PurchaseRequestFormData
+): PurchaseRequestFormValues => ({
+  supplier: initialValues?.supplier
+    ? {
+        value: initialValues.supplier.id,
+        label: initialValues.supplier.name,
+      }
+    : null,
+  supplier_id: initialValues?.supplier_id ?? 0,
+  warehouse:
+    initialValues?.warehouse?.map((warehouse) => ({
+      value: warehouse.id,
+      label: warehouse.name,
+    })) ?? [],
+  warehouse_ids: initialValues?.warehouse_ids ?? [],
+  credit_term: initialValues?.credit_term ?? 0,
+  notes: initialValues?.notes ?? '',
+  purchase_items: initialValues?.purchase_items?.map(
+    (item: NonNullable<CreatePurchaseRequestPayload['purchase_items']>[0]) => ({
+      product_id: item.product_id,
+      product_warehouse_id: item.product_warehouse_id,
+      total_qty: item.total_qty,
+      price: item.price,
+    })
+  ) ?? [
+    {
+      product_id: 0,
+      product_warehouse_id: null,
+      total_qty: 0,
+      price: 0,
+    },
+  ],
+});
diff --git a/src/types/api/purchasing/purchasing.d.ts b/src/types/api/purchasing/purchasing.d.ts
index 479efd9c..eea53e1d 100644
--- a/src/types/api/purchasing/purchasing.d.ts
+++ b/src/types/api/purchasing/purchasing.d.ts
@@ -19,29 +19,17 @@ export type BasePurchase = {
 
 export type Purchase = BaseMetadata & BasePurchase;
 
-export type CreatePurchasePayload = {
-  pr_number: string;
-  po_number: string;
-  po_date: string;
+export type CreatePurchaseRequestPayload = {
   supplier_id: number;
   warehouse_ids: number[];
   credit_term: number;
-  due_date: string;
-  grand_total: number;
   notes?: string | null;
   purchase_items: {
     product_id: number;
     product_warehouse_id?: number | null;
-    received_date?: string | null;
-    travel_number?: string | null;
-    travel_number_docs?: string | null;
-    vehicle_number?: string | null;
-    sub_qty: number;
     total_qty: number;
-    total_used: number;
     price: number;
-    total_price: number;
   }[];
 };
 
-export type UpdatePurchasePayload = CreatePurchasePayload;
+export type UpdatePurchaseRequestPayload = CreatePurchaseRequestPayload;

From 3daf1a518edab9812bb13380e3aef8e6ea32543d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 29 Oct 2025 21:11:40 +0700
Subject: [PATCH 004/168] feat(FE-208): add 'Purchase' link to navigation
 constants

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

diff --git a/src/config/constant.ts b/src/config/constant.ts
index b5a12fb4..2331084e 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -40,6 +40,12 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     ],
   },
 
+  {
+    title: 'Purchase',
+    link: '/purchase',
+    icon: 'gg:shopping-cart',
+  },
+
   {
     title: 'Persediaan',
     link: '/inventory',

From 7ba7b884a47de6a9998df4887d9092bfdb0e96c0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 29 Oct 2025 21:12:24 +0700
Subject: [PATCH 005/168] feat(FE-212): rename purchasing files and update
 validation schemas for purchase requests

---
 ...chema.ts => PurchaseRequestForm.schema.ts} | 72 +++----------------
 src/services/api/purchasing.ts                |  2 +-
 .../purchase.d.ts}                            |  2 +-
 3 files changed, 10 insertions(+), 66 deletions(-)
 rename src/components/pages/purchase/form/{PurchaseForm.schema.ts => PurchaseRequestForm.schema.ts} (59%)
 rename src/types/api/{purchasing/purchasing.d.ts => purchase/purchase.d.ts} (95%)

diff --git a/src/components/pages/purchase/form/PurchaseForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
similarity index 59%
rename from src/components/pages/purchase/form/PurchaseForm.schema.ts
rename to src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index 49292e95..3b21b97a 100644
--- a/src/components/pages/purchase/form/PurchaseForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
-import { CreatePurchaseRequestPayload } from '@/types/api/purchasing/purchasing';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Warehouse } from '@/types/api/master-data/warehouse';
+import { CreatePurchaseRequestPayload } from '@/types/api/purchase/purchase';
 
 export const PurchaseRequestFormSchema = Yup.object({
   supplier: Yup.object({
@@ -33,7 +33,7 @@ export const PurchaseRequestFormSchema = Yup.object({
     .required('Warehouse wajib diisi!'),
   credit_term: Yup.number()
     .required('Termin kredit wajib diisi!')
-    .min(0, 'Termin kredit tidak boleh negatif!')
+    .min(1, 'Termin kredit tidak boleh negatif!')
     .typeError('Termin kredit harus berupa angka!'),
   notes: Yup.string().optional().nullable(),
   purchase_items: Yup.array()
@@ -44,16 +44,16 @@ export const PurchaseRequestFormSchema = Yup.object({
           .min(1, 'Produk wajib diisi!')
           .typeError('Produk harus berupa angka!'),
         product_warehouse_id: Yup.number()
-          .optional()
-          .nullable()
+          .required('Product warehouse wajib diisi!')
+          .min(1, 'Product warehouse wajib diisi!')
           .typeError('Product warehouse harus berupa angka!'),
         total_qty: Yup.number()
           .required('Jumlah total wajib diisi!')
-          .min(0, 'Jumlah total tidak boleh negatif!')
+          .min(1, 'Jumlah total tidak boleh negatif!')
           .typeError('Jumlah total harus berupa angka!'),
         price: Yup.number()
           .required('Harga wajib diisi!')
-          .min(0, 'Harga tidak boleh negatif!')
+          .min(1, 'Harga tidak boleh negatif!')
           .typeError('Harga harus berupa angka!'),
       })
     )
@@ -61,63 +61,7 @@ export const PurchaseRequestFormSchema = Yup.object({
     .required('Item pembelian wajib diisi!'),
 });
 
-export const UpdatePurchaseRequestFormSchema = Yup.object({
-  supplier: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  supplier_id: Yup.number()
-    .default(0)
-    .typeError('Supplier wajib diisi!')
-    .test(
-      'is-valid-supplier',
-      'Supplier wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Supplier wajib diisi!'),
-  warehouse: Yup.array()
-    .of(
-      Yup.object({
-        value: Yup.number().min(1).required(),
-        label: Yup.string().required(),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 warehouse!')
-    .required('Warehouse wajib diisi!')
-    .nullable(),
-  warehouse_ids: Yup.array()
-    .of(Yup.number().min(1))
-    .min(1, 'Minimal harus ada 1 warehouse!')
-    .required('Warehouse wajib diisi!'),
-  credit_term: Yup.number()
-    .required('Termin kredit wajib diisi!')
-    .min(0, 'Termin kredit tidak boleh negatif!')
-    .typeError('Termin kredit harus berupa angka!'),
-  notes: Yup.string().optional().nullable(),
-  purchase_items: Yup.array()
-    .of(
-      Yup.object({
-        product_id: Yup.number()
-          .required('Produk wajib diisi!')
-          .min(1, 'Produk wajib diisi!')
-          .typeError('Produk harus berupa angka!'),
-        product_warehouse_id: Yup.number()
-          .optional()
-          .nullable()
-          .typeError('Product warehouse harus berupa angka!'),
-        total_qty: Yup.number()
-          .required('Jumlah total wajib diisi!')
-          .min(0, 'Jumlah total tidak boleh negatif!')
-          .typeError('Jumlah total harus berupa angka!'),
-        price: Yup.number()
-          .required('Harga wajib diisi!')
-          .min(0, 'Harga tidak boleh negatif!')
-          .typeError('Harga harus berupa angka!'),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 item pembelian!')
-    .required('Item pembelian wajib diisi!'),
-});
+export const UpdatePurchaseRequestFormSchema = PurchaseRequestFormSchema;
 
 export type PurchaseRequestFormValues = Yup.InferType<
   typeof PurchaseRequestFormSchema
@@ -157,7 +101,7 @@ export const getPurchaseRequestFormInitialValues = (
   ) ?? [
     {
       product_id: 0,
-      product_warehouse_id: null,
+      product_warehouse_id: 0,
       total_qty: 0,
       price: 0,
     },
diff --git a/src/services/api/purchasing.ts b/src/services/api/purchasing.ts
index 71e6f60f..6f0fd8ee 100644
--- a/src/services/api/purchasing.ts
+++ b/src/services/api/purchasing.ts
@@ -3,7 +3,7 @@ import {
   CreatePurchasePayload,
   Purchase,
   UpdatePurchasePayload,
-} from '@/types/api/purchasing/purchasing';
+} from '@/types/api/purchase/purchasing';
 
 export const PurchaseApi = new BaseApiService<
   Purchase,
diff --git a/src/types/api/purchasing/purchasing.d.ts b/src/types/api/purchase/purchase.d.ts
similarity index 95%
rename from src/types/api/purchasing/purchasing.d.ts
rename to src/types/api/purchase/purchase.d.ts
index eea53e1d..afb6cc60 100644
--- a/src/types/api/purchasing/purchasing.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -26,7 +26,7 @@ export type CreatePurchaseRequestPayload = {
   notes?: string | null;
   purchase_items: {
     product_id: number;
-    product_warehouse_id?: number | null;
+    product_warehouse_id: number;
     total_qty: number;
     price: number;
   }[];

From b2c38cd06f29994ad7fca785af14178e50fe4196 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 29 Oct 2025 21:12:42 +0700
Subject: [PATCH 006/168] feat(FE-208): create PurchaseRequestForm component
 and add AddPurchaseRequest page

---
 src/app/purchase/add/page.tsx                 |  11 +
 .../purchase/form/PurchaseRequestForm.tsx     | 546 ++++++++++++++++++
 .../form/usePurchaseRequestFormHandlers.ts    |  70 +++
 3 files changed, 627 insertions(+)
 create mode 100644 src/app/purchase/add/page.tsx
 create mode 100644 src/components/pages/purchase/form/PurchaseRequestForm.tsx
 create mode 100644 src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts

diff --git a/src/app/purchase/add/page.tsx b/src/app/purchase/add/page.tsx
new file mode 100644
index 00000000..c69d3b10
--- /dev/null
+++ b/src/app/purchase/add/page.tsx
@@ -0,0 +1,11 @@
+import PurchaseRequestForm from '@/components/pages/purchase/form/PurchaseRequestForm';
+
+const AddPurchaseRequest = () => {
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      <PurchaseRequestForm />
+    </div>
+  );
+};
+
+export default AddPurchaseRequest;
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
new file mode 100644
index 00000000..03da06c6
--- /dev/null
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -0,0 +1,546 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import useSWR from 'swr';
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { FormActions } from '@/components/helper/form/FormActions';
+
+import {
+  PurchaseRequestFormSchema,
+  PurchaseRequestFormValues,
+  getPurchaseRequestFormInitialValues,
+  UpdatePurchaseRequestFormSchema,
+} from './PurchaseRequestForm.schema';
+import { SupplierApi } from '@/services/api/master-data';
+import { WarehouseApi } from '@/services/api/master-data';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { usePurchaseRequestFormHandlers } from './usePurchaseRequestFormHandlers';
+
+import Card from '@/components/Card';
+import {
+  CreatePurchaseRequestPayload,
+  Purchase,
+} from '@/types/api/purchase/purchase';
+
+interface PurchaseRequestFormProps {
+  type?: 'add' | 'edit' | 'detail';
+  initialValues?: Purchase;
+}
+
+const PurchaseRequestForm = ({
+  type = 'add',
+  initialValues,
+}: PurchaseRequestFormProps) => {
+  const [selectedPurchaseItems, setSelectedPurchaseItems] = useState<number[]>(
+    []
+  );
+
+  const {
+    deleteModal,
+    purchaseRequestFormErrorMessage,
+    isDeleteLoading,
+    createPurchaseRequestHandler,
+    updatePurchaseRequestHandler,
+    deletePurchaseRequestClickHandler,
+    confirmationModalDeleteClickHandler,
+  } = usePurchaseRequestFormHandlers(initialValues?.id);
+
+  // ===== API DATA FETCHING =====
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    SupplierApi.basePath,
+    SupplierApi.getAllFetcher
+  );
+
+  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+    WarehouseApi.basePath,
+    WarehouseApi.getAllFetcher
+  );
+
+  // ===== DATA PROCESSING =====
+  const supplierOptions = useMemo(() => {
+    if (!isResponseSuccess(suppliers)) return [];
+    return (
+      suppliers?.data.map((supplier) => ({
+        value: supplier.id,
+        label: supplier.name,
+      })) || []
+    );
+  }, [suppliers]);
+
+  const warehouseOptions = useMemo(() => {
+    if (!isResponseSuccess(warehouses)) return [];
+    return (
+      warehouses?.data.map((warehouse) => ({
+        value: warehouse.id,
+        label: warehouse.name,
+      })) || []
+    );
+  }, [warehouses]);
+
+  const formikInitialValues = useMemo<PurchaseRequestFormValues>(
+    () => getPurchaseRequestFormInitialValues(initialValues),
+    [initialValues]
+  );
+
+  const formik = useFormik<PurchaseRequestFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit'
+        ? UpdatePurchaseRequestFormSchema
+        : PurchaseRequestFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      const payload: CreatePurchaseRequestPayload = {
+        supplier_id: values.supplier_id,
+        warehouse_ids:
+          (values.warehouse_ids?.filter(
+            (id) => id !== undefined && id !== null
+          ) as number[]) || [],
+        credit_term: values.credit_term || 0,
+        notes: values.notes || '',
+        purchase_items: (values.purchase_items || []).map((item) => ({
+          product_id: item.product_id,
+          product_warehouse_id: item.product_warehouse_id,
+          total_qty:
+            typeof item.total_qty === 'number'
+              ? item.total_qty
+              : parseFloat(String(item.total_qty)) || 0,
+          price:
+            typeof item.price === 'number'
+              ? item.price
+              : parseFloat(String(item.price)) || 0,
+        })),
+      };
+
+      switch (type) {
+        case 'add':
+          await createPurchaseRequestHandler(payload);
+          break;
+        case 'edit':
+          await updatePurchaseRequestHandler(
+            initialValues?.id as number,
+            payload
+          );
+          break;
+      }
+    },
+  });
+
+  // ===== EVENT HANDLERS =====
+  const supplierChangeHandler = (val: string) => {
+    const supplierId = parseInt(val) || 0;
+    formik.setFieldValue('supplier_id', supplierId);
+
+    const selectedSupplier = supplierOptions.find(
+      (option) => option.value === supplierId
+    );
+    if (selectedSupplier) {
+      formik.setFieldValue('supplier', selectedSupplier);
+    } else {
+      formik.setFieldValue('supplier', null);
+    }
+  };
+
+  const warehouseChangeHandler = (val: string) => {
+    const warehouseId = parseInt(val) || 0;
+    const currentWarehouseIds = formik.values.warehouse_ids || [];
+
+    if (warehouseId > 0 && !currentWarehouseIds.includes(warehouseId)) {
+      const newWarehouseIds = [...currentWarehouseIds, warehouseId].filter(
+        (id) => id !== undefined && id !== null
+      );
+      formik.setFieldValue('warehouse_ids', newWarehouseIds);
+
+      const selectedWarehouse = warehouseOptions.find(
+        (option) => option.value === warehouseId
+      );
+      if (selectedWarehouse) {
+        const currentWarehouses = formik.values.warehouse || [];
+        formik.setFieldValue('warehouse', [
+          ...currentWarehouses,
+          selectedWarehouse,
+        ]);
+      }
+    }
+  };
+
+  // Purchase Items Handlers
+  const addPurchaseItem = () => {
+    const newPurchaseItems = [
+      ...(formik.values.purchase_items || []),
+      {
+        product_id: 0,
+        product_warehouse_id: null,
+        total_qty: 0,
+        price: 0,
+      },
+    ];
+    formik.setFieldValue('purchase_items', newPurchaseItems);
+  };
+
+  const removePurchaseItem = (idx: number) => {
+    const updatedPurchaseItems = formik.values.purchase_items?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('purchase_items', updatedPurchaseItems);
+  };
+
+  const removeSelectedPurchaseItems = () => {
+    const updatedPurchaseItems = formik.values.purchase_items?.filter(
+      (_, idx) => !selectedPurchaseItems.includes(idx)
+    );
+    formik.setFieldValue('purchase_items', updatedPurchaseItems);
+    setSelectedPurchaseItems([]);
+  };
+
+  const handlePurchaseItemChange = (
+    idx: number,
+    field: string,
+    value: string | number
+  ) => {
+    const numValue = typeof value === 'string' ? parseFloat(value) || 0 : value;
+    formik.setFieldValue(`purchase_items.${idx}.${field}`, numValue);
+  };
+
+  return (
+    <>
+      <section className='w-full'>
+        <FormHeader type={type} title='Purchase Request' backUrl='/purchase' />
+        <form
+          onSubmit={formik.handleSubmit}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Basic Info Card */}
+          <Card
+            title='Informasi Purchase Request'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              body: 'flex flex-col gap-6',
+            }}
+          >
+            <div
+              className={
+                type === 'detail'
+                  ? 'flex flex-col gap-6'
+                  : 'grid grid-cols-1 md:grid-cols-2 gap-6'
+              }
+            >
+              <TextInput
+                required
+                label='Supplier ID'
+                name='supplier_id'
+                value={formik.values.supplier_id}
+                onChange={(e) => supplierChangeHandler(e.target.value)}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.supplier_id &&
+                  Boolean(formik.errors.supplier_id)
+                }
+                errorMessage={formik.errors.supplier_id as string}
+                readOnly={type === 'detail'}
+                type='number'
+                placeholder='Masukkan Supplier ID'
+              />
+
+              <TextInput
+                label='Warehouse IDs'
+                name='warehouse_ids_input'
+                onChange={(e) => warehouseChangeHandler(e.target.value)}
+                onBlur={formik.handleBlur}
+                readOnly={type === 'detail'}
+                type='number'
+                placeholder='Tambahkan Warehouse ID'
+              />
+
+              <TextInput
+                required
+                label='Credit Term (hari)'
+                name='credit_term'
+                value={formik.values.credit_term}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.credit_term &&
+                  Boolean(formik.errors.credit_term)
+                }
+                errorMessage={formik.errors.credit_term as string}
+                readOnly={type === 'detail'}
+                type='number'
+                placeholder='Masukkan Credit Term'
+              />
+
+              <div className={type === 'detail' ? 'col-span-1' : 'col-span-2'}>
+                <TextInput
+                  label='Notes'
+                  name='notes'
+                  value={formik.values.notes || ''}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  isError={formik.touched.notes && Boolean(formik.errors.notes)}
+                  errorMessage={formik.errors.notes as string}
+                  readOnly={type === 'detail'}
+                  placeholder='Masukkan catatan'
+                />
+              </div>
+            </div>
+          </Card>
+
+          {/* Purchase Items Table */}
+          <Card
+            title='Item Pembelian'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <input
+                          type='checkbox'
+                          className='checkbox checkbox-sm'
+                          checked={
+                            formik.values.purchase_items?.length ===
+                              selectedPurchaseItems.length &&
+                            formik.values.purchase_items?.length > 0
+                          }
+                          onChange={(e) => {
+                            if (e.target.checked) {
+                              setSelectedPurchaseItems(
+                                formik.values.purchase_items?.map(
+                                  (_, idx) => idx
+                                ) ?? []
+                              );
+                            } else {
+                              setSelectedPurchaseItems([]);
+                            }
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Product ID
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>Product Warehouse ID</th>
+                    <th>
+                      Total Qty
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Price
+                      <span className='text-error'>*</span>
+                    </th>
+                    {type !== 'detail' && <th>Action</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.purchase_items?.map((item, idx) => (
+                    <tr key={`purchase-item-${idx}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <input
+                            type='checkbox'
+                            className='checkbox checkbox-sm'
+                            checked={selectedPurchaseItems.includes(idx)}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedPurchaseItems([
+                                  ...selectedPurchaseItems,
+                                  idx,
+                                ]);
+                              } else {
+                                setSelectedPurchaseItems(
+                                  selectedPurchaseItems.filter((i) => i !== idx)
+                                );
+                              }
+                            }}
+                          />
+                        </td>
+                      )}
+                      <td>
+                        <TextInput
+                          required
+                          name={`purchase_items.${idx}.product_id`}
+                          value={item.product_id}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'product_id',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          type='number'
+                          placeholder='Product ID'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`purchase_items.${idx}.product_warehouse_id`}
+                          value={item.product_warehouse_id || ''}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'product_warehouse_id',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          type='number'
+                          placeholder='Product Warehouse ID'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`purchase_items.${idx}.total_qty`}
+                          value={item.total_qty}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'total_qty',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          type='number'
+                          placeholder='Total Qty'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`purchase_items.${idx}.price`}
+                          value={item.price}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'price',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          type='number'
+                          placeholder='Price'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex justify-center'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removePurchaseItem(idx)}
+                            >
+                              <Icon
+                                icon='mdi:trash-can'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedPurchaseItems.length > 0 && (
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={removeSelectedPurchaseItems}
+                    disabled={selectedPurchaseItems.length === 0}
+                    className='w-fit'
+                  >
+                    <Icon icon='mdi:trash-can' width={24} height={24} />
+                    Hapus Terpilih ({selectedPurchaseItems.length})
+                  </Button>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addPurchaseItem}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Item
+                </Button>
+              </div>
+            )}
+          </Card>
+
+          {/* Action buttons */}
+          <FormActions<PurchaseRequestFormValues>
+            type={type}
+            formik={formik}
+            editUrl={
+              initialValues
+                ? `/purchase/detail/edit/?purchaseId=${initialValues.id}`
+                : undefined
+            }
+            onDelete={deletePurchaseRequestClickHandler}
+          />
+          {purchaseRequestFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseRequestFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text='Apakah anda yakin ingin menghapus data Purchase Request ini?'
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default PurchaseRequestForm;
diff --git a/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts b/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts
new file mode 100644
index 00000000..0594c0f8
--- /dev/null
+++ b/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts
@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-hot-toast';
+import { useModal } from '@/components/Modal';
+import { PurchaseApi } from '@/services/api/purchasing';
+import {
+  CreatePurchaseRequestPayload,
+  UpdatePurchaseRequestPayload,
+} from '@/types/api/purchase/purchasing';
+import { isResponseError } from '@/lib/api-helper';
+
+export const usePurchaseRequestFormHandlers = (initialValuesId?: number) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+  const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
+    useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const createPurchaseRequestHandler = useCallback(
+    async (payload: CreatePurchaseRequestPayload) => {
+      const res = await PurchaseApi.create(payload);
+      if (isResponseError(res)) {
+        setPurchaseRequestFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/purchase');
+    },
+    [router]
+  );
+
+  const updatePurchaseRequestHandler = useCallback(
+    async (purchaseRequestId: number, payload: UpdatePurchaseRequestPayload) => {
+      const res = await PurchaseApi.update(purchaseRequestId, payload);
+      if (res?.status === 'error') {
+        setPurchaseRequestFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/purchase');
+    },
+    [router]
+  );
+
+  const deletePurchaseRequestClickHandler = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    if (!initialValuesId) return;
+
+    setIsDeleteLoading(true);
+    await PurchaseApi.delete(initialValuesId);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Purchase Request!');
+    setIsDeleteLoading(false);
+    router.push('/purchase');
+  }, [deleteModal, initialValuesId, router]);
+
+  return {
+    deleteModal,
+    purchaseRequestFormErrorMessage,
+    isDeleteLoading,
+    createPurchaseRequestHandler,
+    updatePurchaseRequestHandler,
+    deletePurchaseRequestClickHandler,
+    confirmationModalDeleteClickHandler,
+  };
+};
\ No newline at end of file

From b0e8a460fddc30d65650785243cd9d0a6ac0ac36 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 30 Oct 2025 09:29:38 +0700
Subject: [PATCH 007/168] refactor(FE-208,212): update PurchaseRequestForm
 schema and component to handle warehouse IDs

---
 .../form/PurchaseRequestForm.schema.ts        | 55 ++++++------
 .../purchase/form/PurchaseRequestForm.tsx     | 84 +++++++++----------
 src/types/api/purchase/purchase.d.ts          |  2 +-
 3 files changed, 68 insertions(+), 73 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index 3b21b97a..204d3e46 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -9,28 +9,9 @@ export const PurchaseRequestFormSchema = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
   supplier_id: Yup.number()
-    .default(0)
-    .typeError('Supplier wajib diisi!')
-    .test(
-      'is-valid-supplier',
-      'Supplier wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Supplier wajib diisi!'),
-  warehouse: Yup.array()
-    .of(
-      Yup.object({
-        value: Yup.number().min(1).required(),
-        label: Yup.string().required(),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 warehouse!')
-    .required('Warehouse wajib diisi!')
-    .nullable(),
-  warehouse_ids: Yup.array()
-    .of(Yup.number().min(1))
-    .min(1, 'Minimal harus ada 1 warehouse!')
-    .required('Warehouse wajib diisi!'),
+    .required('Supplier wajib diisi!')
+    .min(1, 'Supplier wajib diisi!')
+    .typeError('Supplier wajib diisi!'),
   credit_term: Yup.number()
     .required('Termin kredit wajib diisi!')
     .min(1, 'Termin kredit tidak boleh negatif!')
@@ -39,6 +20,14 @@ export const PurchaseRequestFormSchema = Yup.object({
   purchase_items: Yup.array()
     .of(
       Yup.object({
+        warehouse: Yup.object({
+          value: Yup.number().min(1).required(),
+          label: Yup.string().required(),
+        }).nullable(),
+        warehouse_ids: Yup.number()
+          .required('Warehouse wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Warehouse harus berupa angka!'),
         product_id: Yup.number()
           .required('Produk wajib diisi!')
           .min(1, 'Produk wajib diisi!')
@@ -58,7 +47,8 @@ export const PurchaseRequestFormSchema = Yup.object({
       })
     )
     .min(1, 'Minimal harus ada 1 item pembelian!')
-    .required('Item pembelian wajib diisi!'),
+    .required('Item pembelian wajib diisi!')
+    .typeError('Item pembelian wajib diisi!'),
 });
 
 export const UpdatePurchaseRequestFormSchema = PurchaseRequestFormSchema;
@@ -83,16 +73,21 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : null,
   supplier_id: initialValues?.supplier_id ?? 0,
-  warehouse:
-    initialValues?.warehouse?.map((warehouse) => ({
-      value: warehouse.id,
-      label: warehouse.name,
-    })) ?? [],
-  warehouse_ids: initialValues?.warehouse_ids ?? [],
   credit_term: initialValues?.credit_term ?? 0,
   notes: initialValues?.notes ?? '',
   purchase_items: initialValues?.purchase_items?.map(
     (item: NonNullable<CreatePurchaseRequestPayload['purchase_items']>[0]) => ({
+      warehouse: initialValues?.warehouse?.find(
+        (w) => w.id === item.warehouse_ids
+      )
+        ? {
+            value: item.warehouse_ids,
+            label:
+              initialValues.warehouse.find((w) => w.id === item.warehouse_ids)
+                ?.name || '',
+          }
+        : null,
+      warehouse_ids: item.warehouse_ids,
       product_id: item.product_id,
       product_warehouse_id: item.product_warehouse_id,
       total_qty: item.total_qty,
@@ -100,6 +95,8 @@ export const getPurchaseRequestFormInitialValues = (
     })
   ) ?? [
     {
+      warehouse: null,
+      warehouse_ids: 0,
       product_id: 0,
       product_warehouse_id: 0,
       total_qty: 0,
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 03da06c6..bd0399d8 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -98,13 +98,10 @@ const PurchaseRequestForm = ({
     onSubmit: async (values) => {
       const payload: CreatePurchaseRequestPayload = {
         supplier_id: values.supplier_id,
-        warehouse_ids:
-          (values.warehouse_ids?.filter(
-            (id) => id !== undefined && id !== null
-          ) as number[]) || [],
         credit_term: values.credit_term || 0,
         notes: values.notes || '',
         purchase_items: (values.purchase_items || []).map((item) => ({
+          warehouse_ids: item.warehouse_ids,
           product_id: item.product_id,
           product_warehouse_id: item.product_warehouse_id,
           total_qty:
@@ -147,36 +144,14 @@ const PurchaseRequestForm = ({
     }
   };
 
-  const warehouseChangeHandler = (val: string) => {
-    const warehouseId = parseInt(val) || 0;
-    const currentWarehouseIds = formik.values.warehouse_ids || [];
-
-    if (warehouseId > 0 && !currentWarehouseIds.includes(warehouseId)) {
-      const newWarehouseIds = [...currentWarehouseIds, warehouseId].filter(
-        (id) => id !== undefined && id !== null
-      );
-      formik.setFieldValue('warehouse_ids', newWarehouseIds);
-
-      const selectedWarehouse = warehouseOptions.find(
-        (option) => option.value === warehouseId
-      );
-      if (selectedWarehouse) {
-        const currentWarehouses = formik.values.warehouse || [];
-        formik.setFieldValue('warehouse', [
-          ...currentWarehouses,
-          selectedWarehouse,
-        ]);
-      }
-    }
-  };
-
   // Purchase Items Handlers
   const addPurchaseItem = () => {
     const newPurchaseItems = [
       ...(formik.values.purchase_items || []),
       {
+        warehouse_ids: 0,
         product_id: 0,
-        product_warehouse_id: null,
+        product_warehouse_id: 0,
         total_qty: 0,
         price: 0,
       },
@@ -204,8 +179,13 @@ const PurchaseRequestForm = ({
     field: string,
     value: string | number
   ) => {
-    const numValue = typeof value === 'string' ? parseFloat(value) || 0 : value;
-    formik.setFieldValue(`purchase_items.${idx}.${field}`, numValue);
+    if (field === 'warehouse_ids') {
+      formik.setFieldValue(`purchase_items.${idx}.${field}`, value);
+    } else {
+      const numValue =
+        typeof value === 'string' ? parseFloat(value) || 0 : value;
+      formik.setFieldValue(`purchase_items.${idx}.${field}`, numValue);
+    }
   };
 
   return (
@@ -233,7 +213,7 @@ const PurchaseRequestForm = ({
             >
               <TextInput
                 required
-                label='Supplier ID'
+                label='Vendor'
                 name='supplier_id'
                 value={formik.values.supplier_id}
                 onChange={(e) => supplierChangeHandler(e.target.value)}
@@ -248,19 +228,9 @@ const PurchaseRequestForm = ({
                 placeholder='Masukkan Supplier ID'
               />
 
-              <TextInput
-                label='Warehouse IDs'
-                name='warehouse_ids_input'
-                onChange={(e) => warehouseChangeHandler(e.target.value)}
-                onBlur={formik.handleBlur}
-                readOnly={type === 'detail'}
-                type='number'
-                placeholder='Tambahkan Warehouse ID'
-              />
-
               <TextInput
                 required
-                label='Credit Term (hari)'
+                label='Jatuh tempo (hari)'
                 name='credit_term'
                 value={formik.values.credit_term}
                 onChange={formik.handleChange}
@@ -327,11 +297,18 @@ const PurchaseRequestForm = ({
                         />
                       </th>
                     )}
+                    <th>
+                      Warehouse ID
+                      <span className='text-error'>*</span>
+                    </th>
                     <th>
                       Product ID
                       <span className='text-error'>*</span>
                     </th>
-                    <th>Product Warehouse ID</th>
+                    <th>
+                      Product Warehouse ID
+                      <span className='text-error'>*</span>
+                    </th>
                     <th>
                       Total Qty
                       <span className='text-error'>*</span>
@@ -367,6 +344,27 @@ const PurchaseRequestForm = ({
                           />
                         </td>
                       )}
+                      <td>
+                        <TextInput
+                          required
+                          name={`purchase_items.${idx}.warehouse_ids`}
+                          value={item.warehouse_ids}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'warehouse_ids',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          type='number'
+                          placeholder='Warehouse IDs'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                        />
+                      </td>
                       <td>
                         <TextInput
                           required
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index afb6cc60..48a9df9e 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -21,10 +21,10 @@ export type Purchase = BaseMetadata & BasePurchase;
 
 export type CreatePurchaseRequestPayload = {
   supplier_id: number;
-  warehouse_ids: number[];
   credit_term: number;
   notes?: string | null;
   purchase_items: {
+    warehouse_ids: number;
     product_id: number;
     product_warehouse_id: number;
     total_qty: number;

From a8fee201332a9bbc3ab77acc0c7a554aa58ade6c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 30 Oct 2025 10:39:23 +0700
Subject: [PATCH 008/168] refactor(FE-208,212): enhance PurchaseRequestForm
 with product and product warehouse fields

---
 .../form/PurchaseRequestForm.schema.ts        | 50 ++++++++++++++-----
 .../purchase/form/PurchaseRequestForm.tsx     | 36 ++++++++-----
 .../form/usePurchaseRequestFormHandlers.ts    |  9 ++--
 src/services/api/purchasing.ts                | 10 ++--
 4 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index 204d3e46..c885af99 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -2,6 +2,8 @@ import * as Yup from 'yup';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { CreatePurchaseRequestPayload } from '@/types/api/purchase/purchase';
+import { Product } from '@/types/api/master-data/product';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 
 export const PurchaseRequestFormSchema = Yup.object({
   supplier: Yup.object({
@@ -28,10 +30,18 @@ export const PurchaseRequestFormSchema = Yup.object({
           .required('Warehouse wajib diisi!')
           .min(1, 'Produk wajib diisi!')
           .typeError('Warehouse harus berupa angka!'),
+        product: Yup.object({
+          value: Yup.number().min(1).required(),
+          label: Yup.string().required(),
+        }).nullable(),
         product_id: Yup.number()
           .required('Produk wajib diisi!')
           .min(1, 'Produk wajib diisi!')
           .typeError('Produk harus berupa angka!'),
+        product_warehouse: Yup.object({
+          value: Yup.number().min(1).required(),
+          label: Yup.string().required(),
+        }).nullable(),
         product_warehouse_id: Yup.number()
           .required('Product warehouse wajib diisi!')
           .min(1, 'Product warehouse wajib diisi!')
@@ -57,10 +67,16 @@ export type PurchaseRequestFormValues = Yup.InferType<
   typeof PurchaseRequestFormSchema
 >;
 
-type PurchaseRequestFormData = Partial<CreatePurchaseRequestPayload> & {
+type PurchaseRequestFormData = {
   supplier?: Supplier;
-  warehouse?: Warehouse[];
-  purchase_items?: CreatePurchaseRequestPayload['purchase_items'];
+  supplier_id?: number;
+  credit_term?: number;
+  notes?: string | null;
+  purchase_items?: (CreatePurchaseRequestPayload['purchase_items'][0] & {
+    warehouse?: Warehouse;
+    product?: Product;
+    product_warehouse?: ProductWarehouse;
+  })[];
 };
 
 export const getPurchaseRequestFormInitialValues = (
@@ -73,22 +89,30 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : null,
   supplier_id: initialValues?.supplier_id ?? 0,
-  credit_term: initialValues?.credit_term ?? 0,
+  credit_term: initialValues?.credit_term ?? 1,
   notes: initialValues?.notes ?? '',
   purchase_items: initialValues?.purchase_items?.map(
-    (item: NonNullable<CreatePurchaseRequestPayload['purchase_items']>[0]) => ({
-      warehouse: initialValues?.warehouse?.find(
-        (w) => w.id === item.warehouse_ids
-      )
+    (item: NonNullable<PurchaseRequestFormData['purchase_items']>[0]) => ({
+      warehouse: item.warehouse
         ? {
-            value: item.warehouse_ids,
-            label:
-              initialValues.warehouse.find((w) => w.id === item.warehouse_ids)
-                ?.name || '',
+            value: item.warehouse.id,
+            label: item.warehouse.name,
           }
         : null,
       warehouse_ids: item.warehouse_ids,
+      product: item.product
+        ? {
+            value: item.product.id,
+            label: item.product.name,
+          }
+        : null,
       product_id: item.product_id,
+      product_warehouse: item.product_warehouse
+        ? {
+            value: item.product_warehouse.id,
+            label: item.product_warehouse.product.name,
+          }
+        : null,
       product_warehouse_id: item.product_warehouse_id,
       total_qty: item.total_qty,
       price: item.price,
@@ -97,7 +121,9 @@ export const getPurchaseRequestFormInitialValues = (
     {
       warehouse: null,
       warehouse_ids: 0,
+      product: null,
       product_id: 0,
+      product_warehouse: null,
       product_warehouse_id: 0,
       total_qty: 0,
       price: 0,
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index bd0399d8..2c5c7b97 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -97,21 +97,18 @@ const PurchaseRequestForm = ({
     validateOnBlur: true,
     onSubmit: async (values) => {
       const payload: CreatePurchaseRequestPayload = {
-        supplier_id: values.supplier_id,
+        supplier_id: values.supplier_id || 0,
         credit_term: values.credit_term || 0,
         notes: values.notes || '',
         purchase_items: (values.purchase_items || []).map((item) => ({
-          warehouse_ids: item.warehouse_ids,
-          product_id: item.product_id,
-          product_warehouse_id: item.product_warehouse_id,
-          total_qty:
-            typeof item.total_qty === 'number'
-              ? item.total_qty
-              : parseFloat(String(item.total_qty)) || 0,
+          warehouse_ids: item.warehouse_ids || 0,
+          product_id: item.product_id || 0,
+          product_warehouse_id: item.product_warehouse_id || 0,
+          total_qty: item.total_qty || 0,
           price:
             typeof item.price === 'number'
               ? item.price
-              : parseFloat(String(item.price)) || 0,
+              : parseFloat(item.price) || 0,
         })),
       };
 
@@ -149,8 +146,11 @@ const PurchaseRequestForm = ({
     const newPurchaseItems = [
       ...(formik.values.purchase_items || []),
       {
+        warehouse: null,
         warehouse_ids: 0,
+        product: null,
         product_id: 0,
+        product_warehouse: null,
         product_warehouse_id: 0,
         total_qty: 0,
         price: 0,
@@ -179,12 +179,23 @@ const PurchaseRequestForm = ({
     field: string,
     value: string | number
   ) => {
-    if (field === 'warehouse_ids') {
-      formik.setFieldValue(`purchase_items.${idx}.${field}`, value);
-    } else {
+    const integerFields = [
+      'warehouse_ids',
+      'product_id',
+      'product_warehouse_id',
+      'total_qty',
+    ];
+    const floatFields = ['price'];
+
+    if (integerFields.includes(field)) {
+      const numValue = typeof value === 'string' ? parseInt(value) || 0 : value;
+      formik.setFieldValue(`purchase_items.${idx}.${field}`, numValue);
+    } else if (floatFields.includes(field)) {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
       formik.setFieldValue(`purchase_items.${idx}.${field}`, numValue);
+    } else {
+      formik.setFieldValue(`purchase_items.${idx}.${field}`, value);
     }
   };
 
@@ -388,6 +399,7 @@ const PurchaseRequestForm = ({
                       </td>
                       <td>
                         <TextInput
+                          required
                           name={`purchase_items.${idx}.product_warehouse_id`}
                           value={item.product_warehouse_id || ''}
                           onChange={(e) =>
diff --git a/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts b/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts
index 0594c0f8..c5fb1e48 100644
--- a/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts
+++ b/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts
@@ -6,7 +6,7 @@ import { PurchaseApi } from '@/services/api/purchasing';
 import {
   CreatePurchaseRequestPayload,
   UpdatePurchaseRequestPayload,
-} from '@/types/api/purchase/purchasing';
+} from '@/types/api/purchase/purchase';
 import { isResponseError } from '@/lib/api-helper';
 
 export const usePurchaseRequestFormHandlers = (initialValuesId?: number) => {
@@ -30,7 +30,10 @@ export const usePurchaseRequestFormHandlers = (initialValuesId?: number) => {
   );
 
   const updatePurchaseRequestHandler = useCallback(
-    async (purchaseRequestId: number, payload: UpdatePurchaseRequestPayload) => {
+    async (
+      purchaseRequestId: number,
+      payload: UpdatePurchaseRequestPayload
+    ) => {
       const res = await PurchaseApi.update(purchaseRequestId, payload);
       if (res?.status === 'error') {
         setPurchaseRequestFormErrorMessage(res.message);
@@ -67,4 +70,4 @@ export const usePurchaseRequestFormHandlers = (initialValuesId?: number) => {
     deletePurchaseRequestClickHandler,
     confirmationModalDeleteClickHandler,
   };
-};
\ No newline at end of file
+};
diff --git a/src/services/api/purchasing.ts b/src/services/api/purchasing.ts
index 6f0fd8ee..2ed23193 100644
--- a/src/services/api/purchasing.ts
+++ b/src/services/api/purchasing.ts
@@ -1,12 +1,12 @@
 import { BaseApiService } from './base';
 import {
-  CreatePurchasePayload,
+  CreatePurchaseRequestPayload,
   Purchase,
-  UpdatePurchasePayload,
-} from '@/types/api/purchase/purchasing';
+  UpdatePurchaseRequestPayload,
+} from '@/types/api/purchase/purchase';
 
 export const PurchaseApi = new BaseApiService<
   Purchase,
-  CreatePurchasePayload,
-  UpdatePurchasePayload
+  CreatePurchaseRequestPayload,
+  UpdatePurchaseRequestPayload
 >('/purchase-requests');

From 2307035717c7297634010a49368960368b72a860 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 30 Oct 2025 12:00:22 +0700
Subject: [PATCH 009/168] feat(FE-Storyless): add custom control component to
 SelectInput for adornment support

---
 src/components/input/SelectInput.tsx | 92 +++++++++++++++++-----------
 1 file changed, 57 insertions(+), 35 deletions(-)

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index f3eca7d1..d37dcab4 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -9,6 +9,8 @@ import Select, {
   InputActionMeta,
   MultiValue,
   SingleValue,
+  components as ReactSelectComponents,
+  ControlProps,
 } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
@@ -64,6 +66,33 @@ interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
 
 const animatedComponents = makeAnimated();
 
+const CustomControl = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: ControlProps<Option, IsMulti, Group>
+) => {
+  const { children } = props;
+
+  const customProps = props.selectProps as unknown as {
+    shouldShowAdornment?: boolean;
+    startAdornment?: ReactNode;
+  };
+
+  const shouldShowAdornment = customProps.shouldShowAdornment ?? false;
+  const startAdornment = customProps.startAdornment;
+
+  return (
+    <ReactSelectComponents.Control {...props}>
+      <div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
+        {shouldShowAdornment && startAdornment}
+        {children}
+      </div>
+    </ReactSelectComponents.Control>
+  );
+};
+
 const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const {
     label,
@@ -94,10 +123,18 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const [internalInputValue, setInternalInputValue] = useState('');
   const [debouncedInputValue] = useDebounce(internalInputValue, delay);
 
+  const shouldShowAdornment = startAdornment && !internalInputValue;
+
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-    return { ...base, IndicatorSeparator: () => null };
-  }, [isAnimated]);
+    const customComponents = { ...base, IndicatorSeparator: () => null };
+
+    if (startAdornment) {
+      customComponents.Control = CustomControl;
+    }
+
+    return customComponents;
+  }, [isAnimated, startAdornment]);
 
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
@@ -156,6 +193,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         menuIsOpen={openMenu}
         inputValue={internalInputValue}
         onInputChange={internalInputChangeHandler}
+        onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
         isDisabled={isDisabled}
         isLoading={isLoading}
@@ -165,17 +203,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         placeholder={placeholder}
         className={cn('w-full', className?.select)}
         classNames={{
-          control: ({ isFocused, isDisabled }) =>
-            cn(
-              'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
-              {
-                'border-red-500! ring-2 ring-red-200': isError,
-                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                'border-gray-300': !isError && !isFocused,
-                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-              }
-            ),
-          valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          ...(!startAdornment && {
+            control: ({ isFocused, isDisabled }) =>
+              cn(
+                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+                {
+                  'border-red-500! ring-2 ring-red-200': isError,
+                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                  'border-gray-300': !isError && !isFocused,
+                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                }
+              ),
+            valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          }),
           placeholder: () =>
             cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
           singleValue: () =>
@@ -212,29 +252,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         components={{
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
-          ...(startAdornment ? {
-            Control: ({ children, innerRef, innerProps, menuIsOpen, isFocused, isDisabled }) => (
-              <div
-                ref={innerRef}
-                {...innerProps}
-                className={cn(
-                  'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer! flex items-center',
-                  {
-                    'border-red-500! ring-2 ring-red-200': isError,
-                    'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                    'border-gray-300': !isError && !isFocused,
-                    'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-                  }
-                )}
-              >
-                <div className='flex-1 px-4! gap-1 flex items-center'>
-                  {startAdornment}
-                  {children}
-                </div>
-              </div>
-            ),
-          } : {}),
         }}
+        {...(startAdornment && {
+          shouldShowAdornment,
+          startAdornment,
+        })}
         menuPortalTarget={
           typeof document !== 'undefined' ? document.body : undefined
         }

From be68353b3869e4b821a24d4a3a3ff3cf007cef18 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 30 Oct 2025 12:50:56 +0700
Subject: [PATCH 010/168] feat(FE-114): add unique keys to SelectInput
 components in RecordingForm for improved rendering

---
 .../pages/production/recording/form/RecordingForm.tsx           | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 7f3e6e85..bb5db2a6 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -889,6 +889,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               <div>
                 <SelectInput
                   required
+                  key={`project-flock-${formik.values.project_flock_kandang_id}`}
                   label='Project Flock'
                   value={formik.values.project_flock_kandang ?? undefined}
                   onChange={projectFlockKandangChangeHandler}
@@ -1249,6 +1250,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <td>
                         <SelectInput
                           required
+                          key={`stock-product-${idx}-${stock.product_warehouse_id}`}
                           value={
                             unifiedStockProducts.find(
                               (product) =>

From c83ebd73bee84c3f6b43d8badd93d690e49e03fa Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 30 Oct 2025 13:08:36 +0700
Subject: [PATCH 011/168] refactor(FE-Storyless): remove unnecessary padding
 from badge styles for improved layout

---
 .../pages/production/recording/form/RecordingForm.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index bb5db2a6..d1aa97ae 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -432,7 +432,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           color={color}
           size='sm'
           className={{
-            badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5',
+            badge: 'whitespace-nowrap font-semibold text-xs px-2',
           }}
         >
           Periode {projectFlock.period}
@@ -461,7 +461,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             color='info'
             size='sm'
             className={{
-              badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5',
+              badge: 'whitespace-nowrap font-semibold text-xs px-2',
             }}
           >
             PAKAN
@@ -476,7 +476,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             color='secondary'
             size='sm'
             className={{
-              badge: 'whitespace-nowrap font-semibold text-xs px-2 py-0.5',
+              badge: 'whitespace-nowrap font-semibold text-xs px-2',
             }}
           >
             OVK

From a5f8eb60c68b5b1d6e6d1316439b45748799107a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 30 Oct 2025 13:32:32 +0700
Subject: [PATCH 012/168] fix(FE-Storyless): update SelectInput value handling
 to use undefined instead of null for better compatibility

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

diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index d37dcab4..b663b923 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -187,7 +187,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
-        value={value ?? (isMulti ? [] : null)}
+        value={value ?? (isMulti ? [] : undefined)}
         onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}

From 1d79e8de1de43b38b81c25deeeed908a50d71427 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 10:45:36 +0700
Subject: [PATCH 013/168] refactor(FE-Storyless): streamline RecordingForm
 component by native card and optimizing layout for better usability

---
 .../inventory/movement/form/MovementForm.tsx  | 1566 ++++++++---------
 1 file changed, 776 insertions(+), 790 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 28148706..438c09c6 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -32,6 +32,7 @@ import { MovementApi } from '@/services/api/inventory';
 import FileInput from '@/components/input/FileInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import Badge from '@/components/Badge';
+import Card from '@/components/Card';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -768,216 +769,270 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           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='grid grid-cols-1 md:grid-cols-2 gap-4'>
-                <TextInput
-                  required
-                  label='Alasan Transfer'
-                  name='transfer_reason'
-                  placeholder='Masukkan alasan transfer...'
-                  value={formik.values.transfer_reason}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.transfer_reason &&
-                    Boolean(formik.errors.transfer_reason)
-                  }
-                  errorMessage={formik.errors.transfer_reason}
-                  readOnly={type === 'detail'}
-                />
-                <TextInput
-                  required
-                  label='Tanggal Transfer'
-                  type='date'
-                  name='transfer_date'
-                  value={formik.values.transfer_date}
-                  onChange={formik.handleChange}
-                  onBlur={formik.handleBlur}
-                  isError={
-                    formik.touched.transfer_date &&
-                    Boolean(formik.errors.transfer_date)
-                  }
-                  errorMessage={formik.errors.transfer_date}
-                  readOnly={type === 'detail'}
-                />
-              </div>
+          <Card
+            title='Detail Movement'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              body: 'flex flex-col gap-6',
+            }}
+          >
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+              <TextInput
+                required
+                label='Alasan Transfer'
+                name='transfer_reason'
+                placeholder='Masukkan alasan transfer...'
+                value={formik.values.transfer_reason}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.transfer_reason &&
+                  Boolean(formik.errors.transfer_reason)
+                }
+                errorMessage={formik.errors.transfer_reason}
+                readOnly={type === 'detail'}
+              />
+              <TextInput
+                required
+                label='Tanggal Transfer'
+                type='date'
+                name='transfer_date'
+                value={formik.values.transfer_date}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.transfer_date &&
+                  Boolean(formik.errors.transfer_date)
+                }
+                errorMessage={formik.errors.transfer_date}
+                readOnly={type === 'detail'}
+              />
             </div>
-          </div>
+          </Card>
 
           {/* Warehouse cards */}
           <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>
-                <SelectInput
-                  required
-                  label='Gudang'
-                  placeholder='Pilih gudang asal...'
-                  value={formik.values.source_warehouse}
-                  onChange={(val) => {
-                    formik.setFieldTouched('source_warehouse', true);
-                    formik.setFieldValue('source_warehouse', val);
-                    formik.setFieldTouched('source_warehouse_id', true);
-                    formik.setFieldValue(
-                      'source_warehouse_id',
-                      (val as WarehouseOptionType)?.value
-                    );
+            <Card
+              title='Gudang Asal'
+              className={{
+                wrapper: 'w-full shadow',
+                body: 'space-y-4',
+              }}
+            >
+              <SelectInput
+                required
+                label='Gudang'
+                placeholder='Pilih gudang asal...'
+                value={formik.values.source_warehouse}
+                onChange={(val) => {
+                  formik.setFieldTouched('source_warehouse', true);
+                  formik.setFieldValue('source_warehouse', val);
+                  formik.setFieldTouched('source_warehouse_id', true);
+                  formik.setFieldValue(
+                    'source_warehouse_id',
+                    (val as WarehouseOptionType)?.value
+                  );
+                }}
+                options={warehouseOptions}
+                onInputChange={setWarehouseSelectInputValue}
+                isLoading={isLoadingWarehouses}
+                isError={
+                  formik.touched.source_warehouse_id &&
+                  Boolean(formik.errors.source_warehouse_id)
+                }
+                errorMessage={formik.errors.source_warehouse_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                startAdornment={
+                  formik.values.source_warehouse_id
+                    ? getWarehouseStockAdornment(
+                        formik.values.source_warehouse_id
+                      )
+                    : undefined
+                }
+              />
+
+              {/* Area and Location Info */}
+              <div className='space-y-4'>
+                <TextInput
+                  label='Area'
+                  name='source_warehouse_area'
+                  value={
+                    (formik.values.source_warehouse as WarehouseOptionType)
+                      ?.area || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
                   }}
-                  options={warehouseOptions}
-                  onInputChange={setWarehouseSelectInputValue}
-                  isLoading={isLoadingWarehouses}
-                  isError={
-                    formik.touched.source_warehouse_id &&
-                    Boolean(formik.errors.source_warehouse_id)
-                  }
-                  errorMessage={formik.errors.source_warehouse_id as string}
-                  isDisabled={type === 'detail'}
-                  isClearable
-                  startAdornment={
-                    formik.values.source_warehouse_id
-                      ? getWarehouseStockAdornment(
-                          formik.values.source_warehouse_id
-                        )
-                      : undefined
-                  }
                 />
-
-                {/* Area and Location Info */}
-                <div className='space-y-4'>
-                  <TextInput
-                    label='Area'
-                    name='source_warehouse_area'
-                    value={
-                      (formik.values.source_warehouse as WarehouseOptionType)
-                        ?.area || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                  <TextInput
-                    label='Lokasi'
-                    name='source_warehouse_location'
-                    value={
-                      (formik.values.source_warehouse as WarehouseOptionType)
-                        ?.location || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div className='card bg-base-100 shadow'>
-              <div className='card-body space-y-4'>
-                <h3 className='card-title text-lg'>Gudang Tujuan</h3>
-                <SelectInput
-                  required
-                  label='Gudang'
-                  placeholder='Pilih gudang tujuan...'
-                  value={formik.values.destination_warehouse}
-                  onChange={(val) => {
-                    formik.setFieldTouched('destination_warehouse', true);
-                    formik.setFieldValue('destination_warehouse', val);
-                    formik.setFieldTouched('destination_warehouse_id', true);
-                    formik.setFieldValue(
-                      'destination_warehouse_id',
-                      (val as WarehouseOptionType)?.value
-                    );
+                <TextInput
+                  label='Lokasi'
+                  name='source_warehouse_location'
+                  value={
+                    (formik.values.source_warehouse as WarehouseOptionType)
+                      ?.location || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
                   }}
-                  options={warehouseOptions}
-                  onInputChange={setWarehouseSelectInputValue}
-                  isLoading={isLoadingWarehouses}
-                  isError={
-                    formik.touched.destination_warehouse_id &&
-                    Boolean(formik.errors.destination_warehouse_id)
-                  }
-                  errorMessage={
-                    formik.errors.destination_warehouse_id as string
-                  }
-                  isDisabled={type === 'detail'}
-                  isClearable
-                  startAdornment={
-                    formik.values.destination_warehouse_id
-                      ? getWarehouseStockAdornment(
-                          formik.values.destination_warehouse_id
-                        )
-                      : undefined
-                  }
                 />
-
-                {/* Area and Location Info */}
-                <div className='space-y-4'>
-                  <TextInput
-                    label='Area'
-                    name='destination_warehouse_area'
-                    value={
-                      (
-                        formik.values
-                          .destination_warehouse as WarehouseOptionType
-                      )?.area || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                  <TextInput
-                    label='Lokasi'
-                    name='destination_warehouse_location'
-                    value={
-                      (
-                        formik.values
-                          .destination_warehouse as WarehouseOptionType
-                      )?.location || '-'
-                    }
-                    readOnly
-                    disabled
-                    className={{
-                      input: 'bg-base-200',
-                    }}
-                  />
-                </div>
               </div>
-            </div>
+            </Card>
+
+            <Card
+              title='Gudang Tujuan'
+              className={{
+                wrapper: 'w-full shadow',
+                body: 'space-y-4',
+              }}
+            >
+              <SelectInput
+                required
+                label='Gudang'
+                placeholder='Pilih gudang tujuan...'
+                value={formik.values.destination_warehouse}
+                onChange={(val) => {
+                  formik.setFieldTouched('destination_warehouse', true);
+                  formik.setFieldValue('destination_warehouse', val);
+                  formik.setFieldTouched('destination_warehouse_id', true);
+                  formik.setFieldValue(
+                    'destination_warehouse_id',
+                    (val as WarehouseOptionType)?.value
+                  );
+                }}
+                options={warehouseOptions}
+                onInputChange={setWarehouseSelectInputValue}
+                isLoading={isLoadingWarehouses}
+                isError={
+                  formik.touched.destination_warehouse_id &&
+                  Boolean(formik.errors.destination_warehouse_id)
+                }
+                errorMessage={formik.errors.destination_warehouse_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+                startAdornment={
+                  formik.values.destination_warehouse_id
+                    ? getWarehouseStockAdornment(
+                        formik.values.destination_warehouse_id
+                      )
+                    : undefined
+                }
+              />
+
+              {/* Area and Location Info */}
+              <div className='space-y-4'>
+                <TextInput
+                  label='Area'
+                  name='destination_warehouse_area'
+                  value={
+                    (formik.values.destination_warehouse as WarehouseOptionType)
+                      ?.area || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
+                  }}
+                />
+                <TextInput
+                  label='Lokasi'
+                  name='destination_warehouse_location'
+                  value={
+                    (formik.values.destination_warehouse as WarehouseOptionType)
+                      ?.location || '-'
+                  }
+                  readOnly
+                  disabled
+                  className={{
+                    input: 'bg-base-200',
+                  }}
+                />
+              </div>
+            </Card>
           </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>
-                      {type !== 'detail' && (
-                        <th>
-                          <CheckboxInput
-                            name='select-all-products'
-                            checked={
-                              formik.values.products?.length ===
-                                selectedProducts.length &&
-                              formik.values.products?.length > 0
+          <Card
+            title='Produk'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <CheckboxInput
+                          name='select-all-products'
+                          checked={
+                            formik.values.products?.length ===
+                              selectedProducts.length &&
+                            formik.values.products?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedProducts(
+                                formik.values.products?.map((_, idx) => idx) ??
+                                  []
+                              );
+                            } else {
+                              setSelectedProducts([]);
                             }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Produk
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Qty
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Aksi</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.products?.map((product, idx) => (
+                    <tr key={`product-row-${idx}-${product.product_id}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`product-${idx}`}
+                            checked={selectedProducts.includes(idx)}
                             onChange={(
                               e: React.ChangeEvent<HTMLInputElement>
                             ) => {
                               if (e.target.checked) {
-                                setSelectedProducts(
-                                  formik.values.products?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
+                                setSelectedProducts([...selectedProducts, idx]);
                               } else {
-                                setSelectedProducts([]);
+                                setSelectedProducts(
+                                  selectedProducts.filter((i) => i !== idx)
+                                );
                               }
                             }}
                             classNames={{
@@ -985,221 +1040,262 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
-                        </th>
+                        </td>
+                      )}
+                      <td>
+                        <SelectInput
+                          required
+                          value={product.product ?? undefined}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `products.${idx}.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `products.${idx}.product`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `products.${idx}.product_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `products.${idx}.product_id`,
+                              (val as ProductWarehouseOptionType)?.value
+                            );
+                          }}
+                          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',
+                            'product_id',
+                            idx
+                          )}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`products.${idx}.product_qty`}
+                          placeholder='Masukkan kuantitas...'
+                          value={product.product_qty ?? ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          bottomLabel={getProductQtyBottomLabel(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-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeProduct(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
                       )}
-                      <th>
-                        Produk
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Qty
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Aksi</th>}
                     </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.products?.map((product, idx) => (
-                      <tr key={`product-row-${idx}-${product.product_id}`}>
-                        {type !== 'detail' && (
-                          <td className='!align-middle'>
-                            <CheckboxInput
-                              name={`product-${idx}`}
-                              checked={selectedProducts.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedProducts([
-                                    ...selectedProducts,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedProducts(
-                                    selectedProducts.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            value={product.product ?? undefined}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `products.${idx}.product`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `products.${idx}.product`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `products.${idx}.product_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `products.${idx}.product_id`,
-                                (val as ProductWarehouseOptionType)?.value
-                              );
-                            }}
-                            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',
-                              'product_id',
-                              idx
-                            )}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`products.${idx}.product_qty`}
-                            placeholder='Masukkan kuantitas...'
-                            value={product.product_qty ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            bottomLabel={getProductQtyBottomLabel(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-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeProduct(idx)}
-                              >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
-                              </Button>
-                            </div>
-                          </td>
-                        )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <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>
-                  )}
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedProducts.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addProduct}
+                    color='error'
+                    onClick={bulkRemoveProduct}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Produk
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Hapus Produk Terpilih ({selectedProducts.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addProduct}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Produk
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Deliveries table */}
-          <div className='card bg-base-100 shadow mb-4'>
-            <div className='card-body'>
-              <h2 className='card-title mb-8'>Pengiriman</h2>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      {type !== 'detail' && (
-                        <th>
-                          <CheckboxInput
-                            name='select-all-deliveries'
-                            checked={
-                              formik.values.deliveries?.length ===
-                                selectedDeliveries.length &&
-                              formik.values.deliveries?.length > 0
+          <Card
+            title='Pengiriman'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-8',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    {type !== 'detail' && (
+                      <th>
+                        <CheckboxInput
+                          name='select-all-deliveries'
+                          checked={
+                            formik.values.deliveries?.length ===
+                              selectedDeliveries.length &&
+                            formik.values.deliveries?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedDeliveries(
+                                formik.values.deliveries?.map(
+                                  (_, idx) => idx
+                                ) ?? []
+                              );
+                            } else {
+                              setSelectedDeliveries([]);
                             }
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
+                      </th>
+                    )}
+                    <th>
+                      Produk
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Qty
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Supplier
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Plat Nomor
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>Dokumen</th>
+                    <th>
+                      Biaya Pengiriman (Rp.)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Biaya Per Item (Rp.)
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    <th>
+                      Nama Sopir
+                      <span
+                        className='tooltip tooltip-error tooltip-bottom z-[9999]'
+                        data-tip='required'
+                      >
+                        <span className='text-error'>*</span>
+                      </span>
+                    </th>
+                    {type !== 'detail' && <th>Aksi</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.deliveries?.map((delivery, idx) => (
+                    <tr key={`delivery-row-${idx}`}>
+                      {type !== 'detail' && (
+                        <td className='!align-middle'>
+                          <CheckboxInput
+                            name={`delivery-${idx}`}
+                            checked={selectedDeliveries.includes(idx)}
                             onChange={(
                               e: React.ChangeEvent<HTMLInputElement>
                             ) => {
                               if (e.target.checked) {
-                                setSelectedDeliveries(
-                                  formik.values.deliveries?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
+                                setSelectedDeliveries([
+                                  ...selectedDeliveries,
+                                  idx,
+                                ]);
                               } else {
-                                setSelectedDeliveries([]);
+                                setSelectedDeliveries(
+                                  selectedDeliveries.filter((i) => i !== idx)
+                                );
                               }
                             }}
                             classNames={{
@@ -1207,417 +1303,307 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
-                        </th>
+                        </td>
                       )}
-                      <th>
-                        Produk
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Qty
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Supplier
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Plat Nomor
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>Dokumen</th>
-                      <th>
-                        Biaya Pengiriman (Rp.)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Biaya Per Item (Rp.)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Nama Sopir
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      {type !== 'detail' && <th>Aksi</th>}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {formik.values.deliveries?.map((delivery, idx) => (
-                      <tr key={`delivery-row-${idx}`}>
-                        {type !== 'detail' && (
-                          <td className='!align-middle'>
-                            <CheckboxInput
-                              name={`delivery-${idx}`}
-                              checked={selectedDeliveries.includes(idx)}
-                              onChange={(
-                                e: React.ChangeEvent<HTMLInputElement>
-                              ) => {
-                                if (e.target.checked) {
-                                  setSelectedDeliveries([
-                                    ...selectedDeliveries,
-                                    idx,
-                                  ]);
-                                } else {
-                                  setSelectedDeliveries(
-                                    selectedDeliveries.filter((i) => i !== idx)
-                                  );
-                                }
-                              }}
-                              classNames={{
-                                wrapper: 'flex justify-center',
-                                checkbox: 'checkbox checkbox-sm',
-                              }}
-                            />
-                          </td>
-                        )}
-                        <td>
-                          <SelectInput
-                            required
-                            placeholder='Pilih produk...'
-                            value={delivery.products[0]?.product ?? undefined}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.products.0.product`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.products.0.product`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.products.0.product_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.products.0.product_id`,
-                                (val as OptionType)?.value
-                              );
-                            }}
-                            options={getFilteredProductWarehouseOptions()}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            isError={
-                              isDeliveryProductInputError(idx, 0, 'product_id')
-                                .isError
-                            }
-                            errorMessage={
-                              isDeliveryProductInputError(idx, 0, 'product_id')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.products.0.product_qty`}
-                            placeholder='Masukkan kuantitas...'
-                            value={delivery.products[0]?.product_qty ?? ''}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            isError={
-                              isDeliveryProductInputError(idx, 0, 'product_qty')
-                                .isError || Boolean(getDeliveryQtyError(idx, 0))
-                            }
-                            errorMessage={
-                              isDeliveryProductInputError(idx, 0, 'product_qty')
-                                .errorMessage ||
-                              getDeliveryQtyError(idx, 0) ||
-                              undefined
-                            }
-                            bottomLabel={getDeliveryProductQtyBottomLabel(
-                              idx,
-                              0
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper: 'w-full min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <SelectInput
-                            required
-                            placeholder='Pilih supplier...'
-                            value={delivery.supplier}
-                            onChange={(val) => {
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.supplier`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.supplier`,
-                                val
-                              );
-                              formik.setFieldTouched(
-                                `deliveries.${idx}.supplier_id`,
-                                true
-                              );
-                              formik.setFieldValue(
-                                `deliveries.${idx}.supplier_id`,
-                                (val as OptionType)?.value
-                              );
-                            }}
-                            options={supplierOptions}
-                            onInputChange={setSupplierSelectInputValue}
-                            isLoading={isLoadingSuppliers}
-                            isDisabled={type === 'detail'}
-                            isClearable
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'supplier_id',
-                              idx
-                            )}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`deliveries.${idx}.vehicle_plate`}
-                            placeholder='Masukkan plat nomor...'
-                            value={delivery.vehicle_plate}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'vehicle_plate',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          {type === 'detail' ? (
-                            <>
-                              <div className='flex flex-col items-start gap-2'>
-                                <Button
-                                  color='primary'
-                                  className='w-full min-w-52 flex items-center justify-center gap-2'
-                                  disabled={!delivery.document_path}
-                                  href={delivery.document_path ?? undefined}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                >
-                                  {delivery.document_path ? (
-                                    <>
-                                      <Icon
-                                        icon='material-symbols:file-open-outline'
-                                        width={20}
-                                        height={20}
-                                      />
-                                      Lihat Dokumen
-                                    </>
-                                  ) : (
-                                    '-'
-                                  )}
-                                </Button>
-                              </div>
-                            </>
-                          ) : (
-                            <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!'
-                                    );
-                                    e.target.value = '';
-                                    return;
-                                  }
-                                  formik.setFieldValue(
-                                    `deliveries.${idx}.document`,
-                                    file
-                                  );
-                                }
-                              }}
-                              {...isRepeaterInputError(
-                                'deliveries',
-                                'document',
-                                idx
-                              )}
-                              className={{
-                                wrapper:
-                                  'w-full min-w-72 md:w-min-80 lg:w-min-96',
-                              }}
-                            />
+                      <td>
+                        <SelectInput
+                          required
+                          placeholder='Pilih produk...'
+                          value={delivery.products[0]?.product ?? undefined}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.products.0.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.products.0.product`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.products.0.product_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.products.0.product_id`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          options={getFilteredProductWarehouseOptions()}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          isError={
+                            isDeliveryProductInputError(idx, 0, 'product_id')
+                              .isError
+                          }
+                          errorMessage={
+                            isDeliveryProductInputError(idx, 0, 'product_id')
+                              .errorMessage
+                          }
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.products.0.product_qty`}
+                          placeholder='Masukkan kuantitas...'
+                          value={delivery.products[0]?.product_qty ?? ''}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          isError={
+                            isDeliveryProductInputError(idx, 0, 'product_qty')
+                              .isError || Boolean(getDeliveryQtyError(idx, 0))
+                          }
+                          errorMessage={
+                            isDeliveryProductInputError(idx, 0, 'product_qty')
+                              .errorMessage ||
+                            getDeliveryQtyError(idx, 0) ||
+                            undefined
+                          }
+                          bottomLabel={getDeliveryProductQtyBottomLabel(idx, 0)}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-48',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <SelectInput
+                          required
+                          placeholder='Pilih supplier...'
+                          value={delivery.supplier}
+                          onChange={(val) => {
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.supplier`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.supplier`,
+                              val
+                            );
+                            formik.setFieldTouched(
+                              `deliveries.${idx}.supplier_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `deliveries.${idx}.supplier_id`,
+                              (val as OptionType)?.value
+                            );
+                          }}
+                          options={supplierOptions}
+                          onInputChange={setSupplierSelectInputValue}
+                          isLoading={isLoadingSuppliers}
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'supplier_id',
+                            idx
                           )}
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.delivery_cost`}
-                            placeholder='Masukkan biaya pengiriman...'
-                            value={delivery.delivery_cost || ''}
-                            onChange={handleDeliveryCostChangeWrapper(idx)}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix='Rp'
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'delivery_cost',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`deliveries.${idx}.delivery_cost_per_item`}
-                            placeholder='Masukkan biaya per item...'
-                            value={delivery.delivery_cost_per_item || ''}
-                            onChange={handleDeliveryCostPerItemChangeWrapper(
-                              idx
-                            )}
-                            onBlur={formik.handleBlur}
-                            decimalScale={0}
-                            allowNegative={false}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix='Rp'
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'delivery_cost_per_item',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`deliveries.${idx}.driver_name`}
-                            placeholder='Masukkan nama sopir...'
-                            value={delivery.driver_name}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            {...isRepeaterInputError(
-                              'deliveries',
-                              'driver_name',
-                              idx
-                            )}
-                            readOnly={type === 'detail'}
-                            className={{
-                              wrapper:
-                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        {type !== 'detail' && (
-                          <td>
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`deliveries.${idx}.vehicle_plate`}
+                          placeholder='Masukkan plat nomor...'
+                          value={delivery.vehicle_plate}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'vehicle_plate',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        {type === 'detail' ? (
+                          <>
                             <div className='flex flex-col items-start gap-2'>
                               <Button
-                                type='button'
-                                color='error'
-                                onClick={() => removeDelivery(idx)}
+                                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'
                               >
-                                <Icon
-                                  icon='material-symbols:delete-outline-rounded'
-                                  width={24}
-                                  height={24}
-                                />
+                                {delivery.document_path ? (
+                                  <>
+                                    <Icon
+                                      icon='material-symbols:file-open-outline'
+                                      width={20}
+                                      height={20}
+                                    />
+                                    Lihat Dokumen
+                                  </>
+                                ) : (
+                                  '-'
+                                )}
                               </Button>
                             </div>
-                          </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!');
+                                  e.target.value = '';
+                                  return;
+                                }
+                                formik.setFieldValue(
+                                  `deliveries.${idx}.document`,
+                                  file
+                                );
+                              }
+                            }}
+                            {...isRepeaterInputError(
+                              'deliveries',
+                              'document',
+                              idx
+                            )}
+                            className={{
+                              wrapper:
+                                'w-full min-w-72 md:w-min-80 lg:w-min-96',
+                            }}
+                          />
                         )}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {type !== 'detail' && (
-                <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedDeliveries.length > 0 && (
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={bulkRemoveDelivery}
-                      className='w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                      />
-                      Hapus Pengiriman Terpilih ({selectedDeliveries.length})
-                    </Button>
-                  )}
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.delivery_cost`}
+                          placeholder='Masukkan biaya pengiriman...'
+                          value={delivery.delivery_cost || ''}
+                          onChange={handleDeliveryCostChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix='Rp'
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'delivery_cost',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`deliveries.${idx}.delivery_cost_per_item`}
+                          placeholder='Masukkan biaya per item...'
+                          value={delivery.delivery_cost_per_item || ''}
+                          onChange={handleDeliveryCostPerItemChangeWrapper(idx)}
+                          onBlur={formik.handleBlur}
+                          decimalScale={0}
+                          allowNegative={false}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix='Rp'
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'delivery_cost_per_item',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`deliveries.${idx}.driver_name`}
+                          placeholder='Masukkan nama sopir...'
+                          value={delivery.driver_name}
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          {...isRepeaterInputError(
+                            'deliveries',
+                            'driver_name',
+                            idx
+                          )}
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      {type !== 'detail' && (
+                        <td>
+                          <div className='flex flex-col items-start gap-2'>
+                            <Button
+                              type='button'
+                              color='error'
+                              onClick={() => removeDelivery(idx)}
+                            >
+                              <Icon
+                                icon='material-symbols:delete-outline-rounded'
+                                width={24}
+                                height={24}
+                              />
+                            </Button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {type !== 'detail' && (
+              <div className='flex justify-center items-center mt-4 gap-4'>
+                {selectedDeliveries.length > 0 && (
                   <Button
                     type='button'
-                    color='success'
-                    onClick={addDelivery}
+                    color='error'
+                    onClick={bulkRemoveDelivery}
                     className='w-fit'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Pengiriman
+                    <Icon
+                      icon='material-symbols:delete-outline-rounded'
+                      width={24}
+                      height={24}
+                    />
+                    Hapus Pengiriman Terpilih ({selectedDeliveries.length})
                   </Button>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addDelivery}
+                  className='w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah Pengiriman
+                </Button>
+              </div>
+            )}
+          </Card>
 
           {/* Action buttons */}
           <div className='flex flex-row justify-between gap-2 flex-wrap'>

From b4a9c86c2a6936f20744cebeaac89b9313b11af1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 11:04:07 +0700
Subject: [PATCH 014/168] refactor(FE-212): update PurchaseRequestForm schema
 and validation, streamline warehouse handling and add sub quantity field

---
 .../form/PurchaseRequestForm.schema.ts        |  31 +++--
 .../purchase/form/PurchaseRequestForm.tsx     | 117 ++++++++++++++----
 .../form/usePurchaseRequestFormHandlers.ts    |  73 -----------
 src/types/api/purchase/purchase.d.ts          |   8 +-
 4 files changed, 111 insertions(+), 118 deletions(-)
 delete mode 100644 src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index c885af99..cc53de7a 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -26,9 +26,9 @@ export const PurchaseRequestFormSchema = Yup.object({
           value: Yup.number().min(1).required(),
           label: Yup.string().required(),
         }).nullable(),
-        warehouse_ids: Yup.number()
+        warehouse_id: Yup.number()
           .required('Warehouse wajib diisi!')
-          .min(1, 'Produk wajib diisi!')
+          .min(1, 'Warehouse wajib diisi!')
           .typeError('Warehouse harus berupa angka!'),
         product: Yup.object({
           value: Yup.number().min(1).required(),
@@ -42,17 +42,14 @@ export const PurchaseRequestFormSchema = Yup.object({
           value: Yup.number().min(1).required(),
           label: Yup.string().required(),
         }).nullable(),
-        product_warehouse_id: Yup.number()
-          .required('Product warehouse wajib diisi!')
-          .min(1, 'Product warehouse wajib diisi!')
-          .typeError('Product warehouse harus berupa angka!'),
-        total_qty: Yup.number()
-          .required('Jumlah total wajib diisi!')
-          .min(1, 'Jumlah total tidak boleh negatif!')
-          .typeError('Jumlah total harus berupa angka!'),
+        product_warehouse_id: Yup.number().optional().nullable(),
+        sub_qty: Yup.number()
+          .required('Sub Qty wajib diisi!')
+          .min(0.001, 'Sub Qty tidak boleh negatif!')
+          .typeError('Sub Qty harus berupa angka!'),
         price: Yup.number()
           .required('Harga wajib diisi!')
-          .min(1, 'Harga tidak boleh negatif!')
+          .min(0, 'Harga tidak boleh negatif!')
           .typeError('Harga harus berupa angka!'),
       })
     )
@@ -99,7 +96,7 @@ export const getPurchaseRequestFormInitialValues = (
             label: item.warehouse.name,
           }
         : null,
-      warehouse_ids: item.warehouse_ids,
+      warehouse_id: item.warehouse_id,
       product: item.product
         ? {
             value: item.product.id,
@@ -113,19 +110,19 @@ export const getPurchaseRequestFormInitialValues = (
             label: item.product_warehouse.product.name,
           }
         : null,
-      product_warehouse_id: item.product_warehouse_id,
-      total_qty: item.total_qty,
+      product_warehouse_id: item.product_warehouse_id || null,
+      sub_qty: item.sub_qty,
       price: item.price,
     })
   ) ?? [
     {
       warehouse: null,
-      warehouse_ids: 0,
+      warehouse_id: 0,
       product: null,
       product_id: 0,
       product_warehouse: null,
-      product_warehouse_id: 0,
-      total_qty: 0,
+      product_warehouse_id: null,
+      sub_qty: 0,
       price: 0,
     },
   ],
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 2c5c7b97..21b0ca03 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -1,12 +1,15 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
+import { useRouter } from 'next/navigation';
 import { Icon } from '@iconify/react';
+import { toast } from 'react-hot-toast';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { useModal } from '@/components/Modal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import { FormActions } from '@/components/helper/form/FormActions';
 
@@ -18,8 +21,8 @@ import {
 } from './PurchaseRequestForm.schema';
 import { SupplierApi } from '@/services/api/master-data';
 import { WarehouseApi } from '@/services/api/master-data';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { usePurchaseRequestFormHandlers } from './usePurchaseRequestFormHandlers';
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { PurchaseApi } from '@/services/api/purchasing';
 
 import Card from '@/components/Card';
 import {
@@ -36,19 +39,61 @@ const PurchaseRequestForm = ({
   type = 'add',
   initialValues,
 }: PurchaseRequestFormProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
   const [selectedPurchaseItems, setSelectedPurchaseItems] = useState<number[]>(
     []
   );
+  const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
+    useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const {
-    deleteModal,
-    purchaseRequestFormErrorMessage,
-    isDeleteLoading,
-    createPurchaseRequestHandler,
-    updatePurchaseRequestHandler,
-    deletePurchaseRequestClickHandler,
-    confirmationModalDeleteClickHandler,
-  } = usePurchaseRequestFormHandlers(initialValues?.id);
+  // ===== FORM HANDLERS =====
+  const createPurchaseRequestHandler = useCallback(
+    async (payload: CreatePurchaseRequestPayload) => {
+      const res = await PurchaseApi.create(payload);
+      if (isResponseError(res)) {
+        setPurchaseRequestFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.push('/purchase');
+    },
+    [router]
+  );
+
+  const updatePurchaseRequestHandler = useCallback(
+    async (
+      purchaseRequestId: number,
+      payload: CreatePurchaseRequestPayload
+    ) => {
+      const res = await PurchaseApi.update(purchaseRequestId, payload);
+      if (isResponseError(res)) {
+        setPurchaseRequestFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      router.refresh();
+      router.push('/purchase');
+    },
+    [router]
+  );
+
+  const deletePurchaseRequestClickHandler = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);
+
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
+    if (!initialValues?.id) return;
+
+    setIsDeleteLoading(true);
+    await PurchaseApi.delete(initialValues.id);
+    deleteModal.closeModal();
+    toast.success('Successfully delete Purchase Request!');
+    setIsDeleteLoading(false);
+    router.push('/purchase');
+  }, [deleteModal, initialValues?.id, router]);
 
   // ===== API DATA FETCHING =====
   const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
@@ -101,9 +146,10 @@ const PurchaseRequestForm = ({
         credit_term: values.credit_term || 0,
         notes: values.notes || '',
         purchase_items: (values.purchase_items || []).map((item) => ({
-          warehouse_ids: item.warehouse_ids || 0,
+          warehouse_id: item.warehouse_id || 0,
           product_id: item.product_id || 0,
-          product_warehouse_id: item.product_warehouse_id || 0,
+          product_warehouse_id: item.product_warehouse_id || undefined,
+          sub_qty: item.sub_qty || 0,
           total_qty: item.total_qty || 0,
           price:
             typeof item.price === 'number'
@@ -147,11 +193,12 @@ const PurchaseRequestForm = ({
       ...(formik.values.purchase_items || []),
       {
         warehouse: null,
-        warehouse_ids: 0,
+        warehouse_id: 0,
         product: null,
         product_id: 0,
         product_warehouse: null,
-        product_warehouse_id: 0,
+        product_warehouse_id: null,
+        sub_qty: 0,
         total_qty: 0,
         price: 0,
       },
@@ -180,12 +227,12 @@ const PurchaseRequestForm = ({
     value: string | number
   ) => {
     const integerFields = [
-      'warehouse_ids',
+      'warehouse_id',
       'product_id',
       'product_warehouse_id',
       'total_qty',
     ];
-    const floatFields = ['price'];
+    const floatFields = ['price', 'sub_qty'];
 
     if (integerFields.includes(field)) {
       const numValue = typeof value === 'string' ? parseInt(value) || 0 : value;
@@ -320,6 +367,10 @@ const PurchaseRequestForm = ({
                       Product Warehouse ID
                       <span className='text-error'>*</span>
                     </th>
+                    <th>
+                      Sub Qty
+                      <span className='text-error'>*</span>
+                    </th>
                     <th>
                       Total Qty
                       <span className='text-error'>*</span>
@@ -358,18 +409,18 @@ const PurchaseRequestForm = ({
                       <td>
                         <TextInput
                           required
-                          name={`purchase_items.${idx}.warehouse_ids`}
-                          value={item.warehouse_ids}
+                          name={`purchase_items.${idx}.warehouse_id`}
+                          value={item.warehouse_id}
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,
-                              'warehouse_ids',
+                              'warehouse_id',
                               e.target.value
                             )
                           }
                           onBlur={formik.handleBlur}
                           type='number'
-                          placeholder='Warehouse IDs'
+                          placeholder='Warehouse ID'
                           readOnly={type === 'detail'}
                           className={{
                             wrapper: 'min-w-24',
@@ -399,7 +450,6 @@ const PurchaseRequestForm = ({
                       </td>
                       <td>
                         <TextInput
-                          required
                           name={`purchase_items.${idx}.product_warehouse_id`}
                           value={item.product_warehouse_id || ''}
                           onChange={(e) =>
@@ -418,6 +468,27 @@ const PurchaseRequestForm = ({
                           }}
                         />
                       </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`purchase_items.${idx}.sub_qty`}
+                          value={item.sub_qty}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'sub_qty',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          type='number'
+                          placeholder='Sub Qty'
+                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                        />
+                      </td>
                       <td>
                         <TextInput
                           required
diff --git a/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts b/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts
deleted file mode 100644
index c5fb1e48..00000000
--- a/src/components/pages/purchase/form/usePurchaseRequestFormHandlers.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { toast } from 'react-hot-toast';
-import { useModal } from '@/components/Modal';
-import { PurchaseApi } from '@/services/api/purchasing';
-import {
-  CreatePurchaseRequestPayload,
-  UpdatePurchaseRequestPayload,
-} from '@/types/api/purchase/purchase';
-import { isResponseError } from '@/lib/api-helper';
-
-export const usePurchaseRequestFormHandlers = (initialValuesId?: number) => {
-  const router = useRouter();
-  const deleteModal = useModal();
-  const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
-    useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const createPurchaseRequestHandler = useCallback(
-    async (payload: CreatePurchaseRequestPayload) => {
-      const res = await PurchaseApi.create(payload);
-      if (isResponseError(res)) {
-        setPurchaseRequestFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.push('/purchase');
-    },
-    [router]
-  );
-
-  const updatePurchaseRequestHandler = useCallback(
-    async (
-      purchaseRequestId: number,
-      payload: UpdatePurchaseRequestPayload
-    ) => {
-      const res = await PurchaseApi.update(purchaseRequestId, payload);
-      if (res?.status === 'error') {
-        setPurchaseRequestFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      router.refresh();
-      router.push('/purchase');
-    },
-    [router]
-  );
-
-  const deletePurchaseRequestClickHandler = useCallback(() => {
-    deleteModal.openModal();
-  }, [deleteModal]);
-
-  const confirmationModalDeleteClickHandler = useCallback(async () => {
-    if (!initialValuesId) return;
-
-    setIsDeleteLoading(true);
-    await PurchaseApi.delete(initialValuesId);
-    deleteModal.closeModal();
-    toast.success('Successfully delete Purchase Request!');
-    setIsDeleteLoading(false);
-    router.push('/purchase');
-  }, [deleteModal, initialValuesId, router]);
-
-  return {
-    deleteModal,
-    purchaseRequestFormErrorMessage,
-    isDeleteLoading,
-    createPurchaseRequestHandler,
-    updatePurchaseRequestHandler,
-    deletePurchaseRequestClickHandler,
-    confirmationModalDeleteClickHandler,
-  };
-};
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 48a9df9e..b44553ba 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -1,6 +1,5 @@
 import { BaseMetadata } from '@/types/api/api-general';
 import { Supplier } from '@/types/api/master-data/supplier';
-import { Warehouse } from '@/types/api/master-data/warehouse';
 
 export type BasePurchase = {
   id: number;
@@ -8,7 +7,6 @@ export type BasePurchase = {
   po_number: string;
   po_date: string;
   supplier: Supplier;
-  warehouse: Warehouse[];
   credit_term: number;
   due_date: string;
   grand_total: number;
@@ -24,10 +22,10 @@ export type CreatePurchaseRequestPayload = {
   credit_term: number;
   notes?: string | null;
   purchase_items: {
-    warehouse_ids: number;
+    warehouse_id: number;
     product_id: number;
-    product_warehouse_id: number;
-    total_qty: number;
+    product_warehouse_id?: number | null;
+    sub_qty: number;
     price: number;
   }[];
 };

From ae91e17ac0d605d597b0c379aae9705c4dd2818a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 11:29:43 +0700
Subject: [PATCH 015/168] refactor(FE-207,212): update PurchaseRequestForm
 schema and validation, enforce required fields and improve data handling for
 purchase items

---
 .../form/PurchaseRequestForm.schema.ts        | 217 +++++++++---------
 .../purchase/form/PurchaseRequestForm.tsx     | 157 ++++++-------
 src/types/api/purchase/purchase.d.ts          |   3 +-
 3 files changed, 182 insertions(+), 195 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index cc53de7a..e15dae8d 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -1,62 +1,106 @@
 import * as Yup from 'yup';
-import { Supplier } from '@/types/api/master-data/supplier';
-import { Warehouse } from '@/types/api/master-data/warehouse';
-import { CreatePurchaseRequestPayload } from '@/types/api/purchase/purchase';
-import { Product } from '@/types/api/master-data/product';
-import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Purchase } from '@/types/api/purchase/purchase';
 
-export const PurchaseRequestFormSchema = Yup.object({
-  supplier: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  supplier_id: Yup.number()
-    .required('Supplier wajib diisi!')
-    .min(1, 'Supplier wajib diisi!')
-    .typeError('Supplier wajib diisi!'),
-  credit_term: Yup.number()
-    .required('Termin kredit wajib diisi!')
-    .min(1, 'Termin kredit tidak boleh negatif!')
-    .typeError('Termin kredit harus berupa angka!'),
-  notes: Yup.string().optional().nullable(),
-  purchase_items: Yup.array()
-    .of(
-      Yup.object({
-        warehouse: Yup.object({
-          value: Yup.number().min(1).required(),
-          label: Yup.string().required(),
-        }).nullable(),
-        warehouse_id: Yup.number()
-          .required('Warehouse wajib diisi!')
-          .min(1, 'Warehouse wajib diisi!')
-          .typeError('Warehouse harus berupa angka!'),
-        product: Yup.object({
-          value: Yup.number().min(1).required(),
-          label: Yup.string().required(),
-        }).nullable(),
-        product_id: Yup.number()
-          .required('Produk wajib diisi!')
-          .min(1, 'Produk wajib diisi!')
-          .typeError('Produk harus berupa angka!'),
-        product_warehouse: Yup.object({
-          value: Yup.number().min(1).required(),
-          label: Yup.string().required(),
-        }).nullable(),
-        product_warehouse_id: Yup.number().optional().nullable(),
-        sub_qty: Yup.number()
-          .required('Sub Qty wajib diisi!')
-          .min(0.001, 'Sub Qty tidak boleh negatif!')
-          .typeError('Sub Qty harus berupa angka!'),
-        price: Yup.number()
-          .required('Harga wajib diisi!')
-          .min(0, 'Harga tidak boleh negatif!')
-          .typeError('Harga harus berupa angka!'),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 item pembelian!')
-    .required('Item pembelian wajib diisi!')
-    .typeError('Item pembelian wajib diisi!'),
-});
+type PurchaseRequestFormSchemaType = {
+  supplier?: {
+    value: number;
+    label: string;
+  } | null;
+  supplier_id: number;
+  credit_term: number | string;
+  notes: string | null;
+  purchase_items: {
+    warehouse?: {
+      value: number;
+      label: string;
+    } | null;
+    warehouse_id: number;
+    product?: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    product_warehouse?: {
+      value: number;
+      label: string;
+    } | null;
+    product_warehouse_id: number;
+    sub_qty: number | string;
+  }[];
+};
+
+export type PurchaseItemSchema = {
+  warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  warehouse_id: number;
+  product?: {
+    value: number;
+    label: string;
+  } | null;
+  product_id: number;
+  product_warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  product_warehouse_id: number;
+  sub_qty: number | string;
+};
+
+const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
+  Yup.object({
+    warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    warehouse_id: Yup.number()
+      .required('Warehouse wajib diisi!')
+      .min(1, 'Warehouse wajib diisi!')
+      .typeError('Warehouse harus berupa angka!'),
+    product: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_id: Yup.number()
+      .required('Produk wajib diisi!')
+      .min(1, 'Produk wajib diisi!')
+      .typeError('Produk harus berupa angka!'),
+    product_warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_warehouse_id: Yup.number()
+      .required('Product Warehouse wajib diisi!')
+      .min(0.001, 'Product Warehouse tidak boleh negatif!')
+      .typeError('Product Warehouse harus berupa angka!'),
+    sub_qty: Yup.number()
+      .required('Sub Qty wajib diisi!')
+      .min(0.001, 'Sub Qty tidak boleh negatif!')
+      .typeError('Sub Qty harus berupa angka!'),
+  });
+
+export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSchemaType> =
+  Yup.object({
+    supplier: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    supplier_id: Yup.number()
+      .required('Supplier wajib diisi!')
+      .min(1, 'Supplier wajib diisi!')
+      .typeError('Supplier wajib diisi!'),
+    credit_term: Yup.number()
+      .required('Termin kredit wajib diisi!')
+      .min(1, 'Termin kredit tidak boleh negatif!')
+      .typeError('Termin kredit harus berupa angka!'),
+    notes: Yup.string().nullable().default(null),
+    purchase_items: Yup.array()
+      .of(PurchaseItemObjectSchema)
+      .min(1, 'Minimal harus ada 1 item pembelian!')
+      .required('Item pembelian wajib diisi!')
+      .typeError('Item pembelian wajib diisi!'),
+  });
 
 export const UpdatePurchaseRequestFormSchema = PurchaseRequestFormSchema;
 
@@ -64,20 +108,8 @@ export type PurchaseRequestFormValues = Yup.InferType<
   typeof PurchaseRequestFormSchema
 >;
 
-type PurchaseRequestFormData = {
-  supplier?: Supplier;
-  supplier_id?: number;
-  credit_term?: number;
-  notes?: string | null;
-  purchase_items?: (CreatePurchaseRequestPayload['purchase_items'][0] & {
-    warehouse?: Warehouse;
-    product?: Product;
-    product_warehouse?: ProductWarehouse;
-  })[];
-};
-
 export const getPurchaseRequestFormInitialValues = (
-  initialValues?: PurchaseRequestFormData
+  initialValues?: Purchase
 ): PurchaseRequestFormValues => ({
   supplier: initialValues?.supplier
     ? {
@@ -85,45 +117,8 @@ export const getPurchaseRequestFormInitialValues = (
         label: initialValues.supplier.name,
       }
     : null,
-  supplier_id: initialValues?.supplier_id ?? 0,
-  credit_term: initialValues?.credit_term ?? 1,
-  notes: initialValues?.notes ?? '',
-  purchase_items: initialValues?.purchase_items?.map(
-    (item: NonNullable<PurchaseRequestFormData['purchase_items']>[0]) => ({
-      warehouse: item.warehouse
-        ? {
-            value: item.warehouse.id,
-            label: item.warehouse.name,
-          }
-        : null,
-      warehouse_id: item.warehouse_id,
-      product: item.product
-        ? {
-            value: item.product.id,
-            label: item.product.name,
-          }
-        : null,
-      product_id: item.product_id,
-      product_warehouse: item.product_warehouse
-        ? {
-            value: item.product_warehouse.id,
-            label: item.product_warehouse.product.name,
-          }
-        : null,
-      product_warehouse_id: item.product_warehouse_id || null,
-      sub_qty: item.sub_qty,
-      price: item.price,
-    })
-  ) ?? [
-    {
-      warehouse: null,
-      warehouse_id: 0,
-      product: null,
-      product_id: 0,
-      product_warehouse: null,
-      product_warehouse_id: null,
-      sub_qty: 0,
-      price: 0,
-    },
-  ],
+  supplier_id: initialValues?.supplier?.id ?? 0,
+  credit_term: initialValues?.credit_term ?? '',
+  notes: initialValues?.notes ?? null,
+  purchase_items: [],
 });
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 21b0ca03..8da24397 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -142,19 +142,32 @@ const PurchaseRequestForm = ({
     validateOnBlur: true,
     onSubmit: async (values) => {
       const payload: CreatePurchaseRequestPayload = {
-        supplier_id: values.supplier_id || 0,
-        credit_term: values.credit_term || 0,
+        supplier_id:
+          typeof values.supplier_id === 'string'
+            ? parseInt(values.supplier_id) || 0
+            : values.supplier_id || 0,
+        credit_term:
+          typeof values.credit_term === 'string'
+            ? parseInt(values.credit_term) || 0
+            : values.credit_term || 0,
         notes: values.notes || '',
         purchase_items: (values.purchase_items || []).map((item) => ({
-          warehouse_id: item.warehouse_id || 0,
-          product_id: item.product_id || 0,
-          product_warehouse_id: item.product_warehouse_id || undefined,
-          sub_qty: item.sub_qty || 0,
-          total_qty: item.total_qty || 0,
-          price:
-            typeof item.price === 'number'
-              ? item.price
-              : parseFloat(item.price) || 0,
+          warehouse_id:
+            typeof item.warehouse_id === 'string'
+              ? parseInt(item.warehouse_id) || 0
+              : item.warehouse_id || 0,
+          product_id:
+            typeof item.product_id === 'string'
+              ? parseInt(item.product_id) || 0
+              : item.product_id || 0,
+          product_warehouse_id:
+            typeof item.product_warehouse_id === 'string'
+              ? parseInt(item.product_warehouse_id) || 0
+              : item.product_warehouse_id || 0,
+          sub_qty:
+            typeof item.sub_qty === 'string'
+              ? parseFloat(item.sub_qty) || 0
+              : item.sub_qty || 0,
         })),
       };
 
@@ -193,14 +206,12 @@ const PurchaseRequestForm = ({
       ...(formik.values.purchase_items || []),
       {
         warehouse: null,
-        warehouse_id: 0,
+        warehouse_id: '',
         product: null,
-        product_id: 0,
+        product_id: '',
         product_warehouse: null,
         product_warehouse_id: null,
-        sub_qty: 0,
-        total_qty: 0,
-        price: 0,
+        sub_qty: '',
       },
     ];
     formik.setFieldValue('purchase_items', newPurchaseItems);
@@ -285,12 +296,11 @@ const PurchaseRequestForm = ({
                 type='number'
                 placeholder='Masukkan Supplier ID'
               />
-
               <TextInput
                 required
                 label='Jatuh tempo (hari)'
                 name='credit_term'
-                value={formik.values.credit_term}
+                value={formik.values.credit_term || ''}
                 onChange={formik.handleChange}
                 onBlur={formik.handleBlur}
                 isError={
@@ -303,6 +313,28 @@ const PurchaseRequestForm = ({
                 placeholder='Masukkan Credit Term'
               />
 
+              <TextInput
+                required
+                label='Area'
+                name='area_id'
+                onChange={(e) => {}}
+                onBlur={formik.handleBlur}
+                readOnly={type === 'detail'}
+                type='number'
+                placeholder='Pilih Area'
+              />
+
+              <TextInput
+                required
+                label='Lokasi'
+                name='location_id'
+                onChange={(e) => {}}
+                onBlur={formik.handleBlur}
+                readOnly={type === 'detail'}
+                type='number'
+                placeholder='Pilih Lokasi'
+              />
+
               <div className={type === 'detail' ? 'col-span-1' : 'col-span-2'}>
                 <TextInput
                   label='Notes'
@@ -356,29 +388,19 @@ const PurchaseRequestForm = ({
                       </th>
                     )}
                     <th>
-                      Warehouse ID
+                      Gudang
                       <span className='text-error'>*</span>
                     </th>
                     <th>
-                      Product ID
+                      Item
                       <span className='text-error'>*</span>
                     </th>
                     <th>
-                      Product Warehouse ID
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Sub Qty
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Total Qty
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Price
+                      Jumlah
                       <span className='text-error'>*</span>
                     </th>
+                    <th>Estimasi Harga</th>
+                    <th>Satuan</th>
                     {type !== 'detail' && <th>Action</th>}
                   </tr>
                 </thead>
@@ -410,7 +432,7 @@ const PurchaseRequestForm = ({
                         <TextInput
                           required
                           name={`purchase_items.${idx}.warehouse_id`}
-                          value={item.warehouse_id}
+                          value={item.warehouse_id || ''}
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,
@@ -420,28 +442,7 @@ const PurchaseRequestForm = ({
                           }
                           onBlur={formik.handleBlur}
                           type='number'
-                          placeholder='Warehouse ID'
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'min-w-24',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          required
-                          name={`purchase_items.${idx}.product_id`}
-                          value={item.product_id}
-                          onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'product_id',
-                              e.target.value
-                            )
-                          }
-                          onBlur={formik.handleBlur}
-                          type='number'
-                          placeholder='Product ID'
+                          placeholder='Masukkan Warehouse ID'
                           readOnly={type === 'detail'}
                           className={{
                             wrapper: 'min-w-24',
@@ -472,7 +473,7 @@ const PurchaseRequestForm = ({
                         <TextInput
                           required
                           name={`purchase_items.${idx}.sub_qty`}
-                          value={item.sub_qty}
+                          value={item.sub_qty || ''}
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,
@@ -482,28 +483,7 @@ const PurchaseRequestForm = ({
                           }
                           onBlur={formik.handleBlur}
                           type='number'
-                          placeholder='Sub Qty'
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'min-w-24',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          required
-                          name={`purchase_items.${idx}.total_qty`}
-                          value={item.total_qty}
-                          onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'total_qty',
-                              e.target.value
-                            )
-                          }
-                          onBlur={formik.handleBlur}
-                          type='number'
-                          placeholder='Total Qty'
+                          placeholder='Masukkan kuantitas'
                           readOnly={type === 'detail'}
                           className={{
                             wrapper: 'min-w-24',
@@ -514,7 +494,6 @@ const PurchaseRequestForm = ({
                         <TextInput
                           required
                           name={`purchase_items.${idx}.price`}
-                          value={item.price}
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,
@@ -524,8 +503,22 @@ const PurchaseRequestForm = ({
                           }
                           onBlur={formik.handleBlur}
                           type='number'
-                          placeholder='Price'
-                          readOnly={type === 'detail'}
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                          disabled={true}
+                          readOnly={true}
+                          inputPrefix={'Rp'}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          required
+                          name={`purchase_items.${idx}.uom`}
+                          onBlur={formik.handleBlur}
+                          type='number'
+                          readOnly={true}
+                          disabled={true}
                           className={{
                             wrapper: 'min-w-24',
                           }}
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index b44553ba..669fd4b2 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -24,9 +24,8 @@ export type CreatePurchaseRequestPayload = {
   purchase_items: {
     warehouse_id: number;
     product_id: number;
-    product_warehouse_id?: number | null;
+    product_warehouse_id: number;
     sub_qty: number;
-    price: number;
   }[];
 };
 

From 408250d7ed5e89ec5b1e0b9e911eb33efc87ae66 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 11:39:37 +0700
Subject: [PATCH 016/168] refactor(FE-208): enhance PurchaseRequestForm layout
 and actions, replace header with custom component and improve button handling

---
 .../purchase/form/PurchaseRequestForm.tsx     | 69 +++++++++++++++----
 1 file changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 8da24397..dfafae20 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -10,8 +10,6 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
-import { FormHeader } from '@/components/helper/form/FormHeader';
-import { FormActions } from '@/components/helper/form/FormActions';
 
 import {
   PurchaseRequestFormSchema,
@@ -260,9 +258,24 @@ const PurchaseRequestForm = ({
   return (
     <>
       <section className='w-full'>
-        <FormHeader type={type} title='Purchase Request' backUrl='/purchase' />
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/purchase'
+            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 Purchase Request'}
+            {type === 'edit' && 'Edit Purchase Request'}
+            {type === 'detail' && 'Detail Purchase Request'}
+          </h1>
+        </header>
         <form
           onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
           className='w-full mt-8 flex flex-col gap-6'
         >
           {/* Basic Info Card */}
@@ -574,16 +587,46 @@ const PurchaseRequestForm = ({
           </Card>
 
           {/* Action buttons */}
-          <FormActions<PurchaseRequestFormValues>
-            type={type}
-            formik={formik}
-            editUrl={
-              initialValues
-                ? `/purchase/detail/edit/?purchaseId=${initialValues.id}`
-                : undefined
-            }
-            onDelete={deletePurchaseRequestClickHandler}
-          />
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Button type='reset' color='warning' className='px-4'>
+                  Reset
+                </Button>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+            {type === 'detail' && (
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Button
+                  href={`/purchase/detail/edit/?purchaseId=${initialValues?.id}`}
+                  color='primary'
+                  className='px-4'
+                >
+                  Edit
+                </Button>
+
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deletePurchaseRequestClickHandler}
+                  className='px-4'
+                >
+                  Delete
+                </Button>
+              </div>
+            )}
+          </div>
+
           {purchaseRequestFormErrorMessage && (
             <div role='alert' className='alert alert-error'>
               <Icon

From 7b19cd4a21022f3e559b1ce452f82538bfddc95a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 13:01:17 +0700
Subject: [PATCH 017/168] refactor(FE-208,212): enhance PurchaseRequestForm
 with area and location fields, update validation and data handling for new
 inputs

---
 .../form/PurchaseRequestForm.schema.ts        |  30 ++
 .../purchase/form/PurchaseRequestForm.tsx     | 319 +++++++++++++-----
 2 files changed, 267 insertions(+), 82 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index e15dae8d..ebd0792d 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -7,6 +7,16 @@ type PurchaseRequestFormSchemaType = {
     label: string;
   } | null;
   supplier_id: number;
+  area?: {
+    value: number;
+    label: string;
+  } | null;
+  area_id: number;
+  location?: {
+    value: number;
+    label: string;
+  } | null;
+  location_id: number;
   credit_term: number | string;
   notes: string | null;
   purchase_items: {
@@ -90,6 +100,22 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
       .required('Supplier wajib diisi!')
       .min(1, 'Supplier wajib diisi!')
       .typeError('Supplier wajib diisi!'),
+    area: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    area_id: Yup.number()
+      .required('Area wajib diisi!')
+      .min(1, 'Area wajib diisi!')
+      .typeError('Area wajib diisi!'),
+    location: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    location_id: Yup.number()
+      .required('Lokasi wajib diisi!')
+      .min(1, 'Lokasi wajib diisi!')
+      .typeError('Lokasi wajib diisi!'),
     credit_term: Yup.number()
       .required('Termin kredit wajib diisi!')
       .min(1, 'Termin kredit tidak boleh negatif!')
@@ -118,6 +144,10 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : null,
   supplier_id: initialValues?.supplier?.id ?? 0,
+  area: null,
+  area_id: 0,
+  location: null,
+  location_id: 0,
   credit_term: initialValues?.credit_term ?? '',
   notes: initialValues?.notes ?? null,
   purchase_items: [],
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index dfafae20..5f15e54e 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 import { useRouter } from 'next/navigation';
@@ -8,6 +8,10 @@ import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
 
@@ -17,8 +21,13 @@ import {
   getPurchaseRequestFormInitialValues,
   UpdatePurchaseRequestFormSchema,
 } from './PurchaseRequestForm.schema';
-import { SupplierApi } from '@/services/api/master-data';
-import { WarehouseApi } from '@/services/api/master-data';
+import {
+  SupplierApi,
+  AreaApi,
+  LocationApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
+import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { PurchaseApi } from '@/services/api/purchasing';
 
@@ -46,6 +55,46 @@ const PurchaseRequestForm = ({
   const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
     useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [
+    productWarehouseSelectInputValue,
+    setProductWarehouseSelectInputValue,
+  ] = useState('');
+
+  // ===== INTERFACES =====
+  interface WarehouseOptionType extends OptionType {
+    area?: string;
+    location?: string;
+  }
+
+  interface ProductWarehouseOptionType extends OptionType {
+    product_id: number;
+    warehouse_id: number;
+    warehouse_name: string;
+    quantity: number;
+  }
+
+  // ===== HELPER FUNCTIONS =====
+  const getPurchaseItemError = (
+    idx: number,
+    field: 'warehouse_id' | 'product_warehouse_id' | 'product_id' | 'sub_qty'
+  ): { isError: boolean; errorMessage: string } => {
+    const touchedItem = formik.touched.purchase_items?.[idx];
+    const errorItem = formik.errors.purchase_items?.[idx] as
+      | Record<string, string>
+      | undefined;
+
+    if (!touchedItem || !errorItem) {
+      return { isError: false, errorMessage: '' };
+    }
+
+    const isTouched = (touchedItem as Record<string, boolean>)?.[field];
+    const errorMessage = errorItem?.[field] || '';
+
+    return {
+      isError: Boolean(isTouched && errorMessage),
+      errorMessage: isTouched && errorMessage ? errorMessage : '',
+    };
+  };
 
   // ===== FORM HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
@@ -94,37 +143,86 @@ const PurchaseRequestForm = ({
   }, [deleteModal, initialValues?.id, router]);
 
   // ===== API DATA FETCHING =====
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    SupplierApi.basePath,
-    SupplierApi.getAllFetcher
+  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const { data: allProductWarehouses } = useSWR(
+    allProductWarehousesUrl,
+    ProductWarehouseApi.getAllFetcher
   );
 
-  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
-    WarehouseApi.basePath,
+  // ===== USE SELECT HOOKS =====
+  const {
+    inputValue: supplierSelectInputValue,
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+  } = useSelect(SupplierApi.basePath, 'id', 'name', 'search');
+
+  const {
+    inputValue: areaSelectInputValue,
+    setInputValue: setAreaSelectInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
+
+  const {
+    inputValue: locationSelectInputValue,
+    setInputValue: setLocationSelectInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    inputValue: warehouseSelectInputValue,
+    setInputValue: setWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingWarehouses,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+
+  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
+  const { data: warehouses } = useSWR(
+    warehousesUrl,
     WarehouseApi.getAllFetcher
   );
 
   // ===== DATA PROCESSING =====
-  const supplierOptions = useMemo(() => {
-    if (!isResponseSuccess(suppliers)) return [];
-    return (
-      suppliers?.data.map((supplier) => ({
-        value: supplier.id,
-        label: supplier.name,
-      })) || []
-    );
-  }, [suppliers]);
-
   const warehouseOptions = useMemo(() => {
     if (!isResponseSuccess(warehouses)) return [];
+
     return (
-      warehouses?.data.map((warehouse) => ({
-        value: warehouse.id,
-        label: warehouse.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,
       })) || []
     );
   }, [warehouses]);
 
+  // ===== PRODUCT WAREHOUSE FETCHING =====
+  const getProductWarehousesUrl = useCallback(() => {
+    const productWarehouseParams = new URLSearchParams({
+      search: productWarehouseSelectInputValue,
+    });
+    return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
+  }, [productWarehouseSelectInputValue]);
+
+  const productWarehousesUrl = getProductWarehousesUrl();
+  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
+    useSWR(productWarehousesUrl, ProductWarehouseApi.getAllFetcher);
+
+  const productWarehouseOptions = isResponseSuccess(productWarehouses)
+    ? productWarehouses?.data.map((pw) => ({
+        value: pw.product.id,
+        label: pw.product.name,
+        product_id: pw.product.id,
+        warehouse_id: pw.warehouse.id,
+        warehouse_name: pw.warehouse.name,
+        quantity: pw.quantity,
+      }))
+    : [];
+
   const formikInitialValues = useMemo<PurchaseRequestFormValues>(
     () => getPurchaseRequestFormInitialValues(initialValues),
     [initialValues]
@@ -184,18 +282,28 @@ const PurchaseRequestForm = ({
   });
 
   // ===== EVENT HANDLERS =====
-  const supplierChangeHandler = (val: string) => {
-    const supplierId = parseInt(val) || 0;
-    formik.setFieldValue('supplier_id', supplierId);
+  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const supplier = val as OptionType | null;
+    formik.setFieldTouched('supplier', true);
+    formik.setFieldValue('supplier', supplier);
+    formik.setFieldTouched('supplier_id', true);
+    formik.setFieldValue('supplier_id', (supplier as OptionType)?.value || 0);
+  };
 
-    const selectedSupplier = supplierOptions.find(
-      (option) => option.value === supplierId
-    );
-    if (selectedSupplier) {
-      formik.setFieldValue('supplier', selectedSupplier);
-    } else {
-      formik.setFieldValue('supplier', null);
-    }
+  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const area = val as OptionType | null;
+    formik.setFieldTouched('area', true);
+    formik.setFieldValue('area', area);
+    formik.setFieldTouched('area_id', true);
+    formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
+  };
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const location = val as OptionType | null;
+    formik.setFieldTouched('location', true);
+    formik.setFieldValue('location', location);
+    formik.setFieldTouched('location_id', true);
+    formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
   };
 
   // Purchase Items Handlers
@@ -293,21 +401,22 @@ const PurchaseRequestForm = ({
                   : 'grid grid-cols-1 md:grid-cols-2 gap-6'
               }
             >
-              <TextInput
+              <SelectInput
                 required
                 label='Vendor'
-                name='supplier_id'
-                value={formik.values.supplier_id}
-                onChange={(e) => supplierChangeHandler(e.target.value)}
-                onBlur={formik.handleBlur}
+                placeholder='Pilih Vendor...'
+                value={formik.values.supplier}
+                onChange={supplierChangeHandler}
+                options={supplierOptions}
+                onInputChange={setSupplierSelectInputValue}
+                isLoading={isLoadingSuppliers}
                 isError={
                   formik.touched.supplier_id &&
                   Boolean(formik.errors.supplier_id)
                 }
                 errorMessage={formik.errors.supplier_id as string}
-                readOnly={type === 'detail'}
-                type='number'
-                placeholder='Masukkan Supplier ID'
+                isDisabled={type === 'detail'}
+                isClearable
               />
               <TextInput
                 required
@@ -326,26 +435,39 @@ const PurchaseRequestForm = ({
                 placeholder='Masukkan Credit Term'
               />
 
-              <TextInput
+              <SelectInput
                 required
                 label='Area'
-                name='area_id'
-                onChange={(e) => {}}
-                onBlur={formik.handleBlur}
-                readOnly={type === 'detail'}
-                type='number'
-                placeholder='Pilih Area'
+                placeholder='Pilih Area...'
+                value={formik.values.area}
+                onChange={areaChangeHandler}
+                options={areaOptions}
+                onInputChange={setAreaSelectInputValue}
+                isLoading={isLoadingAreas}
+                isError={
+                  formik.touched.area_id && Boolean(formik.errors.area_id)
+                }
+                errorMessage={formik.errors.area_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
               />
 
-              <TextInput
+              <SelectInput
                 required
                 label='Lokasi'
-                name='location_id'
-                onChange={(e) => {}}
-                onBlur={formik.handleBlur}
-                readOnly={type === 'detail'}
-                type='number'
-                placeholder='Pilih Lokasi'
+                placeholder='Pilih Lokasi...'
+                value={formik.values.location}
+                onChange={locationChangeHandler}
+                options={locationOptions}
+                onInputChange={setLocationSelectInputValue}
+                isLoading={isLoadingLocations}
+                isError={
+                  formik.touched.location_id &&
+                  Boolean(formik.errors.location_id)
+                }
+                errorMessage={formik.errors.location_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
               />
 
               <div className={type === 'detail' ? 'col-span-1' : 'col-span-2'}>
@@ -442,43 +564,76 @@ const PurchaseRequestForm = ({
                         </td>
                       )}
                       <td>
-                        <TextInput
+                        <SelectInput
                           required
-                          name={`purchase_items.${idx}.warehouse_id`}
-                          value={item.warehouse_id || ''}
-                          onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'warehouse_id',
-                              e.target.value
-                            )
+                          value={item.warehouse}
+                          onChange={(val) => {
+                            const warehouse = val as OptionType | null;
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.warehouse`,
+                              warehouse
+                            );
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.warehouse_id`,
+                              (warehouse as OptionType)?.value || 0
+                            );
+                          }}
+                          options={warehouseOptions}
+                          onInputChange={setWarehouseSelectInputValue}
+                          isLoading={isLoadingWarehouses}
+                          isError={
+                            getPurchaseItemError(idx, 'warehouse_id').isError
                           }
-                          onBlur={formik.handleBlur}
-                          type='number'
-                          placeholder='Masukkan Warehouse ID'
-                          readOnly={type === 'detail'}
+                          errorMessage={
+                            getPurchaseItemError(idx, 'warehouse_id')
+                              .errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          placeholder='Pilih Gudang'
                           className={{
-                            wrapper: 'min-w-24',
+                            wrapper: 'min-w-32',
                           }}
                         />
                       </td>
                       <td>
-                        <TextInput
-                          name={`purchase_items.${idx}.product_warehouse_id`}
-                          value={item.product_warehouse_id || ''}
-                          onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'product_warehouse_id',
-                              e.target.value
-                            )
+                        <SelectInput
+                          required
+                          value={item.product_warehouse}
+                          onChange={(val) => {
+                            const productWarehouse =
+                              val as ProductWarehouseOptionType | null;
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.product_warehouse`,
+                              productWarehouse
+                            );
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.product_warehouse_id`,
+                              (productWarehouse as ProductWarehouseOptionType)
+                                ?.value || 0
+                            );
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.product_id`,
+                              (productWarehouse as ProductWarehouseOptionType)
+                                ?.product_id || 0
+                            );
+                          }}
+                          options={productWarehouseOptions}
+                          onInputChange={setProductWarehouseSelectInputValue}
+                          isLoading={isLoadingProductWarehouses}
+                          isError={
+                            getPurchaseItemError(idx, 'product_warehouse_id')
+                              .isError
                           }
-                          onBlur={formik.handleBlur}
-                          type='number'
-                          placeholder='Product Warehouse ID'
-                          readOnly={type === 'detail'}
+                          errorMessage={
+                            getPurchaseItemError(idx, 'product_warehouse_id')
+                              .errorMessage
+                          }
+                          isDisabled={type === 'detail'}
+                          isClearable
+                          placeholder='Pilih Produk'
                           className={{
-                            wrapper: 'min-w-24',
+                            wrapper: 'min-w-32',
                           }}
                         />
                       </td>

From ae5a57277b09169fddf998276a52d2588ee56d39 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 14:06:32 +0700
Subject: [PATCH 018/168] refactor(FE-208,212): enhance PurchaseRequestForm
 with location and warehouse handling, update validation and reset logic for
 dependent fields

---
 .../purchase/form/PurchaseRequestForm.tsx     | 192 ++++++++++++++----
 1 file changed, 156 insertions(+), 36 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 5f15e54e..0f7b7225 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -164,12 +164,7 @@ const PurchaseRequestForm = ({
     isLoadingOptions: isLoadingAreas,
   } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
-  const {
-    inputValue: locationSelectInputValue,
-    setInputValue: setLocationSelectInputValue,
-    options: locationOptions,
-    isLoadingOptions: isLoadingLocations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
 
   const {
     inputValue: warehouseSelectInputValue,
@@ -177,34 +172,12 @@ const PurchaseRequestForm = ({
     isLoadingOptions: isLoadingWarehouses,
   } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
 
-  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
-  const { data: warehouses } = useSWR(
-    warehousesUrl,
-    WarehouseApi.getAllFetcher
-  );
-
-  // ===== DATA PROCESSING =====
-  const warehouseOptions = useMemo(() => {
-    if (!isResponseSuccess(warehouses)) return [];
-
-    return (
-      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]);
-
   // ===== PRODUCT WAREHOUSE FETCHING =====
   const getProductWarehousesUrl = useCallback(() => {
     const productWarehouseParams = new URLSearchParams({
       search: productWarehouseSelectInputValue,
     });
+
     return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
   }, [productWarehouseSelectInputValue]);
 
@@ -212,6 +185,33 @@ const PurchaseRequestForm = ({
   const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
     useSWR(productWarehousesUrl, ProductWarehouseApi.getAllFetcher);
 
+  // Filter product warehouses per item based on selected warehouse
+  const getProductWarehouseOptionsForItem = useCallback(
+    (warehouseId: number | string) => {
+      if (!isResponseSuccess(productWarehouses)) return [];
+
+      const warehouseIdNum =
+        typeof warehouseId === 'string'
+          ? parseInt(warehouseId) || 0
+          : warehouseId;
+      if (warehouseIdNum === 0) return [];
+
+      return (
+        productWarehouses?.data
+          .filter((pw) => pw.warehouse.id === warehouseIdNum)
+          .map((pw) => ({
+            value: pw.product.id,
+            label: pw.product.name,
+            product_id: pw.product.id,
+            warehouse_id: pw.warehouse.id,
+            warehouse_name: pw.warehouse.name,
+            quantity: pw.quantity,
+          })) || []
+      );
+    },
+    [productWarehouses]
+  );
+
   const productWarehouseOptions = isResponseSuccess(productWarehouses)
     ? productWarehouses?.data.map((pw) => ({
         value: pw.product.id,
@@ -281,6 +281,71 @@ const PurchaseRequestForm = ({
     },
   });
 
+  // ===== API DATA FETCHING =====
+  const locationsUrl = useMemo(() => {
+    const params = new URLSearchParams({
+      search: locationSelectInputValue,
+      ...(formik.values.area_id && formik.values.area_id > 0
+        ? { area_id: formik.values.area_id.toString() }
+        : {}),
+    });
+    return `${LocationApi.basePath}?${params.toString()}`;
+  }, [locationSelectInputValue, formik.values.area_id]);
+
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationsUrl,
+    LocationApi.getAllFetcher
+  );
+
+  const locationOptions = useMemo(() => {
+    if (!isResponseSuccess(locations)) return [];
+    return (
+      locations?.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      })) || []
+    );
+  }, [locations]);
+
+  const warehousesUrl = useMemo(() => {
+    const params = new URLSearchParams({ search: warehouseSelectInputValue });
+
+    if (formik.values.area_id && formik.values.area_id > 0) {
+      params.append('area_id', formik.values.area_id.toString());
+    }
+
+    if (formik.values.location_id && formik.values.location_id > 0) {
+      params.append('location_id', formik.values.location_id.toString());
+    }
+
+    return `${WarehouseApi.basePath}?${params.toString()}`;
+  }, [
+    warehouseSelectInputValue,
+    formik.values.area_id,
+    formik.values.location_id,
+  ]);
+
+  const { data: warehouses } = useSWR(
+    warehousesUrl,
+    WarehouseApi.getAllFetcher
+  );
+
+  const warehouseOptions = useMemo(() => {
+    if (!isResponseSuccess(warehouses)) return [];
+
+    return (
+      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]);
+
   // ===== EVENT HANDLERS =====
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     const supplier = val as OptionType | null;
@@ -296,6 +361,25 @@ const PurchaseRequestForm = ({
     formik.setFieldValue('area', area);
     formik.setFieldTouched('area_id', true);
     formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
+
+    // Reset area dependent fields
+    formik.setFieldValue('location', null);
+    formik.setFieldValue('location_id', 0);
+    setLocationSelectInputValue('');
+
+    // Reset area dependent fields in all purchase items
+    if (formik.values.purchase_items) {
+      formik.values.purchase_items.forEach((_, idx) => {
+        formik.setFieldValue(`purchase_items.${idx}.warehouse`, null);
+        formik.setFieldValue(`purchase_items.${idx}.warehouse_id`, '');
+        formik.setFieldValue(`purchase_items.${idx}.product_warehouse`, null);
+        formik.setFieldValue(
+          `purchase_items.${idx}.product_warehouse_id`,
+          null
+        );
+        formik.setFieldValue(`purchase_items.${idx}.product_id`, '');
+      });
+    }
   };
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -304,6 +388,20 @@ const PurchaseRequestForm = ({
     formik.setFieldValue('location', location);
     formik.setFieldTouched('location_id', true);
     formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
+
+    // Reset location dependent fields in all purchase items
+    if (formik.values.purchase_items) {
+      formik.values.purchase_items.forEach((_, idx) => {
+        formik.setFieldValue(`purchase_items.${idx}.warehouse`, null);
+        formik.setFieldValue(`purchase_items.${idx}.warehouse_id`, '');
+        formik.setFieldValue(`purchase_items.${idx}.product_warehouse`, null);
+        formik.setFieldValue(
+          `purchase_items.${idx}.product_warehouse_id`,
+          null
+        );
+        formik.setFieldValue(`purchase_items.${idx}.product_id`, '');
+      });
+    }
   };
 
   // Purchase Items Handlers
@@ -455,7 +553,11 @@ const PurchaseRequestForm = ({
               <SelectInput
                 required
                 label='Lokasi'
-                placeholder='Pilih Lokasi...'
+                placeholder={
+                  !formik.values.area_id
+                    ? 'Pilih Area terlebih dahulu'
+                    : 'Pilih Lokasi...'
+                }
                 value={formik.values.location}
                 onChange={locationChangeHandler}
                 options={locationOptions}
@@ -466,8 +568,8 @@ const PurchaseRequestForm = ({
                   Boolean(formik.errors.location_id)
                 }
                 errorMessage={formik.errors.location_id as string}
-                isDisabled={type === 'detail'}
-                isClearable
+                isDisabled={type === 'detail' || !formik.values.area_id}
+                isClearable={type !== 'detail' && !!formik.values.area_id}
               />
 
               <div className={type === 'detail' ? 'col-span-1' : 'col-span-2'}>
@@ -577,6 +679,18 @@ const PurchaseRequestForm = ({
                               `purchase_items.${idx}.warehouse_id`,
                               (warehouse as OptionType)?.value || 0
                             );
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.product_warehouse`,
+                              null
+                            );
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.product_warehouse_id`,
+                              null
+                            );
+                            formik.setFieldValue(
+                              `purchase_items.${idx}.product_id`,
+                              ''
+                            );
                           }}
                           options={warehouseOptions}
                           onInputChange={setWarehouseSelectInputValue}
@@ -618,7 +732,9 @@ const PurchaseRequestForm = ({
                                 ?.product_id || 0
                             );
                           }}
-                          options={productWarehouseOptions}
+                          options={getProductWarehouseOptionsForItem(
+                            item.warehouse_id
+                          )}
                           onInputChange={setProductWarehouseSelectInputValue}
                           isLoading={isLoadingProductWarehouses}
                           isError={
@@ -629,9 +745,13 @@ const PurchaseRequestForm = ({
                             getPurchaseItemError(idx, 'product_warehouse_id')
                               .errorMessage
                           }
-                          isDisabled={type === 'detail'}
-                          isClearable
-                          placeholder='Pilih Produk'
+                          isDisabled={type === 'detail' || !item.warehouse_id}
+                          isClearable={type !== 'detail' && !!item.warehouse_id}
+                          placeholder={
+                            !item.warehouse_id
+                              ? 'Pilih Gudang terlebih dahulu'
+                              : 'Pilih Produk'
+                          }
                           className={{
                             wrapper: 'min-w-32',
                           }}

From 4149c51a7bd2b677e0cc3cce86a5dbe88d73945c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 14:29:24 +0700
Subject: [PATCH 019/168] refactor(FE-208,212): update PurchaseRequestForm
 validation for area and location fields, enhance error handling and
 conditional checks

---
 .../pages/purchase/form/PurchaseRequestForm.schema.ts  | 10 ++++++++--
 .../pages/purchase/form/PurchaseRequestForm.tsx        |  5 ++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index ebd0792d..8a84b3f4 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -106,7 +106,10 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
     }).nullable(),
     area_id: Yup.number()
       .required('Area wajib diisi!')
-      .min(1, 'Area wajib diisi!')
+      .test('is-valid-area', 'Area wajib diisi!', function (value) {
+        if (!this.parent.area) return true;
+        return Boolean(value && value > 0);
+      })
       .typeError('Area wajib diisi!'),
     location: Yup.object({
       value: Yup.number().min(1).required(),
@@ -114,7 +117,10 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
     }).nullable(),
     location_id: Yup.number()
       .required('Lokasi wajib diisi!')
-      .min(1, 'Lokasi wajib diisi!')
+      .test('is-valid-location', 'Lokasi wajib diisi!', function (value) {
+        if (!this.parent.location) return true;
+        return Boolean(value && value > 0);
+      })
       .typeError('Lokasi wajib diisi!'),
     credit_term: Yup.number()
       .required('Termin kredit wajib diisi!')
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 0f7b7225..dce21146 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -543,7 +543,7 @@ const PurchaseRequestForm = ({
                 onInputChange={setAreaSelectInputValue}
                 isLoading={isLoadingAreas}
                 isError={
-                  formik.touched.area_id && Boolean(formik.errors.area_id)
+                  formik.touched.area && Boolean(formik.errors.area_id)
                 }
                 errorMessage={formik.errors.area_id as string}
                 isDisabled={type === 'detail'}
@@ -564,8 +564,7 @@ const PurchaseRequestForm = ({
                 onInputChange={setLocationSelectInputValue}
                 isLoading={isLoadingLocations}
                 isError={
-                  formik.touched.location_id &&
-                  Boolean(formik.errors.location_id)
+                  formik.touched.location && Boolean(formik.errors.location_id)
                 }
                 errorMessage={formik.errors.location_id as string}
                 isDisabled={type === 'detail' || !formik.values.area_id}

From e1d070b3af8de60ba8798c1239b2184519bafd81 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 15:02:00 +0700
Subject: [PATCH 020/168] refactor(FE-208,212): update PurchaseRequestForm
 schema and validation, enhance credit term handling and improve error
 messages for required fields

---
 .../form/PurchaseRequestForm.schema.ts        | 76 ++++++++++++-------
 .../purchase/form/PurchaseRequestForm.tsx     | 54 ++++++++++---
 2 files changed, 92 insertions(+), 38 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index 8a84b3f4..27cbdf5a 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -17,7 +17,7 @@ type PurchaseRequestFormSchemaType = {
     label: string;
   } | null;
   location_id: number;
-  credit_term: number | string;
+  credit_term: number | string | null;
   notes: string | null;
   purchase_items: {
     warehouse?: {
@@ -65,29 +65,38 @@ const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
       label: Yup.string().required(),
     }).nullable(),
     warehouse_id: Yup.number()
-      .required('Warehouse wajib diisi!')
-      .min(1, 'Warehouse wajib diisi!')
-      .typeError('Warehouse harus berupa angka!'),
+      .required('Gudang wajib dipilih!')
+      .min(1, 'Gudang wajib dipilih!')
+      .typeError('Gudang wajib dipilih'),
     product: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
     }).nullable(),
     product_id: Yup.number()
-      .required('Produk wajib diisi!')
-      .min(1, 'Produk wajib diisi!')
-      .typeError('Produk harus berupa angka!'),
+      .required('Produk wajib dipilih!')
+      .min(1, 'Produk wajib dipilih!')
+      .typeError('Produk wajib dipilih!'),
     product_warehouse: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
     }).nullable(),
     product_warehouse_id: Yup.number()
-      .required('Product Warehouse wajib diisi!')
-      .min(0.001, 'Product Warehouse tidak boleh negatif!')
-      .typeError('Product Warehouse harus berupa angka!'),
-    sub_qty: Yup.number()
+      .required('Produk wajib dipilih!')
+      .min(1, 'Produk wajib dipilih!')
+      .typeError('Produk wajib dipilih!'),
+    sub_qty: Yup.mixed<string | number>()
       .required('Sub Qty wajib diisi!')
-      .min(0.001, 'Sub Qty tidak boleh negatif!')
-      .typeError('Sub Qty harus berupa angka!'),
+      .test(
+        'is-valid-sub-qty',
+        'Kuantitas harus berupa angka lebih dari 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue > 0;
+        }
+      ),
   });
 
 export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSchemaType> =
@@ -97,35 +106,50 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
       label: Yup.string().required(),
     }).nullable(),
     supplier_id: Yup.number()
-      .required('Supplier wajib diisi!')
-      .min(1, 'Supplier wajib diisi!')
-      .typeError('Supplier wajib diisi!'),
+      .required('Supplier wajib dipilih!')
+      .test('is-valid-supplier', 'Supplier wajib dipilih!', function (value) {
+        if (!this.parent.supplier) return true;
+        return Boolean(value && value > 0);
+      })
+      .typeError('Supplier wajib dipilih!'),
     area: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
     }).nullable(),
     area_id: Yup.number()
-      .required('Area wajib diisi!')
-      .test('is-valid-area', 'Area wajib diisi!', function (value) {
+      .required('Area wajib dipilih!')
+      .test('is-valid-area', 'Area wajib dipilih!', function (value) {
         if (!this.parent.area) return true;
         return Boolean(value && value > 0);
       })
-      .typeError('Area wajib diisi!'),
+      .typeError('Area wajib dipilih!'),
     location: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
     }).nullable(),
     location_id: Yup.number()
-      .required('Lokasi wajib diisi!')
-      .test('is-valid-location', 'Lokasi wajib diisi!', function (value) {
+      .required('Lokasi wajib dipilih!')
+      .test('is-valid-location', 'Lokasi wajib dipilih!', function (value) {
         if (!this.parent.location) return true;
         return Boolean(value && value > 0);
       })
-      .typeError('Lokasi wajib diisi!'),
-    credit_term: Yup.number()
-      .required('Termin kredit wajib diisi!')
-      .min(1, 'Termin kredit tidak boleh negatif!')
-      .typeError('Termin kredit harus berupa angka!'),
+      .typeError('Lokasi wajib dipilih!'),
+    credit_term: Yup.lazy((value, context) => {
+      const supplier_id = context.parent.supplier_id;
+      const hasSupplier = supplier_id && supplier_id > 0;
+
+      if (!hasSupplier) {
+        return Yup.mixed<string | number>()
+          .nullable()
+          .default(null)
+          .transform(() => null);
+      }
+
+      return Yup.number()
+        .required('Jumlah hari jatuh tempo wajib diisi!')
+        .min(1, 'Jumlah hari jatuh tempo minimal 1 hari!')
+        .typeError('Jumlah hari jatuh tempo harus berupa angka!');
+    }),
     notes: Yup.string().nullable().default(null),
     purchase_items: Yup.array()
       .of(PurchaseItemObjectSchema)
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index dce21146..a6ef549f 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 import { useRouter } from 'next/navigation';
@@ -8,6 +8,7 @@ import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 import SelectInput, {
   OptionType,
   useSelect,
@@ -27,6 +28,7 @@ import {
   LocationApi,
   WarehouseApi,
 } from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { PurchaseApi } from '@/services/api/purchasing';
@@ -96,6 +98,15 @@ const PurchaseRequestForm = ({
     };
   };
 
+  const getSupplierById = (supplierId: number): Supplier | null => {
+    if (!isResponseSuccess(supplierRawData)) return null;
+    return (
+      supplierRawData?.data.find(
+        (supplier: Supplier) => supplier.id === supplierId
+      ) || null
+    );
+  };
+
   // ===== FORM HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
     async (payload: CreatePurchaseRequestPayload) => {
@@ -155,7 +166,8 @@ const PurchaseRequestForm = ({
     setInputValue: setSupplierSelectInputValue,
     options: supplierOptions,
     isLoadingOptions: isLoadingSuppliers,
-  } = useSelect(SupplierApi.basePath, 'id', 'name', 'search');
+    rawData: supplierRawData,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
 
   const {
     inputValue: areaSelectInputValue,
@@ -353,6 +365,20 @@ const PurchaseRequestForm = ({
     formik.setFieldValue('supplier', supplier);
     formik.setFieldTouched('supplier_id', true);
     formik.setFieldValue('supplier_id', (supplier as OptionType)?.value || 0);
+
+    if (supplier?.value) {
+      const supplierId =
+        typeof supplier.value === 'string'
+          ? parseInt(supplier.value)
+          : supplier.value;
+      const supplierData = getSupplierById(supplierId);
+      if (supplierData?.due_date) {
+        formik.setFieldTouched('credit_term', true);
+        formik.setFieldValue('credit_term', supplierData.due_date.toString());
+      }
+    } else {
+      formik.setFieldValue('credit_term', '');
+    }
   };
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -509,15 +535,15 @@ const PurchaseRequestForm = ({
                 onInputChange={setSupplierSelectInputValue}
                 isLoading={isLoadingSuppliers}
                 isError={
-                  formik.touched.supplier_id &&
-                  Boolean(formik.errors.supplier_id)
+                  formik.touched.supplier && Boolean(formik.errors.supplier_id)
                 }
                 errorMessage={formik.errors.supplier_id as string}
                 isDisabled={type === 'detail'}
                 isClearable
               />
-              <TextInput
-                required
+
+              <NumberInput
+                required={!!formik.values.supplier_id}
                 label='Jatuh tempo (hari)'
                 name='credit_term'
                 value={formik.values.credit_term || ''}
@@ -528,9 +554,15 @@ const PurchaseRequestForm = ({
                   Boolean(formik.errors.credit_term)
                 }
                 errorMessage={formik.errors.credit_term as string}
-                readOnly={type === 'detail'}
-                type='number'
-                placeholder='Masukkan Credit Term'
+                readOnly={type === 'detail' || !formik.values.supplier_id}
+                disabled={type === 'detail' || !formik.values.supplier_id}
+                allowNegative={false}
+                decimalScale={0}
+                placeholder={
+                  !formik.values.supplier_id
+                    ? 'Pilih Vendor terlebih dahulu'
+                    : 'Masukkan jumlah hari jatuh tempo'
+                }
               />
 
               <SelectInput
@@ -542,9 +574,7 @@ const PurchaseRequestForm = ({
                 options={areaOptions}
                 onInputChange={setAreaSelectInputValue}
                 isLoading={isLoadingAreas}
-                isError={
-                  formik.touched.area && Boolean(formik.errors.area_id)
-                }
+                isError={formik.touched.area && Boolean(formik.errors.area_id)}
                 errorMessage={formik.errors.area_id as string}
                 isDisabled={type === 'detail'}
                 isClearable

From ecdd8ae49c6d3eccfb663f9823a92522ed08d4c2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 15:19:19 +0700
Subject: [PATCH 021/168] refactor(FE-208,212): update PurchaseRequestForm
 schema and validation, improve credit term handling and reset logic for
 supplier changes

---
 .../form/PurchaseRequestForm.schema.ts        | 27 +++++++++----------
 .../purchase/form/PurchaseRequestForm.tsx     | 13 ++++++---
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
index 27cbdf5a..d496308f 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
@@ -17,7 +17,7 @@ type PurchaseRequestFormSchemaType = {
     label: string;
   } | null;
   location_id: number;
-  credit_term: number | string | null;
+  credit_term: number | string | undefined;
   notes: string | null;
   purchase_items: {
     warehouse?: {
@@ -85,7 +85,7 @@ const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
       .min(1, 'Produk wajib dipilih!')
       .typeError('Produk wajib dipilih!'),
     sub_qty: Yup.mixed<string | number>()
-      .required('Sub Qty wajib diisi!')
+      .required('Kuantitas wajib diisi!')
       .test(
         'is-valid-sub-qty',
         'Kuantitas harus berupa angka lebih dari 0!',
@@ -134,21 +134,18 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
         return Boolean(value && value > 0);
       })
       .typeError('Lokasi wajib dipilih!'),
-    credit_term: Yup.lazy((value, context) => {
-      const supplier_id = context.parent.supplier_id;
-      const hasSupplier = supplier_id && supplier_id > 0;
-
-      if (!hasSupplier) {
-        return Yup.mixed<string | number>()
+    credit_term: Yup.mixed<string | number>().when('supplier_id', {
+      is: (supplier_id: number) => supplier_id && supplier_id > 0,
+      then: () =>
+        Yup.number()
+          .required('Jumlah hari jatuh tempo wajib diisi!')
+          .min(1, 'Jumlah hari jatuh tempo minimal 1 hari!')
+          .typeError('Jumlah hari jatuh tempo harus berupa angka!'),
+      otherwise: () =>
+        Yup.mixed<string | number>()
           .nullable()
           .default(null)
-          .transform(() => null);
-      }
-
-      return Yup.number()
-        .required('Jumlah hari jatuh tempo wajib diisi!')
-        .min(1, 'Jumlah hari jatuh tempo minimal 1 hari!')
-        .typeError('Jumlah hari jatuh tempo harus berupa angka!');
+          .transform(() => null),
     }),
     notes: Yup.string().nullable().default(null),
     purchase_items: Yup.array()
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index a6ef549f..3607d1a1 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -85,7 +85,7 @@ const PurchaseRequestForm = ({
       | Record<string, string>
       | undefined;
 
-    if (!touchedItem || !errorItem) {
+    if (!touchedItem) {
       return { isError: false, errorMessage: '' };
     }
 
@@ -377,6 +377,8 @@ const PurchaseRequestForm = ({
         formik.setFieldValue('credit_term', supplierData.due_date.toString());
       }
     } else {
+      // Reset credit_term field and its touched state when supplier is cleared
+      formik.setFieldTouched('credit_term', false);
       formik.setFieldValue('credit_term', '');
     }
   };
@@ -787,7 +789,7 @@ const PurchaseRequestForm = ({
                         />
                       </td>
                       <td>
-                        <TextInput
+                        <NumberInput
                           required
                           name={`purchase_items.${idx}.sub_qty`}
                           value={item.sub_qty || ''}
@@ -799,9 +801,14 @@ const PurchaseRequestForm = ({
                             )
                           }
                           onBlur={formik.handleBlur}
-                          type='number'
                           placeholder='Masukkan kuantitas'
                           readOnly={type === 'detail'}
+                          allowNegative={false}
+                          decimalScale={0}
+                          isError={getPurchaseItemError(idx, 'sub_qty').isError}
+                          errorMessage={
+                            getPurchaseItemError(idx, 'sub_qty').errorMessage
+                          }
                           className={{
                             wrapper: 'min-w-24',
                           }}

From ee24ceaff1f9be994f7cdfbe9ff9795362cef1a2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 15:45:42 +0700
Subject: [PATCH 022/168] refactor(FE-208,212): update PurchaseRequestForm to
 reset location fields on area change, improve handling of location value and
 dependencies

---
 src/components/pages/purchase/form/PurchaseRequestForm.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 3607d1a1..ef213ebd 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -391,7 +391,9 @@ const PurchaseRequestForm = ({
     formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
 
     // Reset area dependent fields
-    formik.setFieldValue('location', null);
+    formik.setFieldTouched('location', false);
+    formik.setFieldValue('location', undefined);
+    formik.setFieldTouched('location_id', false);
     formik.setFieldValue('location_id', 0);
     setLocationSelectInputValue('');
 
@@ -590,7 +592,7 @@ const PurchaseRequestForm = ({
                     ? 'Pilih Area terlebih dahulu'
                     : 'Pilih Lokasi...'
                 }
-                value={formik.values.location}
+                value={formik.values.area_id ? formik.values.location : null}
                 onChange={locationChangeHandler}
                 options={locationOptions}
                 onInputChange={setLocationSelectInputValue}
@@ -601,6 +603,7 @@ const PurchaseRequestForm = ({
                 errorMessage={formik.errors.location_id as string}
                 isDisabled={type === 'detail' || !formik.values.area_id}
                 isClearable={type !== 'detail' && !!formik.values.area_id}
+                key={`location-${formik.values.area_id}`}
               />
 
               <div className={type === 'detail' ? 'col-span-1' : 'col-span-2'}>

From 289c8d567281e9aed44fa60e5f0512c8dfda2eea Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 08:56:57 +0700
Subject: [PATCH 023/168] refactor(FE-208,212): enhance PurchaseRequestForm
 with product data fetching, update price and UOM fields based on selected
 products

---
 .../purchase/form/PurchaseRequestForm.tsx     | 80 ++++++++++++++++---
 1 file changed, 71 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index ef213ebd..14c0fc62 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -27,8 +27,10 @@ import {
   AreaApi,
   LocationApi,
   WarehouseApi,
+  ProductApi,
 } from '@/services/api/master-data';
 import { Supplier } from '@/types/api/master-data/supplier';
+import { Product } from '@/types/api/master-data/product';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { PurchaseApi } from '@/services/api/purchasing';
@@ -63,11 +65,6 @@ const PurchaseRequestForm = ({
   ] = useState('');
 
   // ===== INTERFACES =====
-  interface WarehouseOptionType extends OptionType {
-    area?: string;
-    location?: string;
-  }
-
   interface ProductWarehouseOptionType extends OptionType {
     product_id: number;
     warehouse_id: number;
@@ -293,6 +290,37 @@ const PurchaseRequestForm = ({
     },
   });
 
+  // ===== PRODUCT DATA FETCHING =====
+  const productUrl = useMemo(() => {
+    const productIds =
+      formik.values.purchase_items
+        ?.filter(
+          (item) => item.product_id && typeof item.product_id === 'number'
+        )
+        .map((item) => item.product_id as number) || [];
+
+    return productIds.length > 0
+      ? `${ProductApi.basePath}?${new URLSearchParams({
+          id: productIds.join(','),
+        }).toString()}`
+      : null;
+  }, [formik.values.purchase_items]);
+
+  const { data: productsResponse } = useSWR(
+    productUrl,
+    ProductApi.getAllFetcher
+  );
+
+  const productData = useMemo(() => {
+    if (!isResponseSuccess(productsResponse)) return {};
+
+    const data: Record<number, Product> = {};
+    productsResponse?.data?.forEach((product: Product) => {
+      data[product.id] = product;
+    });
+    return data;
+  }, [productsResponse]);
+
   // ===== API DATA FETCHING =====
   const locationsUrl = useMemo(() => {
     const params = new URLSearchParams({
@@ -760,10 +788,12 @@ const PurchaseRequestForm = ({
                               (productWarehouse as ProductWarehouseOptionType)
                                 ?.value || 0
                             );
+                            const productId =
+                              (productWarehouse as ProductWarehouseOptionType)
+                                ?.product_id || 0;
                             formik.setFieldValue(
                               `purchase_items.${idx}.product_id`,
-                              (productWarehouse as ProductWarehouseOptionType)
-                                ?.product_id || 0
+                              productId
                             );
                           }}
                           options={getProductWarehouseOptionsForItem(
@@ -821,6 +851,16 @@ const PurchaseRequestForm = ({
                         <TextInput
                           required
                           name={`purchase_items.${idx}.price`}
+                          value={
+                            item.product_id && productData[item.product_id]
+                              ? (
+                                  productData[item.product_id].product_price *
+                                  (parseFloat(
+                                    item.sub_qty?.toString() || '0'
+                                  ) || 0)
+                                ).toLocaleString('en-US')
+                              : ''
+                          }
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,
@@ -829,26 +869,48 @@ const PurchaseRequestForm = ({
                             )
                           }
                           onBlur={formik.handleBlur}
-                          type='number'
+                          type='text'
                           className={{
                             wrapper: 'min-w-24',
                           }}
                           disabled={true}
                           readOnly={true}
                           inputPrefix={'Rp'}
+                          placeholder={
+                            item.product_id
+                              ? 'Loading...'
+                              : 'Pilih produk terlebih dahulu'
+                          }
+                          bottomLabel={
+                            item.product_id && productData[item.product_id]
+                              ? `Harga per unit: Rp ${productData[
+                                  item.product_id
+                                ].product_price.toLocaleString('en-US')}`
+                              : ''
+                          }
                         />
                       </td>
                       <td>
                         <TextInput
                           required
                           name={`purchase_items.${idx}.uom`}
+                          value={
+                            item.product_id && productData[item.product_id]
+                              ? productData[item.product_id].uom.name
+                              : ''
+                          }
                           onBlur={formik.handleBlur}
-                          type='number'
+                          type='text'
                           readOnly={true}
                           disabled={true}
                           className={{
                             wrapper: 'min-w-24',
                           }}
+                          placeholder={
+                            item.product_id
+                              ? 'Loading...'
+                              : 'Pilih produk terlebih dahulu'
+                          }
                         />
                       </td>
                       {type !== 'detail' && (

From 39dbf57d7fced6a561c9d6aa9b9585ee19b87fb1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 09:20:39 +0700
Subject: [PATCH 024/168] refactor(FE-208,212): streamline PurchaseRequestForm
 structure, enhance state management, and improve field handling for purchase
 items

---
 .../purchase/form/PurchaseRequestForm.tsx     | 152 +++++++-----------
 1 file changed, 61 insertions(+), 91 deletions(-)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
index 14c0fc62..fd1a63f8 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/PurchaseRequestForm.tsx
@@ -52,19 +52,16 @@ const PurchaseRequestForm = ({
 }: PurchaseRequestFormProps) => {
   const router = useRouter();
   const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
   const [selectedPurchaseItems, setSelectedPurchaseItems] = useState<number[]>(
     []
   );
   const [purchaseRequestFormErrorMessage, setPurchaseRequestFormErrorMessage] =
     useState('');
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [
-    productWarehouseSelectInputValue,
-    setProductWarehouseSelectInputValue,
-  ] = useState('');
 
-  // ===== INTERFACES =====
+  // ===== TYPE DEFINITIONS =====
   interface ProductWarehouseOptionType extends OptionType {
     product_id: number;
     warehouse_id: number;
@@ -72,7 +69,7 @@ const PurchaseRequestForm = ({
     quantity: number;
   }
 
-  // ===== HELPER FUNCTIONS =====
+  // ===== UTILITY FUNCTIONS =====
   const getPurchaseItemError = (
     idx: number,
     field: 'warehouse_id' | 'product_warehouse_id' | 'product_id' | 'sub_qty'
@@ -104,7 +101,7 @@ const PurchaseRequestForm = ({
     );
   };
 
-  // ===== FORM HANDLERS =====
+  // ===== SUBMISSION HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
     async (payload: CreatePurchaseRequestPayload) => {
       const res = await PurchaseApi.create(payload);
@@ -150,14 +147,7 @@ const PurchaseRequestForm = ({
     router.push('/purchase');
   }, [deleteModal, initialValues?.id, router]);
 
-  // ===== API DATA FETCHING =====
-  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
-  const { data: allProductWarehouses } = useSWR(
-    allProductWarehousesUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-
-  // ===== USE SELECT HOOKS =====
+  // ===== SELECT INPUT DATA =====
   const {
     inputValue: supplierSelectInputValue,
     setInputValue: setSupplierSelectInputValue,
@@ -173,65 +163,13 @@ const PurchaseRequestForm = ({
     isLoadingOptions: isLoadingAreas,
   } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-
   const {
     inputValue: warehouseSelectInputValue,
     setInputValue: setWarehouseSelectInputValue,
     isLoadingOptions: isLoadingWarehouses,
   } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
 
-  // ===== PRODUCT WAREHOUSE FETCHING =====
-  const getProductWarehousesUrl = useCallback(() => {
-    const productWarehouseParams = new URLSearchParams({
-      search: productWarehouseSelectInputValue,
-    });
-
-    return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
-  }, [productWarehouseSelectInputValue]);
-
-  const productWarehousesUrl = getProductWarehousesUrl();
-  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(productWarehousesUrl, ProductWarehouseApi.getAllFetcher);
-
-  // Filter product warehouses per item based on selected warehouse
-  const getProductWarehouseOptionsForItem = useCallback(
-    (warehouseId: number | string) => {
-      if (!isResponseSuccess(productWarehouses)) return [];
-
-      const warehouseIdNum =
-        typeof warehouseId === 'string'
-          ? parseInt(warehouseId) || 0
-          : warehouseId;
-      if (warehouseIdNum === 0) return [];
-
-      return (
-        productWarehouses?.data
-          .filter((pw) => pw.warehouse.id === warehouseIdNum)
-          .map((pw) => ({
-            value: pw.product.id,
-            label: pw.product.name,
-            product_id: pw.product.id,
-            warehouse_id: pw.warehouse.id,
-            warehouse_name: pw.warehouse.name,
-            quantity: pw.quantity,
-          })) || []
-      );
-    },
-    [productWarehouses]
-  );
-
-  const productWarehouseOptions = isResponseSuccess(productWarehouses)
-    ? productWarehouses?.data.map((pw) => ({
-        value: pw.product.id,
-        label: pw.product.name,
-        product_id: pw.product.id,
-        warehouse_id: pw.warehouse.id,
-        warehouse_name: pw.warehouse.name,
-        quantity: pw.quantity,
-      }))
-    : [];
-
+  // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo<PurchaseRequestFormValues>(
     () => getPurchaseRequestFormInitialValues(initialValues),
     [initialValues]
@@ -290,7 +228,37 @@ const PurchaseRequestForm = ({
     },
   });
 
-  // ===== PRODUCT DATA FETCHING =====
+  // ===== API DATA FETCHING =====
+  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
+    useSWR(allProductWarehousesUrl, ProductWarehouseApi.getAllFetcher);
+
+  const getProductWarehouseOptionsForItem = useCallback(
+    (warehouseId: number | string) => {
+      if (!isResponseSuccess(productWarehouses)) return [];
+
+      const warehouseIdNum =
+        typeof warehouseId === 'string'
+          ? parseInt(warehouseId) || 0
+          : warehouseId;
+      if (warehouseIdNum === 0) return [];
+
+      return (
+        productWarehouses?.data
+          .filter((pw) => pw.warehouse.id === warehouseIdNum)
+          .map((pw) => ({
+            value: pw.product.id,
+            label: pw.product.name,
+            product_id: pw.product.id,
+            warehouse_id: pw.warehouse.id,
+            warehouse_name: pw.warehouse.name,
+            quantity: pw.quantity,
+          })) || []
+      );
+    },
+    [productWarehouses]
+  );
+
   const productUrl = useMemo(() => {
     const productIds =
       formik.values.purchase_items
@@ -320,8 +288,6 @@ const PurchaseRequestForm = ({
     });
     return data;
   }, [productsResponse]);
-
-  // ===== API DATA FETCHING =====
   const locationsUrl = useMemo(() => {
     const params = new URLSearchParams({
       search: locationSelectInputValue,
@@ -386,7 +352,7 @@ const PurchaseRequestForm = ({
     );
   }, [warehouses]);
 
-  // ===== EVENT HANDLERS =====
+  // ===== FIELD CHANGE HANDLERS =====
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     const supplier = val as OptionType | null;
     formik.setFieldTouched('supplier', true);
@@ -494,28 +460,19 @@ const PurchaseRequestForm = ({
     setSelectedPurchaseItems([]);
   };
 
+  // ===== PURCHASE ITEM OPERATIONS =====
   const handlePurchaseItemChange = (
     idx: number,
-    field: string,
+    field: 'sub_qty' | 'price',
     value: string | number
   ) => {
-    const integerFields = [
-      'warehouse_id',
-      'product_id',
-      'product_warehouse_id',
-      'total_qty',
-    ];
-    const floatFields = ['price', 'sub_qty'];
-
-    if (integerFields.includes(field)) {
+    if (field === 'sub_qty') {
       const numValue = typeof value === 'string' ? parseInt(value) || 0 : value;
-      formik.setFieldValue(`purchase_items.${idx}.${field}`, numValue);
-    } else if (floatFields.includes(field)) {
+      formik.setFieldValue(`purchase_items.${idx}.sub_qty`, numValue);
+    } else if (field === 'price') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
-      formik.setFieldValue(`purchase_items.${idx}.${field}`, numValue);
-    } else {
-      formik.setFieldValue(`purchase_items.${idx}.${field}`, value);
+      formik.setFieldValue(`purchase_items.${idx}.price`, numValue);
     }
   };
 
@@ -731,6 +688,7 @@ const PurchaseRequestForm = ({
                         <SelectInput
                           required
                           value={item.warehouse}
+                          key={`warehouse-${idx}`}
                           onChange={(val) => {
                             const warehouse = val as OptionType | null;
                             formik.setFieldValue(
@@ -741,17 +699,29 @@ const PurchaseRequestForm = ({
                               `purchase_items.${idx}.warehouse_id`,
                               (warehouse as OptionType)?.value || 0
                             );
+                            formik.setFieldTouched(
+                              `purchase_items.${idx}.product_warehouse`,
+                              false
+                            );
                             formik.setFieldValue(
                               `purchase_items.${idx}.product_warehouse`,
                               null
                             );
+                            formik.setFieldTouched(
+                              `purchase_items.${idx}.product_warehouse_id`,
+                              false
+                            );
                             formik.setFieldValue(
                               `purchase_items.${idx}.product_warehouse_id`,
-                              null
+                              0
+                            );
+                            formik.setFieldTouched(
+                              `purchase_items.${idx}.product_id`,
+                              false
                             );
                             formik.setFieldValue(
                               `purchase_items.${idx}.product_id`,
-                              ''
+                              0
                             );
                           }}
                           options={warehouseOptions}
@@ -776,6 +746,7 @@ const PurchaseRequestForm = ({
                         <SelectInput
                           required
                           value={item.product_warehouse}
+                          key={`product-warehouse-${idx}-${item.warehouse_id}`}
                           onChange={(val) => {
                             const productWarehouse =
                               val as ProductWarehouseOptionType | null;
@@ -799,7 +770,6 @@ const PurchaseRequestForm = ({
                           options={getProductWarehouseOptionsForItem(
                             item.warehouse_id
                           )}
-                          onInputChange={setProductWarehouseSelectInputValue}
                           isLoading={isLoadingProductWarehouses}
                           isError={
                             getPurchaseItemError(idx, 'product_warehouse_id')

From 1e44fec15fe2944ad2a119683849e5ede24ea1cd Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 10:48:57 +0700
Subject: [PATCH 025/168] feat(FE-208,212): implement PurchaseService for
 fetching purchase request data with dummy response

---
 src/services/api/purchase.ts   | 88 ++++++++++++++++++++++++++++++++++
 src/services/api/purchasing.ts | 12 -----
 2 files changed, 88 insertions(+), 12 deletions(-)
 create mode 100644 src/services/api/purchase.ts
 delete mode 100644 src/services/api/purchasing.ts

diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
new file mode 100644
index 00000000..2f26c564
--- /dev/null
+++ b/src/services/api/purchase.ts
@@ -0,0 +1,88 @@
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from './base';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  CreatePurchaseRequestPayload,
+  Purchase,
+  UpdatePurchaseRequestPayload,
+} from '@/types/api/purchase/purchase';
+
+const GET_ALL_PURCHASE_DUMMY_DATA: BaseApiResponse<Purchase[]> = {
+  code: 200,
+  status: 'success',
+  message: 'Successfully get all purchase data!',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 1,
+  },
+  data: [
+    {
+      id: 1,
+      pr_number: 'PR-001',
+      po_number: 'PO-001',
+      po_date: '2024-01-15',
+      supplier: {
+        id: 1,
+        name: 'Supplier A',
+        address: '123 Main St, Cityville',
+        account_number: 'ACC-12345',
+        alias: 'SupA',
+        category: 'Electronics',
+        type: 'Local',
+        phone: '555-1234',
+        email: 'email@.com',
+        npwp: '12.345.678.9-012.345',
+        pic: 'John Doe',
+        balance: 1000000,
+        hatchery: 'N/A',
+        due_date: 30,
+        created_at: '2024-01-10T10:00:00Z',
+        updated_at: '2024-01-12T12:00:00Z',
+        created_user: {
+          id: 2,
+          id_user: 2,
+          email: 'a@email.com',
+          name: 'Admin User',
+        },
+      },
+      credit_term: 30,
+      due_date: '2024-02-14',
+      grand_total: 1500000,
+      deleted_at: null,
+      created_at: '2024-01-10T10:00:00Z',
+      updated_at: '2024-01-12T12:00:00Z',
+      created_by: 2,
+      created_user: {
+        id: 2,
+        id_user: 2,
+        email: 'a@email.com',
+        name: 'Admin User',
+      },
+      notes: 'Urgent delivery required',
+    },
+  ],
+};
+
+export class PurchaseService extends BaseApiService<
+  Purchase,
+  CreatePurchaseRequestPayload,
+  UpdatePurchaseRequestPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<Purchase[]>> {
+    // return await httpClientFetcher<BaseApiResponse<T[]>>(endpoint);
+
+    await sleep(750);
+
+    return GET_ALL_PURCHASE_DUMMY_DATA;
+  }
+}
+
+export const PurchaseApi = new PurchaseService('/purchase-requests');
diff --git a/src/services/api/purchasing.ts b/src/services/api/purchasing.ts
deleted file mode 100644
index 2ed23193..00000000
--- a/src/services/api/purchasing.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { BaseApiService } from './base';
-import {
-  CreatePurchaseRequestPayload,
-  Purchase,
-  UpdatePurchaseRequestPayload,
-} from '@/types/api/purchase/purchase';
-
-export const PurchaseApi = new BaseApiService<
-  Purchase,
-  CreatePurchaseRequestPayload,
-  UpdatePurchaseRequestPayload
->('/purchase-requests');

From 986830aa4785565be1696a2c3b0e775069bd1dd8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 10:49:19 +0700
Subject: [PATCH 026/168] refactor(FE-208,212): rename PurchaseRequestForm
 files and update import paths for consistency

---
 .../purchase/form/{ => request}/PurchaseRequestForm.schema.ts   | 0
 .../pages/purchase/form/{ => request}/PurchaseRequestForm.tsx   | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/pages/purchase/form/{ => request}/PurchaseRequestForm.schema.ts (100%)
 rename src/components/pages/purchase/form/{ => request}/PurchaseRequestForm.tsx (99%)

diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
similarity index 100%
rename from src/components/pages/purchase/form/PurchaseRequestForm.schema.ts
rename to src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
diff --git a/src/components/pages/purchase/form/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
similarity index 99%
rename from src/components/pages/purchase/form/PurchaseRequestForm.tsx
rename to src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index fd1a63f8..d7a5fceb 100644
--- a/src/components/pages/purchase/form/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -33,7 +33,7 @@ import { Supplier } from '@/types/api/master-data/supplier';
 import { Product } from '@/types/api/master-data/product';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-import { PurchaseApi } from '@/services/api/purchasing';
+import { PurchaseApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
 import {

From 7c9c7eac1074da1c93ba779ad68ddc0aaf38546f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 10:49:45 +0700
Subject: [PATCH 027/168] refactor(FE-208,212): update import path for
 PurchaseRequestForm to reflect new directory structure

---
 src/app/purchase/add/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/purchase/add/page.tsx b/src/app/purchase/add/page.tsx
index c69d3b10..7e1cb9e7 100644
--- a/src/app/purchase/add/page.tsx
+++ b/src/app/purchase/add/page.tsx
@@ -1,4 +1,4 @@
-import PurchaseRequestForm from '@/components/pages/purchase/form/PurchaseRequestForm';
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
 
 const AddPurchaseRequest = () => {
   return (

From ef339e128d3fab01aafb44e7084539bc70916e84 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 10:51:12 +0700
Subject: [PATCH 028/168] feat(FE-208,212): add Purchase and PurchaseTable
 components for managing purchase requests

---
 src/app/purchase/page.tsx                     |  11 +
 .../pages/purchase/PurchaseTable.tsx          | 446 ++++++++++++++++++
 2 files changed, 457 insertions(+)
 create mode 100644 src/app/purchase/page.tsx
 create mode 100644 src/components/pages/purchase/PurchaseTable.tsx

diff --git a/src/app/purchase/page.tsx b/src/app/purchase/page.tsx
new file mode 100644
index 00000000..dc25a99d
--- /dev/null
+++ b/src/app/purchase/page.tsx
@@ -0,0 +1,11 @@
+import PurchaseTable from '@/components/pages/purchase/PurchaseTable';
+
+const Purchase = () => {
+  return (
+    <section className='w-full p-4'>
+      <PurchaseTable />
+    </section>
+  );
+};
+
+export default Purchase;
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
new file mode 100644
index 00000000..0ff9b12c
--- /dev/null
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -0,0 +1,446 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import TextInput from '@/components/input/TextInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+
+import { cn, formatDate, formatCurrency } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Purchase } from '@/types/api/purchase/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Purchase, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <RowOptionsMenuWrapper type={type}>
+      <Button
+        href={`/purchase/request/detail/?purchaseId=${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={`/purchase/request/detail/edit/?purchaseId=${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='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
+const PurchaseTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      poDate: '',
+      supplier: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      poDate: 'po_date',
+      supplier: 'supplier',
+    },
+  });
+
+  const {
+    data: purchaseRequests,
+    isLoading,
+    mutate: refreshPurchaseRequests,
+  } = useSWR(
+    `${PurchaseApi.basePath}${getTableFilterQueryString()}`,
+    PurchaseApi.getAllFetcher
+  );
+
+  // Modal hooks
+  const deleteModal = useModal();
+
+  // Supplier modal
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+  } = useSelect('/suppliers', 'id', 'name');
+
+  // Supplier value
+  const [selectedSupplier, setSelectedSupplier] = useState<OptionType | null>(
+    null
+  );
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Selected purchase request for operations
+  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
+    null
+  );
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const purchaseColumns: ColumnDef<Purchase>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div>
+          <CheckboxInput
+            name='row'
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            indeterminate={row.getIsSomeSelected()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        </div>
+      ),
+    },
+    {
+      header: 'No. PR/PO',
+      cell: (props) => {
+        const { pr_number, po_number } = props.row.original;
+        return po_number ? po_number : pr_number;
+      },
+    },
+    {
+      accessorKey: 'supplier',
+      header: 'Vendor',
+      cell: (props) => props.row.original.supplier.name,
+    },
+    {
+      accessorKey: 'created_user',
+      header: 'Nama Pengaju',
+      cell: (props) => props.row.original.created_user.name,
+    },
+    {
+      accessorKey: 'po_date',
+      header: 'Tgl. PO',
+      cell: (props) =>
+        props.row.original.po_date
+          ? formatDate(props.row.original.po_date, 'DD-MMM-YYYY')
+          : '-',
+    },
+    {
+      accessorKey: 'due_date',
+      header: 'Jatuh Tempo',
+      cell: (props) =>
+        props.row.original.due_date
+          ? formatDate(props.row.original.due_date, 'DD-MMM-YYYY')
+          : '-',
+    },
+    {
+      header: 'Aging',
+      cell: (props) => {
+        if (!props.row.original.po_date) return '-';
+        const poDate = new Date(props.row.original.po_date);
+        const today = new Date();
+        const diffTime = Math.abs(today.getTime() - poDate.getTime());
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        return `${diffDays} hari`;
+      },
+    },
+    {
+      accessorKey: 'grand_total',
+      header: 'Total (Rp.)',
+      cell: (props) => formatCurrency(props.row.original.grand_total),
+    },
+    {
+      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 = () => {
+          setSelectedPurchase(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    try {
+      await PurchaseApi.delete(selectedPurchase?.id as number);
+      refreshPurchaseRequests();
+      deleteModal.closeModal();
+      toast.success('Berhasil menghapus data permintaan pembelian!');
+    } catch (error) {
+      toast.error('Gagal menghapus data permintaan pembelian!');
+    }
+
+    setIsDeleteLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const poDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('poDate', e.target.value);
+  };
+
+  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedSupplier(val as OptionType);
+    updateFilter('supplier', val ? ((val as OptionType).value as string) : '');
+  };
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+              <Button
+                href='/purchase/request/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+
+              {selectedRowIds.length > 0 && (
+                <Button
+                  variant='outline'
+                  color='error'
+                  onClick={() => {
+                    setSelectedPurchase(
+                      isResponseSuccess(purchaseRequests)
+                        ? purchaseRequests?.data?.find((p: Purchase) =>
+                            selectedRowIds.includes(p.id)
+                          ) || null
+                        : null
+                    );
+                    deleteModal.openModal();
+                  }}
+                  disabled={selectedRowIds.length === 0}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                  />
+                  Hapus ({selectedRowIds.length})
+                </Button>
+              )}
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Pembelian'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{
+                wrapper: 'sm:max-w-3xs',
+              }}
+            />
+          </div>
+
+          <div className='flex flex-wrap justify-between gap-4'>
+            <div className='flex flex-wrap gap-4'>
+              <TextInput
+                required
+                type='date'
+                label='Tanggal PO'
+                name='po_date'
+                placeholder='Masukkan tanggal PO'
+                value={tableFilterState.poDate}
+                onChange={poDateChangeHandler}
+                className={{
+                  wrapper: 'w-full sm:w-48',
+                }}
+              />
+
+              <SelectInput
+                label='Vendor'
+                options={supplierOptions}
+                isLoading={isLoadingSupplierOptions}
+                value={selectedSupplier}
+                onChange={supplierChangeHandler}
+                onInputChange={setSupplierInputValue}
+                isClearable
+                className={{
+                  wrapper: 'w-full sm:w-56',
+                }}
+              />
+            </div>
+
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper: 'w-full sm:w-24',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<Purchase>
+          data={
+            isResponseSuccess(purchaseRequests) ? purchaseRequests?.data : []
+          }
+          columns={purchaseColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(purchaseRequests)
+              ? purchaseRequests?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(purchaseRequests)
+              ? purchaseRequests?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(purchaseRequests) &&
+                purchaseRequests?.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 permintaan pembelian ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default PurchaseTable;

From c790180e86fdcee6435b40f60deb121a4938a241 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 10:51:54 +0700
Subject: [PATCH 029/168] feat(FE-208): add Layout component to wrap children
 with SuspenseHelper

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

diff --git a/src/app/purchase/detail/layout.tsx b/src/app/purchase/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/purchase/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 3312a47f38f5f69d6dcfc92144fdc06fdb770b2d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 11:22:52 +0700
Subject: [PATCH 030/168] feat(FE-208): create PurchaseDetail page with dummy
 data and integrate PurchaseRequestForm

---
 src/app/purchase/detail/page.tsx              | 107 ++++++++++++++++++
 .../pages/purchase/PurchaseTable.tsx          |   6 +-
 .../form/request/PurchaseRequestForm.tsx      |  27 +++--
 3 files changed, 127 insertions(+), 13 deletions(-)
 create mode 100644 src/app/purchase/detail/page.tsx

diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
new file mode 100644
index 00000000..c934a945
--- /dev/null
+++ b/src/app/purchase/detail/page.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
+
+import { PurchaseApi } from '@/services/api/purchase';
+import { isResponseError } from '@/lib/api-helper';
+
+import { Purchase } from '@/types/api/purchase/purchase';
+
+// TODO: delete dummy data
+const DUMMY_PURCHASE_DETAIL: Purchase = {
+  id: 1,
+  pr_number: 'PR-001',
+  po_number: 'PO-001',
+  po_date: '2024-01-15',
+  supplier: {
+    id: 1,
+    name: 'Supplier A',
+    address: '123 Main St, Cityville',
+    account_number: 'ACC-12345',
+    alias: 'SupA',
+    category: 'Electronics',
+    type: 'Local',
+    phone: '555-1234',
+    email: 'email@.com',
+    npwp: '12.345.678.9-012.345',
+    pic: 'John Doe',
+    balance: 1000000,
+    hatchery: 'N/A',
+    due_date: 30,
+    created_at: '2024-01-10T10:00:00Z',
+    updated_at: '2024-01-12T12:00:00Z',
+    created_user: {
+      id: 2,
+      id_user: 2,
+      email: 'a@email.com',
+      name: 'Admin User',
+    },
+  },
+  credit_term: 30,
+  due_date: '2024-02-14',
+  grand_total: 1500000,
+  notes: 'Urgent delivery required',
+  deleted_at: null,
+  created_at: '2024-01-10T10:00:00Z',
+  updated_at: '2024-01-12T12:00:00Z',
+  created_by: 2,
+  created_user: {
+    id: 2,
+    id_user: 2,
+    email: 'a@email.com',
+    name: 'Admin User',
+  },
+};
+
+const PurchaseDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const purchaseId = searchParams.get('purchaseId');
+
+  const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
+    purchaseId,
+    (id: number) => PurchaseApi.getSingle(id)
+  );
+
+  if (!purchaseId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingPurchase &&
+    (!purchase || (isResponseError(purchase) && !DUMMY_PURCHASE_DETAIL))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingPurchase && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {/* {!isLoadingPurchase && isResponseSuccess(purchase) && (
+        <PurchaseRequestForm type='detail' initialValues={purchase.data} />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <PurchaseRequestForm
+        type='detail'
+        initialValues={DUMMY_PURCHASE_DETAIL}
+      />
+    </div>
+  );
+};
+
+export default PurchaseDetail;
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 0ff9b12c..9d0fd49b 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -40,7 +40,7 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <Button
-        href={`/purchase/request/detail/?purchaseId=${props.row.original.id}`}
+        href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'
@@ -50,7 +50,7 @@ const RowOptionsMenu = ({
       </Button>
 
       <Button
-        href={`/purchase/request/detail/edit/?purchaseId=${props.row.original.id}`}
+        href={`/purchase/detail/edit/?purchaseId=${props.row.original.id}`}
         variant='ghost'
         color='warning'
         className='justify-start text-sm'
@@ -294,7 +294,7 @@ const PurchaseTable = () => {
           <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
             <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
               <Button
-                href='/purchase/request/add'
+                href='/purchase/add'
                 variant='outline'
                 color='primary'
                 className='w-full sm:w-fit'
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index d7a5fceb..ff8474a0 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -507,13 +507,7 @@ const PurchaseRequestForm = ({
               body: 'flex flex-col gap-6',
             }}
           >
-            <div
-              className={
-                type === 'detail'
-                  ? 'flex flex-col gap-6'
-                  : 'grid grid-cols-1 md:grid-cols-2 gap-6'
-              }
-            >
+            <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
               <SelectInput
                 required
                 label='Vendor'
@@ -591,7 +585,7 @@ const PurchaseRequestForm = ({
                 key={`location-${formik.values.area_id}`}
               />
 
-              <div className={type === 'detail' ? 'col-span-1' : 'col-span-2'}>
+              <div className={'col-span-2'}>
                 <TextInput
                   label='Notes'
                   name='notes'
@@ -601,6 +595,7 @@ const PurchaseRequestForm = ({
                   isError={formik.touched.notes && Boolean(formik.errors.notes)}
                   errorMessage={formik.errors.notes as string}
                   readOnly={type === 'detail'}
+                  disabled={type === 'detail'}
                   placeholder='Masukkan catatan'
                 />
               </div>
@@ -952,12 +947,18 @@ const PurchaseRequestForm = ({
               </div>
             )}
             {type === 'detail' && (
-              <div className='flex flex-row justify-end gap-2 w-full'>
+              <div className='flex flex-row justify-start gap-2'>
                 <Button
                   href={`/purchase/detail/edit/?purchaseId=${initialValues?.id}`}
-                  color='primary'
+                  color='warning'
                   className='px-4'
                 >
+                  <Icon
+                    icon='material-symbols:edit-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
                   Edit
                 </Button>
 
@@ -967,6 +968,12 @@ const PurchaseRequestForm = ({
                   onClick={deletePurchaseRequestClickHandler}
                   className='px-4'
                 >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
                   Delete
                 </Button>
               </div>

From 4828af71b894c720c31189338dec81eb98e0443a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 11:31:32 +0700
Subject: [PATCH 031/168] feat(FE-208): create PurchaseEdit page with dummy
 data and integrate PurchaseRequestForm

---
 src/app/purchase/detail/edit/page.tsx | 104 ++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 src/app/purchase/detail/edit/page.tsx

diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
new file mode 100644
index 00000000..92f0980b
--- /dev/null
+++ b/src/app/purchase/detail/edit/page.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
+
+import { PurchaseApi } from '@/services/api/purchase';
+import { isResponseError } from '@/lib/api-helper';
+
+import { Purchase } from '@/types/api/purchase/purchase';
+
+// TODO: delete dummy data
+const DUMMY_PURCHASE_EDIT: Purchase = {
+  id: 1,
+  pr_number: 'PR-001',
+  po_number: 'PO-001',
+  po_date: '2024-01-15',
+  supplier: {
+    id: 1,
+    name: 'Supplier A',
+    address: '123 Main St, Cityville',
+    account_number: 'ACC-12345',
+    alias: 'SupA',
+    category: 'Electronics',
+    type: 'Local',
+    phone: '555-1234',
+    email: 'email@.com',
+    npwp: '12.345.678.9-012.345',
+    pic: 'John Doe',
+    balance: 1000000,
+    hatchery: 'N/A',
+    due_date: 30,
+    created_at: '2024-01-10T10:00:00Z',
+    updated_at: '2024-01-12T12:00:00Z',
+    created_user: {
+      id: 2,
+      id_user: 2,
+      email: 'a@email.com',
+      name: 'Admin User',
+    },
+  },
+  credit_term: 30,
+  due_date: '2024-02-14',
+  grand_total: 1500000,
+  notes: 'Urgent delivery required',
+  deleted_at: null,
+  created_at: '2024-01-10T10:00:00Z',
+  updated_at: '2024-01-12T12:00:00Z',
+  created_by: 2,
+  created_user: {
+    id: 2,
+    id_user: 2,
+    email: 'a@email.com',
+    name: 'Admin User',
+  },
+};
+
+const PurchaseEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const purchaseId = searchParams.get('purchaseId');
+
+  const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
+    purchaseId,
+    (id: number) => PurchaseApi.getSingle(id)
+  );
+
+  if (!purchaseId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingPurchase &&
+    (!purchase || (isResponseError(purchase) && !DUMMY_PURCHASE_EDIT))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingPurchase && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {/* {!isLoadingPurchase && isResponseSuccess(purchase) && (
+        <PurchaseRequestForm type='detail' initialValues={purchase.data} />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <PurchaseRequestForm type='edit' initialValues={DUMMY_PURCHASE_EDIT} />
+    </div>
+  );
+};
+
+export default PurchaseEdit;

From ef193b9f0393041b0b4f64e1de33e9acd2b5519c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 13:17:43 +0700
Subject: [PATCH 032/168] feat(FE-208,212): enhance PurchaseRequestForm with
 dummy data and update type definitions for purchase items

---
 src/app/purchase/detail/edit/page.tsx | 191 +++++++++++++++++++++++++-
 src/types/api/purchase/purchase.d.ts  |  12 ++
 2 files changed, 198 insertions(+), 5 deletions(-)

diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
index 92f0980b..e265fb4b 100644
--- a/src/app/purchase/detail/edit/page.tsx
+++ b/src/app/purchase/detail/edit/page.tsx
@@ -6,7 +6,7 @@ import useSWR from 'swr';
 import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
 
 import { PurchaseApi } from '@/services/api/purchase';
-import { isResponseError } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 import { Purchase } from '@/types/api/purchase/purchase';
 
@@ -54,6 +54,190 @@ const DUMMY_PURCHASE_EDIT: Purchase = {
     email: 'a@email.com',
     name: 'Admin User',
   },
+  purchase_items: [
+    {
+      id: 1,
+      product_warehouse: {
+        id: 1,
+        product_id: 1,
+        warehouse_id: 1,
+        quantity: 100,
+        product: {
+          id: 1,
+          name: 'Product A',
+          brand: 'Brand A',
+          sku: 'PROD-A-001',
+          product_price: 500000,
+          expiry_period: 0,
+          uom: {
+            id: 1,
+            name: 'pcs',
+            created_at: '2024-01-01T00:00:00Z',
+            updated_at: '2024-01-01T00:00:00Z',
+            created_user: {
+              id: 2,
+              id_user: 2,
+              email: 'a@email.com',
+              name: 'Admin User',
+            },
+          },
+          product_category: {
+            id: 1,
+            code: 'CAT-1',
+            name: 'Electronics',
+            created_at: '2024-01-01T00:00:00Z',
+            updated_at: '2024-01-01T00:00:00Z',
+            created_user: {
+              id: 2,
+              id_user: 2,
+              email: 'a@email.com',
+              name: 'Admin User',
+            },
+          },
+          suppliers: [
+            {
+              id: 1,
+              name: 'Supplier A',
+              alias: 'SupA',
+              pic: 'John Doe',
+              type: 'Local',
+              category: 'Electronics',
+              hatchery: 'N/A',
+              phone: '555-1234',
+              email: 'email@.com',
+              address: '123 Main St, Cityville',
+              npwp: '12.345.678.9-012.345',
+              account_number: 'ACC-12345',
+              due_date: 30,
+              balance: 1000000,
+              created_at: '2024-01-10T10:00:00Z',
+              updated_at: '2024-01-12T12:00:00Z',
+              created_user: {
+                id: 2,
+                id_user: 2,
+                email: 'a@email.com',
+                name: 'Admin User',
+              },
+            },
+          ],
+          flags: [],
+          created_at: '2024-01-05T09:00:00Z',
+          updated_at: '2024-01-07T11:00:00Z',
+          created_user: {
+            id: 2,
+            id_user: 2,
+            email: 'a@email.com',
+            name: 'Admin User',
+          },
+        },
+        warehouse: {
+          id: 1,
+          name: 'Main Warehouse',
+          type: 'AREA',
+          area: { id: 1, name: 'Area 1' },
+          created_at: '2024-01-01T00:00:00Z',
+          updated_at: '2024-01-01T00:00:00Z',
+          created_user: {
+            id: 2,
+            id_user: 2,
+            email: 'a@email.com',
+            name: 'Admin User',
+          },
+        },
+        created_at: '2024-01-05T09:00:00Z',
+        updated_at: '2024-01-07T11:00:00Z',
+        created_user: {
+          id: 2,
+          id_user: 2,
+          email: 'a@email.com',
+          name: 'Admin User',
+        },
+      },
+      product: {
+        id: 1,
+        name: 'Product A',
+        brand: 'Brand A',
+        sku: 'PROD-A-001',
+        product_price: 500000,
+        expiry_period: 0,
+        uom: {
+          id: 1,
+          name: 'pcs',
+          created_at: '2024-01-01T00:00:00Z',
+          updated_at: '2024-01-01T00:00:00Z',
+          created_user: {
+            id: 2,
+            id_user: 2,
+            email: 'a@email.com',
+            name: 'Admin User',
+          },
+        },
+        product_category: {
+          id: 1,
+          code: 'CAT-1',
+          name: 'Electronics',
+          created_at: '2024-01-01T00:00:00Z',
+          updated_at: '2024-01-01T00:00:00Z',
+          created_user: {
+            id: 2,
+            id_user: 2,
+            email: 'a@email.com',
+            name: 'Admin User',
+          },
+        },
+        suppliers: [
+          {
+            id: 1,
+            name: 'Supplier A',
+            alias: 'SupA',
+            pic: 'John Doe',
+            type: 'Local',
+            category: 'Electronics',
+            hatchery: 'N/A',
+            phone: '555-1234',
+            email: 'email@.com',
+            address: '123 Main St, Cityville',
+            npwp: '12.345.678.9-012.345',
+            account_number: 'ACC-12345',
+            due_date: 30,
+            balance: 1000000,
+            created_at: '2024-01-10T10:00:00Z',
+            updated_at: '2024-01-12T12:00:00Z',
+            created_user: {
+              id: 2,
+              id_user: 2,
+              email: 'a@email.com',
+              name: 'Admin User',
+            },
+          },
+        ],
+        flags: [],
+        created_at: '2024-01-05T09:00:00Z',
+        updated_at: '2024-01-07T11:00:00Z',
+        created_user: {
+          id: 2,
+          id_user: 2,
+          email: 'a@email.com',
+          name: 'Admin User',
+        },
+      },
+      warehouse: {
+        id: 1,
+        name: 'Main Warehouse',
+        type: 'AREA',
+        area: { id: 1, name: 'Area 1' },
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        created_user: {
+          id: 2,
+          id_user: 2,
+          email: 'a@email.com',
+          name: 'Admin User',
+        },
+      },
+      sub_qty: 3,
+    },
+  ],
 };
 
 const PurchaseEdit = () => {
@@ -91,11 +275,8 @@ const PurchaseEdit = () => {
       {isLoadingPurchase && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {/* {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseRequestForm type='detail' initialValues={purchase.data} />
-      )} */}
 
-      {/* TODO: remove this dummy data and integrate to real API */}
+      {/* DEBUG TEMP: force dummy to verify form mapping/rendering */}
       <PurchaseRequestForm type='edit' initialValues={DUMMY_PURCHASE_EDIT} />
     </div>
   );
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 669fd4b2..f26f739c 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -1,5 +1,16 @@
 import { BaseMetadata } from '@/types/api/api-general';
 import { Supplier } from '@/types/api/master-data/supplier';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Product } from '@/types/api/master-data/product';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+
+export type PurchaseItem = {
+  id: number;
+  warehouse: Warehouse;
+  product: Product;
+  product_warehouse: ProductWarehouse;
+  sub_qty: number;
+};
 
 export type BasePurchase = {
   id: number;
@@ -13,6 +24,7 @@ export type BasePurchase = {
   notes?: string | null;
   deleted_at?: string | null;
   created_by: number;
+  purchase_items?: PurchaseItem[];
 };
 
 export type Purchase = BaseMetadata & BasePurchase;

From 9d86e216576b063fd7a45085cd05be24d809385c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 13:20:44 +0700
Subject: [PATCH 033/168] refactor(FE-208): remove checkbox selection from
 PurchaseTable component

---
 .../pages/purchase/PurchaseTable.tsx          | 25 -------------------
 1 file changed, 25 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 9d0fd49b..fefc2b40 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -18,7 +18,6 @@ import SelectInput, {
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import TextInput from '@/components/input/TextInput';
-import CheckboxInput from '@/components/input/CheckboxInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { cn, formatDate, formatCurrency } from '@/lib/helper';
@@ -137,30 +136,6 @@ const PurchaseTable = () => {
   );
 
   const purchaseColumns: ColumnDef<Purchase>[] = [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <div className='w-full flex flex-row justify-center'>
-          <CheckboxInput
-            name='allRow'
-            checked={table.getIsAllRowsSelected()}
-            indeterminate={table.getIsSomeRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
-          />
-        </div>
-      ),
-      cell: ({ row }) => (
-        <div>
-          <CheckboxInput
-            name='row'
-            checked={row.getIsSelected()}
-            disabled={!row.getCanSelect()}
-            indeterminate={row.getIsSomeSelected()}
-            onChange={row.getToggleSelectedHandler()}
-          />
-        </div>
-      ),
-    },
     {
       header: 'No. PR/PO',
       cell: (props) => {

From 8c2935859453f5380e7b991dbc3d9cd01d5f068f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 4 Nov 2025 14:36:07 +0700
Subject: [PATCH 034/168] refactor(FE-208): remove required attribute from Area
 and Lokasi SelectInputs in PurchaseRequestForm

---
 .../pages/purchase/form/request/PurchaseRequestForm.tsx         | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index ff8474a0..4e48000e 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -549,7 +549,6 @@ const PurchaseRequestForm = ({
               />
 
               <SelectInput
-                required
                 label='Area'
                 placeholder='Pilih Area...'
                 value={formik.values.area}
@@ -564,7 +563,6 @@ const PurchaseRequestForm = ({
               />
 
               <SelectInput
-                required
                 label='Lokasi'
                 placeholder={
                   !formik.values.area_id

From 12a1e61b68b2ddc97b0821d7f3cbabadb484b217 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 8 Nov 2025 09:52:34 +0700
Subject: [PATCH 035/168] refactor(FE-212): update purchase types and payloads
 for requisition handling

---
 src/services/api/purchase.ts         | 90 +++-------------------------
 src/types/api/purchase/purchase.d.ts | 25 +++++---
 2 files changed, 23 insertions(+), 92 deletions(-)

diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 2f26c564..5070f29c 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -1,88 +1,12 @@
-import { sleep } from '@/lib/helper';
-import { BaseApiService } from './base';
-import { BaseApiResponse } from '@/types/api/api-general';
 import {
-  CreatePurchaseRequestPayload,
+  CreatePurchaseRequisitionsPayload,
   Purchase,
-  UpdatePurchaseRequestPayload,
+  UpdatePurchaseRequisitionsPayload,
 } from '@/types/api/purchase/purchase';
+import { BaseApiService } from '@/services/api/base';
 
-const GET_ALL_PURCHASE_DUMMY_DATA: BaseApiResponse<Purchase[]> = {
-  code: 200,
-  status: 'success',
-  message: 'Successfully get all purchase data!',
-  meta: {
-    page: 1,
-    limit: 10,
-    total_pages: 1,
-    total_results: 1,
-  },
-  data: [
-    {
-      id: 1,
-      pr_number: 'PR-001',
-      po_number: 'PO-001',
-      po_date: '2024-01-15',
-      supplier: {
-        id: 1,
-        name: 'Supplier A',
-        address: '123 Main St, Cityville',
-        account_number: 'ACC-12345',
-        alias: 'SupA',
-        category: 'Electronics',
-        type: 'Local',
-        phone: '555-1234',
-        email: 'email@.com',
-        npwp: '12.345.678.9-012.345',
-        pic: 'John Doe',
-        balance: 1000000,
-        hatchery: 'N/A',
-        due_date: 30,
-        created_at: '2024-01-10T10:00:00Z',
-        updated_at: '2024-01-12T12:00:00Z',
-        created_user: {
-          id: 2,
-          id_user: 2,
-          email: 'a@email.com',
-          name: 'Admin User',
-        },
-      },
-      credit_term: 30,
-      due_date: '2024-02-14',
-      grand_total: 1500000,
-      deleted_at: null,
-      created_at: '2024-01-10T10:00:00Z',
-      updated_at: '2024-01-12T12:00:00Z',
-      created_by: 2,
-      created_user: {
-        id: 2,
-        id_user: 2,
-        email: 'a@email.com',
-        name: 'Admin User',
-      },
-      notes: 'Urgent delivery required',
-    },
-  ],
-};
-
-export class PurchaseService extends BaseApiService<
+export const PurchaseApi = new BaseApiService<
   Purchase,
-  CreatePurchaseRequestPayload,
-  UpdatePurchaseRequestPayload
-> {
-  constructor(basePath: string = '') {
-    super(basePath);
-  }
-
-  override async getAllFetcher(
-    endpoint: string
-  ): Promise<BaseApiResponse<Purchase[]>> {
-    // return await httpClientFetcher<BaseApiResponse<T[]>>(endpoint);
-
-    await sleep(750);
-
-    return GET_ALL_PURCHASE_DUMMY_DATA;
-  }
-}
-
-export const PurchaseApi = new PurchaseService('/purchase-requests');
+  CreatePurchaseRequisitionsPayload,
+  UpdatePurchaseRequisitionsPayload
+>('/purchases/requisitions');
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index f26f739c..72041cc5 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -3,13 +3,15 @@ import { Supplier } from '@/types/api/master-data/supplier';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { Product } from '@/types/api/master-data/product';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Area } from '@/types/api/master-data/area';
+import { Location } from '@/types/api/master-data/location';
 
 export type PurchaseItem = {
   id: number;
   warehouse: Warehouse;
   product: Product;
   product_warehouse: ProductWarehouse;
-  sub_qty: number;
+  quantity: number;
 };
 
 export type BasePurchase = {
@@ -24,21 +26,26 @@ export type BasePurchase = {
   notes?: string | null;
   deleted_at?: string | null;
   created_by: number;
-  purchase_items?: PurchaseItem[];
+  area?: Area;
+  location?: Location;
+  warehouse?: Warehouse;
+  items?: PurchaseItem[];
 };
 
 export type Purchase = BaseMetadata & BasePurchase;
 
-export type CreatePurchaseRequestPayload = {
+export type CreatePurchaseRequisitionsPayload = {
   supplier_id: number;
-  credit_term: number;
+  area_id: number;
+  location_id: number;
+  warehouse_id: number;
   notes?: string | null;
-  purchase_items: {
-    warehouse_id: number;
-    product_id: number;
+  items: {
     product_warehouse_id: number;
-    sub_qty: number;
+    product_id: number;
+    quantity: number;
   }[];
 };
 
-export type UpdatePurchaseRequestPayload = CreatePurchaseRequestPayload;
+export type UpdatePurchaseRequisitionsPayload =
+  CreatePurchaseRequisitionsPayload;

From 53751d566c8e56d6db4ab4ee88081481175b8e9e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 8 Nov 2025 09:52:48 +0700
Subject: [PATCH 036/168] refactor(FE-212): rename PurchaseRequestForm schema
 to PurchaseRequisitionsForm and update related types

---
 ....ts => PurchaseRequisitionsForm.schema.ts} | 137 +++++++++---------
 1 file changed, 69 insertions(+), 68 deletions(-)
 rename src/components/pages/purchase/form/request/{PurchaseRequestForm.schema.ts => PurchaseRequisitionsForm.schema.ts} (72%)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
similarity index 72%
rename from src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
rename to src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
index d496308f..784719f4 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
 import { Purchase } from '@/types/api/purchase/purchase';
 
-type PurchaseRequestFormSchemaType = {
+type PurchaseRequisitionsFormSchemaType = {
   supplier?: {
     value: number;
     label: string;
@@ -17,65 +17,43 @@ type PurchaseRequestFormSchemaType = {
     label: string;
   } | null;
   location_id: number;
-  credit_term: number | string | undefined;
+  warehouse?: {
+    value: number;
+    label: string;
+  };
+  warehouse_id: number;
   notes: string | null;
-  purchase_items: {
-    warehouse?: {
-      value: number;
-      label: string;
-    } | null;
-    warehouse_id: number;
-    product?: {
-      value: number;
-      label: string;
-    } | null;
-    product_id: number;
+  items: {
     product_warehouse?: {
       value: number;
       label: string;
     } | null;
     product_warehouse_id: number;
-    sub_qty: number | string;
+    product?: {
+      value: number;
+      label: string;
+    } | null;
+    product_id: number;
+    quantity: number | string;
   }[];
 };
 
 export type PurchaseItemSchema = {
-  warehouse?: {
-    value: number;
-    label: string;
-  } | null;
-  warehouse_id: number;
-  product?: {
-    value: number;
-    label: string;
-  } | null;
-  product_id: number;
   product_warehouse?: {
     value: number;
     label: string;
   } | null;
   product_warehouse_id: number;
-  sub_qty: number | string;
+  product?: {
+    value: number;
+    label: string;
+  } | null;
+  product_id: number;
+  quantity: number | string;
 };
 
 const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
   Yup.object({
-    warehouse: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    warehouse_id: Yup.number()
-      .required('Gudang wajib dipilih!')
-      .min(1, 'Gudang wajib dipilih!')
-      .typeError('Gudang wajib dipilih'),
-    product: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    product_id: Yup.number()
-      .required('Produk wajib dipilih!')
-      .min(1, 'Produk wajib dipilih!')
-      .typeError('Produk wajib dipilih!'),
     product_warehouse: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
@@ -84,10 +62,18 @@ const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
       .required('Produk wajib dipilih!')
       .min(1, 'Produk wajib dipilih!')
       .typeError('Produk wajib dipilih!'),
-    sub_qty: Yup.mixed<string | number>()
+    product: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    product_id: Yup.number()
+      .required('Produk wajib dipilih!')
+      .min(1, 'Produk wajib dipilih!')
+      .typeError('Produk wajib dipilih!'),
+    quantity: Yup.mixed<string | number>()
       .required('Kuantitas wajib diisi!')
       .test(
-        'is-valid-sub-qty',
+        'is-valid-qty',
         'Kuantitas harus berupa angka lebih dari 0!',
         function (value) {
           if (value === '' || value === null || value === undefined)
@@ -99,7 +85,7 @@ const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
       ),
   });
 
-export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSchemaType> =
+export const PurchaseRequisitionsFormSchema: Yup.ObjectSchema<PurchaseRequisitionsFormSchemaType> =
   Yup.object({
     supplier: Yup.object({
       value: Yup.number().min(1).required(),
@@ -134,36 +120,35 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
         return Boolean(value && value > 0);
       })
       .typeError('Lokasi wajib dipilih!'),
-    credit_term: Yup.mixed<string | number>().when('supplier_id', {
-      is: (supplier_id: number) => supplier_id && supplier_id > 0,
-      then: () =>
-        Yup.number()
-          .required('Jumlah hari jatuh tempo wajib diisi!')
-          .min(1, 'Jumlah hari jatuh tempo minimal 1 hari!')
-          .typeError('Jumlah hari jatuh tempo harus berupa angka!'),
-      otherwise: () =>
-        Yup.mixed<string | number>()
-          .nullable()
-          .default(null)
-          .transform(() => null),
+    warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
     }),
+    warehouse_id: Yup.number()
+      .required('Gudang wajib dipilih!')
+      .test('is-valid-warehouse', 'Gudang wajib dipilih!', function (value) {
+        if (!this.parent.warehouse) return true;
+        return Boolean(value && value > 0);
+      })
+      .typeError('Gudang wajib dipilih!'),
     notes: Yup.string().nullable().default(null),
-    purchase_items: Yup.array()
+    items: Yup.array()
       .of(PurchaseItemObjectSchema)
       .min(1, 'Minimal harus ada 1 item pembelian!')
       .required('Item pembelian wajib diisi!')
       .typeError('Item pembelian wajib diisi!'),
   });
 
-export const UpdatePurchaseRequestFormSchema = PurchaseRequestFormSchema;
+export const UpdatePurchaseRequisitionsFormSchema =
+  PurchaseRequisitionsFormSchema;
 
-export type PurchaseRequestFormValues = Yup.InferType<
-  typeof PurchaseRequestFormSchema
+export type PurchaseRequisitionsFormValues = Yup.InferType<
+  typeof PurchaseRequisitionsFormSchema
 >;
 
-export const getPurchaseRequestFormInitialValues = (
+export const getPurchaseRequisitionsFormInitialValues = (
   initialValues?: Purchase
-): PurchaseRequestFormValues => ({
+): PurchaseRequisitionsFormValues => ({
   supplier: initialValues?.supplier
     ? {
         value: initialValues.supplier.id,
@@ -171,11 +156,27 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : null,
   supplier_id: initialValues?.supplier?.id ?? 0,
-  area: null,
-  area_id: 0,
-  location: null,
-  location_id: 0,
-  credit_term: initialValues?.credit_term ?? '',
+  area: initialValues?.area
+    ? {
+        value: initialValues.area.id,
+        label: initialValues.area.name,
+      }
+    : null,
+  area_id: initialValues?.area?.id ?? 0,
+  location: initialValues?.location
+    ? {
+        value: initialValues.location.id,
+        label: initialValues.location.name,
+      }
+    : null,
+  location_id: initialValues?.location?.id ?? 0,
   notes: initialValues?.notes ?? null,
-  purchase_items: [],
+  warehouse: initialValues?.warehouse
+    ? {
+        value: initialValues.warehouse.id,
+        label: initialValues.warehouse.name,
+      }
+    : undefined,
+  warehouse_id: initialValues?.warehouse?.id ?? 0,
+  items: [],
 });

From 10dca5c692917beabce35c69876c51a69ca8ca05 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 8 Nov 2025 09:53:21 +0700
Subject: [PATCH 037/168] refactor(FE-208): rename PurchaseRequestForm to
 PurchaseRequisitionsForm and update related components

---
 src/app/purchase/add/page.tsx                 |   8 +-
 src/app/purchase/detail/edit/page.tsx         | 250 +---------
 src/app/purchase/detail/page.tsx              |  72 +--
 .../pages/purchase/PurchaseTable.tsx          |  12 +-
 ...tForm.tsx => PurchaseRequisitionsForm.tsx} | 464 +++++++++++-------
 5 files changed, 300 insertions(+), 506 deletions(-)
 rename src/components/pages/purchase/form/request/{PurchaseRequestForm.tsx => PurchaseRequisitionsForm.tsx} (68%)

diff --git a/src/app/purchase/add/page.tsx b/src/app/purchase/add/page.tsx
index 7e1cb9e7..6410f236 100644
--- a/src/app/purchase/add/page.tsx
+++ b/src/app/purchase/add/page.tsx
@@ -1,11 +1,11 @@
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
+import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
 
-const AddPurchaseRequest = () => {
+const AddPurchaseRequisitions = () => {
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
-      <PurchaseRequestForm />
+      <PurchaseRequisitionsForm />
     </div>
   );
 };
 
-export default AddPurchaseRequest;
+export default AddPurchaseRequisitions;
diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
index e265fb4b..06014b76 100644
--- a/src/app/purchase/detail/edit/page.tsx
+++ b/src/app/purchase/detail/edit/page.tsx
@@ -2,243 +2,9 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
-
+import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
 import { PurchaseApi } from '@/services/api/purchase';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-import { Purchase } from '@/types/api/purchase/purchase';
-
-// TODO: delete dummy data
-const DUMMY_PURCHASE_EDIT: Purchase = {
-  id: 1,
-  pr_number: 'PR-001',
-  po_number: 'PO-001',
-  po_date: '2024-01-15',
-  supplier: {
-    id: 1,
-    name: 'Supplier A',
-    address: '123 Main St, Cityville',
-    account_number: 'ACC-12345',
-    alias: 'SupA',
-    category: 'Electronics',
-    type: 'Local',
-    phone: '555-1234',
-    email: 'email@.com',
-    npwp: '12.345.678.9-012.345',
-    pic: 'John Doe',
-    balance: 1000000,
-    hatchery: 'N/A',
-    due_date: 30,
-    created_at: '2024-01-10T10:00:00Z',
-    updated_at: '2024-01-12T12:00:00Z',
-    created_user: {
-      id: 2,
-      id_user: 2,
-      email: 'a@email.com',
-      name: 'Admin User',
-    },
-  },
-  credit_term: 30,
-  due_date: '2024-02-14',
-  grand_total: 1500000,
-  notes: 'Urgent delivery required',
-  deleted_at: null,
-  created_at: '2024-01-10T10:00:00Z',
-  updated_at: '2024-01-12T12:00:00Z',
-  created_by: 2,
-  created_user: {
-    id: 2,
-    id_user: 2,
-    email: 'a@email.com',
-    name: 'Admin User',
-  },
-  purchase_items: [
-    {
-      id: 1,
-      product_warehouse: {
-        id: 1,
-        product_id: 1,
-        warehouse_id: 1,
-        quantity: 100,
-        product: {
-          id: 1,
-          name: 'Product A',
-          brand: 'Brand A',
-          sku: 'PROD-A-001',
-          product_price: 500000,
-          expiry_period: 0,
-          uom: {
-            id: 1,
-            name: 'pcs',
-            created_at: '2024-01-01T00:00:00Z',
-            updated_at: '2024-01-01T00:00:00Z',
-            created_user: {
-              id: 2,
-              id_user: 2,
-              email: 'a@email.com',
-              name: 'Admin User',
-            },
-          },
-          product_category: {
-            id: 1,
-            code: 'CAT-1',
-            name: 'Electronics',
-            created_at: '2024-01-01T00:00:00Z',
-            updated_at: '2024-01-01T00:00:00Z',
-            created_user: {
-              id: 2,
-              id_user: 2,
-              email: 'a@email.com',
-              name: 'Admin User',
-            },
-          },
-          suppliers: [
-            {
-              id: 1,
-              name: 'Supplier A',
-              alias: 'SupA',
-              pic: 'John Doe',
-              type: 'Local',
-              category: 'Electronics',
-              hatchery: 'N/A',
-              phone: '555-1234',
-              email: 'email@.com',
-              address: '123 Main St, Cityville',
-              npwp: '12.345.678.9-012.345',
-              account_number: 'ACC-12345',
-              due_date: 30,
-              balance: 1000000,
-              created_at: '2024-01-10T10:00:00Z',
-              updated_at: '2024-01-12T12:00:00Z',
-              created_user: {
-                id: 2,
-                id_user: 2,
-                email: 'a@email.com',
-                name: 'Admin User',
-              },
-            },
-          ],
-          flags: [],
-          created_at: '2024-01-05T09:00:00Z',
-          updated_at: '2024-01-07T11:00:00Z',
-          created_user: {
-            id: 2,
-            id_user: 2,
-            email: 'a@email.com',
-            name: 'Admin User',
-          },
-        },
-        warehouse: {
-          id: 1,
-          name: 'Main Warehouse',
-          type: 'AREA',
-          area: { id: 1, name: 'Area 1' },
-          created_at: '2024-01-01T00:00:00Z',
-          updated_at: '2024-01-01T00:00:00Z',
-          created_user: {
-            id: 2,
-            id_user: 2,
-            email: 'a@email.com',
-            name: 'Admin User',
-          },
-        },
-        created_at: '2024-01-05T09:00:00Z',
-        updated_at: '2024-01-07T11:00:00Z',
-        created_user: {
-          id: 2,
-          id_user: 2,
-          email: 'a@email.com',
-          name: 'Admin User',
-        },
-      },
-      product: {
-        id: 1,
-        name: 'Product A',
-        brand: 'Brand A',
-        sku: 'PROD-A-001',
-        product_price: 500000,
-        expiry_period: 0,
-        uom: {
-          id: 1,
-          name: 'pcs',
-          created_at: '2024-01-01T00:00:00Z',
-          updated_at: '2024-01-01T00:00:00Z',
-          created_user: {
-            id: 2,
-            id_user: 2,
-            email: 'a@email.com',
-            name: 'Admin User',
-          },
-        },
-        product_category: {
-          id: 1,
-          code: 'CAT-1',
-          name: 'Electronics',
-          created_at: '2024-01-01T00:00:00Z',
-          updated_at: '2024-01-01T00:00:00Z',
-          created_user: {
-            id: 2,
-            id_user: 2,
-            email: 'a@email.com',
-            name: 'Admin User',
-          },
-        },
-        suppliers: [
-          {
-            id: 1,
-            name: 'Supplier A',
-            alias: 'SupA',
-            pic: 'John Doe',
-            type: 'Local',
-            category: 'Electronics',
-            hatchery: 'N/A',
-            phone: '555-1234',
-            email: 'email@.com',
-            address: '123 Main St, Cityville',
-            npwp: '12.345.678.9-012.345',
-            account_number: 'ACC-12345',
-            due_date: 30,
-            balance: 1000000,
-            created_at: '2024-01-10T10:00:00Z',
-            updated_at: '2024-01-12T12:00:00Z',
-            created_user: {
-              id: 2,
-              id_user: 2,
-              email: 'a@email.com',
-              name: 'Admin User',
-            },
-          },
-        ],
-        flags: [],
-        created_at: '2024-01-05T09:00:00Z',
-        updated_at: '2024-01-07T11:00:00Z',
-        created_user: {
-          id: 2,
-          id_user: 2,
-          email: 'a@email.com',
-          name: 'Admin User',
-        },
-      },
-      warehouse: {
-        id: 1,
-        name: 'Main Warehouse',
-        type: 'AREA',
-        area: { id: 1, name: 'Area 1' },
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-        created_user: {
-          id: 2,
-          id_user: 2,
-          email: 'a@email.com',
-          name: 'Admin User',
-        },
-      },
-      sub_qty: 3,
-    },
-  ],
-};
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseEdit = () => {
   const router = useRouter();
@@ -261,11 +27,7 @@ const PurchaseEdit = () => {
     );
   }
 
-  // TODO: remove dummy data and integrate with real API
-  if (
-    !isLoadingPurchase &&
-    (!purchase || (isResponseError(purchase) && !DUMMY_PURCHASE_EDIT))
-  ) {
+  if (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
     router.replace('/404');
     return;
   }
@@ -275,9 +37,9 @@ const PurchaseEdit = () => {
       {isLoadingPurchase && (
         <span className='loading loading-spinner loading-xl' />
       )}
-
-      {/* DEBUG TEMP: force dummy to verify form mapping/rendering */}
-      <PurchaseRequestForm type='edit' initialValues={DUMMY_PURCHASE_EDIT} />
+      {!isLoadingPurchase && isResponseSuccess(purchase) && (
+        <PurchaseRequisitionsForm type='edit' initialValues={purchase.data} />
+      )}
     </div>
   );
 };
diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index c934a945..59033be6 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -2,59 +2,9 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
-
+import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
 import { PurchaseApi } from '@/services/api/purchase';
-import { isResponseError } from '@/lib/api-helper';
-
-import { Purchase } from '@/types/api/purchase/purchase';
-
-// TODO: delete dummy data
-const DUMMY_PURCHASE_DETAIL: Purchase = {
-  id: 1,
-  pr_number: 'PR-001',
-  po_number: 'PO-001',
-  po_date: '2024-01-15',
-  supplier: {
-    id: 1,
-    name: 'Supplier A',
-    address: '123 Main St, Cityville',
-    account_number: 'ACC-12345',
-    alias: 'SupA',
-    category: 'Electronics',
-    type: 'Local',
-    phone: '555-1234',
-    email: 'email@.com',
-    npwp: '12.345.678.9-012.345',
-    pic: 'John Doe',
-    balance: 1000000,
-    hatchery: 'N/A',
-    due_date: 30,
-    created_at: '2024-01-10T10:00:00Z',
-    updated_at: '2024-01-12T12:00:00Z',
-    created_user: {
-      id: 2,
-      id_user: 2,
-      email: 'a@email.com',
-      name: 'Admin User',
-    },
-  },
-  credit_term: 30,
-  due_date: '2024-02-14',
-  grand_total: 1500000,
-  notes: 'Urgent delivery required',
-  deleted_at: null,
-  created_at: '2024-01-10T10:00:00Z',
-  updated_at: '2024-01-12T12:00:00Z',
-  created_by: 2,
-  created_user: {
-    id: 2,
-    id_user: 2,
-    email: 'a@email.com',
-    name: 'Admin User',
-  },
-};
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseDetail = () => {
   const router = useRouter();
@@ -77,11 +27,7 @@ const PurchaseDetail = () => {
     );
   }
 
-  // TODO: remove dummy data and integrate with real API
-  if (
-    !isLoadingPurchase &&
-    (!purchase || (isResponseError(purchase) && !DUMMY_PURCHASE_DETAIL))
-  ) {
+  if (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
     router.replace('/404');
     return;
   }
@@ -91,15 +37,9 @@ const PurchaseDetail = () => {
       {isLoadingPurchase && (
         <span className='loading loading-spinner loading-xl' />
       )}
-      {/* {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseRequestForm type='detail' initialValues={purchase.data} />
-      )} */}
-
-      {/* TODO: remove this dummy data and integrate to real API */}
-      <PurchaseRequestForm
-        type='detail'
-        initialValues={DUMMY_PURCHASE_DETAIL}
-      />
+      {!isLoadingPurchase && isResponseSuccess(purchase) && (
+        <PurchaseRequisitionsForm type='detail' initialValues={purchase.data} />
+      )}
     </div>
   );
 };
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index fefc2b40..61699529 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -149,9 +149,12 @@ const PurchaseTable = () => {
       cell: (props) => props.row.original.supplier.name,
     },
     {
-      accessorKey: 'created_user',
+      accessorKey: 'created_by',
       header: 'Nama Pengaju',
-      cell: (props) => props.row.original.created_user.name,
+      cell: (props) => {
+        const purchase = props.row.original;
+        return purchase.created_user?.name || `User ID: ${purchase.created_by}`;
+      },
     },
     {
       accessorKey: 'po_date',
@@ -172,8 +175,9 @@ const PurchaseTable = () => {
     {
       header: 'Aging',
       cell: (props) => {
-        if (!props.row.original.po_date) return '-';
-        const poDate = new Date(props.row.original.po_date);
+        const purchase = props.row.original;
+        if (!purchase.po_date) return '-';
+        const poDate = new Date(purchase.po_date);
         const today = new Date();
         const diffTime = Math.abs(today.getTime() - poDate.getTime());
         const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
similarity index 68%
rename from src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
rename to src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
index 4e48000e..6943f8b6 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
@@ -17,11 +17,11 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
 
 import {
-  PurchaseRequestFormSchema,
-  PurchaseRequestFormValues,
-  getPurchaseRequestFormInitialValues,
-  UpdatePurchaseRequestFormSchema,
-} from './PurchaseRequestForm.schema';
+  PurchaseRequisitionsFormSchema,
+  PurchaseRequisitionsFormValues,
+  getPurchaseRequisitionsFormInitialValues,
+  UpdatePurchaseRequisitionsFormSchema,
+} from './PurchaseRequisitionsForm.schema';
 import {
   SupplierApi,
   AreaApi,
@@ -37,7 +37,7 @@ import { PurchaseApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
 import {
-  CreatePurchaseRequestPayload,
+  CreatePurchaseRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
 
@@ -46,7 +46,7 @@ interface PurchaseRequestFormProps {
   initialValues?: Purchase;
 }
 
-const PurchaseRequestForm = ({
+const PurchaseRequisitionsForm = ({
   type = 'add',
   initialValues,
 }: PurchaseRequestFormProps) => {
@@ -72,10 +72,10 @@ const PurchaseRequestForm = ({
   // ===== UTILITY FUNCTIONS =====
   const getPurchaseItemError = (
     idx: number,
-    field: 'warehouse_id' | 'product_warehouse_id' | 'product_id' | 'sub_qty'
+    field: 'warehouse_id' | 'product_warehouse_id' | 'product_id' | 'quantity'
   ): { isError: boolean; errorMessage: string } => {
-    const touchedItem = formik.touched.purchase_items?.[idx];
-    const errorItem = formik.errors.purchase_items?.[idx] as
+    const touchedItem = formik.touched.items?.[idx];
+    const errorItem = formik.errors.items?.[idx] as
       | Record<string, string>
       | undefined;
 
@@ -103,7 +103,7 @@ const PurchaseRequestForm = ({
 
   // ===== SUBMISSION HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
-    async (payload: CreatePurchaseRequestPayload) => {
+    async (payload: CreatePurchaseRequisitionsPayload) => {
       const res = await PurchaseApi.create(payload);
       if (isResponseError(res)) {
         setPurchaseRequestFormErrorMessage(res.message);
@@ -118,7 +118,7 @@ const PurchaseRequestForm = ({
   const updatePurchaseRequestHandler = useCallback(
     async (
       purchaseRequestId: number,
-      payload: CreatePurchaseRequestPayload
+      payload: CreatePurchaseRequisitionsPayload
     ) => {
       const res = await PurchaseApi.update(purchaseRequestId, payload);
       if (isResponseError(res)) {
@@ -170,47 +170,51 @@ const PurchaseRequestForm = ({
   } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
 
   // ===== FORM CONFIGURATION =====
-  const formikInitialValues = useMemo<PurchaseRequestFormValues>(
-    () => getPurchaseRequestFormInitialValues(initialValues),
+  const formikInitialValues = useMemo<PurchaseRequisitionsFormValues>(
+    () => getPurchaseRequisitionsFormInitialValues(initialValues),
     [initialValues]
   );
 
-  const formik = useFormik<PurchaseRequestFormValues>({
+  const formik = useFormik<PurchaseRequisitionsFormValues>({
     initialValues: formikInitialValues,
     validationSchema:
       type === 'edit'
-        ? UpdatePurchaseRequestFormSchema
-        : PurchaseRequestFormSchema,
+        ? UpdatePurchaseRequisitionsFormSchema
+        : PurchaseRequisitionsFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      const payload: CreatePurchaseRequestPayload = {
+      const payload: CreatePurchaseRequisitionsPayload = {
         supplier_id:
           typeof values.supplier_id === 'string'
             ? parseInt(values.supplier_id) || 0
             : values.supplier_id || 0,
-        credit_term:
-          typeof values.credit_term === 'string'
-            ? parseInt(values.credit_term) || 0
-            : values.credit_term || 0,
         notes: values.notes || '',
-        purchase_items: (values.purchase_items || []).map((item) => ({
-          warehouse_id:
-            typeof item.warehouse_id === 'string'
-              ? parseInt(item.warehouse_id) || 0
-              : item.warehouse_id || 0,
-          product_id:
-            typeof item.product_id === 'string'
-              ? parseInt(item.product_id) || 0
-              : item.product_id || 0,
+        area_id:
+          typeof values.area_id === 'string'
+            ? parseInt(values.area_id) || 0
+            : values.area_id || 0,
+        location_id:
+          typeof values.location_id === 'string'
+            ? parseInt(values.location_id) || 0
+            : values.location_id || 0,
+        warehouse_id:
+          typeof values.warehouse_id === 'string'
+            ? parseInt(values.warehouse_id) || 0
+            : values.warehouse_id || 0,
+        items: (values.items || []).map((item) => ({
           product_warehouse_id:
             typeof item.product_warehouse_id === 'string'
               ? parseInt(item.product_warehouse_id) || 0
               : item.product_warehouse_id || 0,
-          sub_qty:
-            typeof item.sub_qty === 'string'
-              ? parseFloat(item.sub_qty) || 0
-              : item.sub_qty || 0,
+          product_id:
+            typeof item.product_id === 'string'
+              ? parseInt(item.product_id) || 0
+              : item.product_id || 0,
+          quantity:
+            typeof item.quantity === 'string'
+              ? parseFloat(item.quantity) || 0
+              : item.quantity || 0,
         })),
       };
 
@@ -261,7 +265,7 @@ const PurchaseRequestForm = ({
 
   const productUrl = useMemo(() => {
     const productIds =
-      formik.values.purchase_items
+      formik.values.items
         ?.filter(
           (item) => item.product_id && typeof item.product_id === 'number'
         )
@@ -272,7 +276,7 @@ const PurchaseRequestForm = ({
           id: productIds.join(','),
         }).toString()}`
       : null;
-  }, [formik.values.purchase_items]);
+  }, [formik.values.items]);
 
   const { data: productsResponse } = useSWR(
     productUrl,
@@ -392,16 +396,12 @@ const PurchaseRequestForm = ({
     setLocationSelectInputValue('');
 
     // Reset area dependent fields in all purchase items
-    if (formik.values.purchase_items) {
-      formik.values.purchase_items.forEach((_, idx) => {
-        formik.setFieldValue(`purchase_items.${idx}.warehouse`, null);
-        formik.setFieldValue(`purchase_items.${idx}.warehouse_id`, '');
-        formik.setFieldValue(`purchase_items.${idx}.product_warehouse`, null);
-        formik.setFieldValue(
-          `purchase_items.${idx}.product_warehouse_id`,
-          null
-        );
-        formik.setFieldValue(`purchase_items.${idx}.product_id`, '');
+    if (formik.values.items) {
+      formik.values.items.forEach((_, idx) => {
+        formik.setFieldValue(`items.${idx}.product_warehouse`, null);
+        formik.setFieldValue(`items.${idx}.product_warehouse_id`, null);
+        formik.setFieldValue(`items.${idx}.product`, null);
+        formik.setFieldValue(`items.${idx}.product_id`, '');
       });
     }
   };
@@ -414,16 +414,12 @@ const PurchaseRequestForm = ({
     formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
 
     // Reset location dependent fields in all purchase items
-    if (formik.values.purchase_items) {
-      formik.values.purchase_items.forEach((_, idx) => {
-        formik.setFieldValue(`purchase_items.${idx}.warehouse`, null);
-        formik.setFieldValue(`purchase_items.${idx}.warehouse_id`, '');
-        formik.setFieldValue(`purchase_items.${idx}.product_warehouse`, null);
-        formik.setFieldValue(
-          `purchase_items.${idx}.product_warehouse_id`,
-          null
-        );
-        formik.setFieldValue(`purchase_items.${idx}.product_id`, '');
+    if (formik.values.items) {
+      formik.values.items.forEach((_, idx) => {
+        formik.setFieldValue(`items.${idx}.product_warehouse`, null);
+        formik.setFieldValue(`items.${idx}.product_warehouse_id`, null);
+        formik.setFieldValue(`items.${idx}.product`, null);
+        formik.setFieldValue(`items.${idx}.product_id`, '');
       });
     }
   };
@@ -431,48 +427,43 @@ const PurchaseRequestForm = ({
   // Purchase Items Handlers
   const addPurchaseItem = () => {
     const newPurchaseItems = [
-      ...(formik.values.purchase_items || []),
+      ...(formik.values.items || []),
       {
-        warehouse: null,
-        warehouse_id: '',
-        product: null,
-        product_id: '',
         product_warehouse: null,
         product_warehouse_id: null,
-        sub_qty: '',
+        product: null,
+        product_id: '',
+        quantity: '',
       },
     ];
-    formik.setFieldValue('purchase_items', newPurchaseItems);
+    formik.setFieldValue('items', newPurchaseItems);
   };
 
   const removePurchaseItem = (idx: number) => {
-    const updatedPurchaseItems = formik.values.purchase_items?.filter(
+    const updatedPurchaseItems = formik.values.items?.filter(
       (_, i) => i !== idx
     );
-    formik.setFieldValue('purchase_items', updatedPurchaseItems);
+    formik.setFieldValue('items', updatedPurchaseItems);
   };
 
   const removeSelectedPurchaseItems = () => {
-    const updatedPurchaseItems = formik.values.purchase_items?.filter(
+    const updatedPurchaseItems = formik.values.items?.filter(
       (_, idx) => !selectedPurchaseItems.includes(idx)
     );
-    formik.setFieldValue('purchase_items', updatedPurchaseItems);
+    formik.setFieldValue('items', updatedPurchaseItems);
     setSelectedPurchaseItems([]);
   };
 
   // ===== PURCHASE ITEM OPERATIONS =====
   const handlePurchaseItemChange = (
     idx: number,
-    field: 'sub_qty' | 'price',
+    field: 'quantity',
     value: string | number
   ) => {
-    if (field === 'sub_qty') {
-      const numValue = typeof value === 'string' ? parseInt(value) || 0 : value;
-      formik.setFieldValue(`purchase_items.${idx}.sub_qty`, numValue);
-    } else if (field === 'price') {
+    if (field === 'quantity') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
-      formik.setFieldValue(`purchase_items.${idx}.price`, numValue);
+      formik.setFieldValue(`items.${idx}.quantity`, numValue);
     }
   };
 
@@ -525,28 +516,28 @@ const PurchaseRequestForm = ({
                 isClearable
               />
 
-              <NumberInput
-                required={!!formik.values.supplier_id}
-                label='Jatuh tempo (hari)'
-                name='credit_term'
-                value={formik.values.credit_term || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={
-                  formik.touched.credit_term &&
-                  Boolean(formik.errors.credit_term)
-                }
-                errorMessage={formik.errors.credit_term as string}
-                readOnly={type === 'detail' || !formik.values.supplier_id}
-                disabled={type === 'detail' || !formik.values.supplier_id}
-                allowNegative={false}
-                decimalScale={0}
-                placeholder={
-                  !formik.values.supplier_id
-                    ? 'Pilih Vendor terlebih dahulu'
-                    : 'Masukkan jumlah hari jatuh tempo'
-                }
-              />
+              {/*<NumberInput*/}
+              {/*  required={!!formik.values.supplier_id}*/}
+              {/*  label='Jatuh tempo (hari)'*/}
+              {/*  name='credit_term'*/}
+              {/*  value={formik.values.credit_term || ''}*/}
+              {/*  onChange={formik.handleChange}*/}
+              {/*  onBlur={formik.handleBlur}*/}
+              {/*  isError={*/}
+              {/*    formik.touched.credit_term &&*/}
+              {/*    Boolean(formik.errors.credit_term)*/}
+              {/*  }*/}
+              {/*  errorMessage={formik.errors.credit_term as string}*/}
+              {/*  readOnly={type === 'detail' || !formik.values.supplier_id}*/}
+              {/*  disabled={type === 'detail' || !formik.values.supplier_id}*/}
+              {/*  allowNegative={false}*/}
+              {/*  decimalScale={0}*/}
+              {/*  placeholder={*/}
+              {/*    !formik.values.supplier_id*/}
+              {/*      ? 'Pilih Vendor terlebih dahulu'*/}
+              {/*      : 'Masukkan jumlah hari jatuh tempo'*/}
+              {/*  }*/}
+              {/*/>*/}
 
               <SelectInput
                 label='Area'
@@ -583,6 +574,59 @@ const PurchaseRequestForm = ({
                 key={`location-${formik.values.area_id}`}
               />
 
+              <SelectInput
+                label='Gudang'
+                placeholder={
+                  !formik.values.area_id || !formik.values.location_id
+                    ? 'Pilih Area dan Lokasi terlebih dahulu'
+                    : 'Pilih Gudang...'
+                }
+                value={formik.values.warehouse}
+                onChange={(val) => {
+                  const warehouse = val as OptionType | null;
+                  formik.setFieldTouched('warehouse', true);
+                  formik.setFieldValue('warehouse', warehouse);
+                  formik.setFieldTouched('warehouse_id', true);
+                  formik.setFieldValue(
+                    'warehouse_id',
+                    (warehouse as OptionType)?.value || 0
+                  );
+                  if (formik.values.items) {
+                    formik.values.items.forEach((_, idx) => {
+                      formik.setFieldValue(
+                        `items.${idx}.product_warehouse`,
+                        null
+                      );
+                      formik.setFieldValue(
+                        `items.${idx}.product_warehouse_id`,
+                        null
+                      );
+                      formik.setFieldValue(`items.${idx}.product`, null);
+                      formik.setFieldValue(`items.${idx}.product_id`, '');
+                    });
+                  }
+                }}
+                options={warehouseOptions}
+                onInputChange={setWarehouseSelectInputValue}
+                isLoading={isLoadingWarehouses}
+                isError={
+                  formik.touched.warehouse &&
+                  Boolean(formik.errors.warehouse_id)
+                }
+                errorMessage={formik.errors.warehouse_id as string}
+                isDisabled={
+                  type === 'detail' ||
+                  !formik.values.area_id ||
+                  !formik.values.location_id
+                }
+                isClearable={
+                  type !== 'detail' &&
+                  !!formik.values.area_id &&
+                  !!formik.values.location_id
+                }
+                key={`warehouse-${formik.values.area_id}-${formik.values.location_id}`}
+              />
+
               <div className={'col-span-2'}>
                 <TextInput
                   label='Notes'
@@ -618,16 +662,14 @@ const PurchaseRequestForm = ({
                           type='checkbox'
                           className='checkbox checkbox-sm'
                           checked={
-                            formik.values.purchase_items?.length ===
+                            formik.values.items?.length ===
                               selectedPurchaseItems.length &&
-                            formik.values.purchase_items?.length > 0
+                            formik.values.items?.length > 0
                           }
                           onChange={(e) => {
                             if (e.target.checked) {
                               setSelectedPurchaseItems(
-                                formik.values.purchase_items?.map(
-                                  (_, idx) => idx
-                                ) ?? []
+                                formik.values.items?.map((_, idx) => idx) ?? []
                               );
                             } else {
                               setSelectedPurchaseItems([]);
@@ -636,10 +678,6 @@ const PurchaseRequestForm = ({
                         />
                       </th>
                     )}
-                    <th>
-                      Gudang
-                      <span className='text-error'>*</span>
-                    </th>
                     <th>
                       Item
                       <span className='text-error'>*</span>
@@ -654,7 +692,7 @@ const PurchaseRequestForm = ({
                   </tr>
                 </thead>
                 <tbody>
-                  {formik.values.purchase_items?.map((item, idx) => (
+                  {formik.values.items?.map((item, idx) => (
                     <tr key={`purchase-item-${idx}`}>
                       {type !== 'detail' && (
                         <td className='!align-middle'>
@@ -677,91 +715,141 @@ const PurchaseRequestForm = ({
                           />
                         </td>
                       )}
-                      <td>
-                        <SelectInput
-                          required
-                          value={item.warehouse}
-                          key={`warehouse-${idx}`}
-                          onChange={(val) => {
-                            const warehouse = val as OptionType | null;
-                            formik.setFieldValue(
-                              `purchase_items.${idx}.warehouse`,
-                              warehouse
-                            );
-                            formik.setFieldValue(
-                              `purchase_items.${idx}.warehouse_id`,
-                              (warehouse as OptionType)?.value || 0
-                            );
-                            formik.setFieldTouched(
-                              `purchase_items.${idx}.product_warehouse`,
-                              false
-                            );
-                            formik.setFieldValue(
-                              `purchase_items.${idx}.product_warehouse`,
-                              null
-                            );
-                            formik.setFieldTouched(
-                              `purchase_items.${idx}.product_warehouse_id`,
-                              false
-                            );
-                            formik.setFieldValue(
-                              `purchase_items.${idx}.product_warehouse_id`,
-                              0
-                            );
-                            formik.setFieldTouched(
-                              `purchase_items.${idx}.product_id`,
-                              false
-                            );
-                            formik.setFieldValue(
-                              `purchase_items.${idx}.product_id`,
-                              0
-                            );
-                          }}
-                          options={warehouseOptions}
-                          onInputChange={setWarehouseSelectInputValue}
-                          isLoading={isLoadingWarehouses}
-                          isError={
-                            getPurchaseItemError(idx, 'warehouse_id').isError
-                          }
-                          errorMessage={
-                            getPurchaseItemError(idx, 'warehouse_id')
-                              .errorMessage
-                          }
-                          isDisabled={type === 'detail'}
-                          isClearable
-                          placeholder='Pilih Gudang'
-                          className={{
-                            wrapper: 'min-w-32',
-                          }}
-                        />
-                      </td>
+                      {/*<td>*/}
+                      {/*  <SelectInput*/}
+                      {/*    required*/}
+                      {/*    value={item.warehouse}*/}
+                      {/*    key={`warehouse-${idx}`}*/}
+                      {/*    onChange={(val) => {*/}
+                      {/*      const warehouse = val as OptionType | null;*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.warehouse`,*/}
+                      {/*        warehouse*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.warehouse_id`,*/}
+                      {/*        (warehouse as OptionType)?.value || 0*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldTouched(*/}
+                      {/*        `purchase_items.${idx}.product_warehouse`,*/}
+                      {/*        false*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.product_warehouse`,*/}
+                      {/*        null*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldTouched(*/}
+                      {/*        `purchase_items.${idx}.product_warehouse_id`,*/}
+                      {/*        false*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.product_warehouse_id`,*/}
+                      {/*        0*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldTouched(*/}
+                      {/*        `purchase_items.${idx}.product_id`,*/}
+                      {/*        false*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.product_id`,*/}
+                      {/*        0*/}
+                      {/*      );*/}
+                      {/*    }}*/}
+                      {/*    options={warehouseOptions}*/}
+                      {/*    onInputChange={setWarehouseSelectInputValue}*/}
+                      {/*    isLoading={isLoadingWarehouses}*/}
+                      {/*    isError={*/}
+                      {/*      getPurchaseItemError(idx, 'warehouse_id').isError*/}
+                      {/*    }*/}
+                      {/*    errorMessage={*/}
+                      {/*      getPurchaseItemError(idx, 'warehouse_id')*/}
+                      {/*        .errorMessage*/}
+                      {/*    }*/}
+                      {/*    isDisabled={type === 'detail'}*/}
+                      {/*    isClearable*/}
+                      {/*    placeholder='Pilih Gudang'*/}
+                      {/*    className={{*/}
+                      {/*      wrapper: 'min-w-32',*/}
+                      {/*    }}*/}
+                      {/*  />*/}
+                      {/*</td>*/}
+                      {/*<td>*/}
+                      {/*  <SelectInput*/}
+                      {/*    required*/}
+                      {/*    value={item.product_warehouse}*/}
+                      {/*    key={`product-warehouse-${idx}-${item.warehouse_id}`}*/}
+                      {/*    onChange={(val) => {*/}
+                      {/*      const productWarehouse =*/}
+                      {/*        val as ProductWarehouseOptionType | null;*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.product_warehouse`,*/}
+                      {/*        productWarehouse*/}
+                      {/*      );*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.product_warehouse_id`,*/}
+                      {/*        (productWarehouse as ProductWarehouseOptionType)*/}
+                      {/*          ?.value || 0*/}
+                      {/*      );*/}
+                      {/*      const productId =*/}
+                      {/*        (productWarehouse as ProductWarehouseOptionType)*/}
+                      {/*          ?.product_id || 0;*/}
+                      {/*      formik.setFieldValue(*/}
+                      {/*        `purchase_items.${idx}.product_id`,*/}
+                      {/*        productId*/}
+                      {/*      );*/}
+                      {/*    }}*/}
+                      {/*    options={getProductWarehouseOptionsForItem(*/}
+                      {/*      item.warehouse_id*/}
+                      {/*    )}*/}
+                      {/*    isLoading={isLoadingProductWarehouses}*/}
+                      {/*    isError={*/}
+                      {/*      getPurchaseItemError(idx, 'product_warehouse_id')*/}
+                      {/*        .isError*/}
+                      {/*    }*/}
+                      {/*    errorMessage={*/}
+                      {/*      getPurchaseItemError(idx, 'product_warehouse_id')*/}
+                      {/*        .errorMessage*/}
+                      {/*    }*/}
+                      {/*    isDisabled={type === 'detail' || !item.warehouse_id}*/}
+                      {/*    isClearable={type !== 'detail' && !!item.warehouse_id}*/}
+                      {/*    placeholder={*/}
+                      {/*      !item.warehouse_id*/}
+                      {/*        ? 'Pilih Gudang terlebih dahulu'*/}
+                      {/*        : 'Pilih Produk'*/}
+                      {/*    }*/}
+                      {/*    className={{*/}
+                      {/*      wrapper: 'min-w-32',*/}
+                      {/*    }}*/}
+                      {/*  />*/}
+                      {/*</td>*/}
                       <td>
                         <SelectInput
                           required
                           value={item.product_warehouse}
-                          key={`product-warehouse-${idx}-${item.warehouse_id}`}
+                          key={`product-warehouse-${idx}-${formik.values.warehouse_id}`}
                           onChange={(val) => {
                             const productWarehouse =
                               val as ProductWarehouseOptionType | null;
                             formik.setFieldValue(
-                              `purchase_items.${idx}.product_warehouse`,
+                              `items.${idx}.product_warehouse`,
                               productWarehouse
                             );
                             formik.setFieldValue(
-                              `purchase_items.${idx}.product_warehouse_id`,
+                              `items.${idx}.product_warehouse_id`,
                               (productWarehouse as ProductWarehouseOptionType)
                                 ?.value || 0
                             );
+
                             const productId =
                               (productWarehouse as ProductWarehouseOptionType)
                                 ?.product_id || 0;
                             formik.setFieldValue(
-                              `purchase_items.${idx}.product_id`,
+                              `items.${idx}.product_id`,
                               productId
                             );
                           }}
                           options={getProductWarehouseOptionsForItem(
-                            item.warehouse_id
+                            formik.values.warehouse_id
                           )}
                           isLoading={isLoadingProductWarehouses}
                           isError={
@@ -772,10 +860,14 @@ const PurchaseRequestForm = ({
                             getPurchaseItemError(idx, 'product_warehouse_id')
                               .errorMessage
                           }
-                          isDisabled={type === 'detail' || !item.warehouse_id}
-                          isClearable={type !== 'detail' && !!item.warehouse_id}
+                          isDisabled={
+                            type === 'detail' || !formik.values.warehouse_id
+                          }
+                          isClearable={
+                            type !== 'detail' && !!formik.values.warehouse_id
+                          }
                           placeholder={
-                            !item.warehouse_id
+                            !formik.values.warehouse_id
                               ? 'Pilih Gudang terlebih dahulu'
                               : 'Pilih Produk'
                           }
@@ -787,12 +879,12 @@ const PurchaseRequestForm = ({
                       <td>
                         <NumberInput
                           required
-                          name={`purchase_items.${idx}.sub_qty`}
-                          value={item.sub_qty || ''}
+                          name={`items.${idx}.quantity`}
+                          value={item.quantity || ''}
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,
-                              'sub_qty',
+                              'quantity',
                               e.target.value
                             )
                           }
@@ -801,9 +893,11 @@ const PurchaseRequestForm = ({
                           readOnly={type === 'detail'}
                           allowNegative={false}
                           decimalScale={0}
-                          isError={getPurchaseItemError(idx, 'sub_qty').isError}
+                          isError={
+                            getPurchaseItemError(idx, 'quantity').isError
+                          }
                           errorMessage={
-                            getPurchaseItemError(idx, 'sub_qty').errorMessage
+                            getPurchaseItemError(idx, 'quantity').errorMessage
                           }
                           className={{
                             wrapper: 'min-w-24',
@@ -813,24 +907,18 @@ const PurchaseRequestForm = ({
                       <td>
                         <TextInput
                           required
-                          name={`purchase_items.${idx}.price`}
+                          name={`items.${idx}.price`}
                           value={
                             item.product_id && productData[item.product_id]
                               ? (
                                   productData[item.product_id].product_price *
                                   (parseFloat(
-                                    item.sub_qty?.toString() || '0'
+                                    item.quantity?.toString() || '0'
                                   ) || 0)
                                 ).toLocaleString('en-US')
                               : ''
                           }
-                          onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'price',
-                              e.target.value
-                            )
-                          }
+                          onChange={(e) => {}}
                           onBlur={formik.handleBlur}
                           type='text'
                           className={{
@@ -856,7 +944,7 @@ const PurchaseRequestForm = ({
                       <td>
                         <TextInput
                           required
-                          name={`purchase_items.${idx}.uom`}
+                          name={`items.${idx}.uom`}
                           value={
                             item.product_id && productData[item.product_id]
                               ? productData[item.product_id].uom.name
@@ -1011,4 +1099,4 @@ const PurchaseRequestForm = ({
   );
 };
 
-export default PurchaseRequestForm;
+export default PurchaseRequisitionsForm;

From 8db9d1a52c45c87d595ef5f9b11de34cdd74125b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 8 Nov 2025 10:53:29 +0700
Subject: [PATCH 038/168] refactor(FE-212): update product warehouse fetching
 logic and options mapping in PurchaseRequisitionsForm

---
 .../form/request/PurchaseRequisitionsForm.tsx | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
index 6943f8b6..9a67e631 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
@@ -64,6 +64,7 @@ const PurchaseRequisitionsForm = ({
   // ===== TYPE DEFINITIONS =====
   interface ProductWarehouseOptionType extends OptionType {
     product_id: number;
+    product_warehouse_id: number;
     warehouse_id: number;
     warehouse_name: string;
     quantity: number;
@@ -233,35 +234,36 @@ const PurchaseRequisitionsForm = ({
   });
 
   // ===== API DATA FETCHING =====
-  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const productWarehousesUrl = useMemo(() => {
+    if (!formik.values.warehouse_id || formik.values.warehouse_id === 0) {
+      return null;
+    }
+
+    const params = new URLSearchParams({
+      warehouse_id: formik.values.warehouse_id.toString(),
+    });
+
+    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
+  }, [formik.values.warehouse_id]);
+
   const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(allProductWarehousesUrl, ProductWarehouseApi.getAllFetcher);
+    useSWR(productWarehousesUrl, ProductWarehouseApi.getAllFetcher);
 
-  const getProductWarehouseOptionsForItem = useCallback(
-    (warehouseId: number | string) => {
-      if (!isResponseSuccess(productWarehouses)) return [];
+  const getProductWarehouseOptionsForItem = useCallback(() => {
+    if (!isResponseSuccess(productWarehouses)) return [];
 
-      const warehouseIdNum =
-        typeof warehouseId === 'string'
-          ? parseInt(warehouseId) || 0
-          : warehouseId;
-      if (warehouseIdNum === 0) return [];
-
-      return (
-        productWarehouses?.data
-          .filter((pw) => pw.warehouse.id === warehouseIdNum)
-          .map((pw) => ({
-            value: pw.product.id,
-            label: pw.product.name,
-            product_id: pw.product.id,
-            warehouse_id: pw.warehouse.id,
-            warehouse_name: pw.warehouse.name,
-            quantity: pw.quantity,
-          })) || []
-      );
-    },
-    [productWarehouses]
-  );
+    return (
+      productWarehouses?.data.map((pw) => ({
+        value: pw.id,
+        label: pw.product.name,
+        product_id: pw.product.id,
+        product_warehouse_id: pw.id,
+        warehouse_id: pw.warehouse.id,
+        warehouse_name: pw.warehouse.name,
+        quantity: pw.quantity,
+      })) || []
+    );
+  }, [productWarehouses]);
 
   const productUrl = useMemo(() => {
     const productIds =
@@ -577,9 +579,11 @@ const PurchaseRequisitionsForm = ({
               <SelectInput
                 label='Gudang'
                 placeholder={
-                  !formik.values.area_id || !formik.values.location_id
-                    ? 'Pilih Area dan Lokasi terlebih dahulu'
-                    : 'Pilih Gudang...'
+                  !formik.values.area_id
+                    ? 'Pilih Area terlebih dahulu'
+                    : formik.values.location_id
+                    ? 'Pilih Gudang...'
+                    : 'Pilih Area dan Lokasi terlebih dahulu'
                 }
                 value={formik.values.warehouse}
                 onChange={(val) => {
@@ -848,9 +852,7 @@ const PurchaseRequisitionsForm = ({
                               productId
                             );
                           }}
-                          options={getProductWarehouseOptionsForItem(
-                            formik.values.warehouse_id
-                          )}
+                          options={getProductWarehouseOptionsForItem()}
                           isLoading={isLoadingProductWarehouses}
                           isError={
                             getPurchaseItemError(idx, 'product_warehouse_id')

From efcc14f3aba3300e4d2f75fa50be220fbc0df84f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 10 Nov 2025 14:33:01 +0700
Subject: [PATCH 039/168] refactor(FE-212): rename PurchaseApi to
 PurchaseRequisitionsApi and update related references in forms and tables

---
 src/app/purchase/detail/edit/page.tsx             |  4 ++--
 src/app/purchase/detail/page.tsx                  |  4 ++--
 src/components/pages/purchase/PurchaseTable.tsx   |  8 ++++----
 .../form/request/PurchaseRequisitionsForm.tsx     | 15 +++++++++------
 src/services/api/purchase.ts                      |  6 +++++-
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
index 06014b76..97dc8d62 100644
--- a/src/app/purchase/detail/edit/page.tsx
+++ b/src/app/purchase/detail/edit/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
-import { PurchaseApi } from '@/services/api/purchase';
+import { PurchaseRequisitionsApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseEdit = () => {
@@ -14,7 +14,7 @@ const PurchaseEdit = () => {
 
   const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
     purchaseId,
-    (id: number) => PurchaseApi.getSingle(id)
+    (id: number) => PurchaseRequisitionsApi.getSingle(id)
   );
 
   if (!purchaseId) {
diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 59033be6..1559e810 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
-import { PurchaseApi } from '@/services/api/purchase';
+import { PurchaseRequisitionsApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseDetail = () => {
@@ -14,7 +14,7 @@ const PurchaseDetail = () => {
 
   const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
     purchaseId,
-    (id: number) => PurchaseApi.getSingle(id)
+    (id: number) => PurchaseRequisitionsApi.getSingle(id)
   );
 
   if (!purchaseId) {
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 61699529..74092ebf 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -25,7 +25,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Purchase } from '@/types/api/purchase/purchase';
-import { PurchaseApi } from '@/services/api/purchase';
+import { PurchaseRequisitionsApi } from '@/services/api/purchase';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -102,8 +102,8 @@ const PurchaseTable = () => {
     isLoading,
     mutate: refreshPurchaseRequests,
   } = useSWR(
-    `${PurchaseApi.basePath}${getTableFilterQueryString()}`,
-    PurchaseApi.getAllFetcher
+    `${PurchaseRequisitionsApi.basePath}${getTableFilterQueryString()}`,
+    PurchaseRequisitionsApi.getAllFetcher
   );
 
   // Modal hooks
@@ -236,7 +236,7 @@ const PurchaseTable = () => {
     setIsDeleteLoading(true);
 
     try {
-      await PurchaseApi.delete(selectedPurchase?.id as number);
+      await PurchaseRequisitionsApi.delete(selectedPurchase?.id as number);
       refreshPurchaseRequests();
       deleteModal.closeModal();
       toast.success('Berhasil menghapus data permintaan pembelian!');
diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
index 9a67e631..f21cf02a 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
@@ -33,7 +33,7 @@ import { Supplier } from '@/types/api/master-data/supplier';
 import { Product } from '@/types/api/master-data/product';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-import { PurchaseApi } from '@/services/api/purchase';
+import { PurchaseRequisitionsApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
 import {
@@ -105,7 +105,7 @@ const PurchaseRequisitionsForm = ({
   // ===== SUBMISSION HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
     async (payload: CreatePurchaseRequisitionsPayload) => {
-      const res = await PurchaseApi.create(payload);
+      const res = await PurchaseRequisitionsApi.create(payload);
       if (isResponseError(res)) {
         setPurchaseRequestFormErrorMessage(res.message);
         return;
@@ -121,7 +121,10 @@ const PurchaseRequisitionsForm = ({
       purchaseRequestId: number,
       payload: CreatePurchaseRequisitionsPayload
     ) => {
-      const res = await PurchaseApi.update(purchaseRequestId, payload);
+      const res = await PurchaseRequisitionsApi.update(
+        purchaseRequestId,
+        payload
+      );
       if (isResponseError(res)) {
         setPurchaseRequestFormErrorMessage(res.message);
         return;
@@ -141,7 +144,7 @@ const PurchaseRequisitionsForm = ({
     if (!initialValues?.id) return;
 
     setIsDeleteLoading(true);
-    await PurchaseApi.delete(initialValues.id);
+    await PurchaseRequisitionsApi.delete(initialValues.id);
     deleteModal.closeModal();
     toast.success('Successfully delete Purchase Request!');
     setIsDeleteLoading(false);
@@ -582,8 +585,8 @@ const PurchaseRequisitionsForm = ({
                   !formik.values.area_id
                     ? 'Pilih Area terlebih dahulu'
                     : formik.values.location_id
-                    ? 'Pilih Gudang...'
-                    : 'Pilih Area dan Lokasi terlebih dahulu'
+                      ? 'Pilih Gudang...'
+                      : 'Pilih Area dan Lokasi terlebih dahulu'
                 }
                 value={formik.values.warehouse}
                 onChange={(val) => {
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 5070f29c..b44f3ece 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -5,8 +5,12 @@ import {
 } from '@/types/api/purchase/purchase';
 import { BaseApiService } from '@/services/api/base';
 
-export const PurchaseApi = new BaseApiService<
+export const PurchaseRequisitionsApi = new BaseApiService<
   Purchase,
   CreatePurchaseRequisitionsPayload,
   UpdatePurchaseRequisitionsPayload
 >('/purchases/requisitions');
+
+export const PurchaseOrderApi = new BaseApiService<Purchase, unknown, unknown>(
+  '/purchases/orders'
+);

From 63dac00f175b7593a20e0600a99db86b9cc8e585 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 10 Nov 2025 14:33:20 +0700
Subject: [PATCH 040/168] feat(FE-212): add PURCHASE_ORDER_APPROVAL_LINE for
 purchase order approval steps

---
 src/config/approval-line.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts
index 0a02d1f1..dbf68baf 100644
--- a/src/config/approval-line.ts
+++ b/src/config/approval-line.ts
@@ -10,3 +10,26 @@ export const PROJECT_FLOCK_APPROVAL_LINE: ApprovalLine = [
     step_name: 'Aktif',
   },
 ] as const;
+
+export const PURCHASE_ORDER_APPROVAL_LINE: ApprovalLine = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+  },
+  {
+    step_number: 2,
+    step_name: 'Approval Purchasing',
+  },
+  {
+    step_number: 3,
+    step_name: 'Approval Manager Purchasing',
+  },
+  {
+    step_number: 4,
+    step_name: 'Produk Diterima',
+  },
+  {
+    step_number: 5,
+    step_name: 'Selesai',
+  },
+] as const;

From 7d1992d0757b8df04889436820ae934584476904 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 10 Nov 2025 17:09:04 +0700
Subject: [PATCH 041/168] feat(FE-212): add staff approval service and payload
 types for purchase requisitions

---
 src/services/api/purchase.ts         | 73 +++++++++++++++++++++++++++-
 src/types/api/purchase/purchase.d.ts | 25 ++++++++++
 2 files changed, 96 insertions(+), 2 deletions(-)

diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index b44f3ece..91bad395 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -2,8 +2,11 @@ import {
   CreatePurchaseRequisitionsPayload,
   Purchase,
   UpdatePurchaseRequisitionsPayload,
+  CreateStaffApprovalRequisitionsPayload,
+  CreateAcceptApprovalRequisitionsPayload,
 } from '@/types/api/purchase/purchase';
 import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 export const PurchaseRequisitionsApi = new BaseApiService<
   Purchase,
@@ -11,6 +14,72 @@ export const PurchaseRequisitionsApi = new BaseApiService<
   UpdatePurchaseRequisitionsPayload
 >('/purchases/requisitions');
 
-export const PurchaseOrderApi = new BaseApiService<Purchase, unknown, unknown>(
-  '/purchases/orders'
+export class StaffApprovalService extends BaseApiService<
+  Purchase,
+  CreateStaffApprovalRequisitionsPayload,
+  CreateAcceptApprovalRequisitionsPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  async approve(
+    idOrIds: number | number[],
+    notes?: string
+  ): Promise<BaseApiResponse<Purchase[]> | undefined> {
+    const approvable_ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
+    return await this.customRequest<BaseApiResponse<Purchase[]>>('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'APPROVED',
+        approvable_ids,
+        notes,
+      },
+    });
+  }
+
+  async reject(
+    idOrIds: number | number[],
+    notes: string = 'Rejected via Form'
+  ): Promise<BaseApiResponse<Purchase[]> | undefined> {
+    const approvable_ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
+    return await this.customRequest<BaseApiResponse<Purchase[]>>('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'REJECTED',
+        approvable_ids,
+        notes,
+      },
+    });
+  }
+
+  async createStaffApproval(
+    purchaseRequisitionId: number,
+    payload: CreateStaffApprovalRequisitionsPayload
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.customRequest<BaseApiResponse<{ message: string }>>(
+      `${purchaseRequisitionId}/approvals/staff`,
+      {
+        method: 'POST',
+        payload,
+      }
+    );
+  }
+
+  async acceptApproval(
+    purchaseRequisitionId: number,
+    payload: CreateAcceptApprovalRequisitionsPayload
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.customRequest<BaseApiResponse<{ message: string }>>(
+      `${purchaseRequisitionId}/approvals/accept`,
+      {
+        method: 'POST',
+        payload,
+      }
+    );
+  }
+}
+
+export const StaffApprovalApi = new StaffApprovalService(
+  '/purchases/requisitions'
 );
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 72041cc5..25eae363 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -47,5 +47,30 @@ export type CreatePurchaseRequisitionsPayload = {
   }[];
 };
 
+export type CreateStaffApprovalRequisitionsPayload = {
+  notes: string;
+  items: {
+    purchase_item_id: number;
+    price: number;
+    total_price: number;
+  }[];
+};
+
+export type CreateAcceptApprovalRequisitionsPayload = {
+  notes?: string;
+  items: {
+    purchase_item_id: number;
+    accepted_date: string;
+    destination_warehouse_id: number;
+    delivery_document_number: string;
+    delivery_vehicle_plate: string;
+    document_index?: number;
+    received_quantity: number;
+    expedition_id: number;
+    transport_cost: number;
+    transport_cost_per_item: number;
+  }[];
+};
+
 export type UpdatePurchaseRequisitionsPayload =
   CreatePurchaseRequisitionsPayload;

From 3ed3e2e21a3966d03ec869b4ab9b9827c2700c74 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 10 Nov 2025 17:09:28 +0700
Subject: [PATCH 042/168] feat(FE-208): add PurchaseOrderDetail component for
 displaying approval steps

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 150 ++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 src/components/pages/purchase/order/PurchaseOrderDetail.tsx

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
new file mode 100644
index 00000000..dc9a3355
--- /dev/null
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import ApprovalSteps, {
+  formatGroupedApprovalsToApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+
+import { BaseGroupedApproval } from '@/types/api/api-general';
+import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
+
+interface PurchaseOrderDetailProps {
+  type?: 'detail' | 'edit' | 'approval-purchasing' | 'approval-manager';
+}
+
+const dummyGroupedApprovals: BaseGroupedApproval[] = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+    approvals: [
+      {
+        step_number: 1,
+        step_name: 'Pengajuan',
+        action: 'submit',
+        notes: 'Pengajuan purchase order dibuat',
+        action_by: {
+          id: 1,
+          id_user: 1,
+          email: 'staff@company.com',
+          name: 'Staff Pengajuan',
+        },
+        action_at: '2025-01-10T08:00:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 2,
+    step_name: 'Approval Purchasing',
+    approvals: [
+      {
+        step_number: 2,
+        step_name: 'Approval Purchasing',
+        action: 'approve',
+        notes: 'Purchase order disetujui oleh purchasing',
+        action_by: {
+          id: 2,
+          id_user: 2,
+          email: 'purchasing@company.com',
+          name: 'Ahmad Purchasing',
+        },
+        action_at: '2025-01-10T10:30:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 3,
+    step_name: 'Approval Manager Purchasing',
+    approvals: [
+      {
+        step_number: 3,
+        step_name: 'Approval Manager Purchasing',
+        action: 'approve',
+        notes: 'Purchase order disetujui oleh manager purchasing',
+        action_by: {
+          id: 3,
+          id_user: 3,
+          email: 'manager.purchasing@company.com',
+          name: 'Budi Manager Purchasing',
+        },
+        action_at: '2025-01-10T14:15:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 4,
+    step_name: 'Produk Diterima',
+    approvals: [
+      {
+        step_number: 4,
+        step_name: 'Produk Diterima',
+        action: 'receive',
+        notes: 'Produk telah diterima sesuai pesanan',
+        action_by: {
+          id: 4,
+          id_user: 4,
+          email: 'warehouse@company.com',
+          name: 'Candra Warehouse',
+        },
+        action_at: '2025-01-12T09:00:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 5,
+    step_name: 'Selesai',
+    approvals: [
+      {
+        step_number: 5,
+        step_name: 'Selesai',
+        action: 'complete',
+        notes: 'Purchase order telah selesai diproses',
+        action_by: {
+          id: 5,
+          id_user: 5,
+          email: 'finance@company.com',
+          name: 'Diana Finance',
+        },
+        action_at: '2025-01-12T16:00:00Z',
+      },
+    ],
+  },
+];
+
+const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
+  // ===== STATIC DATA =====
+  const groupedApprovals = dummyGroupedApprovals;
+  const latestApproval =
+    groupedApprovals[groupedApprovals.length - 1]?.approvals[0];
+
+  // ===== COMPUTED VALUES =====
+  const approvalSteps = useMemo(() => {
+    if (!groupedApprovals.length || !latestApproval) return [];
+
+    try {
+      return formatGroupedApprovalsToApprovalSteps(
+        PURCHASE_ORDER_APPROVAL_LINE,
+        groupedApprovals,
+        latestApproval
+      );
+    } catch (error) {
+      console.error('Error formatting approval steps:', error);
+      return [];
+    }
+  }, [groupedApprovals, latestApproval]);
+
+  return (
+    <section className='w-full'>
+      {/* Steps */}
+      {approvalSteps.length > 0 ? (
+        <ApprovalSteps approvals={approvalSteps} />
+      ) : (
+        <div className='text-center py-8'>
+          <p className='text-gray-500'>Status approval tidak tersedia</p>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default PurchaseOrderDetail;

From 5fc01a9afa9999b33ab686a9374523ea4cd71414 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 11 Nov 2025 11:26:22 +0700
Subject: [PATCH 043/168] feat(FE-208): use CheckboxInput component for item
 selection in PurchaseRequisitionsForm

---
 .../form/request/PurchaseRequisitionsForm.tsx | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
index f21cf02a..d60868c4 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
@@ -9,6 +9,7 @@ import { toast } from 'react-hot-toast';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import SelectInput, {
   OptionType,
   useSelect,
@@ -665,15 +666,14 @@ const PurchaseRequisitionsForm = ({
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <input
-                          type='checkbox'
-                          className='checkbox checkbox-sm'
+                        <CheckboxInput
+                          name='select-all-items'
                           checked={
                             formik.values.items?.length ===
                               selectedPurchaseItems.length &&
                             formik.values.items?.length > 0
                           }
-                          onChange={(e) => {
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                             if (e.target.checked) {
                               setSelectedPurchaseItems(
                                 formik.values.items?.map((_, idx) => idx) ?? []
@@ -682,6 +682,10 @@ const PurchaseRequisitionsForm = ({
                               setSelectedPurchaseItems([]);
                             }
                           }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
                         />
                       </th>
                     )}
@@ -703,11 +707,10 @@ const PurchaseRequisitionsForm = ({
                     <tr key={`purchase-item-${idx}`}>
                       {type !== 'detail' && (
                         <td className='!align-middle'>
-                          <input
-                            type='checkbox'
-                            className='checkbox checkbox-sm'
+                          <CheckboxInput
+                            name={`purchase-item-${idx}`}
                             checked={selectedPurchaseItems.includes(idx)}
-                            onChange={(e) => {
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                               if (e.target.checked) {
                                 setSelectedPurchaseItems([
                                   ...selectedPurchaseItems,
@@ -719,6 +722,10 @@ const PurchaseRequisitionsForm = ({
                                 );
                               }
                             }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </td>
                       )}

From f7b2e3c6f2ffa1439bab0774d05e3a09d43677fb Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 11 Nov 2025 11:26:46 +0700
Subject: [PATCH 044/168] feat(FE-208,212): add
 PurchaseRequisitionsStaffApprovalForm and schema for staff approval process

---
 .../form/order/PurchaseOrderForm.schema.ts    | 113 ++++
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 563 ++++++++++++++++++
 2 files changed, 676 insertions(+)
 create mode 100644 src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
 create mode 100644 src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
new file mode 100644
index 00000000..88d5a0b8
--- /dev/null
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -0,0 +1,113 @@
+import * as Yup from 'yup';
+import { Purchase } from '@/types/api/purchase/purchase';
+
+type PurchaseRequisitionsStaffApprovalFormSchemaType = {
+  notes: string | null;
+  items: {
+    purchase_item?: {
+      value: number;
+      label: string;
+    } | null;
+    purchase_item_id: number;
+    price: number | string;
+    total_price: number | string;
+  }[];
+};
+
+export type PurchaseStaffApprovalItemSchema = {
+  purchase_item?: {
+    value: number;
+    label: string;
+  } | null;
+  purchase_item_id: number;
+  price: number | string;
+  total_price: number | string;
+};
+
+const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffApprovalItemSchema> =
+  Yup.object({
+    purchase_item: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    purchase_item_id: Yup.number()
+      .required('Purchase item is required!')
+      .test('is-valid-purchase-item', 'Purchase item must be selected!', function (value) {
+        if (!this.parent.purchase_item) return true;
+        return Boolean(value && value > 0);
+      })
+      .typeError('Purchase item must be selected!'),
+    price: Yup.mixed<string | number>()
+      .required('Harga wajib diisi!')
+      .test(
+        'is-valid-price',
+        'Harga harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      ),
+    total_price: Yup.mixed<string | number>()
+      .required('Total harga wajib diisi!')
+      .test(
+        'is-valid-total-price',
+        'Total harga harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      ),
+  });
+
+export const PurchaseRequisitionsStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsStaffApprovalFormSchemaType> =
+  Yup.object({
+    notes: Yup.string().nullable().default(null),
+    items: Yup.array()
+      .of(PurchaseStaffApprovalItemObjectSchema)
+      .min(1, 'Minimal harus ada 1 item pembelian!')
+      .required('Item pembelian wajib diisi!')
+      .typeError('Item pembelian wajib diisi!'),
+  });
+
+export const PurchaseRequisitionsStaffApprovalFormInitialValues: PurchaseRequisitionsStaffApprovalFormSchemaType =
+  {
+    notes: '',
+    items: [
+      {
+        purchase_item_id: 0,
+        price: '',
+        total_price: '',
+      },
+    ],
+  };
+
+export const PurchaseRequisitionsStaffApprovalFormDefaultValues = (
+  purchase?: Purchase
+): PurchaseRequisitionsStaffApprovalFormSchemaType => {
+  return {
+    notes: purchase?.notes ?? null,
+    items: purchase?.items
+      ? purchase.items.map((item) => ({
+          purchase_item_id: item.id,
+          price: '',
+          total_price: '',
+        }))
+      : [
+          {
+            purchase_item_id: 0,
+            price: '',
+            total_price: '',
+          },
+        ],
+  };
+};
+
+export type PurchaseRequisitionsStaffApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequisitionsStaffApprovalFormSchema
+>;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
new file mode 100644
index 00000000..8f303b56
--- /dev/null
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -0,0 +1,563 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import { Icon } from '@iconify/react';
+import { toast } from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+
+import {
+  PurchaseRequisitionsStaffApprovalFormDefaultValues,
+  PurchaseRequisitionsStaffApprovalFormInitialValues,
+  PurchaseRequisitionsStaffApprovalFormSchema,
+} from './PurchaseOrderForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import { StaffApprovalApi } from '@/services/api/purchase';
+import {
+  CreateStaffApprovalRequisitionsPayload,
+  Purchase,
+} from '@/types/api/purchase/purchase';
+
+import Card from '@/components/Card';
+
+interface PurchaseOrderStaffApprovalFormProps {
+  type?: 'add' | 'edit';
+  initialValues?: Purchase;
+}
+
+const PurchaseOrderStaffApprovalForm = ({
+  type = 'add',
+  initialValues,
+}: PurchaseOrderStaffApprovalFormProps) => {
+  const searchParams = useSearchParams();
+  const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
+    useState('');
+
+  // ===== TYPE DEFINITIONS =====
+  interface PurchaseItemOptionType extends OptionType {
+    id: number;
+    quantity: number;
+    product: {
+      name: string;
+      type?: string;
+      uom: {
+        name: string;
+      };
+    };
+    warehouse: {
+      name: string;
+    };
+  }
+
+  // ===== UTILITY FUNCTIONS =====
+  const getPurchaseItemError = (
+    idx: number,
+    field: 'purchase_item_id' | 'price' | 'total_price'
+  ): { isError: boolean; errorMessage: string } => {
+    const touchedItem = formik.touched.items?.[idx];
+    const errorItem = formik.errors.items?.[idx] as
+      | Record<string, string>
+      | undefined;
+
+    if (!touchedItem) {
+      return { isError: false, errorMessage: '' };
+    }
+
+    const isTouched = (touchedItem as Record<string, boolean>)?.[field];
+    const errorMessage = errorItem?.[field] || '';
+
+    return {
+      isError: Boolean(isTouched && errorMessage),
+      errorMessage: isTouched && errorMessage ? errorMessage : '',
+    };
+  };
+
+  // ===== SUBMISSION HANDLERS =====
+  const createStaffApprovalHandler = useCallback(
+    async (payload: CreateStaffApprovalRequisitionsPayload) => {
+      const purchaseRequisitionId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequisitionId) {
+        setPurchaseOrderFormErrorMessage('Purchase Requisition ID is required');
+        return;
+      }
+
+      const res = await StaffApprovalApi.createStaffApproval(
+        purchaseRequisitionId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+    },
+    [initialValues?.id, searchParams]
+  );
+
+  const updateStaffApprovalHandler = useCallback(
+    async (
+      purchaseId: number,
+      payload: CreateStaffApprovalRequisitionsPayload
+    ) => {
+      const res = await StaffApprovalApi.createStaffApproval(
+        purchaseId,
+        payload
+      );
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      window.location.href = '/purchase';
+    },
+    []
+  );
+
+  // ===== FORM CONFIGURATION =====
+  const formikInitialValues = useMemo(() => {
+    return initialValues
+      ? PurchaseRequisitionsStaffApprovalFormDefaultValues(initialValues)
+      : PurchaseRequisitionsStaffApprovalFormInitialValues;
+  }, [initialValues]);
+
+  const formik = useFormik({
+    initialValues: formikInitialValues,
+    validationSchema: PurchaseRequisitionsStaffApprovalFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      const payload: CreateStaffApprovalRequisitionsPayload = {
+        notes: values.notes || '',
+        items: (values.items || []).map((item) => ({
+          purchase_item_id:
+            typeof item.purchase_item_id === 'string'
+              ? parseInt(item.purchase_item_id) || 0
+              : item.purchase_item_id || 0,
+          price:
+            typeof item.price === 'string'
+              ? parseFloat(item.price) || 0
+              : item.price || 0,
+          total_price:
+            typeof item.total_price === 'string'
+              ? parseFloat(item.total_price) || 0
+              : item.total_price || 0,
+        })),
+      };
+
+      switch (type) {
+        case 'add':
+          await createStaffApprovalHandler(payload);
+          break;
+        case 'edit':
+          await updateStaffApprovalHandler(
+            initialValues?.id as number,
+            payload
+          );
+          break;
+      }
+    },
+  });
+
+  // ===== API DATA FETCHING =====
+  const purchaseItems = useMemo(() => {
+    if (initialValues?.items) {
+      return initialValues.items.map((item) => ({
+        value: item.id,
+        label: `${item.product.name} (${item.quantity} ${item.product.uom.name})`,
+        id: item.id,
+        quantity: item.quantity,
+        product: {
+          name: item.product.name,
+          product_category: item.product.product_category,
+          uom: {
+            name: item.product.uom.name,
+          },
+        },
+        warehouse: {
+          name: item.warehouse?.name || '',
+        },
+      }));
+    }
+
+    return [
+      {
+        value: 1,
+        label: 'SEALYTE SPARK 1 x 87 gr (14 SACHET)',
+        id: 1,
+        quantity: 14,
+        product: {
+          name: 'SEALYTE SPARK 1 x 87 gr',
+          product_category: 'Bahan Baku',
+          uom: {
+            name: 'SACHET',
+          },
+        },
+        warehouse: {
+          name: 'GUDANG CIANGSANA 1 (ARCA P15)',
+        },
+      },
+      {
+        value: 2,
+        label: 'CID-2000 @ 5 KG (2 KILOGRAM)',
+        id: 2,
+        quantity: 2,
+        product: {
+          name: 'CID-2000 @ 5 KG',
+          product_category: 'Bahan Baku',
+          uom: {
+            name: 'Kilogram',
+          },
+        },
+        warehouse: {
+          name: 'GUDANG CIANGSANA 2 (ARCA P15)',
+        },
+      },
+      {
+        value: 3,
+        label: 'VITAMIN AYAM (10 DOSIS)',
+        id: 3,
+        quantity: 10,
+        product: {
+          name: 'VITAMIN AYAM',
+          product_category: 'Bahan Baku',
+          uom: {
+            name: 'DOSIS',
+          },
+        },
+        warehouse: {
+          name: 'GUDANG CIANGSANA 3 (ARCA P15)',
+        },
+      },
+    ];
+  }, [initialValues?.items, searchParams]);
+
+  const getPurchaseItemOptions = useCallback(() => {
+    return purchaseItems;
+  }, [purchaseItems]);
+
+  // ===== FIELD CHANGE HANDLERS =====
+  const purchaseItemChangeHandler = (
+    idx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    const purchaseItem = val as PurchaseItemOptionType | null;
+    formik.setFieldTouched(`items.${idx}.purchase_item`, true);
+    formik.setFieldValue(`items.${idx}.purchase_item`, purchaseItem);
+    formik.setFieldTouched(`items.${idx}.purchase_item_id`, true);
+    formik.setFieldValue(
+      `items.${idx}.purchase_item_id`,
+      (purchaseItem as OptionType)?.value || 0
+    );
+  };
+
+  // ===== PURCHASE ITEM OPERATIONS =====
+  const handlePurchaseItemChange = (
+    idx: number,
+    field: 'price' | 'total_price',
+    value: string | number
+  ) => {
+    if (field === 'price' || field === 'total_price') {
+      const numValue =
+        typeof value === 'string' ? parseFloat(value) || 0 : value;
+      formik.setFieldValue(`items.${idx}.${field}`, numValue);
+
+      if (field === 'price') {
+        const selectedItem = purchaseItems.find(
+          (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+        );
+        if (selectedItem && selectedItem.quantity && numValue > 0) {
+          const calculatedTotal = numValue * selectedItem.quantity;
+          formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
+        }
+      }
+
+      if (field === 'total_price') {
+        const selectedItem = purchaseItems.find(
+          (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+        );
+        if (
+          selectedItem &&
+          selectedItem.quantity &&
+          selectedItem.quantity > 0 &&
+          numValue > 0
+        ) {
+          const calculatedPrice = numValue / selectedItem.quantity;
+          formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
+        }
+      }
+    }
+  };
+
+  return (
+    <>
+      <section className='w-full'>
+        <form
+          onSubmit={formik.handleSubmit}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <Card
+            title='Konfirmasi Approve Pembelian'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    <th>
+                      Item
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>Gudang</th>
+                    <th>Produk</th>
+                    <th>Jenis Produk</th>
+                    <th>Jumlah</th>
+                    <th>Satuan</th>
+                    <th>
+                      Harga Satuan
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Total (Rp.)
+                      <span className='text-error'>*</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.items?.map((item, idx) => {
+                    const selectedPurchaseItem = purchaseItems.find(
+                      (p) => p.value === item.purchase_item_id
+                    );
+                    return (
+                      <tr key={`purchase-item-${idx}`}>
+                        <td>
+                          <SelectInput
+                            required
+                            isClearable={true}
+                            value={item.purchase_item}
+                            key={`purchase-item-${idx}`}
+                            onChange={(val) =>
+                              purchaseItemChangeHandler(idx, val)
+                            }
+                            options={getPurchaseItemOptions()}
+                            isError={
+                              getPurchaseItemError(idx, 'purchase_item_id')
+                                .isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'purchase_item_id')
+                                .errorMessage
+                            }
+                            placeholder='Pilih Item...'
+                            className={{
+                              wrapper: 'min-w-48',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.warehouse`}
+                            type='text'
+                            value={selectedPurchaseItem?.warehouse?.name || ''}
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.product_name`}
+                            type='text'
+                            value={selectedPurchaseItem?.product?.name || ''}
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-48',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.product_category`}
+                            type='text'
+                            value={
+                              typeof selectedPurchaseItem?.product
+                                ?.product_category === 'string'
+                                ? selectedPurchaseItem.product.product_category
+                                : selectedPurchaseItem?.product
+                                    ?.product_category?.name || ''
+                            }
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.quantity`}
+                            type='text'
+                            value={
+                              selectedPurchaseItem?.quantity
+                                ? selectedPurchaseItem.quantity.toLocaleString(
+                                    'id-ID'
+                                  )
+                                : ''
+                            }
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-24',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.uom`}
+                            type='text'
+                            value={
+                              selectedPurchaseItem?.product?.uom?.name || ''
+                            }
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-24',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <NumberInput
+                            required
+                            name={`items.${idx}.price`}
+                            value={item.price || ''}
+                            onChange={(e) =>
+                              handlePurchaseItemChange(
+                                idx,
+                                'price',
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            placeholder='Masukkan harga satuan'
+                            allowNegative={false}
+                            decimalScale={2}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            inputPrefix={'Rp'}
+                            isError={getPurchaseItemError(idx, 'price').isError}
+                            errorMessage={
+                              getPurchaseItemError(idx, 'price').errorMessage
+                            }
+                            className={{
+                              wrapper: 'min-w-40',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <NumberInput
+                            required
+                            name={`items.${idx}.total_price`}
+                            value={item.total_price || ''}
+                            onChange={(e) =>
+                              handlePurchaseItemChange(
+                                idx,
+                                'total_price',
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            placeholder='Masukkan total harga'
+                            allowNegative={false}
+                            decimalScale={2}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            inputPrefix={'Rp'}
+                            isError={
+                              getPurchaseItemError(idx, 'total_price').isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'total_price')
+                                .errorMessage
+                            }
+                            className={{
+                              wrapper: 'min-w-40',
+                            }}
+                          />
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+            <div className={'col-span-2'}>
+              <TextInput
+                label='Notes'
+                name='notes'
+                value={formik.values.notes || ''}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={formik.touched.notes && Boolean(formik.errors.notes)}
+                errorMessage={formik.errors.notes as string}
+                placeholder='Masukkan catatan'
+              />
+            </div>
+
+            {/* Action buttons */}
+            <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Link href='/purchase'>
+                  <Button color='warning' className='px-4'>
+                    Cancel
+                  </Button>
+                </Link>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                >
+                  Submit
+                </Button>
+              </div>
+            </div>
+
+            {purchaseOrderFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseOrderFormErrorMessage}</span>
+              </div>
+            )}
+          </Card>
+        </form>
+      </section>
+    </>
+  );
+};
+
+export default PurchaseOrderStaffApprovalForm;

From 21ac73527db75f1c0d066162cb11fb5e504ae6a1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 11 Nov 2025 13:23:48 +0700
Subject: [PATCH 045/168] feat(FE-212): refactor purchase requisitions services
 and update item schema for approval process

---
 src/services/api/purchase.ts         | 39 +++++++++++++++++++++-------
 src/types/api/purchase/purchase.d.ts | 18 ++++++-------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 91bad395..56590975 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -8,18 +8,12 @@ import {
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 
-export const PurchaseRequisitionsApi = new BaseApiService<
+export class PurchaseRequisitionsService extends BaseApiService<
   Purchase,
   CreatePurchaseRequisitionsPayload,
   UpdatePurchaseRequisitionsPayload
->('/purchases/requisitions');
-
-export class StaffApprovalService extends BaseApiService<
-  Purchase,
-  CreateStaffApprovalRequisitionsPayload,
-  CreateAcceptApprovalRequisitionsPayload
 > {
-  constructor(basePath: string = '') {
+  constructor(basePath: string = '/purchases/requisitions') {
     super(basePath);
   }
 
@@ -52,6 +46,18 @@ export class StaffApprovalService extends BaseApiService<
       },
     });
   }
+}
+
+export const PurchaseRequisitionsApi = new PurchaseRequisitionsService();
+
+export class StaffApprovalService extends BaseApiService<
+  Purchase,
+  CreateStaffApprovalRequisitionsPayload,
+  CreateAcceptApprovalRequisitionsPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
 
   async createStaffApproval(
     purchaseRequisitionId: number,
@@ -66,12 +72,23 @@ export class StaffApprovalService extends BaseApiService<
     );
   }
 
+  }
+
+export class AcceptApprovalService extends BaseApiService<
+  Purchase,
+  CreateAcceptApprovalRequisitionsPayload,
+  CreateAcceptApprovalRequisitionsPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
   async acceptApproval(
     purchaseRequisitionId: number,
     payload: CreateAcceptApprovalRequisitionsPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequisitionId}/approvals/accept`,
+      `${purchaseRequisitionId}/approvals/receipts`,
       {
         method: 'POST',
         payload,
@@ -83,3 +100,7 @@ export class StaffApprovalService extends BaseApiService<
 export const StaffApprovalApi = new StaffApprovalService(
   '/purchases/requisitions'
 );
+
+export const AcceptApprovalApi = new AcceptApprovalService(
+  '/purchases/requisitions'
+);
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 25eae363..74f91af7 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -60,15 +60,15 @@ export type CreateAcceptApprovalRequisitionsPayload = {
   notes?: string;
   items: {
     purchase_item_id: number;
-    accepted_date: string;
-    destination_warehouse_id: number;
-    delivery_document_number: string;
-    delivery_vehicle_plate: string;
-    document_index?: number;
-    received_quantity: number;
-    expedition_id: number;
-    transport_cost: number;
-    transport_cost_per_item: number;
+    received_date: string;
+    warehouse_id: number;
+    travel_number: string;
+    travel_document_path: string;
+    vehicle_number: string;
+    expedition_vendor_id: number;
+    received_qty: number;
+    transport_per_item: number;
+    transport_total: number;
   }[];
 };
 

From 8c17367fb668ae1d3646eaa71a97db81174deace Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 11 Nov 2025 14:06:53 +0700
Subject: [PATCH 046/168] feat(FE-208,212): add PurchaseOrderAcceptApprovalForm
 and validation schema for acceptance of purchase requisitions

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 872 ++++++++++++++++++
 .../form/order/PurchaseOrderForm.schema.ts    | 243 ++++-
 2 files changed, 1110 insertions(+), 5 deletions(-)
 create mode 100644 src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
new file mode 100644
index 00000000..31cdaab0
--- /dev/null
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -0,0 +1,872 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+import { useFormik } from 'formik';
+import { Icon } from '@iconify/react';
+import { toast } from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import Button from '@/components/Button';
+import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+
+import {
+  PurchaseRequisitionsAcceptApprovalFormDefaultValues,
+  PurchaseRequisitionsAcceptApprovalFormInitialValues,
+  PurchaseRequisitionsAcceptApprovalFormSchema,
+} from './PurchaseOrderForm.schema';
+import { isResponseError } from '@/lib/api-helper';
+import { AcceptApprovalApi } from '@/services/api/purchase';
+import {
+  CreateAcceptApprovalRequisitionsPayload,
+  Purchase,
+} from '@/types/api/purchase/purchase';
+
+import Card from '@/components/Card';
+
+interface PurchaseOrderAcceptApprovalFormProps {
+  type?: 'add' | 'edit';
+  initialValues?: Purchase;
+}
+
+const PurchaseOrderAcceptApprovalForm = ({
+  type = 'add',
+  initialValues,
+}: PurchaseOrderAcceptApprovalFormProps) => {
+  const searchParams = useSearchParams();
+  const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
+    useState('');
+
+  // ===== TYPE DEFINITIONS =====
+  interface PurchaseItemOptionType extends OptionType {
+    id: number;
+    quantity: number;
+    product: {
+      name: string;
+      product_category: string | { name: string };
+      uom: {
+        name: string;
+      };
+    };
+    warehouse: {
+      name: string;
+    };
+  }
+
+  interface WarehouseOptionType {
+    value: number;
+    label: string;
+    id: number;
+  }
+
+  interface ExpeditionVendorOptionType {
+    value: number;
+    label: string;
+    id: number;
+  }
+
+  // ===== UTILITY FUNCTIONS =====
+  const getPurchaseItemError = (
+    idx: number,
+    field:
+      | 'purchase_item_id'
+      | 'received_date'
+      | 'warehouse_id'
+      | 'travel_number'
+      | 'travel_document_path'
+      | 'vehicle_number'
+      | 'expedition_vendor_id'
+      | 'received_qty'
+      | 'transport_per_item'
+      | 'transport_total'
+  ): { isError: boolean; errorMessage: string } => {
+    const touchedItem = formik.touched.items?.[idx];
+    const errorItem = formik.errors.items?.[idx] as
+      | Record<string, string>
+      | undefined;
+
+    if (!touchedItem) {
+      return { isError: false, errorMessage: '' };
+    }
+
+    const isTouched = (touchedItem as Record<string, boolean>)?.[field];
+    const errorMessage = errorItem?.[field] || '';
+
+    return {
+      isError: Boolean(isTouched && errorMessage),
+      errorMessage: isTouched && errorMessage ? errorMessage : '',
+    };
+  };
+
+  // ===== SUBMISSION HANDLERS =====
+  const createAcceptApprovalHandler = useCallback(
+    async (payload: CreateAcceptApprovalRequisitionsPayload) => {
+      const purchaseRequisitionId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequisitionId) {
+        setPurchaseOrderFormErrorMessage('Purchase Requisition ID is required');
+        return;
+      }
+
+      const res = await AcceptApprovalApi.acceptApproval(
+        purchaseRequisitionId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+    },
+    [initialValues?.id, searchParams]
+  );
+
+  const updateAcceptApprovalHandler = useCallback(
+    async (
+      purchaseId: number,
+      payload: CreateAcceptApprovalRequisitionsPayload
+    ) => {
+      const res = await AcceptApprovalApi.acceptApproval(purchaseId, payload);
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      window.location.href = '/purchase';
+    },
+    []
+  );
+
+  // ===== FORM CONFIGURATION =====
+  const formikInitialValues = useMemo(() => {
+    return initialValues
+      ? PurchaseRequisitionsAcceptApprovalFormDefaultValues(initialValues)
+      : PurchaseRequisitionsAcceptApprovalFormInitialValues;
+  }, [initialValues]);
+
+  const formik = useFormik({
+    initialValues: formikInitialValues,
+    validationSchema: PurchaseRequisitionsAcceptApprovalFormSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    onSubmit: async (values) => {
+      const payload: CreateAcceptApprovalRequisitionsPayload = {
+        notes: values.notes || '',
+        items: (values.items || []).map((item) => ({
+          purchase_item_id:
+            typeof item.purchase_item_id === 'string'
+              ? parseInt(item.purchase_item_id) || 0
+              : item.purchase_item_id || 0,
+          received_date: item.received_date || '',
+          warehouse_id:
+            typeof item.warehouse_id === 'string'
+              ? parseInt(item.warehouse_id) || 0
+              : item.warehouse_id || 0,
+          travel_number: item.travel_number || '',
+          travel_document_path: item.travel_document_path || '',
+          vehicle_number: item.vehicle_number || '',
+          expedition_vendor_id:
+            typeof item.expedition_vendor_id === 'string'
+              ? parseInt(item.expedition_vendor_id) || 0
+              : item.expedition_vendor_id || 0,
+          received_qty:
+            typeof item.received_qty === 'string'
+              ? parseFloat(item.received_qty) || 0
+              : item.received_qty || 0,
+          transport_per_item:
+            typeof item.transport_per_item === 'string'
+              ? parseFloat(item.transport_per_item) || 0
+              : item.transport_per_item || 0,
+          transport_total:
+            typeof item.transport_total === 'string'
+              ? parseFloat(item.transport_total) || 0
+              : item.transport_total || 0,
+        })),
+      };
+
+      switch (type) {
+        case 'add':
+          await createAcceptApprovalHandler(payload);
+          break;
+        case 'edit':
+          await updateAcceptApprovalHandler(
+            initialValues?.id as number,
+            payload
+          );
+          break;
+      }
+    },
+  });
+
+  // ===== API DATA FETCHING =====
+  const purchaseItems = useMemo(() => {
+    if (initialValues?.items) {
+      return initialValues.items.map((item) => ({
+        value: item.id,
+        label: `${item.product.name} (${item.quantity} ${item.product.uom.name})`,
+        id: item.id,
+        quantity: item.quantity,
+        product: {
+          name: item.product.name,
+          product_category: item.product.product_category,
+          uom: {
+            name: item.product.uom.name,
+          },
+        },
+        warehouse: {
+          name: item.warehouse?.name || '',
+        },
+      }));
+    }
+
+    return [
+      {
+        value: 1,
+        label: 'SEALYTE SPARK 1 x 87 gr (14 SACHET)',
+        id: 1,
+        quantity: 14,
+        product: {
+          name: 'SEALYTE SPARK 1 x 87 gr',
+          product_category: 'Bahan Baku',
+          uom: {
+            name: 'SACHET',
+          },
+        },
+        warehouse: {
+          name: 'GUDANG CIANGSANA 1 (ARCA P15)',
+        },
+      },
+      {
+        value: 2,
+        label: 'CID-2000 @ 5 KG (2 KILOGRAM)',
+        id: 2,
+        quantity: 2,
+        product: {
+          name: 'CID-2000 @ 5 KG',
+          product_category: 'Bahan Baku',
+          uom: {
+            name: 'Kilogram',
+          },
+        },
+        warehouse: {
+          name: 'GUDANG CIANGSANA 2 (ARCA P15)',
+        },
+      },
+      {
+        value: 3,
+        label: 'VITAMIN AYAM (10 DOSIS)',
+        id: 3,
+        quantity: 10,
+        product: {
+          name: 'VITAMIN AYAM',
+          product_category: 'Bahan Baku',
+          uom: {
+            name: 'DOSIS',
+          },
+        },
+        warehouse: {
+          name: 'GUDANG CIANGSANA 3 (ARCA P15)',
+        },
+      },
+    ];
+  }, [initialValues?.items, searchParams]);
+
+  const warehouses: WarehouseOptionType[] = useMemo(
+    () => [
+      { value: 1, label: 'GUDANG CIANGSANA 1 (ARCA P15)', id: 1 },
+      { value: 2, label: 'GUDANG CIANGSANA 2 (ARCA P15)', id: 2 },
+      { value: 3, label: 'GUDANG CIANGSANA 3 (ARCA P15)', id: 3 },
+      { value: 7, label: 'GUDANG UTAMA', id: 7 },
+    ],
+    []
+  );
+
+  const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(
+    () => [
+      { value: 1, label: 'JNE Express', id: 1 },
+      { value: 2, label: 'J&T Express', id: 2 },
+      { value: 3, label: 'SiCepat Express', id: 3 },
+      { value: 4, label: 'Anteraja', id: 4 },
+    ],
+    []
+  );
+
+  const getPurchaseItemOptions = useCallback(() => {
+    return purchaseItems;
+  }, [purchaseItems]);
+
+  const getWarehouseOptions = useCallback(() => {
+    return warehouses;
+  }, [warehouses]);
+
+  const getExpeditionVendorOptions = useCallback(() => {
+    return expeditionVendors;
+  }, [expeditionVendors]);
+
+  // ===== FIELD CHANGE HANDLERS =====
+  const purchaseItemChangeHandler = (
+    idx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    const purchaseItem = val as PurchaseItemOptionType | null;
+    formik.setFieldTouched(`items.${idx}.purchase_item`, true);
+    formik.setFieldValue(`items.${idx}.purchase_item`, purchaseItem);
+    formik.setFieldTouched(`items.${idx}.purchase_item_id`, true);
+    formik.setFieldValue(
+      `items.${idx}.purchase_item_id`,
+      (purchaseItem as OptionType)?.value || 0
+    );
+  };
+
+  const warehouseChangeHandler = (
+    idx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    const warehouse = val as WarehouseOptionType | null;
+    formik.setFieldTouched(`items.${idx}.warehouse`, true);
+    formik.setFieldValue(`items.${idx}.warehouse`, warehouse);
+    formik.setFieldTouched(`items.${idx}.warehouse_id`, true);
+    formik.setFieldValue(
+      `items.${idx}.warehouse_id`,
+      warehouse?.value || 0
+    );
+  };
+
+  const expeditionVendorChangeHandler = (
+    idx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    const expeditionVendor = val as ExpeditionVendorOptionType | null;
+    formik.setFieldTouched(`items.${idx}.expedition_vendor`, true);
+    formik.setFieldValue(`items.${idx}.expedition_vendor`, expeditionVendor);
+    formik.setFieldTouched(`items.${idx}.expedition_vendor_id`, true);
+    formik.setFieldValue(
+      `items.${idx}.expedition_vendor_id`,
+      expeditionVendor?.value || 0
+    );
+  };
+
+  // ===== PURCHASE ITEM OPERATIONS =====
+  const handlePurchaseItemChange = (
+    idx: number,
+    field: 'received_qty' | 'transport_per_item' | 'transport_total',
+    value: string | number
+  ) => {
+    const numValue = typeof value === 'string' ? parseFloat(value) || 0 : value;
+    formik.setFieldValue(`items.${idx}.${field}`, numValue);
+
+    if (field === 'received_qty' || field === 'transport_per_item') {
+      const receivedQty =
+        field === 'received_qty'
+          ? numValue
+          : parseFloat(formik.values.items?.[idx]?.received_qty as string) || 0;
+      const transportPerItem =
+        field === 'transport_per_item'
+          ? numValue
+          : parseFloat(
+              formik.values.items?.[idx]?.transport_per_item as string
+            ) || 0;
+
+      if (receivedQty > 0 && transportPerItem >= 0) {
+        const calculatedTransportTotal = receivedQty * transportPerItem;
+        formik.setFieldValue(
+          `items.${idx}.transport_total`,
+          calculatedTransportTotal
+        );
+      }
+    }
+
+    if (field === 'transport_total') {
+      const receivedQty =
+        parseFloat(formik.values.items?.[idx]?.received_qty as string) || 0;
+      if (receivedQty > 0 && numValue >= 0) {
+        const calculatedTransportPerItem = numValue / receivedQty;
+        formik.setFieldValue(
+          `items.${idx}.transport_per_item`,
+          calculatedTransportPerItem
+        );
+      }
+    }
+  };
+
+  return (
+    <>
+      <section className='w-full'>
+        <form
+          onSubmit={formik.handleSubmit}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          <Card
+            title='Konfirmasi Penerimaan Produk'
+            className={{
+              wrapper: 'w-full mb-4 shadow',
+              title: 'mb-4',
+            }}
+          >
+            <div className='overflow-x-auto'>
+              <table className='table'>
+                <thead>
+                  <tr>
+                    <th>
+                      Item
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>Gudang</th>
+                    <th>Produk</th>
+                    <th>Jenis Produk</th>
+                    <th>Jumlah</th>
+                    <th>Satuan</th>
+                    <th>
+                      Tanggal Diterima
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Gudang Tujuan
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Nomor Perjalanan
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Dokumen Perjalanan
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Nomor Kendaraan
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Vendor Ekspedisi
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Jumlah Diterima
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Transport/Item
+                      <span className='text-error'>*</span>
+                    </th>
+                    <th>
+                      Total Transport
+                      <span className='text-error'>*</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {formik.values.items?.map((item, idx) => {
+                    const selectedPurchaseItem = purchaseItems.find(
+                      (p) => p.value === item.purchase_item_id
+                    );
+                    return (
+                      <tr key={`purchase-item-${idx}`}>
+                        <td>
+                          <SelectInput
+                            required
+                            isClearable={true}
+                            value={item.purchase_item}
+                            key={`purchase-item-${idx}`}
+                            onChange={(val) =>
+                              purchaseItemChangeHandler(idx, val)
+                            }
+                            options={getPurchaseItemOptions()}
+                            isError={
+                              getPurchaseItemError(idx, 'purchase_item_id')
+                                .isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'purchase_item_id')
+                                .errorMessage
+                            }
+                            placeholder='Pilih Item...'
+                            className={{
+                              wrapper: 'min-w-48',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.warehouse`}
+                            type='text'
+                            value={selectedPurchaseItem?.warehouse?.name || ''}
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.product_name`}
+                            type='text'
+                            value={selectedPurchaseItem?.product?.name || ''}
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-48',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.product_category`}
+                            type='text'
+                            value={
+                              typeof selectedPurchaseItem?.product
+                                ?.product_category === 'string'
+                                ? selectedPurchaseItem.product.product_category
+                                : selectedPurchaseItem?.product
+                                    ?.product_category?.name || ''
+                            }
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.quantity`}
+                            type='text'
+                            value={
+                              selectedPurchaseItem?.quantity
+                                ? selectedPurchaseItem.quantity.toLocaleString(
+                                    'id-ID'
+                                  )
+                                : ''
+                            }
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-24',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            name={`items.${idx}.uom`}
+                            type='text'
+                            value={
+                              selectedPurchaseItem?.product?.uom?.name || ''
+                            }
+                            readOnly={true}
+                            placeholder='Pilih item terlebih dahulu'
+                            className={{
+                              wrapper: 'min-w-24',
+                            }}
+                            disabled={true}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            name={`items.${idx}.received_date`}
+                            type='date'
+                            value={item.received_date || ''}
+                            onChange={(e) =>
+                              formik.setFieldValue(
+                                `items.${idx}.received_date`,
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            isError={
+                              getPurchaseItemError(idx, 'received_date').isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'received_date')
+                                .errorMessage
+                            }
+                            className={{
+                              wrapper: 'min-w-36',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <SelectInput
+                            required
+                            isClearable={true}
+                            value={item.warehouse}
+                            key={`warehouse-${idx}`}
+                            onChange={(val) => warehouseChangeHandler(idx, val)}
+                            options={getWarehouseOptions()}
+                            isError={
+                              getPurchaseItemError(idx, 'warehouse_id').isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'warehouse_id')
+                                .errorMessage
+                            }
+                            placeholder='Pilih Gudang...'
+                            className={{
+                              wrapper: 'min-w-48',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            name={`items.${idx}.travel_number`}
+                            type='text'
+                            value={item.travel_number || ''}
+                            onChange={(e) =>
+                              formik.setFieldValue(
+                                `items.${idx}.travel_number`,
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            isError={
+                              getPurchaseItemError(idx, 'travel_number').isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'travel_number')
+                                .errorMessage
+                            }
+                            placeholder='Masukkan nomor perjalanan'
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            name={`items.${idx}.travel_document_path`}
+                            type='text'
+                            value={item.travel_document_path || ''}
+                            onChange={(e) =>
+                              formik.setFieldValue(
+                                `items.${idx}.travel_document_path`,
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            isError={
+                              getPurchaseItemError(idx, 'travel_document_path')
+                                .isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'travel_document_path')
+                                .errorMessage
+                            }
+                            placeholder='Masukkan path dokumen'
+                            className={{
+                              wrapper: 'min-w-48',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <TextInput
+                            required
+                            name={`items.${idx}.vehicle_number`}
+                            type='text'
+                            value={item.vehicle_number || ''}
+                            onChange={(e) =>
+                              formik.setFieldValue(
+                                `items.${idx}.vehicle_number`,
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            isError={
+                              getPurchaseItemError(idx, 'vehicle_number')
+                                .isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'vehicle_number')
+                                .errorMessage
+                            }
+                            placeholder='Masukkan nomor kendaraan'
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <SelectInput
+                            required
+                            isClearable={true}
+                            value={item.expedition_vendor}
+                            key={`expedition-vendor-${idx}`}
+                            onChange={(val) =>
+                              expeditionVendorChangeHandler(idx, val)
+                            }
+                            options={getExpeditionVendorOptions()}
+                            isError={
+                              getPurchaseItemError(idx, 'expedition_vendor_id')
+                                .isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'expedition_vendor_id')
+                                .errorMessage
+                            }
+                            placeholder='Pilih Vendor...'
+                            className={{
+                              wrapper: 'min-w-40',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <NumberInput
+                            required
+                            name={`items.${idx}.received_qty`}
+                            value={item.received_qty || ''}
+                            onChange={(e) =>
+                              handlePurchaseItemChange(
+                                idx,
+                                'received_qty',
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            placeholder='Masukkan jumlah diterima'
+                            allowNegative={false}
+                            decimalScale={0}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            isError={
+                              getPurchaseItemError(idx, 'received_qty').isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'received_qty')
+                                .errorMessage
+                            }
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <NumberInput
+                            required
+                            name={`items.${idx}.transport_per_item`}
+                            value={item.transport_per_item || ''}
+                            onChange={(e) =>
+                              handlePurchaseItemChange(
+                                idx,
+                                'transport_per_item',
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            placeholder='Masukkan transport/item'
+                            allowNegative={false}
+                            decimalScale={2}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            inputPrefix={'Rp'}
+                            isError={
+                              getPurchaseItemError(idx, 'transport_per_item')
+                                .isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'transport_per_item')
+                                .errorMessage
+                            }
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                          />
+                        </td>
+                        <td>
+                          <NumberInput
+                            required
+                            name={`items.${idx}.transport_total`}
+                            value={item.transport_total || ''}
+                            onChange={(e) =>
+                              handlePurchaseItemChange(
+                                idx,
+                                'transport_total',
+                                e.target.value
+                              )
+                            }
+                            onBlur={formik.handleBlur}
+                            placeholder='Masukkan total transport'
+                            allowNegative={false}
+                            decimalScale={2}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            inputPrefix={'Rp'}
+                            isError={
+                              getPurchaseItemError(idx, 'transport_total')
+                                .isError
+                            }
+                            errorMessage={
+                              getPurchaseItemError(idx, 'transport_total')
+                                .errorMessage
+                            }
+                            className={{
+                              wrapper: 'min-w-32',
+                            }}
+                          />
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+            <div className={'col-span-2'}>
+              <TextInput
+                label='Notes'
+                name='notes'
+                value={formik.values.notes || ''}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={formik.touched.notes && Boolean(formik.errors.notes)}
+                errorMessage={formik.errors.notes as string}
+                placeholder='Masukkan catatan'
+              />
+            </div>
+
+            {/* Action buttons */}
+            <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+              <div className='flex flex-row justify-end gap-2 w-full'>
+                <Link href='/purchase'>
+                  <Button color='warning' className='px-4'>
+                    Cancel
+                  </Button>
+                </Link>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  className='px-4'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                >
+                  Submit
+                </Button>
+              </div>
+            </div>
+
+            {purchaseOrderFormErrorMessage && (
+              <div role='alert' className='alert alert-error'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                <span>{purchaseOrderFormErrorMessage}</span>
+              </div>
+            )}
+          </Card>
+        </form>
+      </section>
+    </>
+  );
+};
+
+export default PurchaseOrderAcceptApprovalForm;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 88d5a0b8..a7b314fc 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -14,6 +14,34 @@ type PurchaseRequisitionsStaffApprovalFormSchemaType = {
   }[];
 };
 
+type PurchaseRequisitionsAcceptApprovalFormSchemaType = {
+  notes: string | null;
+  items: {
+    purchase_item?: {
+      value: number;
+      label: string;
+    } | null;
+    purchase_item_id: number;
+    received_date: string;
+    warehouse?: {
+      value: number;
+      label: string;
+    } | null;
+    warehouse_id: number;
+    travel_number: string;
+    travel_document_path: string;
+    vehicle_number: string;
+    expedition_vendor?: {
+      value: number;
+      label: string;
+    } | null;
+    expedition_vendor_id: number;
+    received_qty: number | string;
+    transport_per_item: number | string;
+    transport_total: number | string;
+  }[];
+};
+
 export type PurchaseStaffApprovalItemSchema = {
   purchase_item?: {
     value: number;
@@ -24,6 +52,31 @@ export type PurchaseStaffApprovalItemSchema = {
   total_price: number | string;
 };
 
+export type PurchaseAcceptApprovalItemSchema = {
+  purchase_item?: {
+    value: number;
+    label: string;
+  } | null;
+  purchase_item_id: number;
+  received_date: string;
+  warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  warehouse_id: number;
+  travel_number: string;
+  travel_document_path: string;
+  vehicle_number: string;
+  expedition_vendor?: {
+    value: number;
+    label: string;
+  } | null;
+  expedition_vendor_id: number;
+  received_qty: number | string;
+  transport_per_item: number | string;
+  transport_total: number | string;
+};
+
 const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffApprovalItemSchema> =
   Yup.object({
     purchase_item: Yup.object({
@@ -31,11 +84,16 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       label: Yup.string().required(),
     }).nullable(),
     purchase_item_id: Yup.number()
+      .min(1, 'Purchase item is required!')
       .required('Purchase item is required!')
-      .test('is-valid-purchase-item', 'Purchase item must be selected!', function (value) {
-        if (!this.parent.purchase_item) return true;
-        return Boolean(value && value > 0);
-      })
+      .test(
+        'is-valid-purchase-item',
+        'Purchase item must be selected!',
+        function (value) {
+          if (!this.parent.purchase_item) return true;
+          return Boolean(value && value > 0);
+        }
+      )
       .typeError('Purchase item must be selected!'),
     price: Yup.mixed<string | number>()
       .required('Harga wajib diisi!')
@@ -49,7 +107,8 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
             typeof value === 'string' ? parseFloat(value) : value;
           return !isNaN(numValue) && numValue >= 0;
         }
-      ),
+      )
+      .typeError('Harga harus berupa angka lebih dari atau sama dengan 0!'),
     total_price: Yup.mixed<string | number>()
       .required('Total harga wajib diisi!')
       .test(
@@ -65,6 +124,112 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       ),
   });
 
+const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApprovalItemSchema> =
+  Yup.object({
+    purchase_item: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    purchase_item_id: Yup.number()
+      .min(1, 'Purchase item is required!')
+      .required('Purchase item is required!')
+      .test(
+        'is-valid-purchase-item',
+        'Purchase item must be selected!',
+        function (value) {
+          if (!this.parent.purchase_item) return true;
+          return Boolean(value && value > 0);
+        }
+      )
+      .typeError('Purchase item must be selected!'),
+    received_date: Yup.string()
+      .required('Tanggal penerimaan wajib diisi!')
+      .typeError('Tanggal penerimaan wajib diisi!'),
+    warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    warehouse_id: Yup.number()
+      .min(1, 'Gudang tujuan wajib diisi!')
+      .required('Gudang tujuan wajib diisi!')
+      .test(
+        'is-valid-warehouse',
+        'Gudang tujuan harus dipilih!',
+        function (value) {
+          if (!this.parent.warehouse) return true;
+          return Boolean(value && value > 0);
+        }
+      )
+      .typeError('Gudang tujuan harus dipilih!'),
+    travel_number: Yup.string()
+      .required('Nomor perjalanan wajib diisi!')
+      .typeError('Nomor perjalanan wajib diisi!'),
+    travel_document_path: Yup.string()
+      .required('Dokumen perjalanan wajib diisi!')
+      .typeError('Dokumen perjalanan wajib diisi!'),
+    vehicle_number: Yup.string()
+      .required('Nomor kendaraan wajib diisi!')
+      .typeError('Nomor kendaraan wajib diisi!'),
+    expedition_vendor: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    expedition_vendor_id: Yup.number()
+      .min(1, 'Vendor ekspedisi wajib diisi!')
+      .required('Vendor ekspedisi wajib diisi!')
+      .test(
+        'is-valid-expedition-vendor',
+        'Vendor ekspedisi harus dipilih!',
+        function (value) {
+          if (!this.parent.expedition_vendor) return true;
+          return Boolean(value && value > 0);
+        }
+      )
+      .typeError('Vendor ekspedisi harus dipilih!'),
+    received_qty: Yup.mixed<string | number>()
+      .required('Jumlah diterima wajib diisi!')
+      .test(
+        'is-valid-received-qty',
+        'Jumlah diterima harus berupa angka lebih dari 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue > 0;
+        }
+      )
+      .typeError('Jumlah diterima harus berupa angka!'),
+    transport_per_item: Yup.mixed<string | number>()
+      .required('Biaya transport per item wajib diisi!')
+      .test(
+        'is-valid-transport-per-item',
+        'Biaya transport per item harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      )
+      .typeError('Biaya transport per item harus berupa angka!'),
+    transport_total: Yup.mixed<string | number>()
+      .required('Total biaya transport wajib diisi!')
+      .test(
+        'is-valid-transport-total',
+        'Total biaya transport harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      )
+      .typeError('Total biaya transport harus berupa angka!'),
+  });
+
 export const PurchaseRequisitionsStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsStaffApprovalFormSchemaType> =
   Yup.object({
     notes: Yup.string().nullable().default(null),
@@ -111,3 +276,71 @@ export const PurchaseRequisitionsStaffApprovalFormDefaultValues = (
 export type PurchaseRequisitionsStaffApprovalFormValues = Yup.InferType<
   typeof PurchaseRequisitionsStaffApprovalFormSchema
 >;
+
+export const PurchaseRequisitionsAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsAcceptApprovalFormSchemaType> =
+  Yup.object({
+    notes: Yup.string().nullable().default(null),
+    items: Yup.array()
+      .of(PurchaseAcceptApprovalItemObjectSchema)
+      .min(1, 'Minimal harus ada 1 item pembelian!')
+      .required('Item pembelian wajib diisi!')
+      .typeError('Item pembelian wajib diisi!'),
+  });
+
+export const PurchaseRequisitionsAcceptApprovalFormInitialValues: PurchaseRequisitionsAcceptApprovalFormSchemaType =
+  {
+    notes: '',
+    items: [
+      {
+        purchase_item_id: 0,
+        received_date: '',
+        warehouse_id: 0,
+        travel_number: '',
+        travel_document_path: '',
+        vehicle_number: '',
+        expedition_vendor_id: 0,
+        received_qty: '',
+        transport_per_item: '',
+        transport_total: '',
+      },
+    ],
+  };
+
+export const PurchaseRequisitionsAcceptApprovalFormDefaultValues = (
+  purchase?: Purchase
+): PurchaseRequisitionsAcceptApprovalFormSchemaType => {
+  return {
+    notes: purchase?.notes ?? null,
+    items: purchase?.items
+      ? purchase.items.map((item) => ({
+          purchase_item_id: item.id,
+          received_date: '',
+          warehouse_id: 0,
+          travel_number: '',
+          travel_document_path: '',
+          vehicle_number: '',
+          expedition_vendor_id: 0,
+          received_qty: '',
+          transport_per_item: '',
+          transport_total: '',
+        }))
+      : [
+          {
+            purchase_item_id: 0,
+            received_date: '',
+            warehouse_id: 0,
+            travel_number: '',
+            travel_document_path: '',
+            vehicle_number: '',
+            expedition_vendor_id: 0,
+            received_qty: '',
+            transport_per_item: '',
+            transport_total: '',
+          },
+        ],
+  };
+};
+
+export type PurchaseRequisitionsAcceptApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequisitionsAcceptApprovalFormSchema
+>;

From ecb497430a9f9fcc1973e972cff126be4ab012f0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 11 Nov 2025 15:05:05 +0700
Subject: [PATCH 047/168] feat(FE-208,212): enhance PurchaseOrder forms with
 onCancel functionality and UI improvements

---
 .../pages/purchase/PurchaseTable.tsx          |  57 ++
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 931 +++++++++---------
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  61 +-
 3 files changed, 544 insertions(+), 505 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 74092ebf..9e10438b 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -10,6 +10,7 @@ import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
+import Modal from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, {
   OptionType,
@@ -21,6 +22,8 @@ import TextInput from '@/components/input/TextInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { cn, formatDate, formatCurrency } from '@/lib/helper';
+import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
+import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -108,6 +111,8 @@ const PurchaseTable = () => {
 
   // Modal hooks
   const deleteModal = useModal();
+  const staffApprovalModal = useModal();
+  const acceptApprovalModal = useModal();
 
   // Supplier modal
   const {
@@ -282,6 +287,30 @@ const PurchaseTable = () => {
                 Tambah
               </Button>
 
+              <Button
+                onClick={() => staffApprovalModal.openModal()}
+                variant='outline'
+                color='info'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:account-check-outline' width={24} height={24} />
+                Staff Approval
+              </Button>
+
+              <Button
+                onClick={() => acceptApprovalModal.openModal()}
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+              >
+                <Icon
+                  icon='mdi:package-variant-closed-check'
+                  width={24}
+                  height={24}
+                />
+                Accept Approval
+              </Button>
+
               {selectedRowIds.length > 0 && (
                 <Button
                   variant='outline'
@@ -418,6 +447,34 @@ const PurchaseTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
+
+      {/* Staff Approval Modal */}
+      <Modal
+        ref={staffApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='add'
+          onCancel={staffApprovalModal.closeModal}
+        />
+      </Modal>
+
+      {/* Accept Approval Modal */}
+      <Modal
+        ref={acceptApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='add'
+          onCancel={acceptApprovalModal.closeModal}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 31cdaab0..4e4dc609 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -23,16 +23,16 @@ import {
   Purchase,
 } from '@/types/api/purchase/purchase';
 
-import Card from '@/components/Card';
-
 interface PurchaseOrderAcceptApprovalFormProps {
   type?: 'add' | 'edit';
   initialValues?: Purchase;
+  onCancel?: () => void;
 }
 
 const PurchaseOrderAcceptApprovalForm = ({
   type = 'add',
   initialValues,
+  onCancel,
 }: PurchaseOrderAcceptApprovalFormProps) => {
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
@@ -121,6 +121,7 @@ const PurchaseOrderAcceptApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
     },
     [initialValues?.id, searchParams]
   );
@@ -136,6 +137,7 @@ const PurchaseOrderAcceptApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
       window.location.href = '/purchase';
     },
     []
@@ -330,10 +332,7 @@ const PurchaseOrderAcceptApprovalForm = ({
     formik.setFieldTouched(`items.${idx}.warehouse`, true);
     formik.setFieldValue(`items.${idx}.warehouse`, warehouse);
     formik.setFieldTouched(`items.${idx}.warehouse_id`, true);
-    formik.setFieldValue(
-      `items.${idx}.warehouse_id`,
-      warehouse?.value || 0
-    );
+    formik.setFieldValue(`items.${idx}.warehouse_id`, warehouse?.value || 0);
   };
 
   const expeditionVendorChangeHandler = (
@@ -394,478 +393,462 @@ const PurchaseOrderAcceptApprovalForm = ({
   };
 
   return (
-    <>
-      <section className='w-full'>
-        <form
-          onSubmit={formik.handleSubmit}
-          className='w-full mt-8 flex flex-col gap-6'
-        >
-          <Card
-            title='Konfirmasi Penerimaan Produk'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    <th>
-                      Item
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>Gudang</th>
-                    <th>Produk</th>
-                    <th>Jenis Produk</th>
-                    <th>Jumlah</th>
-                    <th>Satuan</th>
-                    <th>
-                      Tanggal Diterima
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Gudang Tujuan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Nomor Perjalanan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Dokumen Perjalanan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Nomor Kendaraan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Vendor Ekspedisi
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Jumlah Diterima
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Transport/Item
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Total Transport
-                      <span className='text-error'>*</span>
-                    </th>
+    <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
+      <div className='w-full'>
+        <h2 className='text-lg font-semibold mb-4'>
+          Konfirmasi Penerimaan Produk
+        </h2>
+        <div className='overflow-x-auto'>
+          <table className='table'>
+            <thead>
+              <tr>
+                <th>
+                  Item
+                  <span className='text-error'>*</span>
+                </th>
+                <th>Gudang</th>
+                <th>Produk</th>
+                <th>Jenis Produk</th>
+                <th>Jumlah</th>
+                <th>Satuan</th>
+                <th>
+                  Tanggal Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Gudang Tujuan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Nomor Perjalanan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Dokumen Perjalanan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Nomor Kendaraan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Vendor Ekspedisi
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Jumlah Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Transport/Item
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Total Transport
+                  <span className='text-error'>*</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {formik.values.items?.map((item, idx) => {
+                const selectedPurchaseItem = purchaseItems.find(
+                  (p) => p.value === item.purchase_item_id
+                );
+                return (
+                  <tr key={`purchase-item-${idx}`}>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.purchase_item}
+                        key={`purchase-item-${idx}`}
+                        onChange={(val) => purchaseItemChangeHandler(idx, val)}
+                        options={getPurchaseItemOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'purchase_item_id').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'purchase_item_id')
+                            .errorMessage
+                        }
+                        placeholder='Pilih Item...'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.warehouse`}
+                        type='text'
+                        value={selectedPurchaseItem?.warehouse?.name || ''}
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.product_name`}
+                        type='text'
+                        value={selectedPurchaseItem?.product?.name || ''}
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.product_category`}
+                        type='text'
+                        value={
+                          typeof selectedPurchaseItem?.product
+                            ?.product_category === 'string'
+                            ? selectedPurchaseItem.product.product_category
+                            : selectedPurchaseItem?.product?.product_category
+                                ?.name || ''
+                        }
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.quantity`}
+                        type='text'
+                        value={
+                          selectedPurchaseItem?.quantity
+                            ? selectedPurchaseItem.quantity.toLocaleString(
+                                'id-ID'
+                              )
+                            : ''
+                        }
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-24',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.uom`}
+                        type='text'
+                        value={selectedPurchaseItem?.product?.uom?.name || ''}
+                        readOnly={true}
+                        placeholder='Pilih item terlebih dahulu'
+                        className={{
+                          wrapper: 'min-w-24',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.received_date`}
+                        type='date'
+                        value={item.received_date || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.received_date`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'received_date').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'received_date')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-36',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.warehouse}
+                        key={`warehouse-${idx}`}
+                        onChange={(val) => warehouseChangeHandler(idx, val)}
+                        options={getWarehouseOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'warehouse_id').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'warehouse_id').errorMessage
+                        }
+                        placeholder='Pilih Gudang...'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_number`}
+                        type='text'
+                        value={item.travel_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'travel_number').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'travel_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan nomor perjalanan'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_document_path`}
+                        type='text'
+                        value={item.travel_document_path || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_document_path`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'travel_document_path')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'travel_document_path')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan path dokumen'
+                        className={{
+                          wrapper: 'min-w-48',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.vehicle_number`}
+                        type='text'
+                        value={item.vehicle_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.vehicle_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'vehicle_number').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'vehicle_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan nomor kendaraan'
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.expedition_vendor}
+                        key={`expedition-vendor-${idx}`}
+                        onChange={(val) =>
+                          expeditionVendorChangeHandler(idx, val)
+                        }
+                        options={getExpeditionVendorOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                            .errorMessage
+                        }
+                        placeholder='Pilih Vendor...'
+                        className={{
+                          wrapper: 'min-w-40',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.received_qty`}
+                        value={item.received_qty || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'received_qty',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan jumlah diterima'
+                        allowNegative={false}
+                        decimalScale={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          getPurchaseItemError(idx, 'received_qty').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'received_qty').errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.transport_per_item`}
+                        value={item.transport_per_item || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'transport_per_item',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan transport/item'
+                        allowNegative={false}
+                        decimalScale={2}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        inputPrefix={'Rp'}
+                        isError={
+                          getPurchaseItemError(idx, 'transport_per_item')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'transport_per_item')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.transport_total`}
+                        value={item.transport_total || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'transport_total',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan total transport'
+                        allowNegative={false}
+                        decimalScale={2}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        inputPrefix={'Rp'}
+                        isError={
+                          getPurchaseItemError(idx, 'transport_total').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'transport_total')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                      />
+                    </td>
                   </tr>
-                </thead>
-                <tbody>
-                  {formik.values.items?.map((item, idx) => {
-                    const selectedPurchaseItem = purchaseItems.find(
-                      (p) => p.value === item.purchase_item_id
-                    );
-                    return (
-                      <tr key={`purchase-item-${idx}`}>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.purchase_item}
-                            key={`purchase-item-${idx}`}
-                            onChange={(val) =>
-                              purchaseItemChangeHandler(idx, val)
-                            }
-                            options={getPurchaseItemOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Item...'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.warehouse`}
-                            type='text'
-                            value={selectedPurchaseItem?.warehouse?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_name`}
-                            type='text'
-                            value={selectedPurchaseItem?.product?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_category`}
-                            type='text'
-                            value={
-                              typeof selectedPurchaseItem?.product
-                                ?.product_category === 'string'
-                                ? selectedPurchaseItem.product.product_category
-                                : selectedPurchaseItem?.product
-                                    ?.product_category?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.quantity`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.quantity
-                                ? selectedPurchaseItem.quantity.toLocaleString(
-                                    'id-ID'
-                                  )
-                                : ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.uom`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.product?.uom?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.received_date`}
-                            type='date'
-                            value={item.received_date || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.received_date`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'received_date').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'received_date')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-36',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.warehouse}
-                            key={`warehouse-${idx}`}
-                            onChange={(val) => warehouseChangeHandler(idx, val)}
-                            options={getWarehouseOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'warehouse_id').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'warehouse_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Gudang...'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.travel_number`}
-                            type='text'
-                            value={item.travel_number || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.travel_number`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'travel_number').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'travel_number')
-                                .errorMessage
-                            }
-                            placeholder='Masukkan nomor perjalanan'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.travel_document_path`}
-                            type='text'
-                            value={item.travel_document_path || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.travel_document_path`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'travel_document_path')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'travel_document_path')
-                                .errorMessage
-                            }
-                            placeholder='Masukkan path dokumen'
-                            className={{
-                              wrapper: 'min-w-48',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            required
-                            name={`items.${idx}.vehicle_number`}
-                            type='text'
-                            value={item.vehicle_number || ''}
-                            onChange={(e) =>
-                              formik.setFieldValue(
-                                `items.${idx}.vehicle_number`,
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            isError={
-                              getPurchaseItemError(idx, 'vehicle_number')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'vehicle_number')
-                                .errorMessage
-                            }
-                            placeholder='Masukkan nomor kendaraan'
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.expedition_vendor}
-                            key={`expedition-vendor-${idx}`}
-                            onChange={(val) =>
-                              expeditionVendorChangeHandler(idx, val)
-                            }
-                            options={getExpeditionVendorOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'expedition_vendor_id')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'expedition_vendor_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Vendor...'
-                            className={{
-                              wrapper: 'min-w-40',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.received_qty`}
-                            value={item.received_qty || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'received_qty',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan jumlah diterima'
-                            allowNegative={false}
-                            decimalScale={0}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            isError={
-                              getPurchaseItemError(idx, 'received_qty').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'received_qty')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.transport_per_item`}
-                            value={item.transport_per_item || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'transport_per_item',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan transport/item'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={
-                              getPurchaseItemError(idx, 'transport_per_item')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'transport_per_item')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.transport_total`}
-                            value={item.transport_total || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'transport_total',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan total transport'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={
-                              getPurchaseItemError(idx, 'transport_total')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'transport_total')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-32',
-                            }}
-                          />
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-            <div className={'col-span-2'}>
-              <TextInput
-                label='Notes'
-                name='notes'
-                value={formik.values.notes || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={formik.touched.notes && Boolean(formik.errors.notes)}
-                errorMessage={formik.errors.notes as string}
-                placeholder='Masukkan catatan'
-              />
-            </div>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+        <div className={'col-span-2'}>
+          <TextInput
+            label='Notes'
+            name='notes'
+            value={formik.values.notes || ''}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            isError={formik.touched.notes && Boolean(formik.errors.notes)}
+            errorMessage={formik.errors.notes as string}
+            placeholder='Masukkan catatan'
+          />
+        </div>
 
-            {/* Action buttons */}
-            <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
-              <div className='flex flex-row justify-end gap-2 w-full'>
-                <Link href='/purchase'>
-                  <Button color='warning' className='px-4'>
-                    Cancel
-                  </Button>
-                </Link>
+        {/* Action buttons */}
+        <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+          <div className='flex flex-row justify-end gap-2 w-full'>
+            <Button
+              type='button'
+              color='warning'
+              className='px-4'
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
 
-                <Button
-                  type='submit'
-                  color='primary'
-                  className='px-4'
-                  isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
-                >
-                  Submit
-                </Button>
-              </div>
-            </div>
+            <Button
+              type='submit'
+              color='primary'
+              className='px-4'
+              isLoading={formik.isSubmitting}
+              disabled={!formik.isValid || formik.isSubmitting}
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
 
-            {purchaseOrderFormErrorMessage && (
-              <div role='alert' className='alert alert-error'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{purchaseOrderFormErrorMessage}</span>
-              </div>
-            )}
-          </Card>
-        </form>
-      </section>
-    </>
+        {purchaseOrderFormErrorMessage && (
+          <div role='alert' className='alert alert-error'>
+            <Icon
+              icon='material-symbols:error-outline'
+              width={24}
+              height={24}
+            />
+            <span>{purchaseOrderFormErrorMessage}</span>
+          </div>
+        )}
+      </div>
+    </form>
   );
 };
 
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 8f303b56..805147ba 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -23,16 +23,17 @@ import {
   Purchase,
 } from '@/types/api/purchase/purchase';
 
-import Card from '@/components/Card';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
   initialValues?: Purchase;
+  onCancel?: () => void;
 }
 
 const PurchaseOrderStaffApprovalForm = ({
   type = 'add',
   initialValues,
+  onCancel,
 }: PurchaseOrderStaffApprovalFormProps) => {
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
@@ -99,6 +100,7 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
     },
     [initialValues?.id, searchParams]
   );
@@ -117,6 +119,7 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      onCancel?.();
       window.location.href = '/purchase';
     },
     []
@@ -299,18 +302,12 @@ const PurchaseOrderStaffApprovalForm = ({
 
   return (
     <>
-      <section className='w-full'>
-        <form
-          onSubmit={formik.handleSubmit}
-          className='w-full mt-8 flex flex-col gap-6'
-        >
-          <Card
-            title='Konfirmasi Approve Pembelian'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
+      <form
+        onSubmit={formik.handleSubmit}
+        className='w-full flex flex-col gap-6'
+      >
+        <div className='w-full'>
+          <h2 className='text-lg font-semibold mb-4'>Konfirmasi Approve Pembelian</h2>
             <div className='overflow-x-auto'>
               <table className='table'>
                 <thead>
@@ -525,11 +522,14 @@ const PurchaseOrderStaffApprovalForm = ({
             {/* Action buttons */}
             <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
               <div className='flex flex-row justify-end gap-2 w-full'>
-                <Link href='/purchase'>
-                  <Button color='warning' className='px-4'>
-                    Cancel
-                  </Button>
-                </Link>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={onCancel}
+                >
+                  Cancel
+                </Button>
 
                 <Button
                   type='submit'
@@ -543,19 +543,18 @@ const PurchaseOrderStaffApprovalForm = ({
               </div>
             </div>
 
-            {purchaseOrderFormErrorMessage && (
-              <div role='alert' className='alert alert-error'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{purchaseOrderFormErrorMessage}</span>
-              </div>
-            )}
-          </Card>
-        </form>
-      </section>
+          {purchaseOrderFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{purchaseOrderFormErrorMessage}</span>
+            </div>
+          )}
+        </div>
+      </form>
     </>
   );
 };

From fde9c449a60b24670aceb6488b3feef30b284ba7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 08:57:06 +0700
Subject: [PATCH 048/168] feat(FE-Storyless): update UI form UI repo

---
 src/components/Modal.tsx          | 61 +++++++++++++++++++------------
 src/components/input/TextArea.tsx | 61 ++++++++++++++-----------------
 2 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a84c1827..958d88dd 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,6 +1,13 @@
 'use client';
 
-import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
+import {
+  ReactNode,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { cn } from '@/lib/helper';
 
 export const useModal = () => {
@@ -8,31 +15,35 @@ export const useModal = () => {
   const [open, setOpen] = useState(false);
 
   const openModal = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.showModal();
     setOpen(true);
-
-    ref.current?.showModal();
   }, []);
 
   const closeModal = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.close();
     setOpen(false);
-    ref.current?.close();
   }, []);
 
   const toggle = useCallback(() => {
-    if (open) {
-      closeModal();
-    } else {
-      openModal();
-    }
+    open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
-  if (ref.current) {
-    ref.current.addEventListener('close', () => {
-      closeModal();
-    });
-  }
+  // Gunakan useEffect agar event listener tidak didaftarkan berulang kali
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
 
-  return { ref, open, setOpen, openModal, closeModal, toggle } as const;
+    const handleClose = () => setOpen(false);
+    dialog.addEventListener('close', handleClose);
+
+    return () => {
+      dialog.removeEventListener('close', handleClose);
+    };
+  }, []);
+
+  return { ref, open, openModal, closeModal, toggle } as const;
 };
 
 interface ModalProps {
@@ -46,15 +57,19 @@ interface ModalProps {
 }
 
 const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
-  return (
-    <dialog ref={ref} className={cn('modal', className?.modal)}>
-      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (closeOnBackdrop && e.target === ref.current) {
+      ref.current?.close();
+    }
+  };
 
-      {closeOnBackdrop && (
-        <form method='dialog' className='modal-backdrop'>
-          <button>close</button>
-        </form>
-      )}
+  return (
+    <dialog
+      ref={ref}
+      className={cn('modal', className?.modal)}
+      onClick={handleBackdropClick}
+    >
+      <div className={cn('modal-box', className?.modalBox)}>{children}</div>
     </dialog>
   );
 };
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 0e7891f7..10d1a92a 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -8,6 +8,7 @@ export interface TextAreaProps {
   label?: string;
   bottomLabel?: string;
   name: string;
+  rows?: number;
   value?: string | number;
   placeholder?: string;
   className?: {
@@ -23,11 +24,8 @@ export interface TextAreaProps {
   required?: boolean;
   isLoading?: boolean;
   errorMessage?: string;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-  rows?: number;
 }
 
 const TextArea = ({
@@ -35,20 +33,18 @@ const TextArea = ({
   bottomLabel,
   name,
   value,
+  rows = 3,
   placeholder,
   className,
   isError,
   isValid,
   errorMessage,
-  startAdornment,
-  endAdornment,
   disabled = false,
   required = false,
   onChange,
   onBlur,
   readOnly = false,
   isLoading = false,
-  rows = 3,
 }: TextAreaProps) => {
   return (
     <div
@@ -79,35 +75,34 @@ const TextArea = ({
           )}
         </label>
       )}
-      {startAdornment && startAdornment}
 
-      <textarea
-        className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
-          {
-            'border-error': isError,
-            'border-success!': isValid,
-          },
-          className?.inputWrapper
+      <div className='relative size-full'>
+        <textarea
+          className={cn(
+            'textarea h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
+            {
+              'border-error': isError,
+              'border-success!': isValid,
+            },
+            className?.inputWrapper
+          )}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          rows={rows}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          readOnly={readOnly}
+        />
+
+        {isLoading && (
+          <div className='absolute right-3 bottom-3 z-10'>
+            {isLoading && <span className='loading loading-spinner' />}
+          </div>
         )}
-        id={name}
-        name={name}
-        placeholder={placeholder}
-        value={value}
-        rows={rows}
-        onChange={onChange}
-        onBlur={onBlur}
-        disabled={disabled}
-        readOnly={readOnly}
-      />
-
-      {(isLoading || endAdornment) && (
-        <div className='flex flex-row gap-2'>
-          {isLoading && <span className='loading loading-spinner' />}
-
-          {endAdornment && endAdornment}
-        </div>
-      )}
+      </div>
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>

From 45f12cad4ffc0e769c5d77281ba409968182bcf7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 09:33:32 +0700
Subject: [PATCH 049/168] feat(FE-Storyless): update modal functionality to use
 show() method and clean up code

---
 src/components/Modal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 958d88dd..a242b1e4 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -16,7 +16,7 @@ export const useModal = () => {
 
   const openModal = useCallback(() => {
     if (!ref.current) return;
-    ref.current.showModal();
+    ref.current.show();
     setOpen(true);
   }, []);
 
@@ -30,7 +30,6 @@ export const useModal = () => {
     open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
-  // Gunakan useEffect agar event listener tidak didaftarkan berulang kali
   useEffect(() => {
     const dialog = ref.current;
     if (!dialog) return;

From bc53b9073cff154b09ac42c6a334dc0928c057f6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 10:51:57 +0700
Subject: [PATCH 050/168] feat(FE-208,212): simplify PurchaseOrder forms by
 removing unused fields and updating user names

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 83 -------------------
 .../purchase/order/PurchaseOrderDetail.tsx    | 18 ++--
 2 files changed, 9 insertions(+), 92 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 4e4dc609..68111b11 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -5,7 +5,6 @@ import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
-import Link from 'next/link';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
@@ -406,11 +405,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                   Item
                   <span className='text-error'>*</span>
                 </th>
-                <th>Gudang</th>
-                <th>Produk</th>
-                <th>Jenis Produk</th>
-                <th>Jumlah</th>
-                <th>Satuan</th>
                 <th>
                   Tanggal Diterima
                   <span className='text-error'>*</span>
@@ -477,83 +471,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }}
                       />
                     </td>
-                    <td>
-                      <TextInput
-                        name={`items.${idx}.warehouse`}
-                        type='text'
-                        value={selectedPurchaseItem?.warehouse?.name || ''}
-                        readOnly={true}
-                        placeholder='Pilih item terlebih dahulu'
-                        className={{
-                          wrapper: 'min-w-32',
-                        }}
-                        disabled={true}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        name={`items.${idx}.product_name`}
-                        type='text'
-                        value={selectedPurchaseItem?.product?.name || ''}
-                        readOnly={true}
-                        placeholder='Pilih item terlebih dahulu'
-                        className={{
-                          wrapper: 'min-w-48',
-                        }}
-                        disabled={true}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        name={`items.${idx}.product_category`}
-                        type='text'
-                        value={
-                          typeof selectedPurchaseItem?.product
-                            ?.product_category === 'string'
-                            ? selectedPurchaseItem.product.product_category
-                            : selectedPurchaseItem?.product?.product_category
-                                ?.name || ''
-                        }
-                        readOnly={true}
-                        placeholder='Pilih item terlebih dahulu'
-                        className={{
-                          wrapper: 'min-w-32',
-                        }}
-                        disabled={true}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        name={`items.${idx}.quantity`}
-                        type='text'
-                        value={
-                          selectedPurchaseItem?.quantity
-                            ? selectedPurchaseItem.quantity.toLocaleString(
-                                'id-ID'
-                              )
-                            : ''
-                        }
-                        readOnly={true}
-                        placeholder='Pilih item terlebih dahulu'
-                        className={{
-                          wrapper: 'min-w-24',
-                        }}
-                        disabled={true}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        name={`items.${idx}.uom`}
-                        type='text'
-                        value={selectedPurchaseItem?.product?.uom?.name || ''}
-                        readOnly={true}
-                        placeholder='Pilih item terlebih dahulu'
-                        className={{
-                          wrapper: 'min-w-24',
-                        }}
-                        disabled={true}
-                      />
-                    </td>
                     <td>
                       <TextInput
                         required
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index dc9a3355..ab837e03 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -10,7 +10,7 @@ import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 
 interface PurchaseOrderDetailProps {
-  type?: 'detail' | 'edit' | 'approval-purchasing' | 'approval-manager';
+  type?: 'detail' | 'edit';
 }
 
 const dummyGroupedApprovals: BaseGroupedApproval[] = [
@@ -26,8 +26,8 @@ const dummyGroupedApprovals: BaseGroupedApproval[] = [
         action_by: {
           id: 1,
           id_user: 1,
-          email: 'staff@company.com',
-          name: 'Staff Pengajuan',
+          email: 'user@company.com',
+          name: 'User Pengajuan',
         },
         action_at: '2025-01-10T08:00:00Z',
       },
@@ -46,7 +46,7 @@ const dummyGroupedApprovals: BaseGroupedApproval[] = [
           id: 2,
           id_user: 2,
           email: 'purchasing@company.com',
-          name: 'Ahmad Purchasing',
+          name: 'Staff Purchasing',
         },
         action_at: '2025-01-10T10:30:00Z',
       },
@@ -65,7 +65,7 @@ const dummyGroupedApprovals: BaseGroupedApproval[] = [
           id: 3,
           id_user: 3,
           email: 'manager.purchasing@company.com',
-          name: 'Budi Manager Purchasing',
+          name: 'Manager Purchasing',
         },
         action_at: '2025-01-10T14:15:00Z',
       },
@@ -83,8 +83,8 @@ const dummyGroupedApprovals: BaseGroupedApproval[] = [
         action_by: {
           id: 4,
           id_user: 4,
-          email: 'warehouse@company.com',
-          name: 'Candra Warehouse',
+          email: 'user@company.com',
+          name: 'User Pengajuan',
         },
         action_at: '2025-01-12T09:00:00Z',
       },
@@ -102,8 +102,8 @@ const dummyGroupedApprovals: BaseGroupedApproval[] = [
         action_by: {
           id: 5,
           id_user: 5,
-          email: 'finance@company.com',
-          name: 'Diana Finance',
+          email: 'user@company.com',
+          name: 'User Pengajuan',
         },
         action_at: '2025-01-12T16:00:00Z',
       },

From f26e54e8f21486af1bc4f635e616448acde1e21d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 11:16:46 +0700
Subject: [PATCH 051/168] refactor(FE-208,212): update width classes for form
 fields in PurchaseOrder forms for better responsiveness

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 20 +++++++++----------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 12 +++++------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 68111b11..4ef39138 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -467,7 +467,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         placeholder='Pilih Item...'
                         className={{
-                          wrapper: 'min-w-48',
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
                         }}
                       />
                     </td>
@@ -492,7 +492,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                             .errorMessage
                         }
                         className={{
-                          wrapper: 'min-w-36',
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                         }}
                       />
                     </td>
@@ -512,7 +512,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         placeholder='Pilih Gudang...'
                         className={{
-                          wrapper: 'min-w-48',
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
                         }}
                       />
                     </td>
@@ -538,7 +538,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         placeholder='Masukkan nomor perjalanan'
                         className={{
-                          wrapper: 'min-w-32',
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                         }}
                       />
                     </td>
@@ -565,7 +565,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         placeholder='Masukkan path dokumen'
                         className={{
-                          wrapper: 'min-w-48',
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
                         }}
                       />
                     </td>
@@ -591,7 +591,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         placeholder='Masukkan nomor kendaraan'
                         className={{
-                          wrapper: 'min-w-32',
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                         }}
                       />
                     </td>
@@ -615,7 +615,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         placeholder='Pilih Vendor...'
                         className={{
-                          wrapper: 'min-w-40',
+                          wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
                         }}
                       />
                     </td>
@@ -644,7 +644,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                           getPurchaseItemError(idx, 'received_qty').errorMessage
                         }
                         className={{
-                          wrapper: 'min-w-32',
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                         }}
                       />
                     </td>
@@ -676,7 +676,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                             .errorMessage
                         }
                         className={{
-                          wrapper: 'min-w-32',
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                         }}
                       />
                     </td>
@@ -707,7 +707,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                             .errorMessage
                         }
                         className={{
-                          wrapper: 'min-w-32',
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                         }}
                       />
                     </td>
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 805147ba..eb3bae95 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -358,7 +358,7 @@ const PurchaseOrderStaffApprovalForm = ({
                             }
                             placeholder='Pilih Item...'
                             className={{
-                              wrapper: 'min-w-48',
+                              wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -370,7 +370,7 @@ const PurchaseOrderStaffApprovalForm = ({
                             readOnly={true}
                             placeholder='Pilih item terlebih dahulu'
                             className={{
-                              wrapper: 'min-w-32',
+                              wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                             }}
                             disabled={true}
                           />
@@ -383,7 +383,7 @@ const PurchaseOrderStaffApprovalForm = ({
                             readOnly={true}
                             placeholder='Pilih item terlebih dahulu'
                             className={{
-                              wrapper: 'min-w-48',
+                              wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                             disabled={true}
                           />
@@ -402,7 +402,7 @@ const PurchaseOrderStaffApprovalForm = ({
                             readOnly={true}
                             placeholder='Pilih item terlebih dahulu'
                             className={{
-                              wrapper: 'min-w-32',
+                              wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                             }}
                             disabled={true}
                           />
@@ -465,7 +465,7 @@ const PurchaseOrderStaffApprovalForm = ({
                               getPurchaseItemError(idx, 'price').errorMessage
                             }
                             className={{
-                              wrapper: 'min-w-40',
+                              wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
                             }}
                           />
                         </td>
@@ -496,7 +496,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                 .errorMessage
                             }
                             className={{
-                              wrapper: 'min-w-40',
+                              wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
                             }}
                           />
                         </td>

From 603f95a9b2967f1320dd1e8b9cc8f9fc33f83adc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 11:54:00 +0700
Subject: [PATCH 052/168] refactor(FE-208,212): update terminology in
 PurchaseOrder forms for consistency and clarity

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx   |  6 +++---
 .../form/order/PurchaseOrderForm.schema.ts      |  8 ++++----
 .../form/request/PurchaseRequisitionsForm.tsx   | 17 ++++++++++++-----
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 4ef39138..20b7fc46 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -414,11 +414,11 @@ const PurchaseOrderAcceptApprovalForm = ({
                   <span className='text-error'>*</span>
                 </th>
                 <th>
-                  Nomor Perjalanan
+                  No. Surat Jalan
                   <span className='text-error'>*</span>
                 </th>
                 <th>
-                  Dokumen Perjalanan
+                  Dokumen Surat Jalan
                   <span className='text-error'>*</span>
                 </th>
                 <th>
@@ -536,7 +536,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                           getPurchaseItemError(idx, 'travel_number')
                             .errorMessage
                         }
-                        placeholder='Masukkan nomor perjalanan'
+                        placeholder='Masukkan no. surat jalan'
                         className={{
                           wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                         }}
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index a7b314fc..ecdaf785 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -162,11 +162,11 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
       )
       .typeError('Gudang tujuan harus dipilih!'),
     travel_number: Yup.string()
-      .required('Nomor perjalanan wajib diisi!')
-      .typeError('Nomor perjalanan wajib diisi!'),
+      .required('No. Surat jalan wajib diisi!')
+      .typeError('No. Surat jalan wajib diisi!'),
     travel_document_path: Yup.string()
-      .required('Dokumen perjalanan wajib diisi!')
-      .typeError('Dokumen perjalanan wajib diisi!'),
+      .required('Dokumen Surat jalan wajib diisi!')
+      .typeError('Dokumen Surat jalan wajib diisi!'),
     vehicle_number: Yup.string()
       .required('Nomor kendaraan wajib diisi!')
       .typeError('Nomor kendaraan wajib diisi!'),
diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
index d60868c4..0e31e8ac 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
@@ -486,9 +486,9 @@ const PurchaseRequisitionsForm = ({
             Kembali
           </Button>
           <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Purchase Request'}
-            {type === 'edit' && 'Edit Purchase Request'}
-            {type === 'detail' && 'Detail Purchase Request'}
+            {type === 'add' && 'Tambah Purchase Requisitions'}
+            {type === 'edit' && 'Edit Purchase Requisitions'}
+            {type === 'detail' && 'Detail Purchase Requisitions'}
           </h1>
         </header>
         <form
@@ -546,6 +546,7 @@ const PurchaseRequisitionsForm = ({
               {/*/>*/}
 
               <SelectInput
+                required
                 label='Area'
                 placeholder='Pilih Area...'
                 value={formik.values.area}
@@ -560,6 +561,7 @@ const PurchaseRequisitionsForm = ({
               />
 
               <SelectInput
+                required
                 label='Lokasi'
                 placeholder={
                   !formik.values.area_id
@@ -581,6 +583,7 @@ const PurchaseRequisitionsForm = ({
               />
 
               <SelectInput
+                required
                 label='Gudang'
                 placeholder={
                   !formik.values.area_id
@@ -673,7 +676,9 @@ const PurchaseRequisitionsForm = ({
                               selectedPurchaseItems.length &&
                             formik.values.items?.length > 0
                           }
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
                             if (e.target.checked) {
                               setSelectedPurchaseItems(
                                 formik.values.items?.map((_, idx) => idx) ?? []
@@ -710,7 +715,9 @@ const PurchaseRequisitionsForm = ({
                           <CheckboxInput
                             name={`purchase-item-${idx}`}
                             checked={selectedPurchaseItems.includes(idx)}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
                               if (e.target.checked) {
                                 setSelectedPurchaseItems([
                                   ...selectedPurchaseItems,

From c770651a01a9bfdc899d19adf842894ada95684c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 12:58:08 +0700
Subject: [PATCH 053/168] refactor(FE-212): simplify validation for supplier,
 area, location, and warehouse fields in PurchaseRequisitionsForm

---
 .../PurchaseRequisitionsForm.schema.ts        | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
index 784719f4..f158f6ab 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
@@ -93,10 +93,7 @@ export const PurchaseRequisitionsFormSchema: Yup.ObjectSchema<PurchaseRequisitio
     }).nullable(),
     supplier_id: Yup.number()
       .required('Supplier wajib dipilih!')
-      .test('is-valid-supplier', 'Supplier wajib dipilih!', function (value) {
-        if (!this.parent.supplier) return true;
-        return Boolean(value && value > 0);
-      })
+      .min(1, 'Supplier wajib dipilih!')
       .typeError('Supplier wajib dipilih!'),
     area: Yup.object({
       value: Yup.number().min(1).required(),
@@ -104,10 +101,7 @@ export const PurchaseRequisitionsFormSchema: Yup.ObjectSchema<PurchaseRequisitio
     }).nullable(),
     area_id: Yup.number()
       .required('Area wajib dipilih!')
-      .test('is-valid-area', 'Area wajib dipilih!', function (value) {
-        if (!this.parent.area) return true;
-        return Boolean(value && value > 0);
-      })
+      .min(1, 'Area wajib dipilih!')
       .typeError('Area wajib dipilih!'),
     location: Yup.object({
       value: Yup.number().min(1).required(),
@@ -115,10 +109,7 @@ export const PurchaseRequisitionsFormSchema: Yup.ObjectSchema<PurchaseRequisitio
     }).nullable(),
     location_id: Yup.number()
       .required('Lokasi wajib dipilih!')
-      .test('is-valid-location', 'Lokasi wajib dipilih!', function (value) {
-        if (!this.parent.location) return true;
-        return Boolean(value && value > 0);
-      })
+      .min(1, 'Lokasi wajib dipilih!')
       .typeError('Lokasi wajib dipilih!'),
     warehouse: Yup.object({
       value: Yup.number().min(1).required(),
@@ -126,10 +117,7 @@ export const PurchaseRequisitionsFormSchema: Yup.ObjectSchema<PurchaseRequisitio
     }),
     warehouse_id: Yup.number()
       .required('Gudang wajib dipilih!')
-      .test('is-valid-warehouse', 'Gudang wajib dipilih!', function (value) {
-        if (!this.parent.warehouse) return true;
-        return Boolean(value && value > 0);
-      })
+      .min(1, 'Gudang wajib dipilih!')
       .typeError('Gudang wajib dipilih!'),
     notes: Yup.string().nullable().default(null),
     items: Yup.array()

From f264474293c21490bd5507e7495b246840aa79f4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 13:14:27 +0700
Subject: [PATCH 054/168] refactor(FE-208): update modal width classes in
 PurchaseTable for improved responsiveness

---
 src/components/pages/purchase/PurchaseTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 9e10438b..86338de9 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -453,7 +453,7 @@ const PurchaseTable = () => {
         ref={staffApprovalModal.ref}
         closeOnBackdrop
         className={{
-          modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
         }}
       >
         <PurchaseOrderStaffApprovalForm
@@ -467,7 +467,7 @@ const PurchaseTable = () => {
         ref={acceptApprovalModal.ref}
         closeOnBackdrop
         className={{
-          modalBox: 'w-full max-w-6xl max-h-[90vh] overflow-y-auto'
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
         }}
       >
         <PurchaseOrderAcceptApprovalForm

From 4215c6c6ce1a6be6924411300d8e196272dd530e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 16:54:17 +0700
Subject: [PATCH 055/168] feat(FE-208): enhance DateInput component with range
 selection and modal support

---
 package-lock.json                             |  44 +++
 package.json                                  |   1 +
 src/components/Modal.tsx                      |  10 +-
 src/components/input/DateInput.tsx            | 284 +++++++++++++++---
 .../order/PurchaseOrderAcceptApprovalForm.tsx |   5 +-
 5 files changed, 298 insertions(+), 46 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2fa0e38b..19f0f85e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "moment": "^2.30.1",
         "next": "15.5.3",
         "react": "19.1.0",
+        "react-day-picker": "^9.11.1",
         "react-dom": "19.1.0",
         "react-hot-toast": "^2.6.0",
         "react-number-format": "^5.4.4",
@@ -194,6 +195,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
@@ -2868,6 +2875,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -5741,6 +5764,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.1.tgz",
+      "integrity": "sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
diff --git a/package.json b/package.json
index 1d181a40..33cf275a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "moment": "^2.30.1",
     "next": "15.5.3",
     "react": "19.1.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
     "react-number-format": "^5.4.4",
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a242b1e4..5a1dc806 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -10,15 +10,19 @@ import {
 } from 'react';
 import { cn } from '@/lib/helper';
 
-export const useModal = () => {
+export const useModal = (isNestingModal = false) => {
   const ref = useRef<HTMLDialogElement>(null);
   const [open, setOpen] = useState(false);
 
   const openModal = useCallback(() => {
     if (!ref.current) return;
-    ref.current.show();
+    if (isNestingModal) {
+      ref.current.showModal();
+    } else {
+      ref.current.show();
+    }
     setOpen(true);
-  }, []);
+  }, [isNestingModal]);
 
   const closeModal = useCallback(() => {
     if (!ref.current) return;
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index 6e2f1d77..24a4ef8d 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -1,14 +1,23 @@
 'use client';
 
-import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
-
-import { cn } from '@/lib/helper';
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  useEffect,
+  useState,
+} from 'react';
+import { cn, formatDate } from '@/lib/helper';
+import Modal, { useModal } from '../Modal';
+import { DateRange, DayPicker, Matcher } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+import Button from '../Button';
+import { Icon } from '@iconify/react';
 
 export interface DateInputProps {
   label?: string;
   bottomLabel?: string;
   name: string;
-  value?: string;
+  value?: string | { from?: string; to?: string };
   placeholder?: string;
   min?: string;
   max?: string;
@@ -24,9 +33,9 @@ export interface DateInputProps {
   readOnly?: boolean;
   required?: boolean;
   isLoading?: boolean;
+  isRange?: boolean;
+  isNestedModal?: boolean; // New prop to indicate if used inside another modal
   errorMessage?: string;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
@@ -36,22 +45,145 @@ const DateInput = ({
   bottomLabel,
   name,
   value,
-  placeholder,
+  placeholder = 'dd/mm/yyyy',
   min,
   max,
   className,
-  isError,
-  isValid,
-  errorMessage,
-  startAdornment,
-  endAdornment,
+  isError: externalError,
+  isValid: externalValid,
+  errorMessage: externalErrorMessage,
   disabled = false,
   required = false,
   onChange,
   onBlur,
   readOnly = false,
   isLoading = false,
+  isRange = false,
+  isNestedModal = false,
 }: DateInputProps) => {
+  const [internalError, setInternalError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Date | undefined>();
+  const [selectedRange, setSelectedRange] = useState<{
+    from?: Date;
+    to?: Date;
+  }>({});
+  const [displayValue, setDisplayValue] = useState<string>('');
+
+  const minDate = min
+    ? new Date(min.split('/').reverse().join('-'))
+    : undefined;
+  const maxDate = max
+    ? new Date(max.split('/').reverse().join('-'))
+    : undefined;
+
+  const calendarModal = useModal(isNestedModal);
+
+  // --- Sync value props ---
+  useEffect(() => {
+    if (!value) return;
+    if (isRange && typeof value === 'object') {
+      const from = value.from ? new Date(value.from) : undefined;
+      const to = value.to ? new Date(value.to) : undefined;
+      setSelectedRange({ from, to });
+      setDisplayValue(
+        `${from ? formatDate(from, 'DD/MM/YYYY') : ''} ${
+          to ? '- ' + formatDate(to, 'DD/MM/YYYY') : ''
+        }`
+      );
+    } else if (typeof value === 'string') {
+      const iso = value.includes('/')
+        ? value.split('/').reverse().join('-')
+        : value;
+      const date = new Date(iso);
+      setSelected(date);
+      setDisplayValue(formatDate(iso, 'DD/MM/YYYY'));
+    }
+  }, [value, isRange]);
+
+  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (!disabled && !readOnly) calendarModal.openModal();
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    onBlur?.(e);
+  };
+
+  const handleSelectSingle = (selectedDate?: Date) => {
+    if (!selectedDate) return;
+    if (minDate && selectedDate < minDate) {
+      setInternalError(`Tanggal tidak boleh sebelum ${min}`);
+      return;
+    }
+    if (maxDate && selectedDate > maxDate) {
+      setInternalError(`Tanggal tidak boleh setelah ${max}`);
+      return;
+    }
+    setInternalError(null);
+    setSelected(selectedDate);
+    const formattedDisplay = formatDate(selectedDate, 'DD/MM/YYYY');
+    const formattedISO = formatDate(selectedDate, 'YYYY-MM-DD');
+    setDisplayValue(formattedDisplay);
+
+    const syntheticEvent = {
+      target: { name, value: formattedISO },
+    } as unknown as React.ChangeEvent<HTMLInputElement>;
+    onChange?.(syntheticEvent);
+    calendarModal.closeModal();
+  };
+
+  const handleSelectRange = (range?: { from?: Date; to?: Date }) => {
+    if (!range) return;
+    setSelectedRange(range);
+
+    const fromStr = range.from ? formatDate(range.from, 'DD/MM/YYYY') : '';
+    const toStr = range.to ? formatDate(range.to, 'DD/MM/YYYY') : '';
+    setDisplayValue(`${fromStr}${toStr ? ' - ' + toStr : ''}`);
+
+    // Jika kedua tanggal sudah terpilih
+    if (range.from && range.to) {
+      if (minDate && range.from < minDate) {
+        setInternalError(`Tanggal mulai tidak boleh sebelum ${min}`);
+        return;
+      }
+      if (maxDate && range.to > maxDate) {
+        setInternalError(`Tanggal akhir tidak boleh setelah ${max}`);
+        return;
+      }
+
+      setInternalError(null);
+      const syntheticEvent = {
+        target: {
+          name,
+          value: {
+            from: formatDate(range.from, 'YYYY-MM-DD'),
+            to: formatDate(range.to, 'YYYY-MM-DD'),
+          },
+        },
+      } as unknown as React.ChangeEvent<HTMLInputElement>;
+      onChange?.(syntheticEvent);
+    }
+  };
+
+  const handleResetDate = () => {
+    setSelected(undefined);
+    setSelectedRange({});
+    setDisplayValue('');
+    const syntheticEvent = {
+      target: { name, value: isRange ? { from: '', to: '' } : '' },
+    } as unknown as React.ChangeEvent<HTMLInputElement>;
+    onChange?.(syntheticEvent);
+    calendarModal.closeModal();
+  };
+
+  const handleSaveDate = () => {
+    if (internalError) return;
+    calendarModal.closeModal();
+  };
+
+  const finalIsError = externalError || !!internalError;
+  const finalErrorMessage = internalError || externalErrorMessage;
+
   return (
     <div
       className={cn(
@@ -64,65 +196,135 @@ const DateInput = ({
           htmlFor={name}
           className={cn(
             'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
+            { 'text-error': finalIsError },
             className?.label
           )}
         >
           {label}
           {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'>*</span>
-              </span>
-            </>
+            <span className='text-error' title='required'>
+              *
+            </span>
           )}
         </label>
       )}
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
           {
-            'border-error': isError,
-            'border-success!': isValid,
+            'border-error': finalIsError,
+            'border-success': externalValid && !finalIsError,
           },
           className?.inputWrapper
         )}
       >
-        {startAdornment && startAdornment}
-
         <input
-          type='date'
+          type='text'
           id={name}
           name={name}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-          min={min}
-          max={max}
+          placeholder={isRange ? 'dd/mm/yyyy - dd/mm/yyyy' : placeholder}
+          value={displayValue}
+          onBlur={handleBlur}
+          onClick={handleClick}
           disabled={disabled}
-          className={cn('grow bg-transparent cursor-pointer', className?.input)}
-          readOnly={readOnly}
+          readOnly // ✅ tidak bisa diketik manual
+          className={cn(
+            'grow bg-transparent cursor-pointer focus:outline-none',
+            className?.input
+          )}
         />
 
-        {(isLoading || endAdornment) && (
+        {isLoading && (
           <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-            {endAdornment && endAdornment}
+            <span className='loading loading-spinner' />
           </div>
         )}
+        <Icon
+          icon='uil:calendar'
+          width={24}
+          height={24}
+          className='cursor-pointer text-dark'
+          onClick={(e) =>
+            handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
+          }
+        />
       </div>
 
-      {!isError && bottomLabel && (
+      {!finalIsError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      {finalIsError && finalErrorMessage && (
+        <p className='w-full text-sm text-error'>{finalErrorMessage}</p>
       )}
+
+      <Modal
+        ref={calendarModal.ref}
+        className={{
+          modal: 'rounded',
+          modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
+        }}
+        closeOnBackdrop
+      >
+        {isRange ? (
+          <DayPicker
+            required={required}
+            mode='range'
+            captionLayout='dropdown-years'
+            navLayout='around'
+            reverseYears
+            defaultMonth={selectedRange.from ?? new Date()}
+            startMonth={minDate ?? new Date(1999, 1)}
+            endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
+            selected={selectedRange as DateRange}
+            onSelect={handleSelectRange}
+            footer={<div className='text-center mt-3'>{displayValue}</div>}
+            disabled={
+              [
+                minDate ? { before: minDate } : undefined,
+                maxDate ? { after: maxDate } : undefined,
+              ].filter(Boolean) as Matcher[]
+            }
+          />
+        ) : (
+          <DayPicker
+            required={required}
+            mode='single'
+            captionLayout='dropdown-years'
+            navLayout='around'
+            reverseYears
+            defaultMonth={selected ?? new Date()}
+            startMonth={minDate ?? new Date(1999, 1)}
+            endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
+            selected={selected}
+            onSelect={handleSelectSingle}
+            disabled={
+              [
+                minDate ? { before: minDate } : undefined,
+                maxDate ? { after: maxDate } : undefined,
+              ].filter(Boolean) as Matcher[]
+            }
+          />
+        )}
+        <div className='mt-auto flex flex-col gap-2'>
+          {isRange && (
+            <small className='text-secondary'>
+              Tekan dua kali untuk memilih tanggal awal
+            </small>
+          )}
+
+          <div className='flex h-full justify-end items-end gap-2'>
+            <Button type='button' color='warning' onClick={handleResetDate}>
+              Reset
+            </Button>
+            {isRange && (
+              <Button type='button' onClick={handleSaveDate}>
+                Simpan
+              </Button>
+            )}
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 20b7fc46..dcdf603d 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -21,6 +21,7 @@ import {
   CreateAcceptApprovalRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
+import DateInput from '@/components/input/DateInput';
 
 interface PurchaseOrderAcceptApprovalFormProps {
   type?: 'add' | 'edit';
@@ -472,10 +473,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                       />
                     </td>
                     <td>
-                      <TextInput
+                      <DateInput
                         required
+                        isNestedModal={true}
                         name={`items.${idx}.received_date`}
-                        type='date'
                         value={item.received_date || ''}
                         onChange={(e) =>
                           formik.setFieldValue(

From 5d88af1a31cdfe7f1a5c9567c4a6cc275081aeba Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 20:27:06 +0700
Subject: [PATCH 056/168] feat(FE-208,212): implement table-based UI for
 Purchase Order acceptance and staff approval forms

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 756 ++++++++++--------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 561 +++++++------
 2 files changed, 761 insertions(+), 556 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index dcdf603d..a1bf68b3 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -9,6 +9,8 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import * as TanStack from '@tanstack/react-table';
 
 import {
   PurchaseRequisitionsAcceptApprovalFormDefaultValues,
@@ -21,6 +23,7 @@ import {
   CreateAcceptApprovalRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
+import { PurchaseRequisitionsAcceptApprovalFormValues } from './PurchaseOrderForm.schema';
 import DateInput from '@/components/input/DateInput';
 
 interface PurchaseOrderAcceptApprovalFormProps {
@@ -67,7 +70,7 @@ const PurchaseOrderAcceptApprovalForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const getPurchaseItemError = (
+  const isRepeaterInputError = (
     idx: number,
     field:
       | 'purchase_item_id'
@@ -392,332 +395,445 @@ const PurchaseOrderAcceptApprovalForm = ({
     }
   };
 
+  // ===== TABLE COLUMNS DEFINITION =====
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: 'purchase_item',
+        header: () => (
+          <div>
+            Item
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.purchase_item}
+              key={`purchase-item-${idx}`}
+              onChange={(val) => purchaseItemChangeHandler(idx, val)}
+              options={getPurchaseItemOptions()}
+              isError={
+                isRepeaterInputError(idx, 'purchase_item_id').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'purchase_item_id')
+                  .errorMessage
+              }
+              placeholder='Pilih Item...'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'warehouse_id',
+        header: () => (
+          <div>
+            Gudang Tujuan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.warehouse}
+              key={`warehouse-${idx}`}
+              onChange={(val) => warehouseChangeHandler(idx, val)}
+              options={getWarehouseOptions()}
+              isError={
+                isRepeaterInputError(idx, 'warehouse_id').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'warehouse_id').errorMessage
+              }
+              placeholder='Pilih Gudang...'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'travel_number',
+        header: () => (
+          <div>
+            No. Surat Jalan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <TextInput
+              required
+              name={`items.${idx}.travel_number`}
+              type='text'
+              value={item?.travel_number || ''}
+              onChange={(e) =>
+                formik.setFieldValue(
+                  `items.${idx}.travel_number`,
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                isRepeaterInputError(idx, 'travel_number').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'travel_number')
+                  .errorMessage
+              }
+              placeholder='Masukkan no. surat jalan'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'travel_document_path',
+        header: () => (
+          <div>
+            Dokumen Surat Jalan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <TextInput
+              required
+              name={`items.${idx}.travel_document_path`}
+              type='text'
+              value={item?.travel_document_path || ''}
+              onChange={(e) =>
+                formik.setFieldValue(
+                  `items.${idx}.travel_document_path`,
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                isRepeaterInputError(idx, 'travel_document_path')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'travel_document_path')
+                  .errorMessage
+              }
+              placeholder='Masukkan path dokumen'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'vehicle_number',
+        header: () => (
+          <div>
+            Nomor Kendaraan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <TextInput
+              required
+              name={`items.${idx}.vehicle_number`}
+              type='text'
+              value={item?.vehicle_number || ''}
+              onChange={(e) =>
+                formik.setFieldValue(
+                  `items.${idx}.vehicle_number`,
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                isRepeaterInputError(idx, 'vehicle_number').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'vehicle_number')
+                  .errorMessage
+              }
+              placeholder='Masukkan nomor kendaraan'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'expedition_vendor_id',
+        header: () => (
+          <div>
+            Vendor Ekspedisi
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.expedition_vendor}
+              key={`expedition-vendor-${idx}`}
+              onChange={(val) =>
+                expeditionVendorChangeHandler(idx, val)
+              }
+              options={getExpeditionVendorOptions()}
+              isError={
+                isRepeaterInputError(idx, 'expedition_vendor_id')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'expedition_vendor_id')
+                  .errorMessage
+              }
+              placeholder='Pilih Vendor...'
+              className={{
+                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'received_qty',
+        header: () => (
+          <div>
+            Jumlah Diterima
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.received_qty`}
+              value={item?.received_qty || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'received_qty',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan jumlah diterima'
+              allowNegative={false}
+              decimalScale={0}
+              thousandSeparator=','
+              decimalSeparator='.'
+              isError={
+                isRepeaterInputError(idx, 'received_qty').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'received_qty').errorMessage
+              }
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'transport_per_item',
+        header: () => (
+          <div>
+            Transport/Item
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.transport_per_item`}
+              value={item?.transport_per_item || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'transport_per_item',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan transport/item'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={
+                isRepeaterInputError(idx, 'transport_per_item')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'transport_per_item')
+                  .errorMessage
+              }
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'transport_total',
+        header: () => (
+          <div>
+            Total Transport
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.transport_total`}
+              value={item?.transport_total || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'transport_total',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan total transport'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={
+                isRepeaterInputError(idx, 'transport_total').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'transport_total')
+                  .errorMessage
+              }
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+            />
+          );
+        },
+      },
+    ],
+    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, warehouseChangeHandler, expeditionVendorChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, getWarehouseOptions, getExpeditionVendorOptions]
+  );
+
+  const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
+
   return (
     <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
       <div className='w-full'>
         <h2 className='text-lg font-semibold mb-4'>
           Konfirmasi Penerimaan Produk
         </h2>
-        <div className='overflow-x-auto'>
-          <table className='table'>
-            <thead>
-              <tr>
-                <th>
-                  Item
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Tanggal Diterima
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Gudang Tujuan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  No. Surat Jalan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Dokumen Surat Jalan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Nomor Kendaraan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Vendor Ekspedisi
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Jumlah Diterima
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Transport/Item
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Total Transport
-                  <span className='text-error'>*</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {formik.values.items?.map((item, idx) => {
-                const selectedPurchaseItem = purchaseItems.find(
-                  (p) => p.value === item.purchase_item_id
-                );
-                return (
-                  <tr key={`purchase-item-${idx}`}>
-                    <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.purchase_item}
-                        key={`purchase-item-${idx}`}
-                        onChange={(val) => purchaseItemChangeHandler(idx, val)}
-                        options={getPurchaseItemOptions()}
-                        isError={
-                          getPurchaseItemError(idx, 'purchase_item_id').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'purchase_item_id')
-                            .errorMessage
-                        }
-                        placeholder='Pilih Item...'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <DateInput
-                        required
-                        isNestedModal={true}
-                        name={`items.${idx}.received_date`}
-                        value={item.received_date || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.received_date`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'received_date').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'received_date')
-                            .errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.warehouse}
-                        key={`warehouse-${idx}`}
-                        onChange={(val) => warehouseChangeHandler(idx, val)}
-                        options={getWarehouseOptions()}
-                        isError={
-                          getPurchaseItemError(idx, 'warehouse_id').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'warehouse_id').errorMessage
-                        }
-                        placeholder='Pilih Gudang...'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        required
-                        name={`items.${idx}.travel_number`}
-                        type='text'
-                        value={item.travel_number || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.travel_number`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'travel_number').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'travel_number')
-                            .errorMessage
-                        }
-                        placeholder='Masukkan no. surat jalan'
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        required
-                        name={`items.${idx}.travel_document_path`}
-                        type='text'
-                        value={item.travel_document_path || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.travel_document_path`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'travel_document_path')
-                            .isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'travel_document_path')
-                            .errorMessage
-                        }
-                        placeholder='Masukkan path dokumen'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <TextInput
-                        required
-                        name={`items.${idx}.vehicle_number`}
-                        type='text'
-                        value={item.vehicle_number || ''}
-                        onChange={(e) =>
-                          formik.setFieldValue(
-                            `items.${idx}.vehicle_number`,
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        isError={
-                          getPurchaseItemError(idx, 'vehicle_number').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'vehicle_number')
-                            .errorMessage
-                        }
-                        placeholder='Masukkan nomor kendaraan'
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.expedition_vendor}
-                        key={`expedition-vendor-${idx}`}
-                        onChange={(val) =>
-                          expeditionVendorChangeHandler(idx, val)
-                        }
-                        options={getExpeditionVendorOptions()}
-                        isError={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
-                            .isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
-                            .errorMessage
-                        }
-                        placeholder='Pilih Vendor...'
-                        className={{
-                          wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`items.${idx}.received_qty`}
-                        value={item.received_qty || ''}
-                        onChange={(e) =>
-                          handlePurchaseItemChange(
-                            idx,
-                            'received_qty',
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan jumlah diterima'
-                        allowNegative={false}
-                        decimalScale={0}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        isError={
-                          getPurchaseItemError(idx, 'received_qty').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'received_qty').errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`items.${idx}.transport_per_item`}
-                        value={item.transport_per_item || ''}
-                        onChange={(e) =>
-                          handlePurchaseItemChange(
-                            idx,
-                            'transport_per_item',
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan transport/item'
-                        allowNegative={false}
-                        decimalScale={2}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        inputPrefix={'Rp'}
-                        isError={
-                          getPurchaseItemError(idx, 'transport_per_item')
-                            .isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'transport_per_item')
-                            .errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                    <td>
-                      <NumberInput
-                        required
-                        name={`items.${idx}.transport_total`}
-                        value={item.transport_total || ''}
-                        onChange={(e) =>
-                          handlePurchaseItemChange(
-                            idx,
-                            'transport_total',
-                            e.target.value
-                          )
-                        }
-                        onBlur={formik.handleBlur}
-                        placeholder='Masukkan total transport'
-                        allowNegative={false}
-                        decimalScale={2}
-                        thousandSeparator=','
-                        decimalSeparator='.'
-                        inputPrefix={'Rp'}
-                        isError={
-                          getPurchaseItemError(idx, 'transport_total').isError
-                        }
-                        errorMessage={
-                          getPurchaseItemError(idx, 'transport_total')
-                            .errorMessage
-                        }
-                        className={{
-                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                        }}
-                      />
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+
+        {/* Date Inputs Section - Above Table */}
+        <div className='mb-4 space-y-3'>
+          <h3 className='text-md font-semibold'>Tanggal Penerimaan Produk</h3>
+          {formik.values.items?.map((item, idx) => (
+            <div
+              key={`received-date-${idx}`}
+              className='flex items-center gap-4'
+            >
+              <div className='flex-1 max-w-sm'>
+                <label className='block text-sm font-medium mb-1'>
+                  Item:{' '}
+                  {purchaseItems.find((p) => p.value === item.purchase_item_id)
+                    ?.label || `Item ${idx + 1}`}
+                </label>
+                <DateInput
+                  required
+                  name={`items.${idx}.received_date`}
+                  value={item.received_date || ''}
+                  onChange={(e) =>
+                    formik.setFieldValue(
+                      `items.${idx}.received_date`,
+                      e.target.value
+                    )
+                  }
+                  onBlur={formik.handleBlur}
+                  isError={isRepeaterInputError(idx, 'received_date').isError}
+                  errorMessage={
+                    isRepeaterInputError(idx, 'received_date').errorMessage
+                  }
+                  placeholder='Pilih tanggal diterima'
+                  className={{
+                    wrapper: 'w-full max-w-xs',
+                  }}
+                />
+              </div>
+            </div>
+          ))}
         </div>
+
+        <Table
+          data={tableData}
+          columns={columns}
+          className={{
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'table table-auto w-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-2 py-3 text-xs font-semibold text-gray-500',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-2 py-2',
+            paginationClassName: 'hidden',
+          }}
+          emptyContent={
+            <div className='w-full p-5 text-center'>
+              <span className='text-lg opacity-50'>
+                Belum ada data item...
+              </span>
+            </div>
+          }
+        />
         <div className={'col-span-2'}>
           <TextInput
             label='Notes'
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index eb3bae95..a02c951a 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -5,11 +5,12 @@ import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
-import Link from 'next/link';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Table from '@/components/Table';
+import * as TanStack from '@tanstack/react-table';
 
 import {
   PurchaseRequisitionsStaffApprovalFormDefaultValues,
@@ -22,7 +23,7 @@ import {
   CreateStaffApprovalRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
-
+import { PurchaseRequisitionsStaffApprovalFormValues } from './PurchaseOrderForm.schema';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -56,7 +57,7 @@ const PurchaseOrderStaffApprovalForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const getPurchaseItemError = (
+  const isRepeaterInputError = (
     idx: number,
     field: 'purchase_item_id' | 'price' | 'total_price'
   ): { isError: boolean; errorMessage: string } => {
@@ -300,6 +301,268 @@ const PurchaseOrderStaffApprovalForm = ({
     }
   };
 
+  // ===== TABLE COLUMNS DEFINITION =====
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: 'purchase_item',
+        header: () => (
+          <div>
+            Item
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <SelectInput
+              required
+              isClearable={true}
+              value={item?.purchase_item}
+              key={`purchase-item-${idx}`}
+              onChange={(val) =>
+                purchaseItemChangeHandler(idx, val)
+              }
+              options={getPurchaseItemOptions()}
+              isError={
+                isRepeaterInputError(idx, 'purchase_item_id')
+                  .isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'purchase_item_id')
+                  .errorMessage
+              }
+              placeholder='Pilih Item...'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'warehouse',
+        header: 'Gudang',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.warehouse`}
+              type='text'
+              value={selectedItem?.warehouse?.name || ''}
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'product_name',
+        header: 'Produk',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.product_name`}
+              type='text'
+              value={selectedItem?.product?.name || ''}
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'product_category',
+        header: 'Jenis Produk',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.product_category`}
+              type='text'
+              value={
+                typeof selectedItem?.product?.product_category === 'string'
+                  ? selectedItem.product.product_category
+                  : selectedItem?.product?.product_category?.name || ''
+              }
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'quantity',
+        header: 'Jumlah',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.quantity`}
+              type='text'
+              value={
+                selectedItem?.quantity
+                  ? selectedItem.quantity.toLocaleString('id-ID')
+                  : ''
+              }
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-24',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'uom',
+        header: 'Satuan',
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const selectedItem = purchaseItems.find(
+            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
+          );
+
+          return (
+            <TextInput
+              name={`items.${idx}.uom`}
+              type='text'
+              value={selectedItem?.product?.uom?.name || ''}
+              readOnly={true}
+              placeholder='Pilih item terlebih dahulu'
+              className={{
+                wrapper: 'min-w-24',
+              }}
+              disabled={true}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'price',
+        header: () => (
+          <div>
+            Harga Satuan
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.price`}
+              value={item?.price || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'price',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan harga satuan'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={isRepeaterInputError(idx, 'price').isError}
+              errorMessage={
+                isRepeaterInputError(idx, 'price').errorMessage
+              }
+              className={{
+                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+              }}
+            />
+          );
+        },
+      },
+      {
+        accessorKey: 'total_price',
+        header: () => (
+          <div>
+            Total (Rp.)
+            <span className='text-error'>*</span>
+          </div>
+        ),
+        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
+          const idx = props.row.index;
+          const item = formik.values.items?.[idx];
+
+          return (
+            <NumberInput
+              required
+              name={`items.${idx}.total_price`}
+              value={item?.total_price || ''}
+              onChange={(e) =>
+                handlePurchaseItemChange(
+                  idx,
+                  'total_price',
+                  e.target.value
+                )
+              }
+              onBlur={formik.handleBlur}
+              placeholder='Masukkan total harga'
+              allowNegative={false}
+              decimalScale={2}
+              thousandSeparator=','
+              decimalSeparator='.'
+              inputPrefix={'Rp'}
+              isError={
+                isRepeaterInputError(idx, 'total_price').isError
+              }
+              errorMessage={
+                isRepeaterInputError(idx, 'total_price')
+                  .errorMessage
+              }
+              className={{
+                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+              }}
+            />
+          );
+        },
+      },
+    ],
+    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, purchaseItems]
+  );
+
+  const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
+
   return (
     <>
       <form
@@ -307,241 +570,67 @@ const PurchaseOrderStaffApprovalForm = ({
         className='w-full flex flex-col gap-6'
       >
         <div className='w-full'>
-          <h2 className='text-lg font-semibold mb-4'>Konfirmasi Approve Pembelian</h2>
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    <th>
-                      Item
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>Gudang</th>
-                    <th>Produk</th>
-                    <th>Jenis Produk</th>
-                    <th>Jumlah</th>
-                    <th>Satuan</th>
-                    <th>
-                      Harga Satuan
-                      <span className='text-error'>*</span>
-                    </th>
-                    <th>
-                      Total (Rp.)
-                      <span className='text-error'>*</span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {formik.values.items?.map((item, idx) => {
-                    const selectedPurchaseItem = purchaseItems.find(
-                      (p) => p.value === item.purchase_item_id
-                    );
-                    return (
-                      <tr key={`purchase-item-${idx}`}>
-                        <td>
-                          <SelectInput
-                            required
-                            isClearable={true}
-                            value={item.purchase_item}
-                            key={`purchase-item-${idx}`}
-                            onChange={(val) =>
-                              purchaseItemChangeHandler(idx, val)
-                            }
-                            options={getPurchaseItemOptions()}
-                            isError={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'purchase_item_id')
-                                .errorMessage
-                            }
-                            placeholder='Pilih Item...'
-                            className={{
-                              wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.warehouse`}
-                            type='text'
-                            value={selectedPurchaseItem?.warehouse?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_name`}
-                            type='text'
-                            value={selectedPurchaseItem?.product?.name || ''}
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.product_category`}
-                            type='text'
-                            value={
-                              typeof selectedPurchaseItem?.product
-                                ?.product_category === 'string'
-                                ? selectedPurchaseItem.product.product_category
-                                : selectedPurchaseItem?.product
-                                    ?.product_category?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.quantity`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.quantity
-                                ? selectedPurchaseItem.quantity.toLocaleString(
-                                    'id-ID'
-                                  )
-                                : ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <TextInput
-                            name={`items.${idx}.uom`}
-                            type='text'
-                            value={
-                              selectedPurchaseItem?.product?.uom?.name || ''
-                            }
-                            readOnly={true}
-                            placeholder='Pilih item terlebih dahulu'
-                            className={{
-                              wrapper: 'min-w-24',
-                            }}
-                            disabled={true}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.price`}
-                            value={item.price || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'price',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan harga satuan'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={getPurchaseItemError(idx, 'price').isError}
-                            errorMessage={
-                              getPurchaseItemError(idx, 'price').errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                            }}
-                          />
-                        </td>
-                        <td>
-                          <NumberInput
-                            required
-                            name={`items.${idx}.total_price`}
-                            value={item.total_price || ''}
-                            onChange={(e) =>
-                              handlePurchaseItemChange(
-                                idx,
-                                'total_price',
-                                e.target.value
-                              )
-                            }
-                            onBlur={formik.handleBlur}
-                            placeholder='Masukkan total harga'
-                            allowNegative={false}
-                            decimalScale={2}
-                            thousandSeparator=','
-                            decimalSeparator='.'
-                            inputPrefix={'Rp'}
-                            isError={
-                              getPurchaseItemError(idx, 'total_price').isError
-                            }
-                            errorMessage={
-                              getPurchaseItemError(idx, 'total_price')
-                                .errorMessage
-                            }
-                            className={{
-                              wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                            }}
-                          />
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-            <div className={'col-span-2'}>
-              <TextInput
-                label='Notes'
-                name='notes'
-                value={formik.values.notes || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={formik.touched.notes && Boolean(formik.errors.notes)}
-                errorMessage={formik.errors.notes as string}
-                placeholder='Masukkan catatan'
-              />
-            </div>
-
-            {/* Action buttons */}
-            <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
-              <div className='flex flex-row justify-end gap-2 w-full'>
-                <Button
-                  type='button'
-                  color='warning'
-                  className='px-4'
-                  onClick={onCancel}
-                >
-                  Cancel
-                </Button>
-
-                <Button
-                  type='submit'
-                  color='primary'
-                  className='px-4'
-                  isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
-                >
-                  Submit
-                </Button>
+          <h2 className='text-lg font-semibold mb-4'>
+            Konfirmasi Approve Pembelian
+          </h2>
+          <Table
+            data={tableData}
+            columns={columns}
+            className={{
+              tableWrapperClassName: 'overflow-x-auto min-h-full!',
+              tableClassName: 'table table-auto w-full!',
+              headerRowClassName: 'border-b border-b-gray-200',
+              headerColumnClassName:
+                'px-2 py-3 text-xs font-semibold text-gray-500',
+              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyColumnClassName:
+                'px-2 py-2',
+              paginationClassName: 'hidden',
+            }}
+            emptyContent={
+              <div className='w-full p-5 text-center'>
+                <span className='text-lg opacity-50'>
+                  Belum ada data item...
+                </span>
               </div>
+            }
+          />
+          <div className={'col-span-2'}>
+            <TextInput
+              label='Notes'
+              name='notes'
+              value={formik.values.notes || ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.notes && Boolean(formik.errors.notes)}
+              errorMessage={formik.errors.notes as string}
+              placeholder='Masukkan catatan'
+            />
+          </div>
+
+          {/* Action buttons */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap mt-5'>
+            <div className='flex flex-row justify-end gap-2 w-full'>
+              <Button
+                type='button'
+                color='warning'
+                className='px-4'
+                onClick={onCancel}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type='submit'
+                color='primary'
+                className='px-4'
+                isLoading={formik.isSubmitting}
+                disabled={!formik.isValid || formik.isSubmitting}
+              >
+                Submit
+              </Button>
             </div>
+          </div>
 
           {purchaseOrderFormErrorMessage && (
             <div role='alert' className='alert alert-error'>

From cd8ab8844bd1b8beca2e0f8f36947ef59c70eeda Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 20:43:34 +0700
Subject: [PATCH 057/168] feat(FE-208): enhance Purchase Order acceptance form
 with Card component and improved layout for received date inputs

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 194 ++++++++++--------
 1 file changed, 108 insertions(+), 86 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index a1bf68b3..48e0b2f3 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -10,6 +10,7 @@ import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
+import Card from '@/components/Card';
 import * as TanStack from '@tanstack/react-table';
 
 import {
@@ -406,7 +407,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -418,12 +424,9 @@ const PurchaseOrderAcceptApprovalForm = ({
               key={`purchase-item-${idx}`}
               onChange={(val) => purchaseItemChangeHandler(idx, val)}
               options={getPurchaseItemOptions()}
-              isError={
-                isRepeaterInputError(idx, 'purchase_item_id').isError
-              }
+              isError={isRepeaterInputError(idx, 'purchase_item_id').isError}
               errorMessage={
-                isRepeaterInputError(idx, 'purchase_item_id')
-                  .errorMessage
+                isRepeaterInputError(idx, 'purchase_item_id').errorMessage
               }
               placeholder='Pilih Item...'
               className={{
@@ -441,7 +444,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -453,9 +461,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               key={`warehouse-${idx}`}
               onChange={(val) => warehouseChangeHandler(idx, val)}
               options={getWarehouseOptions()}
-              isError={
-                isRepeaterInputError(idx, 'warehouse_id').isError
-              }
+              isError={isRepeaterInputError(idx, 'warehouse_id').isError}
               errorMessage={
                 isRepeaterInputError(idx, 'warehouse_id').errorMessage
               }
@@ -475,7 +481,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -492,12 +503,9 @@ const PurchaseOrderAcceptApprovalForm = ({
                 )
               }
               onBlur={formik.handleBlur}
-              isError={
-                isRepeaterInputError(idx, 'travel_number').isError
-              }
+              isError={isRepeaterInputError(idx, 'travel_number').isError}
               errorMessage={
-                isRepeaterInputError(idx, 'travel_number')
-                  .errorMessage
+                isRepeaterInputError(idx, 'travel_number').errorMessage
               }
               placeholder='Masukkan no. surat jalan'
               className={{
@@ -515,7 +523,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -533,12 +546,10 @@ const PurchaseOrderAcceptApprovalForm = ({
               }
               onBlur={formik.handleBlur}
               isError={
-                isRepeaterInputError(idx, 'travel_document_path')
-                  .isError
+                isRepeaterInputError(idx, 'travel_document_path').isError
               }
               errorMessage={
-                isRepeaterInputError(idx, 'travel_document_path')
-                  .errorMessage
+                isRepeaterInputError(idx, 'travel_document_path').errorMessage
               }
               placeholder='Masukkan path dokumen'
               className={{
@@ -556,7 +567,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -573,12 +589,9 @@ const PurchaseOrderAcceptApprovalForm = ({
                 )
               }
               onBlur={formik.handleBlur}
-              isError={
-                isRepeaterInputError(idx, 'vehicle_number').isError
-              }
+              isError={isRepeaterInputError(idx, 'vehicle_number').isError}
               errorMessage={
-                isRepeaterInputError(idx, 'vehicle_number')
-                  .errorMessage
+                isRepeaterInputError(idx, 'vehicle_number').errorMessage
               }
               placeholder='Masukkan nomor kendaraan'
               className={{
@@ -596,7 +609,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -606,17 +624,13 @@ const PurchaseOrderAcceptApprovalForm = ({
               isClearable={true}
               value={item?.expedition_vendor}
               key={`expedition-vendor-${idx}`}
-              onChange={(val) =>
-                expeditionVendorChangeHandler(idx, val)
-              }
+              onChange={(val) => expeditionVendorChangeHandler(idx, val)}
               options={getExpeditionVendorOptions()}
               isError={
-                isRepeaterInputError(idx, 'expedition_vendor_id')
-                  .isError
+                isRepeaterInputError(idx, 'expedition_vendor_id').isError
               }
               errorMessage={
-                isRepeaterInputError(idx, 'expedition_vendor_id')
-                  .errorMessage
+                isRepeaterInputError(idx, 'expedition_vendor_id').errorMessage
               }
               placeholder='Pilih Vendor...'
               className={{
@@ -634,7 +648,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -644,11 +663,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               name={`items.${idx}.received_qty`}
               value={item?.received_qty || ''}
               onChange={(e) =>
-                handlePurchaseItemChange(
-                  idx,
-                  'received_qty',
-                  e.target.value
-                )
+                handlePurchaseItemChange(idx, 'received_qty', e.target.value)
               }
               onBlur={formik.handleBlur}
               placeholder='Masukkan jumlah diterima'
@@ -656,9 +671,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               decimalScale={0}
               thousandSeparator=','
               decimalSeparator='.'
-              isError={
-                isRepeaterInputError(idx, 'received_qty').isError
-              }
+              isError={isRepeaterInputError(idx, 'received_qty').isError}
               errorMessage={
                 isRepeaterInputError(idx, 'received_qty').errorMessage
               }
@@ -677,7 +690,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -700,13 +718,9 @@ const PurchaseOrderAcceptApprovalForm = ({
               thousandSeparator=','
               decimalSeparator='.'
               inputPrefix={'Rp'}
-              isError={
-                isRepeaterInputError(idx, 'transport_per_item')
-                  .isError
-              }
+              isError={isRepeaterInputError(idx, 'transport_per_item').isError}
               errorMessage={
-                isRepeaterInputError(idx, 'transport_per_item')
-                  .errorMessage
+                isRepeaterInputError(idx, 'transport_per_item').errorMessage
               }
               className={{
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
@@ -723,7 +737,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             <span className='text-error'>*</span>
           </div>
         ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsAcceptApprovalFormValues['items'][0], unknown>) => {
+        cell: (
+          props: TanStack.CellContext<
+            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
+            unknown
+          >
+        ) => {
           const idx = props.row.index;
           const item = formik.values.items?.[idx];
 
@@ -733,11 +752,7 @@ const PurchaseOrderAcceptApprovalForm = ({
               name={`items.${idx}.transport_total`}
               value={item?.transport_total || ''}
               onChange={(e) =>
-                handlePurchaseItemChange(
-                  idx,
-                  'transport_total',
-                  e.target.value
-                )
+                handlePurchaseItemChange(idx, 'transport_total', e.target.value)
               }
               onBlur={formik.handleBlur}
               placeholder='Masukkan total transport'
@@ -746,12 +761,9 @@ const PurchaseOrderAcceptApprovalForm = ({
               thousandSeparator=','
               decimalSeparator='.'
               inputPrefix={'Rp'}
-              isError={
-                isRepeaterInputError(idx, 'transport_total').isError
-              }
+              isError={isRepeaterInputError(idx, 'transport_total').isError}
               errorMessage={
-                isRepeaterInputError(idx, 'transport_total')
-                  .errorMessage
+                isRepeaterInputError(idx, 'transport_total').errorMessage
               }
               className={{
                 wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
@@ -761,10 +773,23 @@ const PurchaseOrderAcceptApprovalForm = ({
         },
       },
     ],
-    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, warehouseChangeHandler, expeditionVendorChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, getWarehouseOptions, getExpeditionVendorOptions]
+    [
+      formik.values.items,
+      formik.handleBlur,
+      purchaseItemChangeHandler,
+      warehouseChangeHandler,
+      expeditionVendorChangeHandler,
+      handlePurchaseItemChange,
+      getPurchaseItemOptions,
+      getWarehouseOptions,
+      getExpeditionVendorOptions,
+    ]
   );
 
-  const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
+  const tableData = useMemo(
+    () => formik.values.items || [],
+    [formik.values.items]
+  );
 
   return (
     <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
@@ -774,21 +799,20 @@ const PurchaseOrderAcceptApprovalForm = ({
         </h2>
 
         {/* Date Inputs Section - Above Table */}
-        <div className='mb-4 space-y-3'>
-          <h3 className='text-md font-semibold'>Tanggal Penerimaan Produk</h3>
-          {formik.values.items?.map((item, idx) => (
-            <div
-              key={`received-date-${idx}`}
-              className='flex items-center gap-4'
-            >
-              <div className='flex-1 max-w-sm'>
-                <label className='block text-sm font-medium mb-1'>
-                  Item:{' '}
-                  {purchaseItems.find((p) => p.value === item.purchase_item_id)
-                    ?.label || `Item ${idx + 1}`}
-                </label>
+        <Card
+          variant='bordered'
+          className={{
+            wrapper: 'mb-6 w-full!',
+            body: 'p-4!',
+            title: 'text-lg! font-semibold!',
+          }}
+        >
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
+            {formik.values.items?.map((item, idx) => (
+              <div key={`received-date-${idx}`} className='space-y-2'>
                 <DateInput
                   required
+                  label={'Tanggal Penerimaan Produk'}
                   name={`items.${idx}.received_date`}
                   value={item.received_date || ''}
                   onChange={(e) =>
@@ -804,13 +828,14 @@ const PurchaseOrderAcceptApprovalForm = ({
                   }
                   placeholder='Pilih tanggal diterima'
                   className={{
-                    wrapper: 'w-full max-w-xs',
+                    wrapper: 'w-full',
                   }}
+                  isNestedModal={true}
                 />
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        </Card>
 
         <Table
           data={tableData}
@@ -822,15 +847,12 @@ const PurchaseOrderAcceptApprovalForm = ({
             headerColumnClassName:
               'px-2 py-3 text-xs font-semibold text-gray-500',
             bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
-              'px-2 py-2',
+            bodyColumnClassName: 'px-2 py-2',
             paginationClassName: 'hidden',
           }}
           emptyContent={
             <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>
-                Belum ada data item...
-              </span>
+              <span className='text-lg opacity-50'>Belum ada data item...</span>
             </div>
           }
         />

From 4a974048a7a37f5ca14480c2086360ad2b230f31 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 12 Nov 2025 21:52:02 +0700
Subject: [PATCH 058/168] feat(FE-208): refactor Purchase Order forms to use
 table layout for improved readability and maintainability

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 778 +++++++-----------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 485 +++++------
 2 files changed, 516 insertions(+), 747 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 48e0b2f3..bf8af4a4 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -9,9 +9,6 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import Table from '@/components/Table';
-import Card from '@/components/Card';
-import * as TanStack from '@tanstack/react-table';
 
 import {
   PurchaseRequisitionsAcceptApprovalFormDefaultValues,
@@ -24,7 +21,6 @@ import {
   CreateAcceptApprovalRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
-import { PurchaseRequisitionsAcceptApprovalFormValues } from './PurchaseOrderForm.schema';
 import DateInput from '@/components/input/DateInput';
 
 interface PurchaseOrderAcceptApprovalFormProps {
@@ -71,7 +67,7 @@ const PurchaseOrderAcceptApprovalForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const isRepeaterInputError = (
+  const getPurchaseItemError = (
     idx: number,
     field:
       | 'purchase_item_id'
@@ -396,466 +392,330 @@ const PurchaseOrderAcceptApprovalForm = ({
     }
   };
 
-  // ===== TABLE COLUMNS DEFINITION =====
-  const columns = useMemo(
-    () => [
-      {
-        accessorKey: 'purchase_item',
-        header: () => (
-          <div>
-            Item
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <SelectInput
-              required
-              isClearable={true}
-              value={item?.purchase_item}
-              key={`purchase-item-${idx}`}
-              onChange={(val) => purchaseItemChangeHandler(idx, val)}
-              options={getPurchaseItemOptions()}
-              isError={isRepeaterInputError(idx, 'purchase_item_id').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'purchase_item_id').errorMessage
-              }
-              placeholder='Pilih Item...'
-              className={{
-                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'warehouse_id',
-        header: () => (
-          <div>
-            Gudang Tujuan
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <SelectInput
-              required
-              isClearable={true}
-              value={item?.warehouse}
-              key={`warehouse-${idx}`}
-              onChange={(val) => warehouseChangeHandler(idx, val)}
-              options={getWarehouseOptions()}
-              isError={isRepeaterInputError(idx, 'warehouse_id').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'warehouse_id').errorMessage
-              }
-              placeholder='Pilih Gudang...'
-              className={{
-                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'travel_number',
-        header: () => (
-          <div>
-            No. Surat Jalan
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <TextInput
-              required
-              name={`items.${idx}.travel_number`}
-              type='text'
-              value={item?.travel_number || ''}
-              onChange={(e) =>
-                formik.setFieldValue(
-                  `items.${idx}.travel_number`,
-                  e.target.value
-                )
-              }
-              onBlur={formik.handleBlur}
-              isError={isRepeaterInputError(idx, 'travel_number').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'travel_number').errorMessage
-              }
-              placeholder='Masukkan no. surat jalan'
-              className={{
-                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'travel_document_path',
-        header: () => (
-          <div>
-            Dokumen Surat Jalan
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <TextInput
-              required
-              name={`items.${idx}.travel_document_path`}
-              type='text'
-              value={item?.travel_document_path || ''}
-              onChange={(e) =>
-                formik.setFieldValue(
-                  `items.${idx}.travel_document_path`,
-                  e.target.value
-                )
-              }
-              onBlur={formik.handleBlur}
-              isError={
-                isRepeaterInputError(idx, 'travel_document_path').isError
-              }
-              errorMessage={
-                isRepeaterInputError(idx, 'travel_document_path').errorMessage
-              }
-              placeholder='Masukkan path dokumen'
-              className={{
-                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'vehicle_number',
-        header: () => (
-          <div>
-            Nomor Kendaraan
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <TextInput
-              required
-              name={`items.${idx}.vehicle_number`}
-              type='text'
-              value={item?.vehicle_number || ''}
-              onChange={(e) =>
-                formik.setFieldValue(
-                  `items.${idx}.vehicle_number`,
-                  e.target.value
-                )
-              }
-              onBlur={formik.handleBlur}
-              isError={isRepeaterInputError(idx, 'vehicle_number').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'vehicle_number').errorMessage
-              }
-              placeholder='Masukkan nomor kendaraan'
-              className={{
-                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'expedition_vendor_id',
-        header: () => (
-          <div>
-            Vendor Ekspedisi
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <SelectInput
-              required
-              isClearable={true}
-              value={item?.expedition_vendor}
-              key={`expedition-vendor-${idx}`}
-              onChange={(val) => expeditionVendorChangeHandler(idx, val)}
-              options={getExpeditionVendorOptions()}
-              isError={
-                isRepeaterInputError(idx, 'expedition_vendor_id').isError
-              }
-              errorMessage={
-                isRepeaterInputError(idx, 'expedition_vendor_id').errorMessage
-              }
-              placeholder='Pilih Vendor...'
-              className={{
-                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'received_qty',
-        header: () => (
-          <div>
-            Jumlah Diterima
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <NumberInput
-              required
-              name={`items.${idx}.received_qty`}
-              value={item?.received_qty || ''}
-              onChange={(e) =>
-                handlePurchaseItemChange(idx, 'received_qty', e.target.value)
-              }
-              onBlur={formik.handleBlur}
-              placeholder='Masukkan jumlah diterima'
-              allowNegative={false}
-              decimalScale={0}
-              thousandSeparator=','
-              decimalSeparator='.'
-              isError={isRepeaterInputError(idx, 'received_qty').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'received_qty').errorMessage
-              }
-              className={{
-                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'transport_per_item',
-        header: () => (
-          <div>
-            Transport/Item
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <NumberInput
-              required
-              name={`items.${idx}.transport_per_item`}
-              value={item?.transport_per_item || ''}
-              onChange={(e) =>
-                handlePurchaseItemChange(
-                  idx,
-                  'transport_per_item',
-                  e.target.value
-                )
-              }
-              onBlur={formik.handleBlur}
-              placeholder='Masukkan transport/item'
-              allowNegative={false}
-              decimalScale={2}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix={'Rp'}
-              isError={isRepeaterInputError(idx, 'transport_per_item').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'transport_per_item').errorMessage
-              }
-              className={{
-                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'transport_total',
-        header: () => (
-          <div>
-            Total Transport
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (
-          props: TanStack.CellContext<
-            PurchaseRequisitionsAcceptApprovalFormValues['items'][0],
-            unknown
-          >
-        ) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <NumberInput
-              required
-              name={`items.${idx}.transport_total`}
-              value={item?.transport_total || ''}
-              onChange={(e) =>
-                handlePurchaseItemChange(idx, 'transport_total', e.target.value)
-              }
-              onBlur={formik.handleBlur}
-              placeholder='Masukkan total transport'
-              allowNegative={false}
-              decimalScale={2}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix={'Rp'}
-              isError={isRepeaterInputError(idx, 'transport_total').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'transport_total').errorMessage
-              }
-              className={{
-                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-              }}
-            />
-          );
-        },
-      },
-    ],
-    [
-      formik.values.items,
-      formik.handleBlur,
-      purchaseItemChangeHandler,
-      warehouseChangeHandler,
-      expeditionVendorChangeHandler,
-      handlePurchaseItemChange,
-      getPurchaseItemOptions,
-      getWarehouseOptions,
-      getExpeditionVendorOptions,
-    ]
-  );
-
-  const tableData = useMemo(
-    () => formik.values.items || [],
-    [formik.values.items]
-  );
-
   return (
     <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
       <div className='w-full'>
         <h2 className='text-lg font-semibold mb-4'>
           Konfirmasi Penerimaan Produk
         </h2>
-
-        {/* Date Inputs Section - Above Table */}
-        <Card
-          variant='bordered'
-          className={{
-            wrapper: 'mb-6 w-full!',
-            body: 'p-4!',
-            title: 'text-lg! font-semibold!',
-          }}
-        >
-          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
-            {formik.values.items?.map((item, idx) => (
-              <div key={`received-date-${idx}`} className='space-y-2'>
-                <DateInput
-                  required
-                  label={'Tanggal Penerimaan Produk'}
-                  name={`items.${idx}.received_date`}
-                  value={item.received_date || ''}
-                  onChange={(e) =>
-                    formik.setFieldValue(
-                      `items.${idx}.received_date`,
-                      e.target.value
-                    )
-                  }
-                  onBlur={formik.handleBlur}
-                  isError={isRepeaterInputError(idx, 'received_date').isError}
-                  errorMessage={
-                    isRepeaterInputError(idx, 'received_date').errorMessage
-                  }
-                  placeholder='Pilih tanggal diterima'
-                  className={{
-                    wrapper: 'w-full',
-                  }}
-                  isNestedModal={true}
-                />
-              </div>
-            ))}
-          </div>
-        </Card>
-
-        <Table
-          data={tableData}
-          columns={columns}
-          className={{
-            tableWrapperClassName: 'overflow-x-auto min-h-full!',
-            tableClassName: 'table table-auto w-full!',
-            headerRowClassName: 'border-b border-b-gray-200',
-            headerColumnClassName:
-              'px-2 py-3 text-xs font-semibold text-gray-500',
-            bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName: 'px-2 py-2',
-            paginationClassName: 'hidden',
-          }}
-          emptyContent={
-            <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>Belum ada data item...</span>
-            </div>
-          }
-        />
+        <div className='overflow-x-auto'>
+          <table className='table'>
+            <thead>
+              <tr>
+                <th>
+                  Item
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Tanggal Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Gudang Tujuan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  No. Surat Jalan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Dokumen Surat Jalan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Nomor Kendaraan
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Vendor Ekspedisi
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Jumlah Diterima
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Transport/Item
+                  <span className='text-error'>*</span>
+                </th>
+                <th>
+                  Total Transport
+                  <span className='text-error'>*</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {formik.values.items?.map((item, idx) => {
+                purchaseItems.find((p) => p.value === item.purchase_item_id);
+                return (
+                  <tr key={`purchase-item-${idx}`}>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.purchase_item}
+                        key={`purchase-item-${idx}`}
+                        onChange={(val) => purchaseItemChangeHandler(idx, val)}
+                        options={getPurchaseItemOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'purchase_item_id').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'purchase_item_id')
+                            .errorMessage
+                        }
+                        placeholder='Pilih Item...'
+                        className={{
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <DateInput
+                        required
+                        isNestedModal={true}
+                        name={`items.${idx}.received_date`}
+                        value={item.received_date || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.received_date`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'received_date').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'received_date')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.warehouse}
+                        key={`warehouse-${idx}`}
+                        onChange={(val) => warehouseChangeHandler(idx, val)}
+                        options={getWarehouseOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'warehouse_id').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'warehouse_id').errorMessage
+                        }
+                        placeholder='Pilih Gudang...'
+                        className={{
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_number`}
+                        type='text'
+                        value={item.travel_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'travel_number').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'travel_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan no. surat jalan'
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.travel_document_path`}
+                        type='text'
+                        value={item.travel_document_path || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.travel_document_path`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'travel_document_path')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'travel_document_path')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan path dokumen'
+                        className={{
+                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        required
+                        name={`items.${idx}.vehicle_number`}
+                        type='text'
+                        value={item.vehicle_number || ''}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            `items.${idx}.vehicle_number`,
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        isError={
+                          getPurchaseItemError(idx, 'vehicle_number').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'vehicle_number')
+                            .errorMessage
+                        }
+                        placeholder='Masukkan nomor kendaraan'
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <SelectInput
+                        required
+                        isClearable={true}
+                        value={item.expedition_vendor}
+                        key={`expedition-vendor-${idx}`}
+                        onChange={(val) =>
+                          expeditionVendorChangeHandler(idx, val)
+                        }
+                        options={getExpeditionVendorOptions()}
+                        isError={
+                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                            .errorMessage
+                        }
+                        placeholder='Pilih Vendor...'
+                        className={{
+                          wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.received_qty`}
+                        value={item.received_qty || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'received_qty',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan jumlah diterima'
+                        allowNegative={false}
+                        decimalScale={0}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        isError={
+                          getPurchaseItemError(idx, 'received_qty').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'received_qty').errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.transport_per_item`}
+                        value={item.transport_per_item || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'transport_per_item',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan transport/item'
+                        allowNegative={false}
+                        decimalScale={2}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        inputPrefix={'Rp'}
+                        isError={
+                          getPurchaseItemError(idx, 'transport_per_item')
+                            .isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'transport_per_item')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                    <td>
+                      <NumberInput
+                        required
+                        name={`items.${idx}.transport_total`}
+                        value={item.transport_total || ''}
+                        onChange={(e) =>
+                          handlePurchaseItemChange(
+                            idx,
+                            'transport_total',
+                            e.target.value
+                          )
+                        }
+                        onBlur={formik.handleBlur}
+                        placeholder='Masukkan total transport'
+                        allowNegative={false}
+                        decimalScale={2}
+                        thousandSeparator=','
+                        decimalSeparator='.'
+                        inputPrefix={'Rp'}
+                        isError={
+                          getPurchaseItemError(idx, 'transport_total').isError
+                        }
+                        errorMessage={
+                          getPurchaseItemError(idx, 'transport_total')
+                            .errorMessage
+                        }
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                      />
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
         <div className={'col-span-2'}>
           <TextInput
             label='Notes'
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index a02c951a..d4095cf8 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -9,8 +9,6 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import Table from '@/components/Table';
-import * as TanStack from '@tanstack/react-table';
 
 import {
   PurchaseRequisitionsStaffApprovalFormDefaultValues,
@@ -23,7 +21,6 @@ import {
   CreateStaffApprovalRequisitionsPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
-import { PurchaseRequisitionsStaffApprovalFormValues } from './PurchaseOrderForm.schema';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -57,7 +54,7 @@ const PurchaseOrderStaffApprovalForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const isRepeaterInputError = (
+  const getPurchaseItemError = (
     idx: number,
     field: 'purchase_item_id' | 'price' | 'total_price'
   ): { isError: boolean; errorMessage: string } => {
@@ -301,268 +298,6 @@ const PurchaseOrderStaffApprovalForm = ({
     }
   };
 
-  // ===== TABLE COLUMNS DEFINITION =====
-  const columns = useMemo(
-    () => [
-      {
-        accessorKey: 'purchase_item',
-        header: () => (
-          <div>
-            Item
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <SelectInput
-              required
-              isClearable={true}
-              value={item?.purchase_item}
-              key={`purchase-item-${idx}`}
-              onChange={(val) =>
-                purchaseItemChangeHandler(idx, val)
-              }
-              options={getPurchaseItemOptions()}
-              isError={
-                isRepeaterInputError(idx, 'purchase_item_id')
-                  .isError
-              }
-              errorMessage={
-                isRepeaterInputError(idx, 'purchase_item_id')
-                  .errorMessage
-              }
-              placeholder='Pilih Item...'
-              className={{
-                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'warehouse',
-        header: 'Gudang',
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const selectedItem = purchaseItems.find(
-            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
-          );
-
-          return (
-            <TextInput
-              name={`items.${idx}.warehouse`}
-              type='text'
-              value={selectedItem?.warehouse?.name || ''}
-              readOnly={true}
-              placeholder='Pilih item terlebih dahulu'
-              className={{
-                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-              }}
-              disabled={true}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'product_name',
-        header: 'Produk',
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const selectedItem = purchaseItems.find(
-            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
-          );
-
-          return (
-            <TextInput
-              name={`items.${idx}.product_name`}
-              type='text'
-              value={selectedItem?.product?.name || ''}
-              readOnly={true}
-              placeholder='Pilih item terlebih dahulu'
-              className={{
-                wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-              }}
-              disabled={true}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'product_category',
-        header: 'Jenis Produk',
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const selectedItem = purchaseItems.find(
-            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
-          );
-
-          return (
-            <TextInput
-              name={`items.${idx}.product_category`}
-              type='text'
-              value={
-                typeof selectedItem?.product?.product_category === 'string'
-                  ? selectedItem.product.product_category
-                  : selectedItem?.product?.product_category?.name || ''
-              }
-              readOnly={true}
-              placeholder='Pilih item terlebih dahulu'
-              className={{
-                wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-              }}
-              disabled={true}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'quantity',
-        header: 'Jumlah',
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const selectedItem = purchaseItems.find(
-            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
-          );
-
-          return (
-            <TextInput
-              name={`items.${idx}.quantity`}
-              type='text'
-              value={
-                selectedItem?.quantity
-                  ? selectedItem.quantity.toLocaleString('id-ID')
-                  : ''
-              }
-              readOnly={true}
-              placeholder='Pilih item terlebih dahulu'
-              className={{
-                wrapper: 'min-w-24',
-              }}
-              disabled={true}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'uom',
-        header: 'Satuan',
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const selectedItem = purchaseItems.find(
-            (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
-          );
-
-          return (
-            <TextInput
-              name={`items.${idx}.uom`}
-              type='text'
-              value={selectedItem?.product?.uom?.name || ''}
-              readOnly={true}
-              placeholder='Pilih item terlebih dahulu'
-              className={{
-                wrapper: 'min-w-24',
-              }}
-              disabled={true}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'price',
-        header: () => (
-          <div>
-            Harga Satuan
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <NumberInput
-              required
-              name={`items.${idx}.price`}
-              value={item?.price || ''}
-              onChange={(e) =>
-                handlePurchaseItemChange(
-                  idx,
-                  'price',
-                  e.target.value
-                )
-              }
-              onBlur={formik.handleBlur}
-              placeholder='Masukkan harga satuan'
-              allowNegative={false}
-              decimalScale={2}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix={'Rp'}
-              isError={isRepeaterInputError(idx, 'price').isError}
-              errorMessage={
-                isRepeaterInputError(idx, 'price').errorMessage
-              }
-              className={{
-                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-              }}
-            />
-          );
-        },
-      },
-      {
-        accessorKey: 'total_price',
-        header: () => (
-          <div>
-            Total (Rp.)
-            <span className='text-error'>*</span>
-          </div>
-        ),
-        cell: (props: TanStack.CellContext<PurchaseRequisitionsStaffApprovalFormValues['items'][0], unknown>) => {
-          const idx = props.row.index;
-          const item = formik.values.items?.[idx];
-
-          return (
-            <NumberInput
-              required
-              name={`items.${idx}.total_price`}
-              value={item?.total_price || ''}
-              onChange={(e) =>
-                handlePurchaseItemChange(
-                  idx,
-                  'total_price',
-                  e.target.value
-                )
-              }
-              onBlur={formik.handleBlur}
-              placeholder='Masukkan total harga'
-              allowNegative={false}
-              decimalScale={2}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix={'Rp'}
-              isError={
-                isRepeaterInputError(idx, 'total_price').isError
-              }
-              errorMessage={
-                isRepeaterInputError(idx, 'total_price')
-                  .errorMessage
-              }
-              className={{
-                wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-              }}
-            />
-          );
-        },
-      },
-    ],
-    [formik.values.items, formik.handleBlur, purchaseItemChangeHandler, handlePurchaseItemChange, getPurchaseItemOptions, purchaseItems]
-  );
-
-  const tableData = useMemo(() => formik.values.items || [], [formik.values.items]);
-
   return (
     <>
       <form
@@ -573,28 +308,202 @@ const PurchaseOrderStaffApprovalForm = ({
           <h2 className='text-lg font-semibold mb-4'>
             Konfirmasi Approve Pembelian
           </h2>
-          <Table
-            data={tableData}
-            columns={columns}
-            className={{
-              tableWrapperClassName: 'overflow-x-auto min-h-full!',
-              tableClassName: 'table table-auto w-full!',
-              headerRowClassName: 'border-b border-b-gray-200',
-              headerColumnClassName:
-                'px-2 py-3 text-xs font-semibold text-gray-500',
-              bodyRowClassName: 'border-b border-b-gray-200',
-              bodyColumnClassName:
-                'px-2 py-2',
-              paginationClassName: 'hidden',
-            }}
-            emptyContent={
-              <div className='w-full p-5 text-center'>
-                <span className='text-lg opacity-50'>
-                  Belum ada data item...
-                </span>
-              </div>
-            }
-          />
+          <div className='overflow-x-auto'>
+            <table className='table'>
+              <thead>
+                <tr>
+                  <th>
+                    Item
+                    <span className='text-error'>*</span>
+                  </th>
+                  <th>Gudang</th>
+                  <th>Produk</th>
+                  <th>Jenis Produk</th>
+                  <th>Jumlah</th>
+                  <th>Satuan</th>
+                  <th>
+                    Harga Satuan
+                    <span className='text-error'>*</span>
+                  </th>
+                  <th>
+                    Total (Rp.)
+                    <span className='text-error'>*</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {formik.values.items?.map((item, idx) => {
+                  const selectedPurchaseItem = purchaseItems.find(
+                    (p) => p.value === item.purchase_item_id
+                  );
+                  return (
+                    <tr key={`purchase-item-${idx}`}>
+                      <td>
+                        <SelectInput
+                          required
+                          isClearable={true}
+                          value={item.purchase_item}
+                          key={`purchase-item-${idx}`}
+                          onChange={(val) =>
+                            purchaseItemChangeHandler(idx, val)
+                          }
+                          options={getPurchaseItemOptions()}
+                          isError={
+                            getPurchaseItemError(idx, 'purchase_item_id')
+                              .isError
+                          }
+                          errorMessage={
+                            getPurchaseItemError(idx, 'purchase_item_id')
+                              .errorMessage
+                          }
+                          placeholder='Pilih Item...'
+                          className={{
+                            wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`items.${idx}.warehouse`}
+                          type='text'
+                          value={selectedPurchaseItem?.warehouse?.name || ''}
+                          readOnly={true}
+                          placeholder='Pilih item terlebih dahulu'
+                          className={{
+                            wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                          }}
+                          disabled={true}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`items.${idx}.product_name`}
+                          type='text'
+                          value={selectedPurchaseItem?.product?.name || ''}
+                          readOnly={true}
+                          placeholder='Pilih item terlebih dahulu'
+                          className={{
+                            wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
+                          disabled={true}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`items.${idx}.product_category`}
+                          type='text'
+                          value={
+                            typeof selectedPurchaseItem?.product
+                              ?.product_category === 'string'
+                              ? selectedPurchaseItem.product.product_category
+                              : selectedPurchaseItem?.product?.product_category
+                                  ?.name || ''
+                          }
+                          readOnly={true}
+                          placeholder='Pilih item terlebih dahulu'
+                          className={{
+                            wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                          }}
+                          disabled={true}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`items.${idx}.quantity`}
+                          type='text'
+                          value={
+                            selectedPurchaseItem?.quantity
+                              ? selectedPurchaseItem.quantity.toLocaleString(
+                                  'id-ID'
+                                )
+                              : ''
+                          }
+                          readOnly={true}
+                          placeholder='Pilih item terlebih dahulu'
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                          disabled={true}
+                        />
+                      </td>
+                      <td>
+                        <TextInput
+                          name={`items.${idx}.uom`}
+                          type='text'
+                          value={selectedPurchaseItem?.product?.uom?.name || ''}
+                          readOnly={true}
+                          placeholder='Pilih item terlebih dahulu'
+                          className={{
+                            wrapper: 'min-w-24',
+                          }}
+                          disabled={true}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`items.${idx}.price`}
+                          value={item.price || ''}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'price',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          placeholder='Masukkan harga satuan'
+                          allowNegative={false}
+                          decimalScale={2}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix={'Rp'}
+                          isError={getPurchaseItemError(idx, 'price').isError}
+                          errorMessage={
+                            getPurchaseItemError(idx, 'price').errorMessage
+                          }
+                          className={{
+                            wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+                          }}
+                        />
+                      </td>
+                      <td>
+                        <NumberInput
+                          required
+                          name={`items.${idx}.total_price`}
+                          value={item.total_price || ''}
+                          onChange={(e) =>
+                            handlePurchaseItemChange(
+                              idx,
+                              'total_price',
+                              e.target.value
+                            )
+                          }
+                          onBlur={formik.handleBlur}
+                          placeholder='Masukkan total harga'
+                          allowNegative={false}
+                          decimalScale={2}
+                          thousandSeparator=','
+                          decimalSeparator='.'
+                          inputPrefix={'Rp'}
+                          isError={
+                            getPurchaseItemError(idx, 'total_price').isError
+                          }
+                          errorMessage={
+                            getPurchaseItemError(idx, 'total_price')
+                              .errorMessage
+                          }
+                          className={{
+                            wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
+                          }}
+                        />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
           <div className={'col-span-2'}>
             <TextInput
               label='Notes'

From b3f4e42f1a0631b13943e87cc0e8772b88ecf244 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 13 Nov 2025 14:01:07 +0700
Subject: [PATCH 059/168] chore: prettier format

---
 .gitlab-ci.yml                                |  25 +-
 .husky/pre-commit                             |   3 +-
 docker-compose.yaml                           |  12 +-
 src/app/purchase/{detail => }/layout.tsx      |   0
 src/components/helper/form/FormActions.tsx    |  78 +--
 src/components/input/PatternInput.tsx         |  16 +-
 .../movement/form/MovementForm.schema.ts      |  61 +-
 .../form/ProductCategoryForm.schema.ts        |   4 +-
 .../product/form/ProductForm.schema.ts        |   8 +-
 .../master-data/product/form/ProductForm.tsx  |   4 +-
 .../production/recording/RecordingTable.tsx   | 606 ++++++------------
 .../recording/form/RecordingForm.schema.ts    | 334 +++++-----
 .../form/useRecordingFormHandlers.ts          |   6 +-
 src/services/api/purchase.ts                  |   3 +-
 src/types/api/production/recording.d.ts       |  81 ++-
 15 files changed, 522 insertions(+), 719 deletions(-)
 rename src/app/purchase/{detail => }/layout.tsx (100%)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 345f305f..951e5472 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,7 +1,7 @@
 stages:
   - build
   - deploy
-  
+
 .build_template: &build_template
   stage: build
   image: node:20-alpine
@@ -10,15 +10,15 @@ stages:
     paths:
       - node_modules/
   variables:
-    NPM_CONFIG_PRODUCTION: "false"
-    NODE_ENV: ""
+    NPM_CONFIG_PRODUCTION: 'false'
+    NODE_ENV: ''
   script:
     - echo "Installing dependencies..."
     - npm ci --no-audit --no-fund
     - echo "Building Next.js static export..."
     - npx next build
   artifacts:
-    name: "out-$CI_COMMIT_SHORT_SHA"
+    name: 'out-$CI_COMMIT_SHORT_SHA'
     paths:
       - out/
     expire_in: 1 week
@@ -27,7 +27,7 @@ stages:
   stage: deploy
   image:
     name: amazon/aws-cli:latest
-    entrypoint: ["/bin/sh", "-c"]
+    entrypoint: ['/bin/sh', '-c']
   script:
     - set -e
     - aws --version
@@ -106,22 +106,21 @@ build:dev:
   environment:
     name: development
   variables:
-    NEXT_PUBLIC_API_BASE_URL: "https://dev-api-lti.mbugroup.id"
-    NEXT_PUBLIC_SSO_LOGIN_URL: "https://dev-api-sso.mbugroup.id"
+    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
 
 deploy:dev:
   <<: *deploy_template
-  needs: ["build:dev"]
+  needs: ['build:dev']
   rules:
     - if: '$CI_COMMIT_BRANCH == "development"'
   variables:
-    S3_BUCKET: "dev-lti-erp.mbugroup.id"
-    AWS_REGION: "ap-southeast-3"
-    CLOUDFRONT_DISTRIBUTION_ID: "E1Z8XTA8XF1GIV"
+    S3_BUCKET: 'dev-lti-erp.mbugroup.id'
+    AWS_REGION: 'ap-southeast-3'
+    CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
   environment:
     name: development
     url: https://dev-lti-erp.mbugroup.id
-
 # ====== PRODUCTION ======
 # build:production:
 #   <<: *build_template
@@ -143,5 +142,5 @@ deploy:dev:
 #     CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
 #   environment:
 #     name: production
-    # url: https://royalgoldcapital.com 
+# url: https://royalgoldcapital.com
 
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 66ff6a67..3782914b 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1,3 @@
+npm run format
 npm run lint
-npm run build
+npm run build
\ No newline at end of file
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 8d658170..b89f441b 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,4 +1,4 @@
-version: "3.9"
+version: '3.9'
 
 services:
   dev-web-lti:
@@ -7,7 +7,7 @@ services:
       context: .
       dockerfile: Dockerfile
     ports:
-      - "3002:3000"
+      - '3002:3000'
     env_file:
       - .env
     environment:
@@ -19,13 +19,13 @@ services:
     deploy:
       resources:
         limits:
-          cpus: "3.0"
+          cpus: '3.0'
           memory: 3G
         reservations:
-          cpus: "1.0"
+          cpus: '1.0'
           memory: 512M
     extra_hosts:
-      - "host.docker.internal:host-gateway"
+      - 'host.docker.internal:host-gateway'
     # Optional: aktifkan healthcheck jika punya endpoint
     # healthcheck:
     #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
@@ -36,4 +36,4 @@ services:
 
 networks:
   dev-lti-network:
-    external: true
\ No newline at end of file
+    external: true
diff --git a/src/app/purchase/detail/layout.tsx b/src/app/purchase/layout.tsx
similarity index 100%
rename from src/app/purchase/detail/layout.tsx
rename to src/app/purchase/layout.tsx
diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx
index 111b052f..4968f93e 100644
--- a/src/components/helper/form/FormActions.tsx
+++ b/src/components/helper/form/FormActions.tsx
@@ -64,44 +64,46 @@ export const FormActions = <T,>({
               Edit
             </Button>
           )}
-          {type === 'detail' && showApproveReject && (onApprove || onReject) && (
-            <>
-              {onApprove && (
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={onApprove}
-                  className='px-4'
-                  isLoading={isApproveLoading}
-                >
-                  <Icon
-                    icon='material-symbols:check-circle-outline'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Approve
-                </Button>
-              )}
-              {onReject && (
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={onReject}
-                  className='px-4'
-                  isLoading={isRejectLoading}
-                >
-                  <Icon
-                    icon='material-symbols:cancel-outline'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Reject
-                </Button>
-              )}
-            </>
-          )}
+          {type === 'detail' &&
+            showApproveReject &&
+            (onApprove || onReject) && (
+              <>
+                {onApprove && (
+                  <Button
+                    type='button'
+                    color='success'
+                    onClick={onApprove}
+                    className='px-4'
+                    isLoading={isApproveLoading}
+                  >
+                    <Icon
+                      icon='material-symbols:check-circle-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Approve
+                  </Button>
+                )}
+                {onReject && (
+                  <Button
+                    type='button'
+                    color='error'
+                    onClick={onReject}
+                    className='px-4'
+                    isLoading={isRejectLoading}
+                  >
+                    <Icon
+                      icon='material-symbols:cancel-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Reject
+                  </Button>
+                )}
+              </>
+            )}
         </div>
       )}
       {type !== 'detail' && (
diff --git a/src/components/input/PatternInput.tsx b/src/components/input/PatternInput.tsx
index 1905d2e3..b5f4f65d 100644
--- a/src/components/input/PatternInput.tsx
+++ b/src/components/input/PatternInput.tsx
@@ -20,14 +20,14 @@ interface PatternInputProps extends Omit<TextInputProps, 'type'> {
 }
 
 const PatternInput = ({
-                        type = 'text',
-                        format,
-                        mask = '_',
-                        allowEmptyFormatting = false,
-                        patternChar = '#',
-                        onChange,
-                        ...restProps
-                      }: PatternInputProps) => {
+  type = 'text',
+  format,
+  mask = '_',
+  allowEmptyFormatting = false,
+  patternChar = '#',
+  onChange,
+  ...restProps
+}: PatternInputProps) => {
   const valueChangeHandler: OnValueChange = (
     patternFormatValues,
     sourceInfo
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 195873b7..39f7c669 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -150,36 +150,37 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     .required('Produk wajib diisi!'),
 });
 
-export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> = 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(),
-    area: Yup.string().optional(),
-    location: Yup.string().optional(),
-  }).nullable(),
-  source_warehouse_id: Yup.number()
-    .required('Gudang asal wajib diisi!')
-    .typeError('Gudang asal wajib diisi!'),
-  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!')
-    .typeError('Gudang tujuan wajib diisi!'),
-  products: Yup.array()
-    .of(ProductObjectSchema)
-    .min(1, 'Minimal harus ada 1 produk!')
-    .required('Produk wajib diisi!'),
-  deliveries: Yup.array()
-    .of(DeliveryObjectSchema)
-    .min(1, 'Minimal harus ada 1 pengiriman!')
-    .required('Pengiriman wajib diisi!'),
-});
+export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> =
+  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(),
+      area: Yup.string().optional(),
+      location: Yup.string().optional(),
+    }).nullable(),
+    source_warehouse_id: Yup.number()
+      .required('Gudang asal wajib diisi!')
+      .typeError('Gudang asal wajib diisi!'),
+    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!')
+      .typeError('Gudang tujuan wajib diisi!'),
+    products: Yup.array()
+      .of(ProductObjectSchema)
+      .min(1, 'Minimal harus ada 1 produk!')
+      .required('Produk wajib diisi!'),
+    deliveries: Yup.array()
+      .of(DeliveryObjectSchema)
+      .min(1, 'Minimal harus ada 1 pengiriman!')
+      .required('Pengiriman wajib diisi!'),
+  });
 
 export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
 
diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
index d97e755a..c9cb2b7b 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
@@ -15,4 +15,6 @@ export const ProductCategoryFormSchema: Yup.ObjectSchema<ProductCategoryFormSche
 
 export const UpdateProductCategoryFormSchema = ProductCategoryFormSchema;
 
-export type ProductCategoryFormValues = Yup.InferType<typeof ProductCategoryFormSchema>;
\ No newline at end of file
+export type ProductCategoryFormValues = Yup.InferType<
+  typeof ProductCategoryFormSchema
+>;
diff --git a/src/components/pages/master-data/product/form/ProductForm.schema.ts b/src/components/pages/master-data/product/form/ProductForm.schema.ts
index 5db141a3..37881636 100644
--- a/src/components/pages/master-data/product/form/ProductForm.schema.ts
+++ b/src/components/pages/master-data/product/form/ProductForm.schema.ts
@@ -31,7 +31,9 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
     uom: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).nullable().required('Satuan wajib diisi!'),
+    })
+      .nullable()
+      .required('Satuan wajib diisi!'),
 
     uom_id: Yup.number()
       .required('Satuan wajib diisi!')
@@ -40,7 +42,9 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
     product_category: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).nullable().required('Kategori produk wajib diisi!'),
+    })
+      .nullable()
+      .required('Kategori produk wajib diisi!'),
 
     product_category_id: Yup.number()
       .required('Kategori produk wajib diisi!')
diff --git a/src/components/pages/master-data/product/form/ProductForm.tsx b/src/components/pages/master-data/product/form/ProductForm.tsx
index 20527398..44457c81 100644
--- a/src/components/pages/master-data/product/form/ProductForm.tsx
+++ b/src/components/pages/master-data/product/form/ProductForm.tsx
@@ -121,9 +121,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
         supplier_ids: values.supplier_ids.filter(
           (id): id is number => typeof id === 'number'
         ),
-        flags: values.flags.filter(
-          (f): f is string => typeof f === 'string'
-        ),
+        flags: values.flags.filter((f): f is string => typeof f === 'string'),
       };
       switch (type) {
         case 'add':
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index d6edaa87..e02e3e56 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
-import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState } from '@tanstack/react-table';
 import { cn } from '@/lib/helper';
@@ -9,9 +8,7 @@ import { useModal } from '@/components/Modal';
 import Button from '@/components/Button';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { OptionType } from '@/components/input/SelectInput';
-import SelectInput from '@/components/input/SelectInput';
 import { ROWS_OPTIONS } from '@/config/constant';
-import CheckboxInput from '@/components/input/CheckboxInput';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import Table from '@/components/Table';
@@ -20,14 +17,106 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
-import { type BaseApiResponse } from '@/types/api/api-general';
-import { RecordingApi } from '@/services/api/production';
-import { AreaApi } from '@/services/api/master-data';
-import { LocationApi } from '@/services/api/master-data';
-import { KandangApi } from '@/services/api/master-data';
-import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import toast from 'react-hot-toast';
+
+const dummyRecordings: Recording[] = [
+  {
+    id: 1,
+    flock: {
+      id: 1,
+      name: 'Flock Recording 1',
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      created_user: {
+        id: 1,
+        id_user: 1,
+        email: 'admin@example.com',
+        name: 'Admin',
+      },
+    },
+    recording_date: '2024-01-01',
+    location: {
+      id: 1,
+      name: 'Location 1',
+      address: 'Jl. Contoh No. 1',
+      area: {
+        id: 1,
+        name: 'Area 1',
+      },
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      created_user: {
+        id: 1,
+        id_user: 1,
+        email: 'admin@example.com',
+        name: 'Admin',
+      },
+    },
+    coop: {
+      id: 1,
+      name: 'Coop 1',
+      status: 'ACTIVE',
+      location: {
+        id: 1,
+        name: 'Location 1',
+        address: 'Jl. Contoh No. 1',
+        area: {
+          id: 1,
+          name: 'Area 1',
+        },
+      },
+      pic: {
+        id: 1,
+        id_user: 1,
+        email: 'pic@example.com',
+        name: 'PIC User',
+      },
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      created_user: {
+        id: 1,
+        id_user: 1,
+        email: 'admin@example.com',
+        name: 'Admin',
+      },
+      capacity: 100000,
+    },
+    feed_data: [
+      {
+        feed_name: 'Feed 1',
+        feed_qty: 100,
+        feed_stock: 500,
+      },
+    ],
+    body_weight: [
+      {
+        chicken_weight: 2.5,
+        chicken_count: 1000,
+        average_chicken_weight: 2.5,
+      },
+    ],
+    vaccination: [
+      {
+        vaccine_name: 'Vaccine 1',
+        total_stock: 200,
+        used_stock: 150,
+      },
+    ],
+    mortality: [
+      {
+        condition: 'NORMAL',
+        count: 5,
+      },
+    ],
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+    created_user: {
+      id: 1,
+      id_user: 1,
+      email: 'admin@example.com',
+      name: 'Admin',
+    },
+  },
+];
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -77,34 +166,12 @@ const RowOptionsMenu = ({
 };
 
 const RecordingTable = () => {
-  const {
-    state: tableFilterState,
-    updateFilter,
-    setPage,
-    setPageSize,
-    toQueryString: getTableFilterQueryString,
-  } = 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 [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-  const [selectedRecording, setSelectedRecording] = useState<Recording | undefined>(undefined);
+  const [selectedRecordings, setSelectedRecordings] = useState<number[]>([]);
+  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
   const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
@@ -113,81 +180,12 @@ const RecordingTable = () => {
   const bulkApproveModal = useModal();
   const bulkRejectModal = useModal();
 
-  // State for dropdown search
-  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 {
-    data: recordings,
-    isLoading,
-    mutate: refreshRecordings,
-  } = useSWR(
-    `${RecordingApi.basePath}${getTableFilterQueryString()}`,
-    RecordingApi.getAllFetcher
-  );
-
-  // Fetch data for dropdowns
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: areaSelectInputValue,
-    limit: '100',
-  }).toString()}`;
-  const {
-    data: areas,
-    isLoading: isLoadingAreas,
-  } = useSWR(areaUrl, AreaApi.getAllFetcher);
-
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: locationSelectInputValue,
-    area_id: selectedArea != null ? selectedArea.value.toString() : '',
-    limit: '100',
-  }).toString()}`;
-  const {
-    data: locations,
-    isLoading: isLoadingLocations,
-  } = useSWR(locationUrl, LocationApi.getAllFetcher);
-
-  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
-    search: kandangSelectInputValue,
-    location_id:
-      selectedLocation != null ? selectedLocation.value.toString() : '',
-    limit: '100',
-  }).toString()}`;
-  const {
-    data: kandangs,
-    isLoading: isLoadingKandang,
-  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
-
-  // Data to Options Mapping
-  const optionsArea = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
-  const optionsLocation = isResponseSuccess(locations)
-    ? locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }))
-    : [];
-  const optionsKandang = isResponseSuccess(kandangs)
-    ? kandangs?.data.map((kandang) => ({
-        value: kandang.id,
-        label: kandang.name,
-      }))
-    : [];
-
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      updateFilter('search', e.target.value);
+      setSearch(e.target.value);
       setPage(1);
     },
-    [updateFilter, setPage]
+    []
   );
 
   const pageSizeChangeHandler = useCallback(
@@ -196,80 +194,52 @@ const RecordingTable = () => {
       setPageSize(newVal.value as number);
       setPage(1);
     },
-    [setPageSize, setPage]
+    []
   );
 
   const paginatedData = useMemo(() => {
-    if (!recordings || recordings.status !== 'success') return [];
-
-    return recordings.data;
-  }, [recordings]);
-
-  const selectedRowIds = Object.keys(rowSelection).map((item) => parseInt(item));
+    const filteredData = dummyRecordings.filter(
+      (recording) =>
+        recording.flock.name.toLowerCase().includes(search.toLowerCase()) ||
+        recording.location.name.toLowerCase().includes(search.toLowerCase()) ||
+        recording.coop.name.toLowerCase().includes(search.toLowerCase())
+    );
+    const start = (page - 1) * pageSize;
+    return filteredData.slice(start, start + pageSize);
+  }, [page, pageSize, search]);
 
   const bulkApproveHandler = async () => {
     setIsBulkApproveLoading(true);
-
-    const approveResponse = await RecordingApi.customRequest<
-      BaseApiResponse<Recording[]>
-    >('approvals', {
-      method: 'POST',
-      payload: {
-        action: 'APPROVED',
-        approvable_ids: selectedRowIds,
-        notes: 'Bulk Approved',
-      },
-    });
-
-    if (isResponseSuccess(approveResponse)) {
-      await refreshRecordings();
-      setRowSelection({});
+    console.log(
+      'Approved recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsBulkApproveLoading(false);
+      setSelectedRecordings([]);
       bulkApproveModal.closeModal();
-      toast.success(`Successfully approved ${selectedRowIds.length} recordings!`);
-    }
-    if (isResponseError(approveResponse)) {
-      toast.error(approveResponse?.message as string);
-      bulkApproveModal.closeModal();
-    }
-    setIsBulkApproveLoading(false);
+    }, 1000);
   };
 
   const bulkRejectHandler = async () => {
     setIsBulkRejectLoading(true);
-
-    const rejectResponse = await RecordingApi.customRequest<
-      BaseApiResponse<Recording[]>
-    >('approvals', {
-      method: 'POST',
-      payload: {
-        action: 'REJECTED',
-        approvable_ids: selectedRowIds,
-        notes: 'Bulk Rejected',
-      },
-    });
-
-    if (isResponseSuccess(rejectResponse)) {
-      refreshRecordings();
-      setRowSelection({});
+    console.log(
+      'Rejected recordings:',
+      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
+    );
+    setTimeout(() => {
+      setIsBulkRejectLoading(false);
+      setSelectedRecordings([]);
       bulkRejectModal.closeModal();
-      toast.success(`Successfully rejected ${selectedRowIds.length} recordings!`);
-    }
-    if (isResponseError(rejectResponse)) {
-      toast.error(rejectResponse?.message as string);
-      bulkRejectModal.closeModal();
-    }
-    setIsBulkRejectLoading(false);
+    }, 1000);
   };
 
   const singleDeleteHandler = async () => {
     setIsDeleteLoading(true);
-
-    await RecordingApi.delete(selectedRecording?.id as number);
-    refreshRecordings();
-
-    singleDeleteModal.closeModal();
-    toast.success('Successfully delete Recording!');
-    setIsDeleteLoading(false);
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      singleDeleteModal.closeModal();
+    }, 1000);
   };
 
   return (
@@ -281,189 +251,21 @@ const RecordingTable = () => {
             label: 'Tambah',
           }}
           search={{
-            value: tableFilterState.search,
+            value: search,
             onChange: searchChangeHandler,
             placeholder: 'Cari Recording',
           }}
         />
         <TableRowSizeSelector
-          value={tableFilterState.pageSize}
+          value={pageSize}
           onChange={pageSizeChangeHandler}
           options={ROWS_OPTIONS}
         />
-
-        {/* Filter Dropdowns - Desktop */}
-        <div className='hidden sm:grid sm:grid-cols-4 gap-4 mt-4'>
-          <SelectInput
-            label='Area'
-            placeholder='Pilih Area'
-            options={optionsArea}
-            value={selectedArea}
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              setSelectedArea(selectedValue);
-              setSelectedLocation(null);
-              setSelectedKandang(null);
-              updateFilter('areaFilter', selectedValue ? selectedValue.value.toString() : '');
-              updateFilter('locationFilter', '');
-              updateFilter('kandangFilter', '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            onInputChange={(value) => setAreaSelectInputValue(value)}
-            isLoading={isLoadingAreas}
-            isClearable
-          />
-
-          <SelectInput
-            label='Lokasi'
-            placeholder='Pilih Lokasi'
-            options={optionsLocation}
-            value={selectedLocation}
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              setSelectedLocation(selectedValue);
-              setSelectedKandang(null);
-              updateFilter('locationFilter', selectedValue ? selectedValue.value.toString() : '');
-              updateFilter('kandangFilter', '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            onInputChange={(value) => setLocationSelectInputValue(value)}
-            isLoading={isLoadingLocations}
-            isClearable
-            isDisabled={!selectedArea}
-          />
-
-          <SelectInput
-            label='Kandang'
-            placeholder='Pilih Kandang'
-            options={optionsKandang}
-            value={selectedKandang}
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              setSelectedKandang(selectedValue);
-              updateFilter('kandangFilter', selectedValue ? selectedValue.value.toString() : '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            onInputChange={(value) => setKandangSelectInputValue(value)}
-            isLoading={isLoadingKandang}
-            isClearable
-            isDisabled={!selectedLocation}
-          />
-
-          <SelectInput
-            label='Periode'
-            placeholder='Pilih Periode'
-            options={[
-              { value: '1', label: 'Periode 1' },
-              { value: '2', label: 'Periode 2' },
-              { value: '3', label: 'Periode 3' },
-            ]}
-            value={
-              tableFilterState.periodFilter
-                ? { value: tableFilterState.periodFilter, label: `Periode ${tableFilterState.periodFilter}` }
-                : null
-            }
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              updateFilter('periodFilter', selectedValue ? selectedValue.value.toString() : '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            isClearable
-          />
-        </div>
-
-        {/* Filter Dropdowns - Mobile */}
-        <div className='sm:hidden flex flex-col gap-3 mt-4'>
-          <SelectInput
-            label='Area'
-            placeholder='Pilih Area'
-            options={optionsArea}
-            value={selectedArea}
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              setSelectedArea(selectedValue);
-              setSelectedLocation(null);
-              setSelectedKandang(null);
-              updateFilter('areaFilter', selectedValue ? selectedValue.value.toString() : '');
-              updateFilter('locationFilter', '');
-              updateFilter('kandangFilter', '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            onInputChange={(value) => setAreaSelectInputValue(value)}
-            isLoading={isLoadingAreas}
-            isClearable
-          />
-
-          <SelectInput
-            label='Lokasi'
-            placeholder='Pilih Lokasi'
-            options={optionsLocation}
-            value={selectedLocation}
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              setSelectedLocation(selectedValue);
-              setSelectedKandang(null);
-              updateFilter('locationFilter', selectedValue ? selectedValue.value.toString() : '');
-              updateFilter('kandangFilter', '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            onInputChange={(value) => setLocationSelectInputValue(value)}
-            isLoading={isLoadingLocations}
-            isClearable
-            isDisabled={!selectedArea}
-          />
-
-          <SelectInput
-            label='Kandang'
-            placeholder='Pilih Kandang'
-            options={optionsKandang}
-            value={selectedKandang}
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              setSelectedKandang(selectedValue);
-              updateFilter('kandangFilter', selectedValue ? selectedValue.value.toString() : '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            onInputChange={(value) => setKandangSelectInputValue(value)}
-            isLoading={isLoadingKandang}
-            isClearable
-            isDisabled={!selectedLocation}
-          />
-
-          <SelectInput
-            label='Periode'
-            placeholder='Pilih Periode'
-            options={[
-              { value: '1', label: 'Periode 1' },
-              { value: '2', label: 'Periode 2' },
-              { value: '3', label: 'Periode 3' },
-            ]}
-            value={
-              tableFilterState.periodFilter
-                ? { value: tableFilterState.periodFilter, label: `Periode ${tableFilterState.periodFilter}` }
-                : null
-            }
-            onChange={(selected) => {
-              const selectedValue = selected as OptionType | null;
-              updateFilter('periodFilter', selectedValue ? selectedValue.value.toString() : '');
-              setPage(1);
-            }}
-            className={{ wrapper: 'w-full' }}
-            isClearable
-          />
-        </div>
       </div>
 
       {/* Bulk action buttons */}
       <div className={'flex justify-end items-center'}>
-        {selectedRowIds.length > 0 && (
+        {selectedRecordings.length > 0 && (
           <div className='flex gap-2 mb-4'>
             <Button
               type='button'
@@ -476,7 +278,7 @@ const RecordingTable = () => {
                 width={20}
                 height={20}
               />
-              Approve ({selectedRowIds.length})
+              Approve ({selectedRecordings.length})
             </Button>
             <Button
               type='button'
@@ -489,7 +291,7 @@ const RecordingTable = () => {
                 width={20}
                 height={20}
               />
-              Reject ({selectedRowIds.length})
+              Reject ({selectedRecordings.length})
             </Button>
           </div>
         )}
@@ -497,7 +299,7 @@ const RecordingTable = () => {
         <ConfirmationModal
           ref={bulkApproveModal.ref}
           type='success'
-          text={`Apakah anda yakin ingin menyetujui ${selectedRowIds.length} data Recording yang dipilih?`}
+          text={`Apakah anda yakin ingin menyetujui ${selectedRecordings.length} data Recording yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -512,7 +314,7 @@ const RecordingTable = () => {
         <ConfirmationModal
           ref={bulkRejectModal.ref}
           type='error'
-          text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Recording yang dipilih?`}
+          text={`Apakah anda yakin ingin menolak ${selectedRecordings.length} data Recording yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -530,83 +332,75 @@ const RecordingTable = () => {
         columns={[
           {
             id: 'select',
+            accessorKey: 'id',
             header: ({ table }) => (
-              <div className='w-full flex flex-row justify-center'>
-                <CheckboxInput
-                  name='allRow'
-                  checked={table.getIsAllRowsSelected()}
-                  indeterminate={table.getIsSomeRowsSelected()}
-                  onChange={table.getToggleAllRowsSelectedHandler()}
-                />
-              </div>
+              <input
+                type='checkbox'
+                className='checkbox'
+                checked={
+                  table.getRowModel().rows.length > 0 &&
+                  table
+                    .getRowModel()
+                    .rows.every((row) => selectedRecordings.includes(row.index))
+                }
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedRecordings(
+                      table.getRowModel().rows.map((row) => row.index)
+                    );
+                  } else {
+                    setSelectedRecordings([]);
+                  }
+                }}
+              />
             ),
             cell: ({ row }) => (
-              <div>
-                <CheckboxInput
-                  name='row'
-                  checked={row.getIsSelected()}
-                  disabled={!row.getCanSelect()}
-                  indeterminate={row.getIsSomeSelected()}
-                  onChange={row.getToggleSelectedHandler()}
-                />
-              </div>
+              <input
+                type='checkbox'
+                className='checkbox'
+                checked={selectedRecordings.includes(row.index)}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedRecordings([...selectedRecordings, row.index]);
+                  } else {
+                    setSelectedRecordings(
+                      selectedRecordings.filter((i) => i !== row.index)
+                    );
+                  }
+                }}
+              />
             ),
           },
           {
             header: '#',
-            cell: (props) => tableFilterState.pageSize * (tableFilterState.page - 1) + props.row.index + 1,
+            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
           },
           {
-            header: 'Nama Project',
-            cell: (props) => `Project ${props.row.original.project_flock_kandang_id}`,
+            accessorKey: 'flock.name',
+            header: 'Flock',
           },
           {
-            header: 'Umur (hari)',
-            cell: (props) => props.row.original.day,
-          },
-          {
-            accessorKey: 'record_date',
-            header: 'Waktu Recording',
+            accessorKey: 'recording_date',
+            header: 'Tanggal Recording',
             cell: (props) =>
-              new Date(props.row.original.record_date).toLocaleDateString(),
+              new Date(props.row.original.recording_date).toLocaleDateString(),
           },
           {
-            header: 'Populasi Awal',
-            cell: (props) => props.row.original.total_chick?.toLocaleString() || '-',
+            accessorKey: 'location.name',
+            header: 'Lokasi',
           },
           {
-            header: 'BW',
-            cell: (props) => props.row.original.avg_daily_gain?.toFixed(2) || '-',
+            accessorKey: 'coop.name',
+            header: 'Kandang',
           },
           {
-            header: 'Pakan',
-            cell: (props) => props.row.original.cum_intake?.toLocaleString() || '-',
-          },
-          {
-            header: 'FCR',
-            cell: (props) => props.row.original.fcr_value?.toFixed(2) || '-',
-          },
-          {
-            accessorKey: 'total_depletion',
-            header: 'Total Deplesi',
-            cell: (props) => props.row.original.total_depletion,
-          },
-          {
-            header: 'Deplesi (%)',
-            cell: (props) => props.row.original.daily_depletion_rate?.toFixed(2) || '-',
-          },
-          {
-            header: 'Populasi Akhir',
-            cell: (props) => (props.row.original.total_chick - props.row.original.total_depletion)?.toLocaleString() || '-',
-          },
-          {
-            header: 'Ketepatan Waktu',
-            cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat',
-          },
-          {
-            header: 'Tanggal Submit',
+            accessorKey: 'mortality',
+            header: 'Total Mortality',
             cell: (props) =>
-              new Date(props.row.original.created_at).toLocaleString(),
+              props.row.original.mortality.reduce(
+                (acc, curr) => acc + curr.count,
+                0
+              ),
           },
           {
             header: 'Aksi',
@@ -651,15 +445,13 @@ const RecordingTable = () => {
             },
           },
         ]}
-        pageSize={tableFilterState.pageSize}
-        page={recordings?.status === 'success' ? recordings.meta?.page : tableFilterState.page}
-        totalItems={recordings?.status === 'success' ? recordings.meta?.total_results : 0}
+        pageSize={pageSize}
+        page={page}
+        totalItems={dummyRecordings.length}
         onPageChange={setPage}
-        isLoading={isLoading}
+        isLoading={false}
         sorting={sorting}
         setSorting={setSorting}
-        rowSelection={rowSelection}
-        setRowSelection={setRowSelection}
         className={{
           containerClassName: cn({
             'mb-20': paginatedData.length === 0,
@@ -678,7 +470,7 @@ const RecordingTable = () => {
       <ConfirmationModal
         ref={singleDeleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Recording ini (ID: ${selectedRecording?.id})?`}
+        text={`Apakah anda yakin ingin menghapus data Recording ini?`}
         secondaryButton={{
           text: 'Tidak',
         }}
diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index ccb4ddd5..4b0b37dd 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -1,222 +1,212 @@
 import * as Yup from 'yup';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
-import {
-  Recording,
-  CreateRecordingPayload,
-} from '@/types/api/production/recording';
+import { Recording } from '@/types/api/production/recording';
 
 export const RecordingFormSchema = Yup.object({
-  project_flock_kandang: Yup.object({
+  flock: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  project_flock_kandang_id: Yup.number()
+  flock_id: Yup.number()
     .default(0)
-    .typeError('Project Flock Kandang wajib diisi!')
+    .typeError('Flock wajib diisi!')
     .test(
-      'is-valid-project-flock-kandang',
-      'Project Flock Kandang wajib diisi!',
+      'is-valid-flock',
+      'Flock wajib diisi!',
       (value) => value !== undefined && value !== null && value > 0
     )
-    .required('Project Flock Kandang wajib diisi!')
+    .required('Flock wajib diisi!'),
+  location: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  location_id: Yup.number()
+    .default(0)
+    .typeError('Lokasi wajib diisi!')
     .test(
-      'not-already-recorded',
-      'Project Flock ini sudah direcord hari ini!',
-      function(value) {
-        const recordedProjectFlockIds = this.options.context?.recordedProjectFlockIds as Set<number>;
-        const formType = this.options.context?.type as 'add' | 'edit' | 'detail';
-        if (formType !== 'add') return true;
-        if (value && recordedProjectFlockIds?.has(value)) {
-          return false;
-        }
-        return true;
-      }
-    ),
-  body_weights: Yup.array()
+      'is-valid-location',
+      'Lokasi wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Lokasi wajib diisi!'),
+  coop: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  coop_id: Yup.number()
+    .default(0)
+    .typeError('Kandang wajib diisi!')
+    .test(
+      'is-valid-coop',
+      'Kandang wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Kandang wajib diisi!'),
+  recording_date: Yup.date()
+    .required('Tanggal recording wajib diisi')
+    .typeError('Format tanggal tidak valid'),
+  feed_data: Yup.array()
     .of(
       Yup.object({
-        weight: Yup.number()
+        feed_id: Yup.string().required('Nama pakan wajib diisi!'),
+        feed_qty: Yup.mixed<number | ''>().notRequired(),
+        feed_stock: Yup.number()
+          .required('Jumlah pakan yang digunakan wajib diisi!')
+          .min(1, 'Jumlah pakan minimal 1!')
+          .typeError('Jumlah pakan yang digunakan harus berupa angka!')
+          .test(
+            'is-not-exceed-qty',
+            'Jumlah pakan yang digunakan tidak boleh melebihi stok tersedia!',
+            function (value) {
+              const { feed_qty } = this.parent;
+              if (value === undefined) return true;
+              if (
+                feed_qty === undefined ||
+                feed_qty === '' ||
+                typeof feed_qty !== 'number'
+              )
+                return true;
+              return value <= feed_qty;
+            }
+          ),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data pakan!')
+    .required('Data pakan wajib diisi!'),
+  body_weight: Yup.array()
+    .of(
+      Yup.object({
+        chicken_weight: Yup.number()
           .required('Berat ayam wajib diisi!')
           .min(1, 'Berat ayam minimal 1 gram!')
           .typeError('Berat ayam harus berupa angka!'),
-        qty: Yup.number()
+        chicken_count: Yup.number()
           .required('Jumlah ayam wajib diisi!')
           .min(1, 'Jumlah ayam minimal 1 ekor!')
-          .typeError('Jumlah ayam harus berupa angka!')
-          .default(1),
-        average_weight: Yup.number()
-          .optional()
-          .min(0, 'Rata-rata berat tidak boleh negatif!')
-          .typeError('Rata-rata berat harus berupa angka!')
-          .default(0),
+          .typeError('Jumlah ayam harus berupa angka!'),
+        average_chicken_weight: Yup.number()
+          .required('Rata-rata berat ayam wajib diisi!')
+          .min(1, 'Rata-rata berat ayam minimal 1 gram!')
+          .typeError('Rata-rata berat ayam harus berupa angka!'),
       })
     )
     .min(1, 'Minimal harus ada 1 data bobot badan!')
     .required('Data bobot badan wajib diisi!'),
-  stocks: Yup.array()
+  vaccination: Yup.array()
     .of(
       Yup.object({
-        product_warehouse_id: Yup.number()
-          .required('Produk wajib diisi!')
-          .min(1, 'Produk wajib diisi!')
-          .typeError('Produk harus berupa angka!'),
-        usage_amount: Yup.number()
-          .required('Jumlah penggunaan wajib diisi!')
-          .min(0, 'Jumlah penggunaan tidak boleh negatif!')
-          .typeError('Jumlah penggunaan harus berupa angka!'),
-        notes: Yup.string().optional(),
+        vaccine_id: Yup.string().required('Nama vaksin wajib diisi!'),
+        total_stock: Yup.mixed<number | ''>().notRequired(),
+        used_stock: Yup.number()
+          .required('Jumlah vaksin yang digunakan wajib diisi!')
+          .min(1, 'Jumlah vaksin minimal 1!')
+          .typeError('Jumlah vaksin yang digunakan harus berupa angka!')
+          .test(
+            'is-not-exceed-total',
+            'Jumlah vaksin yang digunakan tidak boleh melebihi stok tersedia!',
+            function (value) {
+              const { total_stock } = this.parent;
+              if (value === undefined) return true;
+              if (
+                total_stock === undefined ||
+                total_stock === '' ||
+                typeof total_stock !== 'number'
+              )
+                return true;
+              return value <= total_stock;
+            }
+          ),
       })
     )
-    .min(1, 'Minimal harus ada 1 data stok!')
-    .required('Data stok wajib diisi!'),
-  depletions: Yup.array()
+    .min(1, 'Minimal harus ada 1 data vaksinasi!')
+    .required('Data vaksinasi wajib diisi!'),
+  mortality: Yup.array()
     .of(
       Yup.object({
-        total: Yup.number()
-          .required('Jumlah depletions wajib diisi!')
-          .min(1, 'Jumlah depletions minimal 1!')
-          .typeError('Jumlah depletions harus berupa angka!'),
-        notes: Yup.string()
-          .required('Kondisi depletions wajib diisi!')
+        condition: Yup.mixed<string>()
           .oneOf(
-            RECORDING_FLAG_OPTIONS.map((option) => option.value),
-            'Kondisi depletions tidak valid!'
+            RECORDING_FLAG_OPTIONS.map((opt) => opt.value),
+            'Kondisi tidak valid!'
           )
-          .typeError('Kondisi depletions harus berupa teks!')
-          .min(1, 'Kondisi depletions wajib diisi!'),
+          .required('Kondisi wajib diisi!'),
+        count: Yup.number()
+          .required('Jumlah mortalitas wajib diisi!')
+          .min(1, 'Jumlah mortalitas minimal 1 ekor!')
+          .typeError('Jumlah mortalitas harus berupa angka!'),
       })
     )
-    .min(1, 'Minimal harus ada 1 data depletions!')
-    .required('Data depletions wajib diisi!'),
+    .min(1, 'Minimal harus ada 1 data mortalitas!')
+    .required('Data mortalitas wajib diisi!'),
 });
 
-export const UpdateRecordingFormSchema = Yup.object({
-  project_flock_kandang: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  project_flock_kandang_id: Yup.number()
-    .default(0)
-    .typeError('Project Flock Kandang wajib diisi!')
-    .test(
-      'is-valid-project-flock-kandang',
-      'Project Flock Kandang wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Project Flock Kandang wajib diisi!'),
-  body_weights: Yup.array()
-    .of(
-      Yup.object({
-        weight: Yup.number()
-          .required('Berat ayam wajib diisi!')
-          .min(1, 'Berat ayam minimal 1 gram!')
-          .typeError('Berat ayam harus berupa angka!'),
-        qty: Yup.number()
-          .required('Jumlah ayam wajib diisi!')
-          .min(1, 'Jumlah ayam minimal 1 ekor!')
-          .typeError('Jumlah ayam harus berupa angka!')
-          .default(1),
-        average_weight: Yup.number()
-          .optional()
-          .min(0, 'Rata-rata berat tidak boleh negatif!')
-          .typeError('Rata-rata berat harus berupa angka!')
-          .default(0),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data bobot badan!')
-    .required('Data bobot badan wajib diisi!'),
-  stocks: Yup.array()
-    .of(
-      Yup.object({
-        product_warehouse_id: Yup.number()
-          .required('Produk wajib diisi!')
-          .min(1, 'Produk wajib diisi!')
-          .typeError('Produk harus berupa angka!'),
-        usage_amount: Yup.number()
-          .required('Jumlah penggunaan wajib diisi!')
-          .min(0, 'Jumlah penggunaan tidak boleh negatif!')
-          .typeError('Jumlah penggunaan harus berupa angka!'),
-        notes: Yup.string().optional(),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data stok!')
-    .required('Data stok wajib diisi!'),
-  depletions: Yup.array()
-    .of(
-      Yup.object({
-        total: Yup.number()
-          .required('Jumlah depletions wajib diisi!')
-          .min(1, 'Jumlah depletions minimal 1!')
-          .typeError('Jumlah depletions harus berupa angka!'),
-        notes: Yup.string()
-          .required('Kondisi depletions wajib diisi!')
-          .oneOf(
-            RECORDING_FLAG_OPTIONS.map((option) => option.value),
-            'Kondisi depletions tidak valid!'
-          )
-          .typeError('Kondisi depletions harus berupa teks!')
-          .min(1, 'Kondisi depletions wajib diisi!'),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data depletions!')
-    .required('Data depletions wajib diisi!'),
-});
+export const UpdateRecordingFormSchema = RecordingFormSchema;
 
 export type RecordingFormValues = Yup.InferType<typeof RecordingFormSchema>;
 
-type RecordingFormData = Partial<Recording> & {
-  body_weights?: CreateRecordingPayload['body_weights'];
-  stocks?: CreateRecordingPayload['stocks'];
-  depletions?: CreateRecordingPayload['depletions'];
-};
-
 export const getRecordingFormInitialValues = (
-  initialValues?: RecordingFormData
+  initialValues?: Recording
 ): RecordingFormValues => ({
-  project_flock_kandang: initialValues?.project_flock_kandang_id
+  flock: initialValues?.flock
     ? {
-        value: initialValues.project_flock_kandang_id,
-        label: `Project Flock #${initialValues.project_flock_kandang_id}`,
+        value: initialValues.flock.id,
+        label: initialValues.flock.name,
       }
     : null,
-  project_flock_kandang_id: initialValues?.project_flock_kandang_id ?? 0,
-  body_weights: initialValues?.body_weights?.map(
-    (bw: NonNullable<CreateRecordingPayload['body_weights']>[0]) => ({
-      weight: bw.weight,
-      qty: bw.qty,
-      average_weight: bw.qty > 0 ? Math.round(bw.weight / bw.qty) : 0,
-    })
-  ) ?? [
+  flock_id: initialValues?.flock?.id ?? 0,
+  location: initialValues?.location
+    ? {
+        value: initialValues.location.id,
+        label: initialValues.location.name,
+      }
+    : null,
+  location_id: initialValues?.location?.id ?? 0,
+  coop: initialValues?.coop
+    ? {
+        value: initialValues.coop.id,
+        label: initialValues.coop.name,
+      }
+    : null,
+  coop_id: initialValues?.coop?.id ?? 0,
+  recording_date: initialValues?.recording_date
+    ? new Date(initialValues.recording_date)
+    : new Date(),
+  feed_data: initialValues?.feed_data
+    ? initialValues.feed_data.map((feed) => ({
+        feed_id: feed.feed_name,
+        feed_qty: feed.feed_qty,
+        feed_stock: feed.feed_stock,
+      }))
+    : [
+        {
+          feed_id: '',
+          feed_qty: '',
+          feed_stock: 0,
+        },
+      ],
+  body_weight: initialValues?.body_weight ?? [
     {
-      weight: 0,
-      qty: 0,
-      average_weight: 0,
+      chicken_weight: 0,
+      chicken_count: 0,
+      average_chicken_weight: 0,
     },
   ],
-  stocks: initialValues?.stocks?.map(
-    (stock: NonNullable<CreateRecordingPayload['stocks']>[0]) => ({
-      product_warehouse_id: stock.product_warehouse_id,
-      usage_amount: stock.usage_amount,
-      notes: stock.notes,
-    })
-  ) ?? [
+  vaccination: initialValues?.vaccination
+    ? initialValues.vaccination.map((vaccine) => ({
+        vaccine_id: vaccine.vaccine_name,
+        total_stock: vaccine.total_stock,
+        used_stock: vaccine.used_stock,
+      }))
+    : [
+        {
+          vaccine_id: '',
+          total_stock: '',
+          used_stock: 0,
+        },
+      ],
+  mortality: initialValues?.mortality ?? [
     {
-      product_warehouse_id: 0,
-      usage_amount: 0,
-      notes: '',
-    },
-  ],
-  depletions: initialValues?.depletions?.map(
-    (depletion: NonNullable<CreateRecordingPayload['depletions']>[0]) => ({
-      product_warehouse_id: depletion.product_warehouse_id,
-      total: depletion.total,
-      notes: depletion.notes,
-    })
-  ) ?? [
-    {
-      product_warehouse_id: 0,
-      total: 0,
-      notes: '',
+      condition: '',
+      count: 0,
     },
   ],
 });
diff --git a/src/components/pages/production/recording/form/useRecordingFormHandlers.ts b/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
index 58893ce1..334b791d 100644
--- a/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
+++ b/src/components/pages/production/recording/form/useRecordingFormHandlers.ts
@@ -24,7 +24,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
         return;
       }
       toast.success(res?.message as string);
-      router.push('/production/recording');
+      router.push('/flock/recording');
     },
     [router]
   );
@@ -38,7 +38,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
       }
       toast.success(res?.message as string);
       router.refresh();
-      router.push('/production/recording');
+      router.push('/flock/recording');
     },
     [router]
   );
@@ -55,7 +55,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
     deleteModal.closeModal();
     toast.success('Successfully delete Recording!');
     setIsDeleteLoading(false);
-    router.push('/production/recording');
+    router.push('/flock/recording');
   }, [deleteModal, initialValuesId, router]);
 
   return {
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 56590975..4768d94f 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -71,8 +71,7 @@ export class StaffApprovalService extends BaseApiService<
       }
     );
   }
-
-  }
+}
 
 export class AcceptApprovalService extends BaseApiService<
   Purchase,
diff --git a/src/types/api/production/recording.d.ts b/src/types/api/production/recording.d.ts
index dcbbeed6..6fac0bc8 100644
--- a/src/types/api/production/recording.d.ts
+++ b/src/types/api/production/recording.d.ts
@@ -1,45 +1,60 @@
-import { BaseMetadata, User } from '@/types/api/api-general';
-
-export type ProductionMetrics = {
-  total_depletion: number;
-  cum_depletion_rate: number;
-  daily_gain: number;
-  avg_daily_gain: number;
-  cum_intake: number;
-  fcr_value: number;
-  total_chick: number;
-  daily_depletion_rate: number;
-  cum_depletion: number;
-};
+import { BaseMetadata } from '@/types/api/api-general';
+import { Location } from '@/types/api/master-data/location';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Flock } from '@/types/api/master-data/flock';
 
 export type BaseRecording = {
   id: number;
-  project_flock_kandang_id: number;
-  record_datetime: string;
-  record_date: string;
-  status: number;
-  ontime: boolean;
-  day: number;
-  created_user: User;
-} & ProductionMetrics;
+  flock: Flock;
+  recording_date: string;
+  location: Location;
+  coop: Kandang;
+  feed_data: {
+    feed_name: string;
+    feed_qty: number;
+    feed_stock: number;
+  }[];
+  body_weight: {
+    chicken_weight: number;
+    chicken_count: number;
+    average_chicken_weight: number;
+  }[];
+  vaccination: {
+    vaccine_name: string;
+    total_stock: number;
+    used_stock: number;
+  }[];
+  mortality: {
+    condition: string;
+    count: number;
+  }[];
+};
 
 export type Recording = BaseMetadata & BaseRecording;
 
 export type CreateRecordingPayload = {
-  project_flock_kandang_id: number;
-  body_weights: {
-    weight: number;
-    qty: number;
+  flock_id: number;
+  recording_date: string;
+  location_id: number;
+  coop_id: number;
+  feed_data: {
+    feed_id: string;
+    feed_qty: number;
+    feed_stock: number;
   }[];
-  stocks?: {
-    product_warehouse_id: number;
-    usage_amount: number;
-    notes: string;
+  body_weight: {
+    chicken_weight: number;
+    chicken_count: number;
+    average_chicken_weight: number;
   }[];
-  depletions?: {
-    product_warehouse_id?: number;
-    total: number;
-    notes: string;
+  vaccination: {
+    vaccine_id: string;
+    total_stock: number;
+    used_stock: number;
+  }[];
+  mortality: {
+    condition: string;
+    count: number;
   }[];
 };
 

From 5648b51c2ee27470b64f99c0d7ba38b0701ac0e7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 13 Nov 2025 14:54:37 +0700
Subject: [PATCH 060/168] feat(FE-Storyless): add collapsible functionality and
 improve image handling

---
 src/components/Card.tsx     | 160 ++++++++++++++++++++++++++++--------
 src/components/Collapse.tsx |   8 +-
 2 files changed, 133 insertions(+), 35 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 7b022971..d3ff80b1 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, useState } from 'react';
 
 import { cn } from '@/lib/helper';
 import Image from 'next/image';
+import Collapse from './Collapse';
+import { Icon } from '@iconify/react';
 
 export interface CardProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
@@ -11,8 +13,13 @@ export interface CardProps
   subtitle?: string;
   image?: string;
   imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
   actions?: ReactNode;
   footer?: ReactNode;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
   className?: {
     wrapper?: string;
     image?: string;
@@ -21,6 +28,7 @@ export interface CardProps
     subtitle?: string;
     actions?: string;
     footer?: string;
+    collapsible?: string;
   };
   variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
   size?: 'sm' | 'md' | 'lg';
@@ -31,14 +39,27 @@ const Card = ({
   subtitle,
   image,
   imageAlt,
+  imageWidth,
+  imageHeight,
   actions,
   footer,
+  collapsible,
+  defaultCollapsed = false,
+  onCollapsedChange,
   className,
   variant = 'default',
   size = 'md',
   children,
   ...props
 }: CardProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const handleCollapsedChange = (open: boolean) => {
+    const collapsed = !open;
+    setIsCollapsed(collapsed);
+    onCollapsedChange?.(collapsed);
+  };
+
   const getCardClasses = () => {
     const baseClasses = 'card bg-base-100';
 
@@ -64,11 +85,31 @@ const Card = ({
     );
   };
 
+  const getImageDimensions = () => {
+    if (variant === 'image-full') {
+      return {
+        width: imageWidth || 128,
+        height: imageHeight || 128,
+      };
+    }
+
+    const cardWidths = {
+      sm: 256, // w-64
+      md: 384, // w-96
+      lg: 448, // w-[28rem]
+    };
+
+    return {
+      width: imageWidth || cardWidths[size],
+      height: imageHeight || 192,
+    };
+  };
+
   const getImageClasses = () => {
     if (variant === 'image-full') {
-      return cn('w-32 h-32 object-cover', className?.image);
+      return cn('object-cover', className?.image);
     }
-    return cn('h-48 object-cover', className?.image);
+    return cn('w-full object-cover', className?.image);
   };
 
   const getBodyClasses = () => {
@@ -103,45 +144,98 @@ const Card = ({
     return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
   };
 
+  const renderCardContent = () => {
+    const hasContent = children || actions || footer;
+
+    const titleContent = (
+      <div className='group flex items-center !justify-between w-full'>
+        <div className='flex-1'>
+          {title && <h2 className={getTitleClasses()}>{title}</h2>}
+          {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
+        </div>
+        {collapsible && (
+          <button
+            onClick={() => handleCollapsedChange(!isCollapsed)}
+            className='btn btn-ghost btn-sm btn-circle'
+            aria-label={isCollapsed ? 'Expand content' : 'Collapse content'}
+          >
+            <Icon
+              icon={
+                isCollapsed
+                  ? 'material-symbols:expand-more'
+                  : 'material-symbols:expand-less'
+              }
+              width={20}
+            />
+          </button>
+        )}
+      </div>
+    );
+
+    const cardContent = (
+      <div className='space-y-4'>
+        {children}
+        {actions && <div className={getActionsClasses()}>{actions}</div>}
+        {footer && <div className={getFooterClasses()}>{footer}</div>}
+      </div>
+    );
+
+    return (
+      <>
+        {image && (
+          <figure>
+            <Image
+              src={image}
+              alt={imageAlt || title || 'Card image'}
+              width={getImageDimensions().width}
+              height={getImageDimensions().height}
+              className={getImageClasses()}
+            />
+          </figure>
+        )}
+        <div className={getBodyClasses()}>
+          {collapsible && hasContent ? (
+            <Collapse
+              variant='default'
+              bordered={false}
+              open={!isCollapsed}
+              onOpenChange={handleCollapsedChange}
+              title={titleContent}
+              titleClassName='w-full cursor-pointer'
+              contentClassName='p-0'
+              fullWidth={true}
+            >
+              {cardContent}
+            </Collapse>
+          ) : (
+            <>
+              {(title || subtitle) && (
+                <div className='mb-4'>
+                  {title && <h2 className={getTitleClasses()}>{title}</h2>}
+                  {subtitle && (
+                    <p className={getSubtitleClasses()}>{subtitle}</p>
+                  )}
+                </div>
+              )}
+              {hasContent && cardContent}
+            </>
+          )}
+        </div>
+      </>
+    );
+  };
+
   if (variant === 'image-full' && image) {
     return (
       <div className={getCardClasses()} {...props}>
-        <figure>
-          <Image
-            src={image}
-            alt={imageAlt || title || 'Card image'}
-            className={getImageClasses()}
-          />
-        </figure>
-        <div className={getBodyClasses()}>
-          {title && <h2 className={getTitleClasses()}>{title}</h2>}
-          {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
-          {children}
-          {actions && <div className={getActionsClasses()}>{actions}</div>}
-        </div>
-        {footer && <div className={getFooterClasses()}>{footer}</div>}
+        {renderCardContent()}
       </div>
     );
   }
 
   return (
     <div className={getCardClasses()} {...props}>
-      {image && (
-        <figure>
-          <Image
-            src={image}
-            alt={imageAlt || title || 'Card image'}
-            className={getImageClasses()}
-          />
-        </figure>
-      )}
-      <div className={getBodyClasses()}>
-        {title && <h2 className={getTitleClasses()}>{title}</h2>}
-        {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
-        {children}
-        {actions && <div className={getActionsClasses()}>{actions}</div>}
-      </div>
-      {footer && <div className={getFooterClasses()}>{footer}</div>}
+      {renderCardContent()}
     </div>
   );
 };
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 8506f65c..50d68017 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -26,6 +26,9 @@ export type CollapseProps = {
   disabled?: boolean;
   /** Allow only one open at a time by switching to radio input */
   asRadio?: boolean;
+  /** Force full width instead of auto-fit when collapsed
+   * (Khusus justify-between dan justify-end) */
+  fullWidth?: boolean;
   /** Extra classnames */
   className?: string;
   titleClassName?: string;
@@ -44,6 +47,7 @@ export const Collapse = ({
   bordered,
   disabled,
   asRadio = false,
+  fullWidth,
   className,
   titleClassName,
   contentClassName,
@@ -68,9 +72,9 @@ export const Collapse = ({
     'collapse',
     variant === 'arrow' && 'collapse-arrow',
     variant === 'plus' && 'collapse-plus',
-    bordered && 'border base-content/20 border-opacity-20 rounded',
+    bordered && 'border base-content/20 border-opacity-20 rounded-box',
     disabled && 'opacity-60 pointer-events-none',
-    !open && 'w-fit',
+    !fullWidth && !open && 'w-fit',
     className
   );
 

From e5d9612e291cae42225a73c9b706aff645772c30 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 13 Nov 2025 15:50:11 +0700
Subject: [PATCH 061/168] refactor(FE-208): update 'Purchase' title to
 'Pembelian' in constants

---
 src/config/constant.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index e8ea0a81..9b06f9d9 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -41,7 +41,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
   },
 
   {
-    title: 'Purchase',
+    title: 'Pembelian',
     link: '/purchase',
     icon: 'gg:shopping-cart',
   },

From 7485919e528012405b1dc4e6d2b8c0a4518da239 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 13 Nov 2025 16:43:08 +0700
Subject: [PATCH 062/168] feat(FE-208): implement purchase order detail view
 with collapsible sections and summary table

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 307 +++++++++++++++++-
 1 file changed, 306 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index ab837e03..9e0a70f5 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -1,18 +1,67 @@
 'use client';
 
 import { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
 
 import ApprovalSteps, {
   formatGroupedApprovalsToApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
+import Table from '@/components/Table';
 
 import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
+import Card from '@/components/Card';
 
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
 }
 
+interface PurchaseOrderItem {
+  id: number;
+  product: string;
+  productType: string;
+  quantity: number;
+  unit: string;
+  unitPrice: number;
+  total: number;
+}
+
+interface PurchaseOrderInfo {
+  businessUnit: string;
+  area: string;
+  location: string;
+  warehouse: string;
+  vendorName: string;
+  vendorAddress: string;
+  dueDate: string;
+  number: string;
+  poNumber: string;
+}
+
+const dummyPurchaseOrderInfo: PurchaseOrderInfo = {
+  businessUnit: 'PT MITRA BERLIAN UNGGAS',
+  area: 'Banten 2',
+  location: 'FARM PASIR TAPLOK',
+  warehouse: 'GUDANG PASIR TAPLOK 1',
+  vendorName: 'PT. CHAROEN POKPHAND JAYA FARM',
+  vendorAddress: '-',
+  dueDate: '13-Nov-2025 (1 hari)',
+  number: 'PR-MBU-01837',
+  poNumber: 'Belum dibuat',
+};
+
+const dummyPurchaseOrderItems: PurchaseOrderItem[] = [
+  {
+    id: 1,
+    product: 'CP Vaksin',
+    productType: 'DOC',
+    quantity: 10000,
+    unit: 'Ekor',
+    unitPrice: 6500,
+    total: 65000000,
+  },
+];
+
 const dummyGroupedApprovals: BaseGroupedApproval[] = [
   {
     step_number: 1,
@@ -113,6 +162,8 @@ const dummyGroupedApprovals: BaseGroupedApproval[] = [
 
 const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
   // ===== STATIC DATA =====
+  const purchaseOrderInfo = dummyPurchaseOrderInfo;
+  const purchaseOrderItems = dummyPurchaseOrderItems;
   const groupedApprovals = dummyGroupedApprovals;
   const latestApproval =
     groupedApprovals[groupedApprovals.length - 1]?.approvals[0];
@@ -133,16 +184,270 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
     }
   }, [groupedApprovals, latestApproval]);
 
+  const totalBeforeTax = useMemo(() => {
+    return purchaseOrderItems.reduce((sum, item) => sum + item.total, 0);
+  }, [purchaseOrderItems]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 2,
+    }).format(value);
+  };
+
+  const formatNumber = (value: number) => {
+    return new Intl.NumberFormat('id-ID').format(value);
+  };
+
+  const purchaseOrderColumns: ColumnDef<PurchaseOrderItem>[] = [
+    {
+      accessorKey: 'product',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'productType',
+      header: 'Jenis Produk',
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Jumlah',
+      cell: (props) => formatNumber(props.getValue() as number),
+    },
+    {
+      accessorKey: 'unit',
+      header: 'Satuan',
+    },
+    {
+      accessorKey: 'unitPrice',
+      header: 'Harga Satuan',
+      cell: (props) => formatCurrency(props.getValue() as number),
+    },
+    {
+      accessorKey: 'total',
+      header: 'Total (Rp.)',
+      cell: (props) => formatCurrency(props.getValue() as number),
+    },
+  ];
+
+  const summaryData = [
+    {
+      label: 'Total Sebelum Pajak',
+      value: totalBeforeTax,
+    },
+    {
+      label: 'Total Pembayaran',
+      value: totalBeforeTax,
+    },
+  ];
+
+  const summaryColumns: ColumnDef<(typeof summaryData)[0]>[] = [
+    {
+      accessorKey: 'label',
+      header: '',
+      cell: (props) => (
+        <span className='font-semibold text-gray-700 text-sm'>
+          {props.getValue() as string}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'value',
+      header: '',
+      cell: (props) => (
+        <span className='font-semibold text-gray-900 text-sm text-right'>
+          {formatCurrency(props.getValue() as number)}
+        </span>
+      ),
+    },
+  ];
+
   return (
     <section className='w-full'>
       {/* Steps */}
       {approvalSteps.length > 0 ? (
-        <ApprovalSteps approvals={approvalSteps} />
+        <div className='my-8'>
+          <ApprovalSteps approvals={approvalSteps} />
+        </div>
       ) : (
         <div className='text-center py-8'>
           <p className='text-gray-500'>Status approval tidak tersedia</p>
         </div>
       )}
+
+      {/* Detail Purchase Order */}
+      <Card
+        collapsible
+        title='Detail Purchase Order'
+        variant='bordered'
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        {/* Order Information */}
+        <div className='bg-gray-50 rounded-lg p-6 mb-8'>
+          <h3 className='text-lg font-semibold text-gray-800 mb-6 pb-3 border-b border-gray-200'>
+            Informasi Pesanan
+          </h3>
+          <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4'>
+            {/* Kolom 1 */}
+            <div className='space-y-4'>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Unit Bisnis
+                  </span>
+                  <span className='text-gray-900 font-medium ml-3 break-all'>
+                    {purchaseOrderInfo.businessUnit}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Area
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    {purchaseOrderInfo.area}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Lokasi
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    {purchaseOrderInfo.location}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Gudang Penyimpanan
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    {purchaseOrderInfo.warehouse}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Kolom 2 */}
+            <div className='space-y-4'>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Nama Vendor
+                  </span>
+                  <span className='text-gray-900 font-medium ml-3 break-all'>
+                    {purchaseOrderInfo.vendorName}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Alamat Vendor
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    {purchaseOrderInfo.vendorAddress}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Tgl. Jatuh Tempo
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all'>
+                    {purchaseOrderInfo.dueDate}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Nomor
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
+                    {purchaseOrderInfo.number}
+                  </span>
+                </div>
+              </div>
+              <div className='group'>
+                <div className='flex items-start'>
+                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
+                    Nomor PO
+                  </span>
+                  <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
+                    {purchaseOrderInfo.poNumber}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Item Pembelian Section */}
+        <div className='mb-8'>
+          <h3 className='text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200'>
+            Item Pembelian
+          </h3>
+          <div className='rounded-lg border border-gray-200 overflow-hidden'>
+            {/* Product Table */}
+            <div className='overflow-x-auto'>
+              <Table<PurchaseOrderItem>
+                data={purchaseOrderItems}
+                columns={purchaseOrderColumns}
+                isLoading={false}
+                className={{
+                  containerClassName: 'm-0',
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto',
+                  headerRowClassName: 'bg-gray-50 border-b border-gray-200',
+                  headerColumnClassName:
+                    'px-6 py-4 text-sm font-semibold text-gray-700 text-left',
+                  bodyRowClassName:
+                    'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                  bodyColumnClassName: 'px-6 py-4 text-sm text-gray-900',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            </div>
+
+            {/* Bottom Section - Catatan dan Total */}
+            <div className='border-t border-gray-200 grid grid-cols-1 lg:grid-cols-5 divide-x divide-gray-200'>
+              {/* Catatan Section */}
+              <div className='lg:col-span-3 p-6 border-r border-gray-200'>
+                <h4 className='font-medium text-gray-700 mb-3'>Catatan</h4>
+                <div className='text-gray-900 min-h-[60px] italic text-sm'></div>
+              </div>
+
+              {/* Summary Section */}
+              <div className='lg:col-span-2 p-6'>
+                <Table
+                  data={summaryData}
+                  columns={summaryColumns}
+                  isLoading={false}
+                  className={{
+                    containerClassName: 'm-0',
+                    tableWrapperClassName: 'overflow-x-auto',
+                    tableClassName: 'w-full table-auto',
+                    headerRowClassName: 'hidden',
+                    headerColumnClassName: 'hidden',
+                    paginationClassName: 'hidden',
+                    bodyRowClassName:
+                      'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                    bodyColumnClassName: 'px-6 py-4 text-sm text-gray-900',
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
     </section>
   );
 };

From 1b64c1f5d1447c8bf4e073684069fdfbbbc15e1e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 09:05:58 +0700
Subject: [PATCH 063/168] feat(FE-208): add goods receipt section with table
 and dummy data in purchase order detail view

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 198 ++++++++++++++++++
 1 file changed, 198 insertions(+)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 9e0a70f5..5b6f37ea 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -26,6 +26,23 @@ interface PurchaseOrderItem {
   total: number;
 }
 
+interface GoodsReceiptItem {
+  id: number;
+  tanggalPenerimaan: string;
+  gudangTujuan: string;
+  noSuratJalan: string;
+  dokumenSuratJalan: string;
+  noArmada: string;
+  pengangkut: string;
+  jumlahTotal: string;
+  jumlahDiterima: string;
+  jumlahRetur: string;
+  ekspedisi: string;
+  transportPerItem: string;
+  transportTotal: string;
+  status?: 'diterima' | 'belum-diterima';
+}
+
 interface PurchaseOrderInfo {
   businessUnit: string;
   area: string;
@@ -62,6 +79,103 @@ const dummyPurchaseOrderItems: PurchaseOrderItem[] = [
   },
 ];
 
+const dummyGoodsReceiptItems: GoodsReceiptItem[] = [
+  {
+    id: 1,
+    tanggalPenerimaan: '1 Jan 1970 00:00',
+    gudangTujuan: 'Gudang A',
+    noSuratJalan: 'NSJ-1',
+    dokumenSuratJalan: 'details',
+    noArmada: 'NAP-1',
+    pengangkut: 'details',
+    jumlahTotal: 'Rp10.000,00',
+    jumlahDiterima: 'details',
+    jumlahRetur: 'details',
+    ekspedisi: 'Ekspedisi 1',
+    transportPerItem: 'details',
+    transportTotal: 'Rp1.000,00',
+  },
+  {
+    id: 2,
+    tanggalPenerimaan: '1 Jan 1970 00:00',
+    gudangTujuan: 'Gudang A',
+    noSuratJalan: 'NSJ-1',
+    dokumenSuratJalan: 'details',
+    noArmada: 'NAP-1',
+    pengangkut: 'details',
+    jumlahTotal: 'Rp10.000,00',
+    jumlahDiterima: 'details',
+    jumlahRetur: 'Rp0',
+    ekspedisi: 'Ekspedisi 1',
+    transportPerItem: 'details',
+    transportTotal: 'Rp10.000,00',
+  },
+  {
+    id: 3,
+    tanggalPenerimaan: '1 Jan 1970 00:00',
+    gudangTujuan: 'Gudang A',
+    noSuratJalan: 'NSJ-1',
+    dokumenSuratJalan: 'details',
+    noArmada: 'NAP-1',
+    pengangkut: 'details',
+    jumlahTotal: 'Rp10.000,00',
+    jumlahDiterima: 'Jumlah Produk Diterima',
+    jumlahRetur: 'Rp0.000,00',
+    ekspedisi: 'Ekspedisi 1',
+    transportPerItem: 'details',
+    transportTotal: 'Rp10.000,00',
+    status: 'diterima',
+  },
+  {
+    id: 4,
+    tanggalPenerimaan: '1 Jan 1970 00:00',
+    gudangTujuan: 'Gudang A',
+    noSuratJalan: 'NSJ-1',
+    dokumenSuratJalan: 'details',
+    noArmada: 'NAP-1',
+    pengangkut: 'details',
+    jumlahTotal: 'Rp10.000,00',
+    jumlahDiterima: 'Jumlah Produk Belum Diterima',
+    jumlahRetur: 'Rp0.000,00',
+    ekspedisi: 'Ekspedisi 1',
+    transportPerItem: 'details',
+    transportTotal: 'Rp10.000,00',
+    status: 'belum-diterima',
+  },
+  {
+    id: 5,
+    tanggalPenerimaan: '1 Jan 1970 00:00',
+    gudangTujuan: 'Gudang A',
+    noSuratJalan: 'NSJ-1',
+    dokumenSuratJalan: 'details',
+    noArmada: 'NAP-1',
+    pengangkut: 'details',
+    jumlahTotal: 'Rp10.000,00',
+    jumlahDiterima: 'Nominal Produk Diterima',
+    jumlahRetur: 'Rp0.000,00',
+    ekspedisi: 'Ekspedisi 1',
+    transportPerItem: 'details',
+    transportTotal: 'Rp10.000,00',
+    status: 'diterima',
+  },
+  {
+    id: 6,
+    tanggalPenerimaan: '1 Jan 1970 00:00',
+    gudangTujuan: 'Gudang A',
+    noSuratJalan: 'NSJ-1',
+    dokumenSuratJalan: 'details',
+    noArmada: 'NAP-1',
+    pengangkut: 'details',
+    jumlahTotal: 'Rp10.000,00',
+    jumlahDiterima: 'Nominal Produk Belum Diterima',
+    jumlahRetur: 'Rp0.000,00',
+    ekspedisi: 'Ekspedisi 1',
+    transportPerItem: 'details',
+    transportTotal: 'Rp10.000,00',
+    status: 'belum-diterima',
+  },
+];
+
 const dummyGroupedApprovals: BaseGroupedApproval[] = [
   {
     step_number: 1,
@@ -164,6 +278,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
   // ===== STATIC DATA =====
   const purchaseOrderInfo = dummyPurchaseOrderInfo;
   const purchaseOrderItems = dummyPurchaseOrderItems;
+  const goodsReceiptItems = dummyGoodsReceiptItems;
   const groupedApprovals = dummyGroupedApprovals;
   const latestApproval =
     groupedApprovals[groupedApprovals.length - 1]?.approvals[0];
@@ -230,6 +345,57 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
     },
   ];
 
+  const goodsReceiptColumns: ColumnDef<GoodsReceiptItem>[] = [
+    {
+      accessorKey: 'tanggalPenerimaan',
+      header: 'Tanggal Penerimaan',
+    },
+    {
+      accessorKey: 'gudangTujuan',
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'noSuratJalan',
+      header: 'No. Surat Jalan',
+    },
+    {
+      accessorKey: 'dokumenSuratJalan',
+      header: 'Dokumen Surat Jalan',
+    },
+    {
+      accessorKey: 'noArmada',
+      header: 'No. Armada',
+    },
+    {
+      accessorKey: 'pengangkut',
+      header: 'Pengangkut',
+    },
+    {
+      accessorKey: 'jumlahTotal',
+      header: 'Jumlah Total',
+    },
+    {
+      accessorKey: 'jumlahDiterima',
+      header: 'Jumlah Diterima',
+    },
+    {
+      accessorKey: 'jumlahRetur',
+      header: 'Jumlah Retur',
+    },
+    {
+      accessorKey: 'ekspedisi',
+      header: 'Ekspedisi',
+    },
+    {
+      accessorKey: 'transportPerItem',
+      header: 'Transport /Item',
+    },
+    {
+      accessorKey: 'transportTotal',
+      header: 'Transport Total',
+    },
+  ];
+
   const summaryData = [
     {
       label: 'Total Sebelum Pajak',
@@ -448,6 +614,38 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
           </div>
         </div>
       </Card>
+
+      {/* Penerimaan Barang */}
+      <Card
+        collapsible
+        title='Penerimaan Barang'
+        variant='bordered'
+        className={{
+          wrapper: 'w-full mt-8',
+        }}
+      >
+        <div className='rounded-lg border border-gray-200 overflow-hidden'>
+          <div className='overflow-x-auto'>
+            <Table<GoodsReceiptItem>
+              data={goodsReceiptItems}
+              columns={goodsReceiptColumns}
+              isLoading={false}
+              className={{
+                containerClassName: 'm-0',
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto',
+                headerRowClassName: 'bg-gray-50 border-b border-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
+                bodyRowClassName:
+                  'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                bodyColumnClassName: 'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </div>
+        </div>
+      </Card>
     </section>
   );
 };

From 1be61ae4ff73cf44514a57b5cb4a199ad7c214b1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 09:09:23 +0700
Subject: [PATCH 064/168] feat(FE-212): extend PurchaseItem type with
 additional fields for enhanced purchase details

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

diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 74f91af7..00546e9b 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -8,10 +8,20 @@ import { Location } from '@/types/api/master-data/location';
 
 export type PurchaseItem = {
   id: number;
+  purchase_id?: number;
   warehouse: Warehouse;
   product: Product;
   product_warehouse: ProductWarehouse;
   quantity: number;
+  sub_qty: number;
+  total_qty: number;
+  total_used: number;
+  price: number;
+  total_price: number;
+  received_date?: string | null;
+  travel_number?: string | null;
+  travel_number_docs?: string | null;
+  vehicle_number?: string | null;
 };
 
 export type BasePurchase = {

From f98a5971155cb0b44726b9872a475a6ee098c9c8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 10:11:13 +0700
Subject: [PATCH 065/168] refactor(FE-208): refactor PurchaseOrderDetail to
 integrate Purchase data and update Goods Receipt structure

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 429 ++++++++++--------
 1 file changed, 229 insertions(+), 200 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 5b6f37ea..9e78469e 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -11,168 +11,173 @@ import Table from '@/components/Table';
 import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 import Card from '@/components/Card';
+import { Purchase, PurchaseItem } from '@/types/api/purchase/purchase';
+import {
+  createdUser,
+  dummyAreas,
+  dummyLocations,
+  dummyProductWarehouses,
+  dummyWarehouses,
+} from '@/dummy/marketing.dummy';
 
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
+  data?: Purchase;
 }
 
-interface PurchaseOrderItem {
-  id: number;
-  product: string;
-  productType: string;
-  quantity: number;
-  unit: string;
-  unitPrice: number;
-  total: number;
-}
-
-interface GoodsReceiptItem {
-  id: number;
-  tanggalPenerimaan: string;
-  gudangTujuan: string;
-  noSuratJalan: string;
-  dokumenSuratJalan: string;
-  noArmada: string;
-  pengangkut: string;
-  jumlahTotal: string;
-  jumlahDiterima: string;
-  jumlahRetur: string;
-  ekspedisi: string;
-  transportPerItem: string;
-  transportTotal: string;
-  status?: 'diterima' | 'belum-diterima';
-}
-
-interface PurchaseOrderInfo {
-  businessUnit: string;
-  area: string;
-  location: string;
-  warehouse: string;
-  vendorName: string;
-  vendorAddress: string;
-  dueDate: string;
-  number: string;
-  poNumber: string;
-}
-
-const dummyPurchaseOrderInfo: PurchaseOrderInfo = {
-  businessUnit: 'PT MITRA BERLIAN UNGGAS',
-  area: 'Banten 2',
-  location: 'FARM PASIR TAPLOK',
-  warehouse: 'GUDANG PASIR TAPLOK 1',
-  vendorName: 'PT. CHAROEN POKPHAND JAYA FARM',
-  vendorAddress: '-',
-  dueDate: '13-Nov-2025 (1 hari)',
-  number: 'PR-MBU-01837',
-  poNumber: 'Belum dibuat',
+const dummyPurchaseData: Purchase = {
+  id: 1,
+  pr_number: 'PR-MBU-01837',
+  po_number: 'Belum dibuat',
+  po_date: '2025-01-10T00:00:00Z',
+  supplier: {
+    id: 1,
+    name: 'PT. CHAROEN POKPHAND JAYA FARM',
+    alias: '',
+    pic: '',
+    type: '',
+    category: '',
+    hatchery: '',
+    phone: '',
+    email: '',
+    address: '-',
+    npwp: '',
+    account_number: '',
+    due_date: 0,
+    balance: 0,
+    created_at: '2025-01-01T00:00:00Z',
+    updated_at: '2025-01-01T00:00:00Z',
+    created_user: createdUser,
+  },
+  credit_term: 30,
+  due_date: '2025-11-13T00:00:00Z',
+  grand_total: 65000000,
+  notes: null,
+  area: dummyAreas[0],
+  location: dummyLocations[0],
+  items: [
+    {
+      id: 1,
+      purchase_id: 1,
+      product: {
+        id: 1,
+        name: 'CP Vaksin',
+        brand: '',
+        sku: '',
+        product_price: 0,
+        selling_price: 0,
+        tax: 0,
+        expiry_period: 0,
+        uom: {
+          id: 1,
+          name: 'Ekor',
+          created_user: {
+            id: 1,
+            id_user: 1,
+            email: 'hello@gmail.com',
+            name: 'Admin',
+          },
+          created_at: '2025-01-01T00:00:00Z',
+          updated_at: '2025-01-01T00:00:00Z',
+        },
+        product_category: {
+          id: 1,
+          code: 'DOC',
+          name: 'DOC',
+          created_user: {
+            id: 1,
+            id_user: 1,
+            email: 'hello@gmail.com',
+            name: 'Admin',
+          },
+          created_at: '2025-01-01T00:00:00Z',
+          updated_at: '2025-01-01T00:00:00Z',
+        },
+        suppliers: [],
+        flags: [],
+        created_user: {
+          id: 1,
+          id_user: 1,
+          email: 'hello@gmail.com',
+          name: 'Admin',
+        },
+        created_at: '2025-01-01T00:00:00Z',
+        updated_at: '2025-01-01T00:00:00Z',
+      },
+      product_warehouse: dummyProductWarehouses[0],
+      quantity: 10000,
+      sub_qty: 10000,
+      total_qty: 10000,
+      total_used: 0,
+      price: 6500,
+      total_price: 65000000,
+      received_date: null,
+      travel_number: null,
+      travel_number_docs: null,
+      vehicle_number: null,
+      warehouse: dummyWarehouses[0],
+    },
+  ],
+  created_at: '2025-01-10T00:00:00Z',
+  updated_at: '2025-01-10T00:00:00Z',
+  created_by: 1,
+  deleted_at: null,
+  created_user: createdUser,
+  warehouse: dummyWarehouses[0],
 };
 
-const dummyPurchaseOrderItems: PurchaseOrderItem[] = [
+// Goods Receipt data - using items from PurchaseItem with received data
+const dummyGoodsReceiptItems: PurchaseItem[] = [
   {
     id: 1,
-    product: 'CP Vaksin',
-    productType: 'DOC',
+    purchase_id: 1,
+    product: {
+      id: 1,
+      product_category: {
+        id: 1,
+        code: 'DOC',
+        name: 'DOC',
+        created_user: createdUser,
+        created_at: '2025-01-01T00:00:00Z',
+        updated_at: '2025-01-01T00:00:00Z',
+      },
+      name: 'CP Vaksin',
+      brand: '',
+      sku: '',
+      product_price: 0,
+      selling_price: 0,
+      tax: 0,
+      expiry_period: 0,
+      uom: {
+        id: 1,
+        name: 'Ekor',
+        created_user: createdUser,
+        created_at: '2025-01-01T00:00:00Z',
+        updated_at: '2025-01-01T00:00:00Z',
+      },
+      suppliers: [],
+      flags: [],
+      created_user: {
+        id: 1,
+        id_user: 1,
+        email: 'hello@gmail.com',
+        name: 'Admin',
+      },
+      created_at: '2025-01-01T00:00:00Z',
+      updated_at: '2025-01-01T00:00:00Z',
+    },
+    product_warehouse: dummyProductWarehouses[0],
     quantity: 10000,
-    unit: 'Ekor',
-    unitPrice: 6500,
-    total: 65000000,
-  },
-];
-
-const dummyGoodsReceiptItems: GoodsReceiptItem[] = [
-  {
-    id: 1,
-    tanggalPenerimaan: '1 Jan 1970 00:00',
-    gudangTujuan: 'Gudang A',
-    noSuratJalan: 'NSJ-1',
-    dokumenSuratJalan: 'details',
-    noArmada: 'NAP-1',
-    pengangkut: 'details',
-    jumlahTotal: 'Rp10.000,00',
-    jumlahDiterima: 'details',
-    jumlahRetur: 'details',
-    ekspedisi: 'Ekspedisi 1',
-    transportPerItem: 'details',
-    transportTotal: 'Rp1.000,00',
-  },
-  {
-    id: 2,
-    tanggalPenerimaan: '1 Jan 1970 00:00',
-    gudangTujuan: 'Gudang A',
-    noSuratJalan: 'NSJ-1',
-    dokumenSuratJalan: 'details',
-    noArmada: 'NAP-1',
-    pengangkut: 'details',
-    jumlahTotal: 'Rp10.000,00',
-    jumlahDiterima: 'details',
-    jumlahRetur: 'Rp0',
-    ekspedisi: 'Ekspedisi 1',
-    transportPerItem: 'details',
-    transportTotal: 'Rp10.000,00',
-  },
-  {
-    id: 3,
-    tanggalPenerimaan: '1 Jan 1970 00:00',
-    gudangTujuan: 'Gudang A',
-    noSuratJalan: 'NSJ-1',
-    dokumenSuratJalan: 'details',
-    noArmada: 'NAP-1',
-    pengangkut: 'details',
-    jumlahTotal: 'Rp10.000,00',
-    jumlahDiterima: 'Jumlah Produk Diterima',
-    jumlahRetur: 'Rp0.000,00',
-    ekspedisi: 'Ekspedisi 1',
-    transportPerItem: 'details',
-    transportTotal: 'Rp10.000,00',
-    status: 'diterima',
-  },
-  {
-    id: 4,
-    tanggalPenerimaan: '1 Jan 1970 00:00',
-    gudangTujuan: 'Gudang A',
-    noSuratJalan: 'NSJ-1',
-    dokumenSuratJalan: 'details',
-    noArmada: 'NAP-1',
-    pengangkut: 'details',
-    jumlahTotal: 'Rp10.000,00',
-    jumlahDiterima: 'Jumlah Produk Belum Diterima',
-    jumlahRetur: 'Rp0.000,00',
-    ekspedisi: 'Ekspedisi 1',
-    transportPerItem: 'details',
-    transportTotal: 'Rp10.000,00',
-    status: 'belum-diterima',
-  },
-  {
-    id: 5,
-    tanggalPenerimaan: '1 Jan 1970 00:00',
-    gudangTujuan: 'Gudang A',
-    noSuratJalan: 'NSJ-1',
-    dokumenSuratJalan: 'details',
-    noArmada: 'NAP-1',
-    pengangkut: 'details',
-    jumlahTotal: 'Rp10.000,00',
-    jumlahDiterima: 'Nominal Produk Diterima',
-    jumlahRetur: 'Rp0.000,00',
-    ekspedisi: 'Ekspedisi 1',
-    transportPerItem: 'details',
-    transportTotal: 'Rp10.000,00',
-    status: 'diterima',
-  },
-  {
-    id: 6,
-    tanggalPenerimaan: '1 Jan 1970 00:00',
-    gudangTujuan: 'Gudang A',
-    noSuratJalan: 'NSJ-1',
-    dokumenSuratJalan: 'details',
-    noArmada: 'NAP-1',
-    pengangkut: 'details',
-    jumlahTotal: 'Rp10.000,00',
-    jumlahDiterima: 'Nominal Produk Belum Diterima',
-    jumlahRetur: 'Rp0.000,00',
-    ekspedisi: 'Ekspedisi 1',
-    transportPerItem: 'details',
-    transportTotal: 'Rp10.000,00',
-    status: 'belum-diterima',
+    sub_qty: 10000,
+    total_qty: 10000,
+    total_used: 0,
+    price: 6500,
+    total_price: 65000000,
+    received_date: '2025-01-15T00:00:00Z',
+    travel_number: 'NSJ-1',
+    travel_number_docs: '/documents/nsj-1.pdf',
+    vehicle_number: 'NAP-1',
+    warehouse: dummyWarehouses[0],
   },
 ];
 
@@ -274,10 +279,13 @@ const dummyGroupedApprovals: BaseGroupedApproval[] = [
   },
 ];
 
-const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
+const PurchaseOrderDetail = ({
+  type = 'detail',
+  data,
+}: PurchaseOrderDetailProps) => {
   // ===== STATIC DATA =====
-  const purchaseOrderInfo = dummyPurchaseOrderInfo;
-  const purchaseOrderItems = dummyPurchaseOrderItems;
+  const purchaseData = data || dummyPurchaseData;
+  const purchaseOrderItems = purchaseData.items || [];
   const goodsReceiptItems = dummyGoodsReceiptItems;
   const groupedApprovals = dummyGroupedApprovals;
   const latestApproval =
@@ -300,7 +308,10 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
   }, [groupedApprovals, latestApproval]);
 
   const totalBeforeTax = useMemo(() => {
-    return purchaseOrderItems.reduce((sum, item) => sum + item.total, 0);
+    return purchaseOrderItems.reduce(
+      (sum, item) => sum + (item.total_price || 0),
+      0
+    );
   }, [purchaseOrderItems]);
 
   const formatCurrency = (value: number) => {
@@ -315,14 +326,17 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
     return new Intl.NumberFormat('id-ID').format(value);
   };
 
-  const purchaseOrderColumns: ColumnDef<PurchaseOrderItem>[] = [
+  const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
     {
-      accessorKey: 'product',
+      accessorKey: 'product.name',
       header: 'Produk',
+      cell: (props) => props.row.original.product?.name || '-',
     },
     {
-      accessorKey: 'productType',
+      accessorKey: 'product.product_category.name',
       header: 'Jenis Produk',
+      cell: (props) =>
+        props.row.original.product?.product_category?.name || '-',
     },
     {
       accessorKey: 'quantity',
@@ -330,69 +344,83 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
       cell: (props) => formatNumber(props.getValue() as number),
     },
     {
-      accessorKey: 'unit',
+      accessorKey: 'product.uom.name',
       header: 'Satuan',
+      cell: (props) => props.row.original.product?.uom?.name || '-',
     },
     {
-      accessorKey: 'unitPrice',
+      accessorKey: 'price',
       header: 'Harga Satuan',
       cell: (props) => formatCurrency(props.getValue() as number),
     },
     {
-      accessorKey: 'total',
+      accessorKey: 'total_price',
       header: 'Total (Rp.)',
       cell: (props) => formatCurrency(props.getValue() as number),
     },
   ];
 
-  const goodsReceiptColumns: ColumnDef<GoodsReceiptItem>[] = [
+  const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [
     {
-      accessorKey: 'tanggalPenerimaan',
+      accessorKey: 'received_date',
       header: 'Tanggal Penerimaan',
+      cell: (props) =>
+        props.row.original.received_date
+          ? new Date(props.row.original.received_date).toLocaleDateString(
+              'id-ID'
+            )
+          : '-',
     },
     {
-      accessorKey: 'gudangTujuan',
+      accessorKey: 'product_warehouse.warehouse.name',
       header: 'Gudang Tujuan',
+      cell: (props) =>
+        props.row.original.product_warehouse?.warehouse?.name || '-',
     },
     {
-      accessorKey: 'noSuratJalan',
+      accessorKey: 'travel_number',
       header: 'No. Surat Jalan',
+      cell: (props) => props.row.original.travel_number || '-',
     },
     {
-      accessorKey: 'dokumenSuratJalan',
+      accessorKey: 'travel_number_docs',
       header: 'Dokumen Surat Jalan',
+      cell: (props) => props.row.original.travel_number_docs || '-',
     },
     {
-      accessorKey: 'noArmada',
+      accessorKey: 'vehicle_number',
       header: 'No. Armada',
+      cell: (props) => props.row.original.vehicle_number || '-',
     },
     {
       accessorKey: 'pengangkut',
       header: 'Pengangkut',
+      cell: (props) => props.row.original.product?.name || '-',
     },
     {
-      accessorKey: 'jumlahTotal',
+      accessorKey: 'quantity',
       header: 'Jumlah Total',
+      cell: (props) => formatNumber(props.getValue() as number),
     },
     {
-      accessorKey: 'jumlahDiterima',
+      accessorKey: 'sub_qty',
       header: 'Jumlah Diterima',
-    },
-    {
-      accessorKey: 'jumlahRetur',
-      header: 'Jumlah Retur',
+      cell: (props) => formatNumber(props.getValue() as number),
     },
     {
       accessorKey: 'ekspedisi',
       header: 'Ekspedisi',
+      cell: (props) => 'Ekspedisi 1',
     },
     {
-      accessorKey: 'transportPerItem',
+      accessorKey: 'price',
       header: 'Transport /Item',
+      cell: (props) => formatCurrency(props.getValue() as number),
     },
     {
-      accessorKey: 'transportTotal',
+      accessorKey: 'total_price',
       header: 'Transport Total',
+      cell: (props) => formatCurrency(props.getValue() as number),
     },
   ];
 
@@ -458,23 +486,13 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
           <div className='grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4'>
             {/* Kolom 1 */}
             <div className='space-y-4'>
-              <div className='group'>
-                <div className='flex items-start'>
-                  <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Unit Bisnis
-                  </span>
-                  <span className='text-gray-900 font-medium ml-3 break-all'>
-                    {purchaseOrderInfo.businessUnit}
-                  </span>
-                </div>
-              </div>
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
                     Area
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseOrderInfo.area}
+                    {purchaseData.area?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -484,7 +502,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
                     Lokasi
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseOrderInfo.location}
+                    {purchaseData.location?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -494,7 +512,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
                     Gudang Penyimpanan
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseOrderInfo.warehouse}
+                    {purchaseData.warehouse?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -505,20 +523,20 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Nama Vendor
+                    Nama Supplier
                   </span>
                   <span className='text-gray-900 font-medium ml-3 break-all'>
-                    {purchaseOrderInfo.vendorName}
+                    {purchaseData.supplier?.name || '-'}
                   </span>
                 </div>
               </div>
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Alamat Vendor
+                    Alamat Supplier
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseOrderInfo.vendorAddress}
+                    {purchaseData.supplier?.address || '-'}
                   </span>
                 </div>
               </div>
@@ -528,7 +546,15 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
                     Tgl. Jatuh Tempo
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseOrderInfo.dueDate}
+                    {new Date(purchaseData.due_date).toLocaleDateString(
+                      'id-ID',
+                      {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                      }
+                    )}{' '}
+                    ({purchaseData.credit_term} hari)
                   </span>
                 </div>
               </div>
@@ -538,7 +564,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
                     Nomor
                   </span>
                   <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
-                    {purchaseOrderInfo.number}
+                    {purchaseData.pr_number}
                   </span>
                 </div>
               </div>
@@ -548,7 +574,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
                     Nomor PO
                   </span>
                   <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
-                    {purchaseOrderInfo.poNumber}
+                    {purchaseData.po_number || 'Belum dibuat'}
                   </span>
                 </div>
               </div>
@@ -564,7 +590,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             {/* Product Table */}
             <div className='overflow-x-auto'>
-              <Table<PurchaseOrderItem>
+              <Table<PurchaseItem>
                 data={purchaseOrderItems}
                 columns={purchaseOrderColumns}
                 isLoading={false}
@@ -588,7 +614,9 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
               {/* Catatan Section */}
               <div className='lg:col-span-3 p-6 border-r border-gray-200'>
                 <h4 className='font-medium text-gray-700 mb-3'>Catatan</h4>
-                <div className='text-gray-900 min-h-[60px] italic text-sm'></div>
+                <div className='text-gray-900 min-h-[60px] italic text-sm'>
+                  {purchaseData.notes || 'Tidak ada catatan'}
+                </div>
               </div>
 
               {/* Summary Section */}
@@ -626,7 +654,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
       >
         <div className='rounded-lg border border-gray-200 overflow-hidden'>
           <div className='overflow-x-auto'>
-            <Table<GoodsReceiptItem>
+            <Table<PurchaseItem>
               data={goodsReceiptItems}
               columns={goodsReceiptColumns}
               isLoading={false}
@@ -639,7 +667,8 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
                   'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
                 bodyRowClassName:
                   'border-b border-gray-100 hover:bg-gray-50 transition-colors',
-                bodyColumnClassName: 'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
+                bodyColumnClassName:
+                  'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
                 paginationClassName: 'hidden',
               }}
             />

From 1ab72b86375985795db246667903a6108cc35597 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 10:23:37 +0700
Subject: [PATCH 066/168] feat(FE-208): add staff and accept approval modals
 with action buttons in PurchaseOrderDetail

---
 .../pages/purchase/PurchaseTable.tsx          | 57 +--------------
 .../purchase/order/PurchaseOrderDetail.tsx    | 69 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 86338de9..ea466fc2 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -22,8 +22,6 @@ import TextInput from '@/components/input/TextInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { cn, formatDate, formatCurrency } from '@/lib/helper';
-import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
-import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
@@ -111,8 +109,6 @@ const PurchaseTable = () => {
 
   // Modal hooks
   const deleteModal = useModal();
-  const staffApprovalModal = useModal();
-  const acceptApprovalModal = useModal();
 
   // Supplier modal
   const {
@@ -287,30 +283,7 @@ const PurchaseTable = () => {
                 Tambah
               </Button>
 
-              <Button
-                onClick={() => staffApprovalModal.openModal()}
-                variant='outline'
-                color='info'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='mdi:account-check-outline' width={24} height={24} />
-                Staff Approval
-              </Button>
-
-              <Button
-                onClick={() => acceptApprovalModal.openModal()}
-                variant='outline'
-                color='success'
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='mdi:package-variant-closed-check'
-                  width={24}
-                  height={24}
-                />
-                Accept Approval
-              </Button>
-
+  
               {selectedRowIds.length > 0 && (
                 <Button
                   variant='outline'
@@ -447,34 +420,6 @@ const PurchaseTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      {/* Staff Approval Modal */}
-      <Modal
-        ref={staffApprovalModal.ref}
-        closeOnBackdrop
-        className={{
-          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
-        }}
-      >
-        <PurchaseOrderStaffApprovalForm
-          type='add'
-          onCancel={staffApprovalModal.closeModal}
-        />
-      </Modal>
-
-      {/* Accept Approval Modal */}
-      <Modal
-        ref={acceptApprovalModal.ref}
-        closeOnBackdrop
-        className={{
-          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
-        }}
-      >
-        <PurchaseOrderAcceptApprovalForm
-          type='add'
-          onCancel={acceptApprovalModal.closeModal}
-        />
-      </Modal>
     </>
   );
 };
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 9e78469e..059a7c5b 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -7,6 +7,12 @@ import ApprovalSteps, {
   formatGroupedApprovalsToApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
 import Table from '@/components/Table';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import { useModal } from '@/components/Modal';
+import Modal from '@/components/Modal';
+import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
+import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 
 import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
@@ -283,6 +289,10 @@ const PurchaseOrderDetail = ({
   type = 'detail',
   data,
 }: PurchaseOrderDetailProps) => {
+  // ===== MODAL HOOKS =====
+  const staffApprovalModal = useModal();
+  const acceptApprovalModal = useModal();
+
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
   const purchaseOrderItems = purchaseData.items || [];
@@ -458,6 +468,33 @@ const PurchaseOrderDetail = ({
 
   return (
     <section className='w-full'>
+      {/* Approval Action Buttons */}
+      <div className='flex flex-wrap gap-3 my-6'>
+        <Button
+          onClick={() => staffApprovalModal.openModal()}
+          variant='outline'
+          color='info'
+          className='w-full sm:w-fit'
+        >
+          <Icon icon='mdi:account-check-outline' width={20} height={20} />
+          Staff Approval
+        </Button>
+
+        <Button
+          onClick={() => acceptApprovalModal.openModal()}
+          variant='outline'
+          color='success'
+          className='w-full sm:w-fit'
+        >
+          <Icon
+            icon='mdi:package-variant-closed-check'
+            width={20}
+            height={20}
+          />
+          Accept Approval
+        </Button>
+      </div>
+
       {/* Steps */}
       {approvalSteps.length > 0 ? (
         <div className='my-8'>
@@ -509,7 +546,7 @@ const PurchaseOrderDetail = ({
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Gudang Penyimpanan
+                    Gudang
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
                     {purchaseData.warehouse?.name || '-'}
@@ -652,7 +689,7 @@ const PurchaseOrderDetail = ({
           wrapper: 'w-full mt-8',
         }}
       >
-        <div className='rounded-lg border border-gray-200 overflow-hidden'>
+        <div className='rounded-lg border border-gray-200 overflow-hidden mt-8'>
           <div className='overflow-x-auto'>
             <Table<PurchaseItem>
               data={goodsReceiptItems}
@@ -675,6 +712,34 @@ const PurchaseOrderDetail = ({
           </div>
         </div>
       </Card>
+
+      {/* Staff Approval Modal */}
+      <Modal
+        ref={staffApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='add'
+          onCancel={staffApprovalModal.closeModal}
+        />
+      </Modal>
+
+      {/* Accept Approval Modal */}
+      <Modal
+        ref={acceptApprovalModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='add'
+          onCancel={acceptApprovalModal.closeModal}
+        />
+      </Modal>
     </section>
   );
 };

From 3d49947c1e94322ce7066fdfb6d906f9c238e5ee Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 10:52:21 +0700
Subject: [PATCH 067/168] feat(FE-212): add manager approval requisition type
 and service with nullable notes

---
 .../form/order/PurchaseOrderForm.schema.ts    | 24 ++++++++++++++
 src/services/api/purchase.ts                  | 32 +++++++++++++++++--
 src/types/api/purchase/purchase.d.ts          |  6 +++-
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index ecdaf785..6385d2bb 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -14,6 +14,10 @@ type PurchaseRequisitionsStaffApprovalFormSchemaType = {
   }[];
 };
 
+type PurchaseRequisitionsManagerApprovalFormSchemaType = {
+  notes: string | null;
+};
+
 type PurchaseRequisitionsAcceptApprovalFormSchemaType = {
   notes: string | null;
   items: {
@@ -124,6 +128,11 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       ),
   });
 
+const PurchaseManagerApprovalObjectSchema: Yup.ObjectSchema<PurchaseRequisitionsManagerApprovalFormSchemaType> =
+  Yup.object({
+    notes: Yup.string().nullable().default(null),
+  });
+
 const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApprovalItemSchema> =
   Yup.object({
     purchase_item: Yup.object({
@@ -277,6 +286,21 @@ export type PurchaseRequisitionsStaffApprovalFormValues = Yup.InferType<
   typeof PurchaseRequisitionsStaffApprovalFormSchema
 >;
 
+export const PurchaseRequisitionsManagerApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsManagerApprovalFormSchemaType> =
+  PurchaseManagerApprovalObjectSchema;
+
+export const PurchaseRequisitionsManagerApprovalFormDefaultValues = (
+  purchase?: Purchase
+): PurchaseRequisitionsManagerApprovalFormSchemaType => {
+  return {
+    notes: purchase?.notes ?? null,
+  };
+};
+
+export type PurchaseRequisitionsManagerApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequisitionsManagerApprovalFormSchema
+>;
+
 export const PurchaseRequisitionsAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsAcceptApprovalFormSchemaType> =
   Yup.object({
     notes: Yup.string().nullable().default(null),
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 4768d94f..5553844e 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -3,6 +3,7 @@ import {
   Purchase,
   UpdatePurchaseRequisitionsPayload,
   CreateStaffApprovalRequisitionsPayload,
+  CreateManagerApprovalRequisitionsPayload,
   CreateAcceptApprovalRequisitionsPayload,
 } from '@/types/api/purchase/purchase';
 import { BaseApiService } from '@/services/api/base';
@@ -48,8 +49,6 @@ export class PurchaseRequisitionsService extends BaseApiService<
   }
 }
 
-export const PurchaseRequisitionsApi = new PurchaseRequisitionsService();
-
 export class StaffApprovalService extends BaseApiService<
   Purchase,
   CreateStaffApprovalRequisitionsPayload,
@@ -73,6 +72,29 @@ export class StaffApprovalService extends BaseApiService<
   }
 }
 
+export class ManagerApprovalService extends BaseApiService<
+  Purchase,
+  CreateManagerApprovalRequisitionsPayload,
+  CreateManagerApprovalRequisitionsPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  async createManagerApproval(
+    purchaseRequisitionId: number,
+    payload: CreateManagerApprovalRequisitionsPayload
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.customRequest<BaseApiResponse<{ message: string }>>(
+      `${purchaseRequisitionId}/approvals/manager`,
+      {
+        method: 'POST',
+        payload,
+      }
+    );
+  }
+}
+
 export class AcceptApprovalService extends BaseApiService<
   Purchase,
   CreateAcceptApprovalRequisitionsPayload,
@@ -96,10 +118,16 @@ export class AcceptApprovalService extends BaseApiService<
   }
 }
 
+export const PurchaseRequisitionsApi = new PurchaseRequisitionsService();
+
 export const StaffApprovalApi = new StaffApprovalService(
   '/purchases/requisitions'
 );
 
+export const ManagerApprovalApi = new ManagerApprovalService(
+  '/purchases/requisitions'
+);
+
 export const AcceptApprovalApi = new AcceptApprovalService(
   '/purchases/requisitions'
 );
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 00546e9b..561499e2 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -58,7 +58,7 @@ export type CreatePurchaseRequisitionsPayload = {
 };
 
 export type CreateStaffApprovalRequisitionsPayload = {
-  notes: string;
+  notes?: string | null;
   items: {
     purchase_item_id: number;
     price: number;
@@ -66,6 +66,10 @@ export type CreateStaffApprovalRequisitionsPayload = {
   }[];
 };
 
+export type CreateManagerApprovalRequisitionsPayload = {
+  notes?: string | null;
+};
+
 export type CreateAcceptApprovalRequisitionsPayload = {
   notes?: string;
   items: {

From 00e0202be2f62addf8e636a930b2526005c6ac6a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 10:52:36 +0700
Subject: [PATCH 068/168] feat(FE-208): add confirmation modal for manager
 approval with notes functionality

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 78 ++++++++++++++++++-
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 059a7c5b..2cb70bfa 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
 
 import ApprovalSteps, {
@@ -11,13 +11,18 @@ import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import { useModal } from '@/components/Modal';
 import Modal from '@/components/Modal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
 import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 
 import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 import Card from '@/components/Card';
-import { Purchase, PurchaseItem } from '@/types/api/purchase/purchase';
+import {
+  CreateManagerApprovalRequisitionsPayload,
+  Purchase,
+  PurchaseItem,
+} from '@/types/api/purchase/purchase';
 import {
   createdUser,
   dummyAreas,
@@ -25,6 +30,10 @@ import {
   dummyProductWarehouses,
   dummyWarehouses,
 } from '@/dummy/marketing.dummy';
+import { ManagerApprovalApi } from '@/services/api/purchase';
+import { isResponseError } from '@/lib/api-helper';
+import { toast } from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
@@ -290,6 +299,8 @@ const PurchaseOrderDetail = ({
   data,
 }: PurchaseOrderDetailProps) => {
   // ===== MODAL HOOKS =====
+  const searchParams = useSearchParams();
+  const confirmationModalWithNotes = useModal();
   const staffApprovalModal = useModal();
   const acceptApprovalModal = useModal();
 
@@ -301,6 +312,32 @@ const PurchaseOrderDetail = ({
   const latestApproval =
     groupedApprovals[groupedApprovals.length - 1]?.approvals[0];
 
+  // ===== SUBMISSION HANDLER =====
+  const createManagerApprovalHandler = useCallback(
+    async (payload: CreateManagerApprovalRequisitionsPayload) => {
+      const purchaseRequisitionId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : purchaseData?.id || 1;
+
+      if (!purchaseRequisitionId) {
+        toast.error('Purchase Requisition ID is required');
+        return;
+      }
+
+      const res = await ManagerApprovalApi.createManagerApproval(
+        purchaseRequisitionId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        toast.error(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+    },
+    [purchaseData?.id, searchParams]
+  );
+
   // ===== COMPUTED VALUES =====
   const approvalSteps = useMemo(() => {
     if (!groupedApprovals.length || !latestApproval) return [];
@@ -470,6 +507,16 @@ const PurchaseOrderDetail = ({
     <section className='w-full'>
       {/* Approval Action Buttons */}
       <div className='flex flex-wrap gap-3 my-6'>
+        <Button
+          onClick={() => confirmationModalWithNotes.openModal()}
+          variant='outline'
+          color='warning'
+          className='w-full sm:w-fit'
+        >
+          <Icon icon='mdi:note-edit-outline' width={20} height={20} />
+          Approve
+        </Button>
+
         <Button
           onClick={() => staffApprovalModal.openModal()}
           variant='outline'
@@ -516,7 +563,7 @@ const PurchaseOrderDetail = ({
         }}
       >
         {/* Order Information */}
-        <div className='bg-gray-50 rounded-lg p-6 mb-8'>
+        <div className='my-8'>
           <h3 className='text-lg font-semibold text-gray-800 mb-6 pb-3 border-b border-gray-200'>
             Informasi Pesanan
           </h3>
@@ -713,6 +760,31 @@ const PurchaseOrderDetail = ({
         </div>
       </Card>
 
+      {/* Confirmation Modal with Notes */}
+      <ConfirmationModalWithNotes
+        ref={confirmationModalWithNotes.ref}
+        type='success'
+        text='Apakah Anda yakin ingin melanjutkan approval ini?'
+        placeholder='(Opsional) Tambahkan catatan untuk approval ini...'
+        rows={4}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Lanjutkan',
+          color: 'success',
+          onClick: async (notes) => {
+            const payload: CreateManagerApprovalRequisitionsPayload = {
+              notes: notes || null,
+            };
+
+            await createManagerApprovalHandler(payload);
+            confirmationModalWithNotes.closeModal();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+
       {/* Staff Approval Modal */}
       <Modal
         ref={staffApprovalModal.ref}

From 0c4c0ce3ab2ba7049838b39374ca9c53da0224fe Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 13:22:05 +0700
Subject: [PATCH 069/168] feat(FE-208,212): add PO document path and update
 PurchaseOrderDetail to display document link

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 75 ++++++++++++++++---
 src/types/api/purchase/purchase.d.ts          |  1 +
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 2cb70bfa..697ebb9c 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -43,7 +43,8 @@ interface PurchaseOrderDetailProps {
 const dummyPurchaseData: Purchase = {
   id: 1,
   pr_number: 'PR-MBU-01837',
-  po_number: 'Belum dibuat',
+  po_number: 'PO-MBU-01837',
+  po_document_path: '/documents/po-mbu-01837.pdf',
   po_date: '2025-01-10T00:00:00Z',
   supplier: {
     id: 1,
@@ -432,7 +433,27 @@ const PurchaseOrderDetail = ({
     {
       accessorKey: 'travel_number_docs',
       header: 'Dokumen Surat Jalan',
-      cell: (props) => props.row.original.travel_number_docs || '-',
+      cell: (props) => {
+        const documentPath = props.row.original.travel_number_docs;
+        return documentPath ? (
+          <Button
+            color='primary'
+            className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
+            href={documentPath}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <Icon
+              icon='material-symbols:file-open-outline'
+              width={16}
+              height={16}
+            />
+            Lihat Dokumen
+          </Button>
+        ) : (
+          '-'
+        );
+      },
     },
     {
       accessorKey: 'vehicle_number',
@@ -576,7 +597,7 @@ const PurchaseOrderDetail = ({
                     Area
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.area?.name || '-'}
+                    : {purchaseData.area?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -586,7 +607,7 @@ const PurchaseOrderDetail = ({
                     Lokasi
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.location?.name || '-'}
+                    : {purchaseData.location?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -596,7 +617,7 @@ const PurchaseOrderDetail = ({
                     Gudang
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.warehouse?.name || '-'}
+                    : {purchaseData.warehouse?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -610,7 +631,7 @@ const PurchaseOrderDetail = ({
                     Nama Supplier
                   </span>
                   <span className='text-gray-900 font-medium ml-3 break-all'>
-                    {purchaseData.supplier?.name || '-'}
+                    : {purchaseData.supplier?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -620,7 +641,7 @@ const PurchaseOrderDetail = ({
                     Alamat Supplier
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    {purchaseData.supplier?.address || '-'}
+                    : {purchaseData.supplier?.address || '-'}
                   </span>
                 </div>
               </div>
@@ -630,6 +651,7 @@ const PurchaseOrderDetail = ({
                     Tgl. Jatuh Tempo
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
+                    :{' '}
                     {new Date(purchaseData.due_date).toLocaleDateString(
                       'id-ID',
                       {
@@ -648,7 +670,7 @@ const PurchaseOrderDetail = ({
                     Nomor
                   </span>
                   <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
-                    {purchaseData.pr_number}
+                    : {purchaseData.pr_number}
                   </span>
                 </div>
               </div>
@@ -657,9 +679,40 @@ const PurchaseOrderDetail = ({
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
                     Nomor PO
                   </span>
-                  <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
-                    {purchaseData.po_number || 'Belum dibuat'}
-                  </span>
+                  <div className='ml-3'>
+                    {purchaseData.po_number &&
+                    purchaseData.po_number !== 'Belum dibuat' ? (
+                      <Button
+                        color='primary'
+                        className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+                        disabled={!purchaseData.po_document_path}
+                        href={purchaseData.po_document_path ?? undefined}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                      >
+                        {purchaseData.po_document_path ? (
+                          <>
+                            <Icon
+                              icon='material-symbols:file-open-outline'
+                              width={16}
+                              height={16}
+                            />
+                            {purchaseData.po_number}
+                          </>
+                        ) : (
+                          purchaseData.po_number
+                        )}
+                      </Button>
+                    ) : (
+                      <Button
+                        color='primary'
+                        className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+                        disabled
+                      >
+                        PO-MBU-01837
+                      </Button>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 561499e2..57a5eb9a 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -28,6 +28,7 @@ export type BasePurchase = {
   id: number;
   pr_number: string;
   po_number: string;
+  po_document_path?: string | null;
   po_date: string;
   supplier: Supplier;
   credit_term: number;

From a5758aece48cebad71fa9c7869168d048f75cc28 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 16:07:21 +0700
Subject: [PATCH 070/168] refactor(FE-208): remove unnecessary font styling
 from purchase number display in PurchaseOrderDetail

---
 src/components/pages/purchase/order/PurchaseOrderDetail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 697ebb9c..0dc6095b 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -669,7 +669,7 @@ const PurchaseOrderDetail = ({
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
                     Nomor
                   </span>
-                  <span className='text-gray-900 ml-3 break-all font-mono text-sm'>
+                  <span className='text-gray-900 ml-3 break-all'>
                     : {purchaseData.pr_number}
                   </span>
                 </div>

From 57a867f61163e1236456a0e640ce2722df26431a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 14 Nov 2025 16:08:30 +0700
Subject: [PATCH 071/168] refactor(FE-208): update approval buttons in
 PurchaseOrderDetail to include Manager Approval

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 0dc6095b..d67274cb 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -528,16 +528,6 @@ const PurchaseOrderDetail = ({
     <section className='w-full'>
       {/* Approval Action Buttons */}
       <div className='flex flex-wrap gap-3 my-6'>
-        <Button
-          onClick={() => confirmationModalWithNotes.openModal()}
-          variant='outline'
-          color='warning'
-          className='w-full sm:w-fit'
-        >
-          <Icon icon='mdi:note-edit-outline' width={20} height={20} />
-          Approve
-        </Button>
-
         <Button
           onClick={() => staffApprovalModal.openModal()}
           variant='outline'
@@ -548,6 +538,16 @@ const PurchaseOrderDetail = ({
           Staff Approval
         </Button>
 
+        <Button
+          onClick={() => confirmationModalWithNotes.openModal()}
+          variant='outline'
+          color='warning'
+          className='w-full sm:w-fit'
+        >
+          <Icon icon='mdi:note-edit-outline' width={20} height={20} />
+          Manager Approval
+        </Button>
+
         <Button
           onClick={() => acceptApprovalModal.openModal()}
           variant='outline'

From c45c8601cb543d126232616fd7875528d2000ab8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 15 Nov 2025 10:36:01 +0700
Subject: [PATCH 072/168] feat(FE-208): add PurchaseOrderInvoice component for
 PDF generation and update PurchaseOrderDetail to integrate invoice display

---
 .../purchase/order/PurchaseOrderDetail.tsx    |  45 +-
 .../purchase/order/PurchaseOrderInvoice.tsx   | 477 ++++++++++++++++++
 2 files changed, 490 insertions(+), 32 deletions(-)
 create mode 100644 src/components/pages/purchase/order/PurchaseOrderInvoice.tsx

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index d67274cb..9cf59cfb 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -14,6 +14,7 @@ import Modal from '@/components/Modal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
 import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
+import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
 
 import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
@@ -49,17 +50,17 @@ const dummyPurchaseData: Purchase = {
   supplier: {
     id: 1,
     name: 'PT. CHAROEN POKPHAND JAYA FARM',
-    alias: '',
-    pic: '',
-    type: '',
-    category: '',
-    hatchery: '',
-    phone: '',
-    email: '',
-    address: '-',
-    npwp: '',
-    account_number: '',
-    due_date: 0,
+    alias: 'CP JAYA FARM',
+    pic: 'Budi Santoso',
+    type: 'Supplier',
+    category: 'Feed',
+    hatchery: 'Jawa Barat',
+    phone: '+62-22-7563850',
+    email: 'info@cp.co.id',
+    address: 'Jl. Raya Bandung - Sumedang Km. 28, Desa Cisantana, Kec. Cigendel, Kabupaten Sumedang, Jawa Barat 45363',
+    npwp: '01.938.451.6-433.000',
+    account_number: '123-456-7890',
+    due_date: 30,
     balance: 0,
     created_at: '2025-01-01T00:00:00Z',
     updated_at: '2025-01-01T00:00:00Z',
@@ -682,27 +683,7 @@ const PurchaseOrderDetail = ({
                   <div className='ml-3'>
                     {purchaseData.po_number &&
                     purchaseData.po_number !== 'Belum dibuat' ? (
-                      <Button
-                        color='primary'
-                        className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
-                        disabled={!purchaseData.po_document_path}
-                        href={purchaseData.po_document_path ?? undefined}
-                        target='_blank'
-                        rel='noopener noreferrer'
-                      >
-                        {purchaseData.po_document_path ? (
-                          <>
-                            <Icon
-                              icon='material-symbols:file-open-outline'
-                              width={16}
-                              height={16}
-                            />
-                            {purchaseData.po_number}
-                          </>
-                        ) : (
-                          purchaseData.po_number
-                        )}
-                      </Button>
+                      <PurchaseOrderInvoice data={purchaseData} />
                     ) : (
                       <Button
                         color='primary'
diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
new file mode 100644
index 00000000..85e36b62
--- /dev/null
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -0,0 +1,477 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  Page,
+  Text,
+  View,
+  Document,
+  Image,
+  StyleSheet,
+  Font,
+  pdf,
+} from '@react-pdf/renderer';
+import { Icon } from '@iconify/react';
+
+import Button from '@/components/Button';
+import { Purchase } from '@/types/api/purchase/purchase';
+import { formatDate, formatNumber } from '@/lib/helper';
+
+Font.register({
+  family: 'Helvetica',
+  src: 'helvetica',
+});
+
+const pdfStyles = StyleSheet.create({
+  page: {
+    fontSize: 10,
+    fontFamily: 'Helvetica',
+    padding: 20,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    marginBottom: 20,
+  },
+  logo: {
+    width: 120,
+    height: 30,
+    marginBottom: 8,
+  },
+  companyInfo: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  address: {
+    fontSize: 8,
+    color: '#666666',
+    maxWidth: 300,
+    marginBottom: 10,
+  },
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+    marginBottom: 15,
+  },
+  titleSection: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    flex: 3,
+  },
+  poInfo: {
+    flex: 1,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  table: {
+    borderWidth: 1,
+    borderColor: '#000000',
+    marginBottom: 15,
+  },
+  tableRow: {
+    flexDirection: 'row',
+  },
+  tableHeader: {
+    backgroundColor: '#F5F5F5',
+  },
+  tableCell: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  tableCellHeader: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellHeaderLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    backgroundColor: '#F5F5F5',
+  },
+  tableCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  tableBorderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    borderBottomStyle: 'solid',
+  },
+  grandTotalRow: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: '#000000',
+    borderTopStyle: 'solid',
+  },
+  grandTotalLabel: {
+    flex: 3,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+  },
+  grandTotalValue: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    borderRightWidth: 0,
+  },
+  allocationSection: {
+    marginBottom: 15,
+  },
+  allocationTable: {
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  innerTable: {
+    marginTop: 5,
+  },
+  innerRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 0.5,
+    borderBottomColor: '#ccc',
+    borderBottomStyle: 'solid',
+  },
+  innerCell: {
+    flex: 1,
+    padding: 4,
+    fontSize: 8,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 20,
+    left: 20,
+    right: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  footerCompany: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    textAlign: 'right',
+    flex: 1,
+  },
+  specialInstructionTable: {
+    width: '60%',
+    maxWidth: 300,
+    borderWidth: 1,
+    borderColor: '#000000',
+    flex: 1,
+  },
+});
+
+interface PurchaseOrderInvoiceProps {
+  data?: Purchase;
+  className?: string;
+}
+
+const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
+  const [, setIsGeneratingPDF] = useState(false);
+  const purchaseData = data;
+
+  const grandTotal = useMemo(() => {
+    return (
+      purchaseData?.items?.reduce(
+        (sum, item) => sum + (item.total_price || 0),
+        0
+      ) || 0
+    );
+  }, [purchaseData?.items]);
+
+  const handleDownloadPDF = async () => {
+    if (!purchaseData) {
+      alert('No purchase order data available');
+      return;
+    }
+
+    setIsGeneratingPDF(true);
+    try {
+      const PDFDocument = () => (
+        <Document>
+          <Page size='A4' style={pdfStyles.page}>
+            {/* Header Section */}
+            <View style={pdfStyles.header}>
+              <Image
+                src={'https://placehold.co/120x30/png'}
+                style={pdfStyles.logo}
+                id={'mbu-logo'}
+              />
+              <Text style={pdfStyles.companyInfo}>PT MITRA BERLIAN UNGGAS</Text>
+              <Text style={pdfStyles.address}>
+                SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+                Cipedes, Kec. Sukajadi, Kota Bandung 40162
+              </Text>
+              <View style={pdfStyles.divider} />
+            </View>
+
+            {/* Purchase Order Title */}
+            <View style={pdfStyles.titleSection}>
+              <Text style={pdfStyles.title}>PURCHASE ORDER</Text>
+              <View style={pdfStyles.poInfo}>
+                <Text>PO Number: {purchaseData?.po_number || '-'}</Text>
+                <Text>
+                  Date:{' '}
+                  {purchaseData?.po_date
+                    ? formatDate(purchaseData.po_date, 'DD-MMM-YYYY')
+                    : formatDate(new Date(), 'DD-MMM-YYYY')}
+                </Text>
+              </View>
+            </View>
+
+            {/* Vendor and Ship To Table */}
+            <View style={pdfStyles.table}>
+              <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                <View style={pdfStyles.tableCellHeader}>
+                  <Text>Vendor</Text>
+                </View>
+                <View style={pdfStyles.tableCellHeaderLast}>
+                  <Text>Ship To</Text>
+                </View>
+              </View>
+              <View style={pdfStyles.tableRow}>
+                <View style={pdfStyles.tableCell}>
+                  <Text style={{ fontWeight: 'bold' }}>
+                    {purchaseData?.supplier?.name || '-'}
+                  </Text>
+                  <Text>{purchaseData?.supplier?.pic || '-'}</Text>
+                  <Text>
+                    {purchaseData?.supplier?.phone || '-'} /{' '}
+                    {purchaseData?.supplier?.email || '-'}
+                  </Text>
+                  <Text>{purchaseData?.supplier?.address || '-'}</Text>
+                </View>
+                <View style={pdfStyles.tableCellLast}>
+                  <Text style={{ fontWeight: 'bold' }}>
+                    PT MITRA BERLIAN UNGGAS
+                  </Text>
+                  <Text>{purchaseData?.location?.name || '-'}</Text>
+                </View>
+              </View>
+            </View>
+
+            {/* Item Description Table */}
+            <View>
+              <View style={pdfStyles.table}>
+                <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Item Description</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Unit Price</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Total Quantity</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeaderLast}>
+                    <Text>Total Amount</Text>
+                  </View>
+                </View>
+                {purchaseData?.items?.map((item, index) => {
+                  const isLastItem =
+                    index === (purchaseData?.items?.length || 0) - 1;
+                  return (
+                    <View
+                      key={index}
+                      style={[
+                        pdfStyles.tableRow,
+                        isLastItem ? {} : pdfStyles.tableBorderBottom,
+                      ]}
+                    >
+                      <View style={pdfStyles.tableCell}>
+                        <Text>{item.product?.name || '-'}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCellRight}>
+                        <Text>Rp.{formatNumber(item.price || 0)}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCellRight}>
+                        <Text>{formatNumber(item.total_qty || 0)}</Text>
+                      </View>
+                      <View style={pdfStyles.tableCellRightLast}>
+                        <Text>Rp.{formatNumber(item.total_price || 0)}</Text>
+                      </View>
+                    </View>
+                  );
+                }) || []}
+
+                {/* Grand Total Row inside table */}
+                <View style={pdfStyles.grandTotalRow}>
+                  <View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
+                    <Text></Text>
+                  </View>
+                  <View
+                    style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}
+                  >
+                    <Text></Text>
+                  </View>
+                  <View style={pdfStyles.tableCellRight}>
+                    <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
+                  </View>
+                  <View style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}>
+                    <Text>Rp.{formatNumber(grandTotal)}</Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+
+            {/* Product Allocation Section */}
+            <View style={pdfStyles.allocationSection}>
+              <Text style={pdfStyles.sectionTitle}>Product Allocation</Text>
+              <View style={pdfStyles.allocationTable}>
+                <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Warehouse Name</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>PIC</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeader}>
+                    <Text>Address Detail</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellHeaderLast}>
+                    <Text>Product Allocation</Text>
+                  </View>
+                </View>
+                <View style={pdfStyles.tableRow}>
+                  <View style={pdfStyles.tableCell}>
+                    <Text>{purchaseData?.warehouse?.name || '-'}</Text>
+                  </View>
+                  <View style={pdfStyles.tableCell}>
+                    <Text>{purchaseData?.created_user?.name || '-'}</Text>
+                    <Text style={{ fontSize: 8 }}>
+                      {purchaseData?.created_user?.email || '-'}
+                    </Text>
+                  </View>
+                  <View style={pdfStyles.tableCell}>
+                    <Text>{purchaseData?.location?.name || '-'}</Text>
+                  </View>
+                  <View style={pdfStyles.tableCellLast}>
+                    {/* Inner table for product allocation */}
+                    <View style={pdfStyles.innerTable}>
+                      {purchaseData?.items?.map((item, index) => (
+                        <View key={index} style={pdfStyles.innerRow}>
+                          <Text style={pdfStyles.innerCell}>
+                            {item.product?.name || '-'}
+                          </Text>
+                          <Text
+                            style={[
+                              pdfStyles.innerCell,
+                              { textAlign: 'right' },
+                            ]}
+                          >
+                            {formatNumber(item.total_qty || 0)}
+                          </Text>
+                        </View>
+                      )) || []}
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+
+            {/* Footer with Special Instructions */}
+            <View style={pdfStyles.footer}>
+              <View style={pdfStyles.specialInstructionTable}>
+                <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
+                  <View style={pdfStyles.tableCellHeaderLast}>
+                    <Text>Special Instruction</Text>
+                  </View>
+                </View>
+                <View style={pdfStyles.tableRow}>
+                  <View style={pdfStyles.tableCellLast}>
+                    <Text>{purchaseData?.notes || '-'}</Text>
+                  </View>
+                </View>
+              </View>
+              <View style={pdfStyles.footerCompany}>
+                <Text>PT MITRA BERLIAN UNGGAS</Text>
+              </View>
+            </View>
+          </Page>
+        </Document>
+      );
+
+      const blob = await pdf(<PDFDocument />).toBlob();
+
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${purchaseData?.po_number || 'purchase-order'}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+      alert('Failed to generate PDF. Please try again.');
+    } finally {
+      setIsGeneratingPDF(false);
+    }
+  };
+
+  if (!purchaseData) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <div className='text-gray-500'>No purchase order data available</div>
+      </div>
+    );
+  }
+
+  return purchaseData?.po_number &&
+    purchaseData.po_number !== 'Belum dibuat' ? (
+    <Button
+      color='primary'
+      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      onClick={handleDownloadPDF}
+    >
+      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      {purchaseData.po_number}
+    </Button>
+  ) : null;
+};
+
+export default PurchaseOrderInvoice;

From e638856ea944e99ef3044d6e84193f4cb199650c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 15 Nov 2025 10:36:30 +0700
Subject: [PATCH 073/168] chore(deps): add @react-pdf/renderer dependency for
 PDF generation functionality

---
 package-lock.json | 525 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   1 +
 2 files changed, 521 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 19f0f85e..e7113c90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "lti-web-client",
       "version": "0.1.0",
       "dependencies": {
+        "@react-pdf/renderer": "^4.3.1",
         "@tanstack/match-sorter-utils": "^8.19.4",
         "@tanstack/react-table": "^8.21.3",
         "axios": "^1.12.2",
@@ -1271,6 +1272,180 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-pdf/fns": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-3.1.2.tgz",
+      "integrity": "sha512-qTKGUf0iAMGg2+OsUcp9ffKnKi41RukM/zYIWMDJ4hRVYSr89Q7e3wSDW/Koqx3ea3Uy/z3h2y3wPX6Bdfxk6g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/font": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-4.0.3.tgz",
+      "integrity": "sha512-N1qQDZr6phXYQOp033Hvm2nkUkx2LkszjGPbmRavs9VOYzi4sp31MaccMKptL24ii6UhBh/z9yPUhnuNe/qHwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/pdfkit": "^4.0.4",
+        "@react-pdf/types": "^2.9.1",
+        "fontkit": "^2.0.2",
+        "is-url": "^1.2.4"
+      }
+    },
+    "node_modules/@react-pdf/image": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.0.3.tgz",
+      "integrity": "sha512-lvP5ryzYM3wpbO9bvqLZYwEr5XBDX9jcaRICvtnoRqdJOo7PRrMnmB4MMScyb+Xw10mGeIubZAAomNAG5ONQZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/png-js": "^3.0.0",
+        "jay-peg": "^1.1.1"
+      }
+    },
+    "node_modules/@react-pdf/layout": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-4.4.1.tgz",
+      "integrity": "sha512-GVzdlWoZWldRDzlWj3SttRXmVDxg7YfraAohwy+o9gb9hrbDJaaAV6jV3pc630Evd3K46OAzk8EFu8EgPDuVuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/image": "^3.0.3",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.1",
+        "@react-pdf/textkit": "^6.0.0",
+        "@react-pdf/types": "^2.9.1",
+        "emoji-regex-xs": "^1.0.0",
+        "queue": "^6.0.1",
+        "yoga-layout": "^3.2.1"
+      }
+    },
+    "node_modules/@react-pdf/pdfkit": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-4.0.4.tgz",
+      "integrity": "sha512-/nITLggsPlB66bVLnm0X7MNdKQxXelLGZG6zB5acF5cCgkFwmXHnLNyxYOUD4GMOMg1HOPShXDKWrwk2ZeHsvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/png-js": "^3.0.0",
+        "browserify-zlib": "^0.2.0",
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.2",
+        "jay-peg": "^1.1.1",
+        "linebreak": "^1.1.0",
+        "vite-compatible-readable-stream": "^3.6.1"
+      }
+    },
+    "node_modules/@react-pdf/png-js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-3.0.0.tgz",
+      "integrity": "sha512-eSJnEItZ37WPt6Qv5pncQDxLJRK15eaRwPT+gZoujP548CodenOVp49GST8XJvKMFt9YqIBzGBV/j9AgrOQzVA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserify-zlib": "^0.2.0"
+      }
+    },
+    "node_modules/@react-pdf/primitives": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-4.1.1.tgz",
+      "integrity": "sha512-IuhxYls1luJb7NUWy6q5avb1XrNaVj9bTNI40U9qGRuS6n7Hje/8H8Qi99Z9UKFV74bBP3DOf3L1wV2qZVgVrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/reconciler": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/reconciler/-/reconciler-1.1.4.tgz",
+      "integrity": "sha512-oTQDiR/t4Z/Guxac88IavpU2UgN7eR0RMI9DRKvKnvPz2DUasGjXfChAdMqDNmJJxxV26mMy9xQOUV2UU5/okg==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "scheduler": "0.25.0-rc-603e6108-20241029"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/reconciler/node_modules/scheduler": {
+      "version": "0.25.0-rc-603e6108-20241029",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-603e6108-20241029.tgz",
+      "integrity": "sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/render": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.3.1.tgz",
+      "integrity": "sha512-v1WAaAhQShQZGcBxfjkEThGCHVH9CSuitrZ1bIOLvB5iBKM14abYK5D6djKhWCwF6FTzYeT2WRjRMVgze/ND2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/textkit": "^6.0.0",
+        "@react-pdf/types": "^2.9.1",
+        "abs-svg-path": "^0.1.1",
+        "color-string": "^1.9.1",
+        "normalize-svg-path": "^1.1.0",
+        "parse-svg-path": "^0.1.2",
+        "svg-arc-to-cubic-bezier": "^3.2.0"
+      }
+    },
+    "node_modules/@react-pdf/renderer": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.3.1.tgz",
+      "integrity": "sha512-dPKHiwGTaOsKqNWCHPYYrx8CDfAGsUnV4tvRsEu0VPGxuot1AOq/M+YgfN/Pb+MeXCTe2/lv6NvA8haUtj3tsA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/font": "^4.0.3",
+        "@react-pdf/layout": "^4.4.1",
+        "@react-pdf/pdfkit": "^4.0.4",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/reconciler": "^1.1.4",
+        "@react-pdf/render": "^4.3.1",
+        "@react-pdf/types": "^2.9.1",
+        "events": "^3.3.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "queue": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/stylesheet": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-6.1.1.tgz",
+      "integrity": "sha512-Iyw0A3wRIeQLN4EkaKf8yF9MvdMxiZ8JjoyzLzDHSxnKYoOA4UGu84veCb8dT9N8MxY5x7a0BUv/avTe586Plg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/types": "^2.9.1",
+        "color-string": "^1.9.1",
+        "hsl-to-hex": "^1.0.0",
+        "media-engine": "^1.0.3",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "node_modules/@react-pdf/textkit": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-6.0.0.tgz",
+      "integrity": "sha512-fDt19KWaJRK/n2AaFoVm31hgGmpygmTV7LsHGJNGZkgzXcFyLsx+XUl63DTDPH3iqxj3xUX128t104GtOz8tTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "bidi-js": "^1.0.2",
+        "hyphen": "^1.6.4",
+        "unicode-properties": "^1.4.1"
+      }
+    },
+    "node_modules/@react-pdf/types": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.9.1.tgz",
+      "integrity": "sha512-5GoCgG0G5NMgpPuHbKG2xcVRQt7+E5pg3IyzVIIozKG3nLcnsXW4zy25vG1ZBQA0jmo39q34au/sOnL/0d1A4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/font": "^4.0.3",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.1"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2261,6 +2436,12 @@
         "win32"
       ]
     },
+    "node_modules/abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2587,6 +2768,35 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2611,6 +2821,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -2712,6 +2940,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2738,9 +2975,18 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2797,6 +3043,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2988,6 +3240,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -3032,6 +3290,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "license": "MIT"
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -3667,11 +3931,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -3818,6 +4090,23 @@
         }
       }
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -4171,6 +4460,21 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hsl-to-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
+      "integrity": "sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==",
+      "license": "MIT",
+      "dependencies": {
+        "hsl-to-rgb-for-reals": "^1.1.0"
+      }
+    },
+    "node_modules/hsl-to-rgb-for-reals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz",
+      "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
+      "license": "ISC"
+    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -4187,6 +4491,12 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/hyphen": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.10.6.tgz",
+      "integrity": "sha512-fXHXcGFTXOvZTSkPJuGOQf5Lv5T/R2itiiCVPg9LxAje5D00O0pP83yJShFq5V89Ly//Gt6acj7z8pbBr34stw==",
+      "license": "ISC"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4223,6 +4533,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -4599,6 +4915,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "license": "MIT"
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -4677,6 +4999,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jay-peg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.1.1.tgz",
+      "integrity": "sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "restructure": "^3.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -4694,9 +5025,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5079,6 +5410,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -5151,6 +5501,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-engine": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
+      "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==",
+      "license": "MIT"
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -5361,6 +5717,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "license": "MIT",
+      "dependencies": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5551,6 +5916,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5581,6 +5952,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5674,6 +6051,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5733,6 +6116,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5924,6 +6316,15 @@
       "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
       "license": "MIT"
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5963,6 +6364,12 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -6018,6 +6425,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -6263,6 +6690,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6302,6 +6744,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -6492,6 +6943,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
+      "license": "ISC"
+    },
     "node_modules/swr": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
@@ -6542,6 +6999,12 @@
       "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
       "license": "MIT"
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -6792,6 +7255,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -6872,6 +7361,26 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/vite-compatible-readable-stream": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz",
+      "integrity": "sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7009,6 +7518,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
+    },
     "node_modules/yup": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
diff --git a/package.json b/package.json
index 33cf275a..b1eda493 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@react-pdf/renderer": "^4.3.1",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.12.2",

From 4bd6ac3cacfed817129608dd608a98cb01ec6edb Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 15 Nov 2025 10:43:46 +0700
Subject: [PATCH 074/168] refactor(FE-208): enhance PurchaseOrderInvoice styles
 with primary color and adjust address maxWidth

---
 .../purchase/order/PurchaseOrderInvoice.tsx    | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index 85e36b62..635e30f8 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -41,11 +41,12 @@ const pdfStyles = StyleSheet.create({
     fontSize: 12,
     fontWeight: 'bold',
     marginBottom: 4,
+    color: '#1f74bf', // Primary color from globals.css
   },
   address: {
     fontSize: 8,
     color: '#666666',
-    maxWidth: 300,
+    maxWidth: 400,
     marginBottom: 10,
   },
   divider: {
@@ -64,6 +65,7 @@ const pdfStyles = StyleSheet.create({
     fontSize: 18,
     fontWeight: 'bold',
     flex: 3,
+    color: '#1f74bf', // Primary color
   },
   poInfo: {
     flex: 1,
@@ -74,6 +76,7 @@ const pdfStyles = StyleSheet.create({
     fontSize: 12,
     fontWeight: 'bold',
     marginBottom: 8,
+    color: '#1f74bf', // Primary color
   },
   table: {
     borderWidth: 1,
@@ -182,10 +185,7 @@ const pdfStyles = StyleSheet.create({
     fontSize: 8,
   },
   footer: {
-    position: 'absolute',
-    bottom: 20,
-    left: 20,
-    right: 20,
+    marginTop: 30,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'flex-start',
@@ -195,6 +195,7 @@ const pdfStyles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'right',
     flex: 1,
+    color: '#1f74bf',
   },
   specialInstructionTable: {
     width: '60%',
@@ -351,7 +352,12 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                   <View style={pdfStyles.tableCellRight}>
                     <Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
                   </View>
-                  <View style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}>
+                  <View
+                    style={[
+                      pdfStyles.tableCellRightLast,
+                      { fontWeight: 'bold' },
+                    ]}
+                  >
                     <Text>Rp.{formatNumber(grandTotal)}</Text>
                   </View>
                 </View>

From e421c7d4221d23896d82b2af981a1635535b3581 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 15 Nov 2025 10:54:59 +0700
Subject: [PATCH 075/168] refactor(FE-208): enhance PurchaseOrderInvoice layout
 with improved cell styling and add inner table header

---
 .../purchase/order/PurchaseOrderInvoice.tsx   | 55 +++++++++++++++----
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index 635e30f8..5c019edf 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -172,17 +172,42 @@ const pdfStyles = StyleSheet.create({
   },
   innerTable: {
     marginTop: 5,
+    borderWidth: 1,
+    borderColor: '#000000',
   },
   innerRow: {
     flexDirection: 'row',
-    borderBottomWidth: 0.5,
-    borderBottomColor: '#ccc',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
     borderBottomStyle: 'solid',
   },
   innerCell: {
     flex: 1,
-    padding: 4,
-    fontSize: 8,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  innerCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
   },
   footer: {
     marginTop: 30,
@@ -398,17 +423,25 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                   <View style={pdfStyles.tableCellLast}>
                     {/* Inner table for product allocation */}
                     <View style={pdfStyles.innerTable}>
+                      {/* Header for inner table */}
+                      <View
+                        style={[
+                          pdfStyles.innerRow,
+                          { backgroundColor: '#F5F5F5' },
+                        ]}
+                      >
+                        <Text style={pdfStyles.innerCell}>Item</Text>
+                        <Text style={pdfStyles.innerCellRightLast}>
+                          Quantity
+                        </Text>
+                      </View>
+                      {/* Data rows */}
                       {purchaseData?.items?.map((item, index) => (
                         <View key={index} style={pdfStyles.innerRow}>
                           <Text style={pdfStyles.innerCell}>
                             {item.product?.name || '-'}
                           </Text>
-                          <Text
-                            style={[
-                              pdfStyles.innerCell,
-                              { textAlign: 'right' },
-                            ]}
-                          >
+                          <Text style={pdfStyles.innerCellRightLast}>
                             {formatNumber(item.total_qty || 0)}
                           </Text>
                         </View>
@@ -424,7 +457,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
               <View style={pdfStyles.specialInstructionTable}>
                 <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
                   <View style={pdfStyles.tableCellHeaderLast}>
-                    <Text>Special Instruction</Text>
+                    <Text>Notes</Text>
                   </View>
                 </View>
                 <View style={pdfStyles.tableRow}>

From 64605b168e5afbe5d8449f7a72bbc77b60df21b7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 15 Nov 2025 10:57:30 +0700
Subject: [PATCH 076/168] refactor(FE-208): remove period from currency
 formatting in invoice display

---
 .../pages/purchase/order/PurchaseOrderInvoice.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index 5c019edf..0d5e5d5d 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -352,13 +352,13 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                         <Text>{item.product?.name || '-'}</Text>
                       </View>
                       <View style={pdfStyles.tableCellRight}>
-                        <Text>Rp.{formatNumber(item.price || 0)}</Text>
+                        <Text>Rp{formatNumber(item.price || 0)}</Text>
                       </View>
                       <View style={pdfStyles.tableCellRight}>
                         <Text>{formatNumber(item.total_qty || 0)}</Text>
                       </View>
                       <View style={pdfStyles.tableCellRightLast}>
-                        <Text>Rp.{formatNumber(item.total_price || 0)}</Text>
+                        <Text>Rp{formatNumber(item.total_price || 0)}</Text>
                       </View>
                     </View>
                   );
@@ -383,7 +383,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                       { fontWeight: 'bold' },
                     ]}
                   >
-                    <Text>Rp.{formatNumber(grandTotal)}</Text>
+                    <Text>Rp{formatNumber(grandTotal)}</Text>
                   </View>
                 </View>
               </View>

From c951f09667ee86515cd94360d6937bb4bd5417ae Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 09:21:18 +0700
Subject: [PATCH 077/168] refactor(FE-208): rename PurchaseRequisitions to
 PurchaseRequest and update related API references

---
 src/app/purchase/add/page.tsx                 |  8 +--
 src/app/purchase/detail/edit/page.tsx         |  8 +--
 src/app/purchase/detail/page.tsx              |  8 +--
 .../pages/purchase/PurchaseTable.tsx          |  9 ++--
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 23 ++++-----
 .../form/order/PurchaseOrderForm.schema.ts    | 42 ++++++++--------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 23 ++++-----
 .../PurchaseRequisitionsForm.schema.ts        | 15 +++---
 .../form/request/PurchaseRequisitionsForm.tsx | 47 ++++++++---------
 .../purchase/order/PurchaseOrderDetail.tsx    |  9 ++--
 src/services/api/purchase.ts                  | 50 ++++++++-----------
 src/types/api/purchase/purchase.d.ts          | 11 ++--
 12 files changed, 118 insertions(+), 135 deletions(-)

diff --git a/src/app/purchase/add/page.tsx b/src/app/purchase/add/page.tsx
index 6410f236..d09d5ce0 100644
--- a/src/app/purchase/add/page.tsx
+++ b/src/app/purchase/add/page.tsx
@@ -1,11 +1,11 @@
-import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
 
-const AddPurchaseRequisitions = () => {
+const AddPurchaseRequest = () => {
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
-      <PurchaseRequisitionsForm />
+      <PurchaseRequestForm />
     </div>
   );
 };
 
-export default AddPurchaseRequisitions;
+export default AddPurchaseRequest;
diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
index 97dc8d62..5f0dacd4 100644
--- a/src/app/purchase/detail/edit/page.tsx
+++ b/src/app/purchase/detail/edit/page.tsx
@@ -2,8 +2,8 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
-import { PurchaseRequisitionsApi } from '@/services/api/purchase';
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
+import { PurchaseRequestApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseEdit = () => {
@@ -14,7 +14,7 @@ const PurchaseEdit = () => {
 
   const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
     purchaseId,
-    (id: number) => PurchaseRequisitionsApi.getSingle(id)
+    (id: number) => PurchaseRequestApi.getSingle(id)
   );
 
   if (!purchaseId) {
@@ -38,7 +38,7 @@ const PurchaseEdit = () => {
         <span className='loading loading-spinner loading-xl' />
       )}
       {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseRequisitionsForm type='edit' initialValues={purchase.data} />
+        <PurchaseRequestForm type='edit' initialValues={purchase.data} />
       )}
     </div>
   );
diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 1559e810..8ea80739 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -2,8 +2,8 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-import PurchaseRequisitionsForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
-import { PurchaseRequisitionsApi } from '@/services/api/purchase';
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
+import { PurchaseRequestApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseDetail = () => {
@@ -14,7 +14,7 @@ const PurchaseDetail = () => {
 
   const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
     purchaseId,
-    (id: number) => PurchaseRequisitionsApi.getSingle(id)
+    (id: number) => PurchaseRequestApi.getSingle(id)
   );
 
   if (!purchaseId) {
@@ -38,7 +38,7 @@ const PurchaseDetail = () => {
         <span className='loading loading-spinner loading-xl' />
       )}
       {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseRequisitionsForm type='detail' initialValues={purchase.data} />
+        <PurchaseRequestForm type='detail' initialValues={purchase.data} />
       )}
     </div>
   );
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index ea466fc2..c8a75694 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -26,7 +26,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Purchase } from '@/types/api/purchase/purchase';
-import { PurchaseRequisitionsApi } from '@/services/api/purchase';
+import { PurchaseRequestApi } from '@/services/api/purchase';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -103,8 +103,8 @@ const PurchaseTable = () => {
     isLoading,
     mutate: refreshPurchaseRequests,
   } = useSWR(
-    `${PurchaseRequisitionsApi.basePath}${getTableFilterQueryString()}`,
-    PurchaseRequisitionsApi.getAllFetcher
+    `${PurchaseRequestApi.basePath}${getTableFilterQueryString()}`,
+    PurchaseRequestApi.getAllFetcher
   );
 
   // Modal hooks
@@ -237,7 +237,7 @@ const PurchaseTable = () => {
     setIsDeleteLoading(true);
 
     try {
-      await PurchaseRequisitionsApi.delete(selectedPurchase?.id as number);
+      await PurchaseRequestApi.delete(selectedPurchase?.id as number);
       refreshPurchaseRequests();
       deleteModal.closeModal();
       toast.success('Berhasil menghapus data permintaan pembelian!');
@@ -283,7 +283,6 @@ const PurchaseTable = () => {
                 Tambah
               </Button>
 
-  
               {selectedRowIds.length > 0 && (
                 <Button
                   variant='outline'
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index bf8af4a4..3221bd86 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -11,14 +11,14 @@ import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 
 import {
-  PurchaseRequisitionsAcceptApprovalFormDefaultValues,
-  PurchaseRequisitionsAcceptApprovalFormInitialValues,
-  PurchaseRequisitionsAcceptApprovalFormSchema,
+  PurchaseRequestAcceptApprovalFormDefaultValues,
+  PurchaseRequestAcceptApprovalFormInitialValues,
+  PurchaseRequestAcceptApprovalFormSchema,
 } from './PurchaseOrderForm.schema';
 import { isResponseError } from '@/lib/api-helper';
 import { AcceptApprovalApi } from '@/services/api/purchase';
 import {
-  CreateAcceptApprovalRequisitionsPayload,
+  CreateAcceptApprovalRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
 import DateInput from '@/components/input/DateInput';
@@ -101,7 +101,7 @@ const PurchaseOrderAcceptApprovalForm = ({
 
   // ===== SUBMISSION HANDLERS =====
   const createAcceptApprovalHandler = useCallback(
-    async (payload: CreateAcceptApprovalRequisitionsPayload) => {
+    async (payload: CreateAcceptApprovalRequestPayload) => {
       const purchaseRequisitionId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
         : initialValues?.id || 1;
@@ -127,10 +127,7 @@ const PurchaseOrderAcceptApprovalForm = ({
   );
 
   const updateAcceptApprovalHandler = useCallback(
-    async (
-      purchaseId: number,
-      payload: CreateAcceptApprovalRequisitionsPayload
-    ) => {
+    async (purchaseId: number, payload: CreateAcceptApprovalRequestPayload) => {
       const res = await AcceptApprovalApi.acceptApproval(purchaseId, payload);
       if (isResponseError(res)) {
         setPurchaseOrderFormErrorMessage(res.message);
@@ -146,17 +143,17 @@ const PurchaseOrderAcceptApprovalForm = ({
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo(() => {
     return initialValues
-      ? PurchaseRequisitionsAcceptApprovalFormDefaultValues(initialValues)
-      : PurchaseRequisitionsAcceptApprovalFormInitialValues;
+      ? PurchaseRequestAcceptApprovalFormDefaultValues(initialValues)
+      : PurchaseRequestAcceptApprovalFormInitialValues;
   }, [initialValues]);
 
   const formik = useFormik({
     initialValues: formikInitialValues,
-    validationSchema: PurchaseRequisitionsAcceptApprovalFormSchema,
+    validationSchema: PurchaseRequestAcceptApprovalFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      const payload: CreateAcceptApprovalRequisitionsPayload = {
+      const payload: CreateAcceptApprovalRequestPayload = {
         notes: values.notes || '',
         items: (values.items || []).map((item) => ({
           purchase_item_id:
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 6385d2bb..1dfea73c 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
 import { Purchase } from '@/types/api/purchase/purchase';
 
-type PurchaseRequisitionsStaffApprovalFormSchemaType = {
+type PurchaseRequestStaffApprovalFormSchemaType = {
   notes: string | null;
   items: {
     purchase_item?: {
@@ -14,11 +14,11 @@ type PurchaseRequisitionsStaffApprovalFormSchemaType = {
   }[];
 };
 
-type PurchaseRequisitionsManagerApprovalFormSchemaType = {
+type PurchaseRequestManagerApprovalFormSchemaType = {
   notes: string | null;
 };
 
-type PurchaseRequisitionsAcceptApprovalFormSchemaType = {
+type PurchaseRequestAcceptApprovalFormSchemaType = {
   notes: string | null;
   items: {
     purchase_item?: {
@@ -128,7 +128,7 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       ),
   });
 
-const PurchaseManagerApprovalObjectSchema: Yup.ObjectSchema<PurchaseRequisitionsManagerApprovalFormSchemaType> =
+const PurchaseManagerApprovalObjectSchema: Yup.ObjectSchema<PurchaseRequestManagerApprovalFormSchemaType> =
   Yup.object({
     notes: Yup.string().nullable().default(null),
   });
@@ -239,7 +239,7 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
       .typeError('Total biaya transport harus berupa angka!'),
   });
 
-export const PurchaseRequisitionsStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsStaffApprovalFormSchemaType> =
+export const PurchaseRequestStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRequestStaffApprovalFormSchemaType> =
   Yup.object({
     notes: Yup.string().nullable().default(null),
     items: Yup.array()
@@ -249,7 +249,7 @@ export const PurchaseRequisitionsStaffApprovalFormSchema: Yup.ObjectSchema<Purch
       .typeError('Item pembelian wajib diisi!'),
   });
 
-export const PurchaseRequisitionsStaffApprovalFormInitialValues: PurchaseRequisitionsStaffApprovalFormSchemaType =
+export const PurchaseRequestStaffApprovalFormInitialValues: PurchaseRequestStaffApprovalFormSchemaType =
   {
     notes: '',
     items: [
@@ -261,9 +261,9 @@ export const PurchaseRequisitionsStaffApprovalFormInitialValues: PurchaseRequisi
     ],
   };
 
-export const PurchaseRequisitionsStaffApprovalFormDefaultValues = (
+export const PurchaseRequestStaffApprovalFormDefaultValues = (
   purchase?: Purchase
-): PurchaseRequisitionsStaffApprovalFormSchemaType => {
+): PurchaseRequestStaffApprovalFormSchemaType => {
   return {
     notes: purchase?.notes ?? null,
     items: purchase?.items
@@ -282,26 +282,26 @@ export const PurchaseRequisitionsStaffApprovalFormDefaultValues = (
   };
 };
 
-export type PurchaseRequisitionsStaffApprovalFormValues = Yup.InferType<
-  typeof PurchaseRequisitionsStaffApprovalFormSchema
+export type PurchaseRequestStaffApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequestStaffApprovalFormSchema
 >;
 
-export const PurchaseRequisitionsManagerApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsManagerApprovalFormSchemaType> =
+export const PurchaseRequestManagerApprovalFormSchema: Yup.ObjectSchema<PurchaseRequestManagerApprovalFormSchemaType> =
   PurchaseManagerApprovalObjectSchema;
 
-export const PurchaseRequisitionsManagerApprovalFormDefaultValues = (
+export const PurchaseRequestManagerApprovalFormDefaultValues = (
   purchase?: Purchase
-): PurchaseRequisitionsManagerApprovalFormSchemaType => {
+): PurchaseRequestManagerApprovalFormSchemaType => {
   return {
     notes: purchase?.notes ?? null,
   };
 };
 
-export type PurchaseRequisitionsManagerApprovalFormValues = Yup.InferType<
-  typeof PurchaseRequisitionsManagerApprovalFormSchema
+export type PurchaseRequestManagerApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequestManagerApprovalFormSchema
 >;
 
-export const PurchaseRequisitionsAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseRequisitionsAcceptApprovalFormSchemaType> =
+export const PurchaseRequestAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseRequestAcceptApprovalFormSchemaType> =
   Yup.object({
     notes: Yup.string().nullable().default(null),
     items: Yup.array()
@@ -311,7 +311,7 @@ export const PurchaseRequisitionsAcceptApprovalFormSchema: Yup.ObjectSchema<Purc
       .typeError('Item pembelian wajib diisi!'),
   });
 
-export const PurchaseRequisitionsAcceptApprovalFormInitialValues: PurchaseRequisitionsAcceptApprovalFormSchemaType =
+export const PurchaseRequestAcceptApprovalFormInitialValues: PurchaseRequestAcceptApprovalFormSchemaType =
   {
     notes: '',
     items: [
@@ -330,9 +330,9 @@ export const PurchaseRequisitionsAcceptApprovalFormInitialValues: PurchaseRequis
     ],
   };
 
-export const PurchaseRequisitionsAcceptApprovalFormDefaultValues = (
+export const PurchaseRequestAcceptApprovalFormDefaultValues = (
   purchase?: Purchase
-): PurchaseRequisitionsAcceptApprovalFormSchemaType => {
+): PurchaseRequestAcceptApprovalFormSchemaType => {
   return {
     notes: purchase?.notes ?? null,
     items: purchase?.items
@@ -365,6 +365,6 @@ export const PurchaseRequisitionsAcceptApprovalFormDefaultValues = (
   };
 };
 
-export type PurchaseRequisitionsAcceptApprovalFormValues = Yup.InferType<
-  typeof PurchaseRequisitionsAcceptApprovalFormSchema
+export type PurchaseRequestAcceptApprovalFormValues = Yup.InferType<
+  typeof PurchaseRequestAcceptApprovalFormSchema
 >;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index d4095cf8..25a35966 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -11,14 +11,14 @@ import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 
 import {
-  PurchaseRequisitionsStaffApprovalFormDefaultValues,
-  PurchaseRequisitionsStaffApprovalFormInitialValues,
-  PurchaseRequisitionsStaffApprovalFormSchema,
+  PurchaseRequestStaffApprovalFormDefaultValues,
+  PurchaseRequestStaffApprovalFormInitialValues,
+  PurchaseRequestStaffApprovalFormSchema,
 } from './PurchaseOrderForm.schema';
 import { isResponseError } from '@/lib/api-helper';
 import { StaffApprovalApi } from '@/services/api/purchase';
 import {
-  CreateStaffApprovalRequisitionsPayload,
+  CreateStaffApprovalRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
 
@@ -78,7 +78,7 @@ const PurchaseOrderStaffApprovalForm = ({
 
   // ===== SUBMISSION HANDLERS =====
   const createStaffApprovalHandler = useCallback(
-    async (payload: CreateStaffApprovalRequisitionsPayload) => {
+    async (payload: CreateStaffApprovalRequestPayload) => {
       const purchaseRequisitionId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
         : initialValues?.id || 1;
@@ -104,10 +104,7 @@ const PurchaseOrderStaffApprovalForm = ({
   );
 
   const updateStaffApprovalHandler = useCallback(
-    async (
-      purchaseId: number,
-      payload: CreateStaffApprovalRequisitionsPayload
-    ) => {
+    async (purchaseId: number, payload: CreateStaffApprovalRequestPayload) => {
       const res = await StaffApprovalApi.createStaffApproval(
         purchaseId,
         payload
@@ -126,17 +123,17 @@ const PurchaseOrderStaffApprovalForm = ({
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo(() => {
     return initialValues
-      ? PurchaseRequisitionsStaffApprovalFormDefaultValues(initialValues)
-      : PurchaseRequisitionsStaffApprovalFormInitialValues;
+      ? PurchaseRequestStaffApprovalFormDefaultValues(initialValues)
+      : PurchaseRequestStaffApprovalFormInitialValues;
   }, [initialValues]);
 
   const formik = useFormik({
     initialValues: formikInitialValues,
-    validationSchema: PurchaseRequisitionsStaffApprovalFormSchema,
+    validationSchema: PurchaseRequestStaffApprovalFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      const payload: CreateStaffApprovalRequisitionsPayload = {
+      const payload: CreateStaffApprovalRequestPayload = {
         notes: values.notes || '',
         items: (values.items || []).map((item) => ({
           purchase_item_id:
diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
index f158f6ab..51305585 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
 import { Purchase } from '@/types/api/purchase/purchase';
 
-type PurchaseRequisitionsFormSchemaType = {
+type PurchaseRequestFormSchemaType = {
   supplier?: {
     value: number;
     label: string;
@@ -85,7 +85,7 @@ const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
       ),
   });
 
-export const PurchaseRequisitionsFormSchema: Yup.ObjectSchema<PurchaseRequisitionsFormSchemaType> =
+export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSchemaType> =
   Yup.object({
     supplier: Yup.object({
       value: Yup.number().min(1).required(),
@@ -127,16 +127,15 @@ export const PurchaseRequisitionsFormSchema: Yup.ObjectSchema<PurchaseRequisitio
       .typeError('Item pembelian wajib diisi!'),
   });
 
-export const UpdatePurchaseRequisitionsFormSchema =
-  PurchaseRequisitionsFormSchema;
+export const UpdatePurchaseRequestFormSchema = PurchaseRequestFormSchema;
 
-export type PurchaseRequisitionsFormValues = Yup.InferType<
-  typeof PurchaseRequisitionsFormSchema
+export type PurchaseRequestFormValues = Yup.InferType<
+  typeof PurchaseRequestFormSchema
 >;
 
-export const getPurchaseRequisitionsFormInitialValues = (
+export const getPurchaseRequestFormInitialValues = (
   initialValues?: Purchase
-): PurchaseRequisitionsFormValues => ({
+): PurchaseRequestFormValues => ({
   supplier: initialValues?.supplier
     ? {
         value: initialValues.supplier.id,
diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
index 0e31e8ac..5d52bd20 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
@@ -18,10 +18,10 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
 
 import {
-  PurchaseRequisitionsFormSchema,
-  PurchaseRequisitionsFormValues,
-  getPurchaseRequisitionsFormInitialValues,
-  UpdatePurchaseRequisitionsFormSchema,
+  PurchaseRequestFormSchema,
+  PurchaseRequestFormValues,
+  getPurchaseRequestFormInitialValues,
+  UpdatePurchaseRequestFormSchema,
 } from './PurchaseRequisitionsForm.schema';
 import {
   SupplierApi,
@@ -34,11 +34,11 @@ import { Supplier } from '@/types/api/master-data/supplier';
 import { Product } from '@/types/api/master-data/product';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-import { PurchaseRequisitionsApi } from '@/services/api/purchase';
+import { PurchaseRequestApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
 import {
-  CreatePurchaseRequisitionsPayload,
+  CreatePurchaseRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
 
@@ -47,7 +47,7 @@ interface PurchaseRequestFormProps {
   initialValues?: Purchase;
 }
 
-const PurchaseRequisitionsForm = ({
+const PurchaseRequestForm = ({
   type = 'add',
   initialValues,
 }: PurchaseRequestFormProps) => {
@@ -105,8 +105,8 @@ const PurchaseRequisitionsForm = ({
 
   // ===== SUBMISSION HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
-    async (payload: CreatePurchaseRequisitionsPayload) => {
-      const res = await PurchaseRequisitionsApi.create(payload);
+    async (payload: CreatePurchaseRequestPayload) => {
+      const res = await PurchaseRequestApi.create(payload);
       if (isResponseError(res)) {
         setPurchaseRequestFormErrorMessage(res.message);
         return;
@@ -120,12 +120,9 @@ const PurchaseRequisitionsForm = ({
   const updatePurchaseRequestHandler = useCallback(
     async (
       purchaseRequestId: number,
-      payload: CreatePurchaseRequisitionsPayload
+      payload: CreatePurchaseRequestPayload
     ) => {
-      const res = await PurchaseRequisitionsApi.update(
-        purchaseRequestId,
-        payload
-      );
+      const res = await PurchaseRequestApi.update(purchaseRequestId, payload);
       if (isResponseError(res)) {
         setPurchaseRequestFormErrorMessage(res.message);
         return;
@@ -145,7 +142,7 @@ const PurchaseRequisitionsForm = ({
     if (!initialValues?.id) return;
 
     setIsDeleteLoading(true);
-    await PurchaseRequisitionsApi.delete(initialValues.id);
+    await PurchaseRequestApi.delete(initialValues.id);
     deleteModal.closeModal();
     toast.success('Successfully delete Purchase Request!');
     setIsDeleteLoading(false);
@@ -175,21 +172,21 @@ const PurchaseRequisitionsForm = ({
   } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
 
   // ===== FORM CONFIGURATION =====
-  const formikInitialValues = useMemo<PurchaseRequisitionsFormValues>(
-    () => getPurchaseRequisitionsFormInitialValues(initialValues),
+  const formikInitialValues = useMemo<PurchaseRequestFormValues>(
+    () => getPurchaseRequestFormInitialValues(initialValues),
     [initialValues]
   );
 
-  const formik = useFormik<PurchaseRequisitionsFormValues>({
+  const formik = useFormik<PurchaseRequestFormValues>({
     initialValues: formikInitialValues,
     validationSchema:
       type === 'edit'
-        ? UpdatePurchaseRequisitionsFormSchema
-        : PurchaseRequisitionsFormSchema,
+        ? UpdatePurchaseRequestFormSchema
+        : PurchaseRequestFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      const payload: CreatePurchaseRequisitionsPayload = {
+      const payload: CreatePurchaseRequestPayload = {
         supplier_id:
           typeof values.supplier_id === 'string'
             ? parseInt(values.supplier_id) || 0
@@ -486,9 +483,9 @@ const PurchaseRequisitionsForm = ({
             Kembali
           </Button>
           <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Purchase Requisitions'}
-            {type === 'edit' && 'Edit Purchase Requisitions'}
-            {type === 'detail' && 'Detail Purchase Requisitions'}
+            {type === 'add' && 'Tambah Purchase Request'}
+            {type === 'edit' && 'Edit Purchase Request'}
+            {type === 'detail' && 'Detail Purchase Request'}
           </h1>
         </header>
         <form
@@ -1118,4 +1115,4 @@ const PurchaseRequisitionsForm = ({
   );
 };
 
-export default PurchaseRequisitionsForm;
+export default PurchaseRequestForm;
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 9cf59cfb..6a22cd80 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -20,7 +20,7 @@ import { BaseGroupedApproval } from '@/types/api/api-general';
 import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 import Card from '@/components/Card';
 import {
-  CreateManagerApprovalRequisitionsPayload,
+  CreateManagerApprovalRequestPayload,
   Purchase,
   PurchaseItem,
 } from '@/types/api/purchase/purchase';
@@ -57,7 +57,8 @@ const dummyPurchaseData: Purchase = {
     hatchery: 'Jawa Barat',
     phone: '+62-22-7563850',
     email: 'info@cp.co.id',
-    address: 'Jl. Raya Bandung - Sumedang Km. 28, Desa Cisantana, Kec. Cigendel, Kabupaten Sumedang, Jawa Barat 45363',
+    address:
+      'Jl. Raya Bandung - Sumedang Km. 28, Desa Cisantana, Kec. Cigendel, Kabupaten Sumedang, Jawa Barat 45363',
     npwp: '01.938.451.6-433.000',
     account_number: '123-456-7890',
     due_date: 30,
@@ -316,7 +317,7 @@ const PurchaseOrderDetail = ({
 
   // ===== SUBMISSION HANDLER =====
   const createManagerApprovalHandler = useCallback(
-    async (payload: CreateManagerApprovalRequisitionsPayload) => {
+    async (payload: CreateManagerApprovalRequestPayload) => {
       const purchaseRequisitionId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
         : purchaseData?.id || 1;
@@ -806,7 +807,7 @@ const PurchaseOrderDetail = ({
           text: 'Ya, Lanjutkan',
           color: 'success',
           onClick: async (notes) => {
-            const payload: CreateManagerApprovalRequisitionsPayload = {
+            const payload: CreateManagerApprovalRequestPayload = {
               notes: notes || null,
             };
 
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 5553844e..ec329498 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -1,20 +1,20 @@
 import {
-  CreatePurchaseRequisitionsPayload,
+  CreatePurchaseRequestPayload,
   Purchase,
-  UpdatePurchaseRequisitionsPayload,
-  CreateStaffApprovalRequisitionsPayload,
-  CreateManagerApprovalRequisitionsPayload,
-  CreateAcceptApprovalRequisitionsPayload,
+  UpdatePurchaseRequestPayload,
+  CreateStaffApprovalRequestPayload,
+  CreateManagerApprovalRequestPayload,
+  CreateAcceptApprovalRequestPayload,
 } from '@/types/api/purchase/purchase';
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 
-export class PurchaseRequisitionsService extends BaseApiService<
+export class PurchaseRequestService extends BaseApiService<
   Purchase,
-  CreatePurchaseRequisitionsPayload,
-  UpdatePurchaseRequisitionsPayload
+  CreatePurchaseRequestPayload,
+  UpdatePurchaseRequestPayload
 > {
-  constructor(basePath: string = '/purchases/requisitions') {
+  constructor(basePath: string = '/purchases') {
     super(basePath);
   }
 
@@ -51,8 +51,8 @@ export class PurchaseRequisitionsService extends BaseApiService<
 
 export class StaffApprovalService extends BaseApiService<
   Purchase,
-  CreateStaffApprovalRequisitionsPayload,
-  CreateAcceptApprovalRequisitionsPayload
+  CreateStaffApprovalRequestPayload,
+  CreateAcceptApprovalRequestPayload
 > {
   constructor(basePath: string = '') {
     super(basePath);
@@ -60,7 +60,7 @@ export class StaffApprovalService extends BaseApiService<
 
   async createStaffApproval(
     purchaseRequisitionId: number,
-    payload: CreateStaffApprovalRequisitionsPayload
+    payload: CreateStaffApprovalRequestPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
       `${purchaseRequisitionId}/approvals/staff`,
@@ -74,8 +74,8 @@ export class StaffApprovalService extends BaseApiService<
 
 export class ManagerApprovalService extends BaseApiService<
   Purchase,
-  CreateManagerApprovalRequisitionsPayload,
-  CreateManagerApprovalRequisitionsPayload
+  CreateManagerApprovalRequestPayload,
+  CreateManagerApprovalRequestPayload
 > {
   constructor(basePath: string = '') {
     super(basePath);
@@ -83,7 +83,7 @@ export class ManagerApprovalService extends BaseApiService<
 
   async createManagerApproval(
     purchaseRequisitionId: number,
-    payload: CreateManagerApprovalRequisitionsPayload
+    payload: CreateManagerApprovalRequestPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
       `${purchaseRequisitionId}/approvals/manager`,
@@ -97,8 +97,8 @@ export class ManagerApprovalService extends BaseApiService<
 
 export class AcceptApprovalService extends BaseApiService<
   Purchase,
-  CreateAcceptApprovalRequisitionsPayload,
-  CreateAcceptApprovalRequisitionsPayload
+  CreateAcceptApprovalRequestPayload,
+  CreateAcceptApprovalRequestPayload
 > {
   constructor(basePath: string = '') {
     super(basePath);
@@ -106,7 +106,7 @@ export class AcceptApprovalService extends BaseApiService<
 
   async acceptApproval(
     purchaseRequisitionId: number,
-    payload: CreateAcceptApprovalRequisitionsPayload
+    payload: CreateAcceptApprovalRequestPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
       `${purchaseRequisitionId}/approvals/receipts`,
@@ -118,16 +118,10 @@ export class AcceptApprovalService extends BaseApiService<
   }
 }
 
-export const PurchaseRequisitionsApi = new PurchaseRequisitionsService();
+export const PurchaseRequestApi = new PurchaseRequestService();
 
-export const StaffApprovalApi = new StaffApprovalService(
-  '/purchases/requisitions'
-);
+export const StaffApprovalApi = new StaffApprovalService('/purchases');
 
-export const ManagerApprovalApi = new ManagerApprovalService(
-  '/purchases/requisitions'
-);
+export const ManagerApprovalApi = new ManagerApprovalService('/purchases');
 
-export const AcceptApprovalApi = new AcceptApprovalService(
-  '/purchases/requisitions'
-);
+export const AcceptApprovalApi = new AcceptApprovalService('/purchases');
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 57a5eb9a..9a0cf64b 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -45,7 +45,7 @@ export type BasePurchase = {
 
 export type Purchase = BaseMetadata & BasePurchase;
 
-export type CreatePurchaseRequisitionsPayload = {
+export type CreatePurchaseRequestPayload = {
   supplier_id: number;
   area_id: number;
   location_id: number;
@@ -58,7 +58,7 @@ export type CreatePurchaseRequisitionsPayload = {
   }[];
 };
 
-export type CreateStaffApprovalRequisitionsPayload = {
+export type CreateStaffApprovalRequestPayload = {
   notes?: string | null;
   items: {
     purchase_item_id: number;
@@ -67,11 +67,11 @@ export type CreateStaffApprovalRequisitionsPayload = {
   }[];
 };
 
-export type CreateManagerApprovalRequisitionsPayload = {
+export type CreateManagerApprovalRequestPayload = {
   notes?: string | null;
 };
 
-export type CreateAcceptApprovalRequisitionsPayload = {
+export type CreateAcceptApprovalRequestPayload = {
   notes?: string;
   items: {
     purchase_item_id: number;
@@ -87,5 +87,4 @@ export type CreateAcceptApprovalRequisitionsPayload = {
   }[];
 };
 
-export type UpdatePurchaseRequisitionsPayload =
-  CreatePurchaseRequisitionsPayload;
+export type UpdatePurchaseRequestPayload = CreatePurchaseRequestPayload;

From 9f41768e54bf86f0eeb3ad81bd234666fee2a686 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 09:22:49 +0700
Subject: [PATCH 078/168] refactor(FE-208): rename PurchaseRequisitions to
 PurchaseRequest and update related API references

---
 src/app/purchase/add/page.tsx                                   | 2 +-
 src/app/purchase/detail/edit/page.tsx                           | 2 +-
 src/app/purchase/detail/page.tsx                                | 2 +-
 ...RequisitionsForm.schema.ts => PurchaseRequestForm.schema.ts} | 0
 .../{PurchaseRequisitionsForm.tsx => PurchaseRequestForm.tsx}   | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/pages/purchase/form/request/{PurchaseRequisitionsForm.schema.ts => PurchaseRequestForm.schema.ts} (100%)
 rename src/components/pages/purchase/form/request/{PurchaseRequisitionsForm.tsx => PurchaseRequestForm.tsx} (99%)

diff --git a/src/app/purchase/add/page.tsx b/src/app/purchase/add/page.tsx
index d09d5ce0..7e1cb9e7 100644
--- a/src/app/purchase/add/page.tsx
+++ b/src/app/purchase/add/page.tsx
@@ -1,4 +1,4 @@
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
 
 const AddPurchaseRequest = () => {
   return (
diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
index 5f0dacd4..a4d59ae2 100644
--- a/src/app/purchase/detail/edit/page.tsx
+++ b/src/app/purchase/detail/edit/page.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
 import { PurchaseRequestApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 8ea80739..5a497f14 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequisitionsForm';
+import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
 import { PurchaseRequestApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
similarity index 100%
rename from src/components/pages/purchase/form/request/PurchaseRequisitionsForm.schema.ts
rename to src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
similarity index 99%
rename from src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
rename to src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 5d52bd20..4ae15afb 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -22,7 +22,7 @@ import {
   PurchaseRequestFormValues,
   getPurchaseRequestFormInitialValues,
   UpdatePurchaseRequestFormSchema,
-} from './PurchaseRequisitionsForm.schema';
+} from './PurchaseRequestForm.schema';
 import {
   SupplierApi,
   AreaApi,

From 69a8899cacd4498286b26e910a46151cdb256aab Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 09:39:16 +0700
Subject: [PATCH 079/168] refactor(FE-212): simplify PurchaseRequestService to
 a constant API instance

---
 src/services/api/purchase.ts | 40 ++----------------------------------
 1 file changed, 2 insertions(+), 38 deletions(-)

diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index ec329498..7dbc2b6e 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -9,45 +9,11 @@ import {
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 
-export class PurchaseRequestService extends BaseApiService<
+export const PurchaseRequestApi = new BaseApiService<
   Purchase,
   CreatePurchaseRequestPayload,
   UpdatePurchaseRequestPayload
-> {
-  constructor(basePath: string = '/purchases') {
-    super(basePath);
-  }
-
-  async approve(
-    idOrIds: number | number[],
-    notes?: string
-  ): Promise<BaseApiResponse<Purchase[]> | undefined> {
-    const approvable_ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
-    return await this.customRequest<BaseApiResponse<Purchase[]>>('approvals', {
-      method: 'POST',
-      payload: {
-        action: 'APPROVED',
-        approvable_ids,
-        notes,
-      },
-    });
-  }
-
-  async reject(
-    idOrIds: number | number[],
-    notes: string = 'Rejected via Form'
-  ): Promise<BaseApiResponse<Purchase[]> | undefined> {
-    const approvable_ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
-    return await this.customRequest<BaseApiResponse<Purchase[]>>('approvals', {
-      method: 'POST',
-      payload: {
-        action: 'REJECTED',
-        approvable_ids,
-        notes,
-      },
-    });
-  }
-}
+>('/purchases');
 
 export class StaffApprovalService extends BaseApiService<
   Purchase,
@@ -118,8 +84,6 @@ export class AcceptApprovalService extends BaseApiService<
   }
 }
 
-export const PurchaseRequestApi = new PurchaseRequestService();
-
 export const StaffApprovalApi = new StaffApprovalService('/purchases');
 
 export const ManagerApprovalApi = new ManagerApprovalService('/purchases');

From 30ed70b669ae35a1be6ac1f1d5d60fcbce5918e2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 10:13:30 +0700
Subject: [PATCH 080/168] refactor(FE-212): add
 DeletePurchaseRequestItemPayload and implement PurchaseDeleteItemsService

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx |  8 ++--
 .../form/order/PurchaseOrderForm.schema.ts    | 26 +++++++++++
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  8 ++--
 .../purchase/order/PurchaseOrderDetail.tsx    | 12 +++--
 src/services/api/purchase.ts                  | 44 +++++++++++++++----
 src/types/api/purchase/purchase.d.ts          |  4 ++
 6 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 3221bd86..a604fe8a 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -102,17 +102,17 @@ const PurchaseOrderAcceptApprovalForm = ({
   // ===== SUBMISSION HANDLERS =====
   const createAcceptApprovalHandler = useCallback(
     async (payload: CreateAcceptApprovalRequestPayload) => {
-      const purchaseRequisitionId = searchParams.get('purchaseId')
+      const purchaseRequestId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
         : initialValues?.id || 1;
 
-      if (!purchaseRequisitionId) {
-        setPurchaseOrderFormErrorMessage('Purchase Requisition ID is required');
+      if (!purchaseRequestId) {
+        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
         return;
       }
 
       const res = await AcceptApprovalApi.acceptApproval(
-        purchaseRequisitionId,
+        purchaseRequestId,
         payload
       );
 
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 1dfea73c..a24ff3ac 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -81,6 +81,10 @@ export type PurchaseAcceptApprovalItemSchema = {
   transport_total: number | string;
 };
 
+export type PurchaseDeleteItemsSchema = {
+  item_ids: number[];
+};
+
 const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffApprovalItemSchema> =
   Yup.object({
     purchase_item: Yup.object({
@@ -249,6 +253,20 @@ export const PurchaseRequestStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRe
       .typeError('Item pembelian wajib diisi!'),
   });
 
+export const PurchaseDeleteItemsSchema: Yup.ObjectSchema<PurchaseDeleteItemsSchema> =
+  Yup.object({
+    item_ids: Yup.array()
+      .of(
+        Yup.number()
+          .min(1, 'Item ID tidak valid!')
+          .required('Item ID tidak valid!')
+          .typeError('Item ID tidak valid!')
+      )
+      .min(1, 'Minimal harus ada 1 item yang dihapus!')
+      .required('Item yang dihapus wajib diisi!')
+      .typeError('Item yang dihapus wajib diisi!'),
+  });
+
 export const PurchaseRequestStaffApprovalFormInitialValues: PurchaseRequestStaffApprovalFormSchemaType =
   {
     notes: '',
@@ -368,3 +386,11 @@ export const PurchaseRequestAcceptApprovalFormDefaultValues = (
 export type PurchaseRequestAcceptApprovalFormValues = Yup.InferType<
   typeof PurchaseRequestAcceptApprovalFormSchema
 >;
+
+export const PurchaseDeleteItemsInitialValues: PurchaseDeleteItemsSchema = {
+  item_ids: [],
+};
+
+export type PurchaseDeleteItemsFormValues = Yup.InferType<
+  typeof PurchaseDeleteItemsSchema
+>;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 25a35966..049ffbfe 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -79,17 +79,17 @@ const PurchaseOrderStaffApprovalForm = ({
   // ===== SUBMISSION HANDLERS =====
   const createStaffApprovalHandler = useCallback(
     async (payload: CreateStaffApprovalRequestPayload) => {
-      const purchaseRequisitionId = searchParams.get('purchaseId')
+      const purchaseRequestId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
         : initialValues?.id || 1;
 
-      if (!purchaseRequisitionId) {
-        setPurchaseOrderFormErrorMessage('Purchase Requisition ID is required');
+      if (!purchaseRequestId) {
+        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
         return;
       }
 
       const res = await StaffApprovalApi.createStaffApproval(
-        purchaseRequisitionId,
+        purchaseRequestId,
         payload
       );
 
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 6a22cd80..afc2dfcb 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -318,17 +318,17 @@ const PurchaseOrderDetail = ({
   // ===== SUBMISSION HANDLER =====
   const createManagerApprovalHandler = useCallback(
     async (payload: CreateManagerApprovalRequestPayload) => {
-      const purchaseRequisitionId = searchParams.get('purchaseId')
+      const purchaseRequestId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
         : purchaseData?.id || 1;
 
-      if (!purchaseRequisitionId) {
-        toast.error('Purchase Requisition ID is required');
+      if (!purchaseRequestId) {
+        toast.error('Purchase Request ID is required');
         return;
       }
 
       const res = await ManagerApprovalApi.createManagerApproval(
-        purchaseRequisitionId,
+        purchaseRequestId,
         payload
       );
 
@@ -377,6 +377,10 @@ const PurchaseOrderDetail = ({
   };
 
   const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
+    {
+      header: 'No',
+      cell: (props) => props.row.index + 1,
+    },
     {
       accessorKey: 'product.name',
       header: 'Produk',
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 7dbc2b6e..865ae59c 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -5,6 +5,7 @@ import {
   CreateStaffApprovalRequestPayload,
   CreateManagerApprovalRequestPayload,
   CreateAcceptApprovalRequestPayload,
+  DeletePurchaseRequestItemPayload,
 } from '@/types/api/purchase/purchase';
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
@@ -18,18 +19,18 @@ export const PurchaseRequestApi = new BaseApiService<
 export class StaffApprovalService extends BaseApiService<
   Purchase,
   CreateStaffApprovalRequestPayload,
-  CreateAcceptApprovalRequestPayload
+  unknown
 > {
   constructor(basePath: string = '') {
     super(basePath);
   }
 
   async createStaffApproval(
-    purchaseRequisitionId: number,
+    purchaseRequestId: number,
     payload: CreateStaffApprovalRequestPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequisitionId}/approvals/staff`,
+      `${purchaseRequestId}/approvals/staff`,
       {
         method: 'POST',
         payload,
@@ -48,11 +49,11 @@ export class ManagerApprovalService extends BaseApiService<
   }
 
   async createManagerApproval(
-    purchaseRequisitionId: number,
+    purchaseRequestId: number,
     payload: CreateManagerApprovalRequestPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequisitionId}/approvals/manager`,
+      `${purchaseRequestId}/approvals/manager`,
       {
         method: 'POST',
         payload,
@@ -64,18 +65,41 @@ export class ManagerApprovalService extends BaseApiService<
 export class AcceptApprovalService extends BaseApiService<
   Purchase,
   CreateAcceptApprovalRequestPayload,
-  CreateAcceptApprovalRequestPayload
+  unknown
 > {
   constructor(basePath: string = '') {
     super(basePath);
   }
 
   async acceptApproval(
-    purchaseRequisitionId: number,
+    purchaseRequestId: number,
     payload: CreateAcceptApprovalRequestPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequisitionId}/approvals/receipts`,
+      `${purchaseRequestId}/approvals/receipts`,
+      {
+        method: 'POST',
+        payload,
+      }
+    );
+  }
+}
+
+export class PurchaseDeleteItemsService extends BaseApiService<
+  Purchase,
+  DeletePurchaseRequestItemPayload,
+  unknown
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  async deleteItems(
+    purchaseRequestId: number,
+    payload: DeletePurchaseRequestItemPayload
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.customRequest<BaseApiResponse<{ message: string }>>(
+      `${purchaseRequestId}/items`,
       {
         method: 'POST',
         payload,
@@ -89,3 +113,7 @@ export const StaffApprovalApi = new StaffApprovalService('/purchases');
 export const ManagerApprovalApi = new ManagerApprovalService('/purchases');
 
 export const AcceptApprovalApi = new AcceptApprovalService('/purchases');
+
+export const PurchaseDeleteItemsApi = new PurchaseDeleteItemsService(
+  '/purchases'
+);
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 9a0cf64b..85eb6ba6 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -87,4 +87,8 @@ export type CreateAcceptApprovalRequestPayload = {
   }[];
 };
 
+export type DeletePurchaseRequestItemPayload = {
+  item_ids: number[];
+};
+
 export type UpdatePurchaseRequestPayload = CreatePurchaseRequestPayload;

From b82ba60a32f5ab651c55b8d77bb8bdf3d3c54078 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 10:21:17 +0700
Subject: [PATCH 081/168] refactor(FE-208): enhance PurchaseOrderDetail layout
 with section header for goods receipt information

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index afc2dfcb..722bb0fa 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -775,26 +775,32 @@ const PurchaseOrderDetail = ({
           wrapper: 'w-full mt-8',
         }}
       >
-        <div className='rounded-lg border border-gray-200 overflow-hidden mt-8'>
-          <div className='overflow-x-auto'>
-            <Table<PurchaseItem>
-              data={goodsReceiptItems}
-              columns={goodsReceiptColumns}
-              isLoading={false}
-              className={{
-                containerClassName: 'm-0',
-                tableWrapperClassName: 'overflow-x-auto',
-                tableClassName: 'w-full table-auto',
-                headerRowClassName: 'bg-gray-50 border-b border-gray-200',
-                headerColumnClassName:
-                  'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
-                bodyRowClassName:
-                  'border-b border-gray-100 hover:bg-gray-50 transition-colors',
-                bodyColumnClassName:
-                  'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
-                paginationClassName: 'hidden',
-              }}
-            />
+        {/* Detail Penerimaan Barang Section */}
+        <div className='my-8'>
+          <h3 className='text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200'>
+            Informasi Penerimaan Barang
+          </h3>
+          <div className='rounded-lg border border-gray-200 overflow-hidden'>
+            <div className='overflow-x-auto'>
+              <Table<PurchaseItem>
+                data={goodsReceiptItems}
+                columns={goodsReceiptColumns}
+                isLoading={false}
+                className={{
+                  containerClassName: 'm-0',
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto',
+                  headerRowClassName: 'bg-gray-50 border-b border-gray-200',
+                  headerColumnClassName:
+                    'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
+                  bodyRowClassName:
+                    'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                  bodyColumnClassName:
+                    'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            </div>
           </div>
         </div>
       </Card>

From 2190f65cb245d632e319513ba5a6127c967d1791 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 11:15:13 +0700
Subject: [PATCH 082/168] refactor(FE-208): add edit functionality to Item
 Pembelian section in PurchaseOrderDetail

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  4 +-
 .../purchase/order/PurchaseOrderDetail.tsx    | 45 +++++++++++++++++--
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 049ffbfe..137b9ff7 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -303,7 +303,9 @@ const PurchaseOrderStaffApprovalForm = ({
       >
         <div className='w-full'>
           <h2 className='text-lg font-semibold mb-4'>
-            Konfirmasi Approve Pembelian
+            {type === 'add'
+              ? 'Konfirmasi Item Pembelian'
+              : 'Edit Item Pembelian'}
           </h2>
           <div className='overflow-x-auto'>
             <table className='table'>
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 722bb0fa..69a4449c 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -12,6 +12,8 @@ import { Icon } from '@iconify/react';
 import { useModal } from '@/components/Modal';
 import Modal from '@/components/Modal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
 import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
@@ -36,6 +38,22 @@ import { isResponseError } from '@/lib/api-helper';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
 
+const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
+  return (
+    <RowOptionsMenuWrapper type='dropdown'>
+      <Button
+        onClick={onEdit}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
   data?: Purchase;
@@ -306,6 +324,7 @@ const PurchaseOrderDetail = ({
   const confirmationModalWithNotes = useModal();
   const staffApprovalModal = useModal();
   const acceptApprovalModal = useModal();
+  const editModal = useModal();
 
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
@@ -707,9 +726,14 @@ const PurchaseOrderDetail = ({
 
         {/* Item Pembelian Section */}
         <div className='mb-8'>
-          <h3 className='text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200'>
-            Item Pembelian
-          </h3>
+          <div className='flex items-center justify-between mb-4 pb-2 border-b border-gray-200'>
+            <h3 className='text-lg font-semibold text-gray-800'>
+              Item Pembelian
+            </h3>
+            <RowDropdownOptions isLast2Rows>
+              <ItemPembelianDropdown onEdit={editModal.openModal} />
+            </RowDropdownOptions>
+          </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             {/* Product Table */}
             <div className='overflow-x-auto'>
@@ -857,6 +881,21 @@ const PurchaseOrderDetail = ({
           onCancel={acceptApprovalModal.closeModal}
         />
       </Modal>
+
+      {/* Edit Modal */}
+      <Modal
+        ref={editModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='edit'
+          initialValues={purchaseData}
+          onCancel={editModal.closeModal}
+        />
+      </Modal>
     </section>
   );
 };

From d0ba9eadbdb9b69e952c33c55b9324e01f04f8e8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 11:29:17 +0700
Subject: [PATCH 083/168] refactor(FE-208): add edit functionality and modal
 for Penerimaan Barang in PurchaseOrderDetail

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx |  4 +-
 .../purchase/order/PurchaseOrderDetail.tsx    | 43 +++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index a604fe8a..a1475c18 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -393,7 +393,9 @@ const PurchaseOrderAcceptApprovalForm = ({
     <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
       <div className='w-full'>
         <h2 className='text-lg font-semibold mb-4'>
-          Konfirmasi Penerimaan Produk
+          {type === 'add'
+            ? 'Konfirmasi Penerimaan Produk'
+            : 'Edit Penerimaan Produk'}
         </h2>
         <div className='overflow-x-auto'>
           <table className='table'>
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 69a4449c..778b2071 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -54,6 +54,22 @@ const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
   );
 };
 
+const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
+  return (
+    <RowOptionsMenuWrapper type='dropdown'>
+      <Button
+        onClick={onEdit}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
   data?: Purchase;
@@ -325,6 +341,7 @@ const PurchaseOrderDetail = ({
   const staffApprovalModal = useModal();
   const acceptApprovalModal = useModal();
   const editModal = useModal();
+  const penerimaanBarangModal = useModal();
 
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
@@ -801,9 +818,14 @@ const PurchaseOrderDetail = ({
       >
         {/* Detail Penerimaan Barang Section */}
         <div className='my-8'>
-          <h3 className='text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200'>
-            Informasi Penerimaan Barang
-          </h3>
+          <div className='flex items-center justify-between mb-4 pb-2 border-b border-gray-200'>
+            <h3 className='text-lg font-semibold text-gray-800'>
+              Informasi Penerimaan Barang
+            </h3>
+            <RowDropdownOptions isLast2Rows>
+              <PenerimaanBarangDropdown onEdit={penerimaanBarangModal.openModal} />
+            </RowDropdownOptions>
+          </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             <div className='overflow-x-auto'>
               <Table<PurchaseItem>
@@ -896,6 +918,21 @@ const PurchaseOrderDetail = ({
           onCancel={editModal.closeModal}
         />
       </Modal>
+
+      {/* Penerimaan Barang Modal */}
+      <Modal
+        ref={penerimaanBarangModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='edit'
+          initialValues={purchaseData}
+          onCancel={penerimaanBarangModal.closeModal}
+        />
+      </Modal>
     </section>
   );
 };

From 7ec41054546f6ce5d14f4fe0b9138c323ed6208f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 13:09:47 +0700
Subject: [PATCH 084/168] refactor(FE-208,212): implement delete functionality
 for purchase order items with confirmation modal

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 167 ++++++++++++++----
 1 file changed, 136 insertions(+), 31 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 778b2071..acbf6660 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useCallback, useMemo } from 'react';
-import { ColumnDef } from '@tanstack/react-table';
+import { useCallback, useMemo, useState } from 'react';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
 
 import ApprovalSteps, {
   formatGroupedApprovalsToApprovalSteps,
@@ -10,8 +10,10 @@ import Table from '@/components/Table';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import { useModal } from '@/components/Modal';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import Modal from '@/components/Modal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
@@ -33,10 +35,14 @@ import {
   dummyProductWarehouses,
   dummyWarehouses,
 } from '@/dummy/marketing.dummy';
-import { ManagerApprovalApi } from '@/services/api/purchase';
+import {
+  ManagerApprovalApi,
+  PurchaseDeleteItemsApi,
+} from '@/services/api/purchase';
 import { isResponseError } from '@/lib/api-helper';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
+import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
 
 const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
@@ -342,10 +348,20 @@ const PurchaseOrderDetail = ({
   const acceptApprovalModal = useModal();
   const editModal = useModal();
   const penerimaanBarangModal = useModal();
+  const deleteModal = useModal();
+
+  // ===== STATE MANAGEMENT =====
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<PurchaseItem | null>(null);
 
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
-  const purchaseOrderItems = purchaseData.items || [];
+  const purchaseOrderItems = useMemo(
+    () => purchaseData.items || [],
+    [purchaseData.items]
+  );
   const goodsReceiptItems = dummyGoodsReceiptItems;
   const groupedApprovals = dummyGroupedApprovals;
   const latestApproval =
@@ -377,6 +393,45 @@ const PurchaseOrderDetail = ({
     [purchaseData?.id, searchParams]
   );
 
+  // ===== DELETE HANDLER =====
+  const deleteItemHandler = useCallback(async () => {
+    const purchaseRequestId = searchParams.get('purchaseId')
+      ? parseInt(searchParams.get('purchaseId')!)
+      : purchaseData?.id || 1;
+
+    if (!purchaseRequestId) {
+      toast.error('Purchase Request ID is required');
+      return;
+    }
+
+    if (!selectedItem) {
+      toast.error('Item tidak valid');
+      return;
+    }
+
+    setIsDeleteLoading(true);
+
+    try {
+      const res = await PurchaseDeleteItemsApi.deleteItems(purchaseRequestId, {
+        item_ids: [selectedItem.id],
+      });
+
+      if (isResponseError(res)) {
+        toast.error(res.message || 'Gagal menghapus item pembelian');
+        return;
+      }
+
+      toast.success('Berhasil menghapus item pembelian');
+
+      deleteModal.closeModal();
+      setSelectedItem(null);
+    } catch (error) {
+      toast.error('Terjadi kesalahan saat menghapus item pembelian');
+    } finally {
+      setIsDeleteLoading(false);
+    }
+  }, [purchaseData?.id, searchParams, selectedItem]);
+
   // ===== COMPUTED VALUES =====
   const approvalSteps = useMemo(() => {
     if (!groupedApprovals.length || !latestApproval) return [];
@@ -400,19 +455,33 @@ const PurchaseOrderDetail = ({
     );
   }, [purchaseOrderItems]);
 
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat('id-ID', {
-      style: 'currency',
-      currency: 'IDR',
-      minimumFractionDigits: 2,
-    }).format(value);
-  };
-
-  const formatNumber = (value: number) => {
-    return new Intl.NumberFormat('id-ID').format(value);
-  };
-
   const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => {
+        return (
+          <div>
+            <CheckboxInput
+              name='row'
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        );
+      },
+    },
     {
       header: 'No',
       cell: (props) => props.row.index + 1,
@@ -448,6 +517,26 @@ const PurchaseOrderDetail = ({
       header: 'Total (Rp.)',
       cell: (props) => formatCurrency(props.getValue() as number),
     },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const deleteClickHandler = () => {
+          setSelectedItem(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <Button
+            type='button'
+            color='error'
+            className='text-sm'
+            onClick={deleteClickHandler}
+          >
+            <Icon icon='mdi:trash-can' width={16} height={16} />
+          </Button>
+        );
+      },
+    },
   ];
 
   const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [
@@ -456,9 +545,7 @@ const PurchaseOrderDetail = ({
       header: 'Tanggal Penerimaan',
       cell: (props) =>
         props.row.original.received_date
-          ? new Date(props.row.original.received_date).toLocaleDateString(
-              'id-ID'
-            )
+          ? formatDate(props.row.original.received_date, 'DD MMM YYYY')
           : '-',
     },
     {
@@ -568,7 +655,7 @@ const PurchaseOrderDetail = ({
 
   return (
     <section className='w-full'>
-      {/* Approval Action Buttons */}
+      {/* Approval and Action Buttons */}
       <div className='flex flex-wrap gap-3 my-6'>
         <Button
           onClick={() => staffApprovalModal.openModal()}
@@ -693,16 +780,8 @@ const PurchaseOrderDetail = ({
                     Tgl. Jatuh Tempo
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    :{' '}
-                    {new Date(purchaseData.due_date).toLocaleDateString(
-                      'id-ID',
-                      {
-                        day: 'numeric',
-                        month: 'short',
-                        year: 'numeric',
-                      }
-                    )}{' '}
-                    ({purchaseData.credit_term} hari)
+                    : {formatDate(purchaseData.due_date, 'D MMM YYYY')} (
+                    {purchaseData.credit_term} hari)
                   </span>
                 </div>
               </div>
@@ -758,6 +837,11 @@ const PurchaseOrderDetail = ({
                 data={purchaseOrderItems}
                 columns={purchaseOrderColumns}
                 isLoading={false}
+                sorting={sorting}
+                setSorting={setSorting}
+                rowSelection={rowSelection}
+                setRowSelection={setRowSelection}
+                enableRowSelection={() => true}
                 className={{
                   containerClassName: 'm-0',
                   tableWrapperClassName: 'overflow-x-auto',
@@ -823,7 +907,9 @@ const PurchaseOrderDetail = ({
               Informasi Penerimaan Barang
             </h3>
             <RowDropdownOptions isLast2Rows>
-              <PenerimaanBarangDropdown onEdit={penerimaanBarangModal.openModal} />
+              <PenerimaanBarangDropdown
+                onEdit={penerimaanBarangModal.openModal}
+              />
             </RowDropdownOptions>
           </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
@@ -933,6 +1019,25 @@ const PurchaseOrderDetail = ({
           onCancel={penerimaanBarangModal.closeModal}
         />
       </Modal>
+
+      {/* Delete Confirmation Modal */}
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menghapus item pembelian ini?'
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Hapus',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: async () => {
+            await deleteItemHandler();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
     </section>
   );
 };

From 283c2b2a440e90020e8d82c193d8fba914c98b18 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 13:21:43 +0700
Subject: [PATCH 085/168] feat(FE-208,212): implement bulk delete functionality
 for purchase order items with confirmation modal

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 113 ++++++++++++++++--
 1 file changed, 104 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index acbf6660..225a079e 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -175,6 +175,67 @@ const dummyPurchaseData: Purchase = {
       vehicle_number: null,
       warehouse: dummyWarehouses[0],
     },
+    {
+      id: 2,
+      purchase_id: 2,
+      product: {
+        id: 1,
+        name: 'CP Vaksin',
+        brand: '',
+        sku: '',
+        product_price: 0,
+        selling_price: 0,
+        tax: 0,
+        expiry_period: 0,
+        uom: {
+          id: 1,
+          name: 'Ekor',
+          created_user: {
+            id: 1,
+            id_user: 1,
+            email: 'hello@gmail.com',
+            name: 'Admin',
+          },
+          created_at: '2025-01-01T00:00:00Z',
+          updated_at: '2025-01-01T00:00:00Z',
+        },
+        product_category: {
+          id: 1,
+          code: 'DOC',
+          name: 'DOC',
+          created_user: {
+            id: 1,
+            id_user: 1,
+            email: 'hello@gmail.com',
+            name: 'Admin',
+          },
+          created_at: '2025-01-01T00:00:00Z',
+          updated_at: '2025-01-01T00:00:00Z',
+        },
+        suppliers: [],
+        flags: [],
+        created_user: {
+          id: 1,
+          id_user: 1,
+          email: 'hello@gmail.com',
+          name: 'Admin',
+        },
+        created_at: '2025-01-01T00:00:00Z',
+        updated_at: '2025-01-01T00:00:00Z',
+      },
+      product_warehouse: dummyProductWarehouses[0],
+      quantity: 10000,
+      sub_qty: 10000,
+      total_qty: 10000,
+      total_used: 0,
+      price: 6500,
+      total_price: 65000000,
+      received_date: null,
+      travel_number: null,
+      travel_number_docs: null,
+      vehicle_number: null,
+      warehouse: dummyWarehouses[0],
+    },
   ],
   created_at: '2025-01-10T00:00:00Z',
   updated_at: '2025-01-10T00:00:00Z',
@@ -184,7 +245,6 @@ const dummyPurchaseData: Purchase = {
   warehouse: dummyWarehouses[0],
 };
 
-// Goods Receipt data - using items from PurchaseItem with received data
 const dummyGoodsReceiptItems: PurchaseItem[] = [
   {
     id: 1,
@@ -356,6 +416,10 @@ const PurchaseOrderDetail = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState<PurchaseItem | null>(null);
 
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
   const purchaseOrderItems = useMemo(
@@ -394,7 +458,7 @@ const PurchaseOrderDetail = ({
   );
 
   // ===== DELETE HANDLER =====
-  const deleteItemHandler = useCallback(async () => {
+  const deleteItemsHandler = useCallback(async () => {
     const purchaseRequestId = searchParams.get('purchaseId')
       ? parseInt(searchParams.get('purchaseId')!)
       : purchaseData?.id || 1;
@@ -404,8 +468,10 @@ const PurchaseOrderDetail = ({
       return;
     }
 
-    if (!selectedItem) {
-      toast.error('Item tidak valid');
+    const itemIdsToDelete = selectedItem ? [selectedItem.id] : selectedRowIds;
+
+    if (itemIdsToDelete.length === 0) {
+      toast.error('Pilih minimal 1 item untuk dihapus');
       return;
     }
 
@@ -413,7 +479,7 @@ const PurchaseOrderDetail = ({
 
     try {
       const res = await PurchaseDeleteItemsApi.deleteItems(purchaseRequestId, {
-        item_ids: [selectedItem.id],
+        item_ids: itemIdsToDelete,
       });
 
       if (isResponseError(res)) {
@@ -421,16 +487,21 @@ const PurchaseOrderDetail = ({
         return;
       }
 
-      toast.success('Berhasil menghapus item pembelian');
+      const successMessage = selectedItem
+        ? 'Berhasil menghapus item pembelian'
+        : `Berhasil menghapus ${itemIdsToDelete.length} item pembelian`;
+
+      toast.success(successMessage);
 
       deleteModal.closeModal();
       setSelectedItem(null);
+      setRowSelection({});
     } catch (error) {
       toast.error('Terjadi kesalahan saat menghapus item pembelian');
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [purchaseData?.id, searchParams, selectedItem]);
+  }, [purchaseData?.id, searchParams, selectedItem, selectedRowIds]);
 
   // ===== COMPUTED VALUES =====
   const approvalSteps = useMemo(() => {
@@ -522,6 +593,7 @@ const PurchaseOrderDetail = ({
       cell: (props) => {
         const deleteClickHandler = () => {
           setSelectedItem(props.row.original);
+          setRowSelection({}); // Clear row selection when doing single delete
           deleteModal.openModal();
         };
 
@@ -857,6 +929,25 @@ const PurchaseOrderDetail = ({
               />
             </div>
 
+            {/* Bulk Action Buttons */}
+            {selectedRowIds.length > 0 && (
+              <div className='flex justify-center items-center mt-4 gap-4 px-6 py-4 bg-gray-50 border-t border-gray-200'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={() => {
+                    setSelectedItem(null);
+                    deleteModal.openModal();
+                  }}
+                  disabled={selectedRowIds.length === 0}
+                  className='w-fit text-sm'
+                >
+                  <Icon icon='mdi:trash-can' width={16} height={16} />
+                  Hapus Terpilih ({selectedRowIds.length})
+                </Button>
+              </div>
+            )}
+
             {/* Bottom Section - Catatan dan Total */}
             <div className='border-t border-gray-200 grid grid-cols-1 lg:grid-cols-5 divide-x divide-gray-200'>
               {/* Catatan Section */}
@@ -1024,14 +1115,18 @@ const PurchaseOrderDetail = ({
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text='Apakah Anda yakin ingin menghapus item pembelian ini?'
+        text={`Apakah Anda yakin ingin menghapus ${
+          selectedItem
+            ? 'item pembelian ini?'
+            : `${selectedRowIds.length} item pembelian yang dipilih?`
+        }`}
         closeOnBackdrop
         primaryButton={{
           text: 'Ya, Hapus',
           color: 'error',
           isLoading: isDeleteLoading,
           onClick: async () => {
-            await deleteItemHandler();
+            await deleteItemsHandler();
           },
         }}
         secondaryButton={{

From c8f1ea0e4fcfa1fda85cf1451556debb345db5de Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 13:45:28 +0700
Subject: [PATCH 086/168] feat(FE-208): add index column to goods receipt table
 in PurchaseOrderDetail

---
 src/components/pages/purchase/order/PurchaseOrderDetail.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 225a079e..cffb3f61 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -612,6 +612,10 @@ const PurchaseOrderDetail = ({
   ];
 
   const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [
+    {
+      header: 'No',
+      cell: (props) => props.row.index + 1,
+    },
     {
       accessorKey: 'received_date',
       header: 'Tanggal Penerimaan',

From 6467af35bcdb8ed7cf1b762c8d659b341cc07d01 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 13:51:32 +0700
Subject: [PATCH 087/168] refactor(FE-208): restructure goods receipt table
 columns in PurchaseOrderDetail

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 167 +++++++++---------
 1 file changed, 86 insertions(+), 81 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index cffb3f61..ec18ed15 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -613,87 +613,92 @@ const PurchaseOrderDetail = ({
 
   const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [
     {
-      header: 'No',
-      cell: (props) => props.row.index + 1,
-    },
-    {
-      accessorKey: 'received_date',
-      header: 'Tanggal Penerimaan',
-      cell: (props) =>
-        props.row.original.received_date
-          ? formatDate(props.row.original.received_date, 'DD MMM YYYY')
-          : '-',
-    },
-    {
-      accessorKey: 'product_warehouse.warehouse.name',
-      header: 'Gudang Tujuan',
-      cell: (props) =>
-        props.row.original.product_warehouse?.warehouse?.name || '-',
-    },
-    {
-      accessorKey: 'travel_number',
-      header: 'No. Surat Jalan',
-      cell: (props) => props.row.original.travel_number || '-',
-    },
-    {
-      accessorKey: 'travel_number_docs',
-      header: 'Dokumen Surat Jalan',
-      cell: (props) => {
-        const documentPath = props.row.original.travel_number_docs;
-        return documentPath ? (
-          <Button
-            color='primary'
-            className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
-            href={documentPath}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Icon
-              icon='material-symbols:file-open-outline'
-              width={16}
-              height={16}
-            />
-            Lihat Dokumen
-          </Button>
-        ) : (
-          '-'
-        );
-      },
-    },
-    {
-      accessorKey: 'vehicle_number',
-      header: 'No. Armada',
-      cell: (props) => props.row.original.vehicle_number || '-',
-    },
-    {
-      accessorKey: 'pengangkut',
-      header: 'Pengangkut',
-      cell: (props) => props.row.original.product?.name || '-',
-    },
-    {
-      accessorKey: 'quantity',
-      header: 'Jumlah Total',
-      cell: (props) => formatNumber(props.getValue() as number),
-    },
-    {
-      accessorKey: 'sub_qty',
-      header: 'Jumlah Diterima',
-      cell: (props) => formatNumber(props.getValue() as number),
-    },
-    {
-      accessorKey: 'ekspedisi',
-      header: 'Ekspedisi',
-      cell: (props) => 'Ekspedisi 1',
-    },
-    {
-      accessorKey: 'price',
-      header: 'Transport /Item',
-      cell: (props) => formatCurrency(props.getValue() as number),
-    },
-    {
-      accessorKey: 'total_price',
-      header: 'Transport Total',
-      cell: (props) => formatCurrency(props.getValue() as number),
+      header: 'Header Placeholder untuk tiap Produk Penerimaan Barang',
+      columns: [
+        {
+          header: 'No',
+          cell: (props) => props.row.index + 1,
+        },
+        {
+          accessorKey: 'received_date',
+          header: 'Tanggal Penerimaan',
+          cell: (props) =>
+            props.row.original.received_date
+              ? formatDate(props.row.original.received_date, 'DD MMM YYYY')
+              : '-',
+        },
+        {
+          accessorKey: 'product_warehouse.warehouse.name',
+          header: 'Gudang Tujuan',
+          cell: (props) =>
+            props.row.original.product_warehouse?.warehouse?.name || '-',
+        },
+        {
+          accessorKey: 'travel_number',
+          header: 'No. Surat Jalan',
+          cell: (props) => props.row.original.travel_number || '-',
+        },
+        {
+          accessorKey: 'travel_number_docs',
+          header: 'Dokumen Surat Jalan',
+          cell: (props) => {
+            const documentPath = props.row.original.travel_number_docs;
+            return documentPath ? (
+              <Button
+                color='primary'
+                className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
+                href={documentPath}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Icon
+                  icon='material-symbols:file-open-outline'
+                  width={16}
+                  height={16}
+                />
+                Lihat Dokumen
+              </Button>
+            ) : (
+              '-'
+            );
+          },
+        },
+        {
+          accessorKey: 'vehicle_number',
+          header: 'No. Armada',
+          cell: (props) => props.row.original.vehicle_number || '-',
+        },
+        {
+          accessorKey: 'pengangkut',
+          header: 'Pengangkut',
+          cell: (props) => props.row.original.product?.name || '-',
+        },
+        {
+          accessorKey: 'quantity',
+          header: 'Jumlah Total',
+          cell: (props) => formatNumber(props.getValue() as number),
+        },
+        {
+          accessorKey: 'sub_qty',
+          header: 'Jumlah Diterima',
+          cell: (props) => formatNumber(props.getValue() as number),
+        },
+        {
+          accessorKey: 'ekspedisi',
+          header: 'Ekspedisi',
+          cell: (props) => 'Ekspedisi 1',
+        },
+        {
+          accessorKey: 'price',
+          header: 'Transport /Item',
+          cell: (props) => formatCurrency(props.getValue() as number),
+        },
+        {
+          accessorKey: 'total_price',
+          header: 'Transport Total',
+          cell: (props) => formatCurrency(props.getValue() as number),
+        },
+      ],
     },
   ];
 

From 71a41d3f372ab4d0bf17f21f1b063fec793c76e6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 14:38:09 +0700
Subject: [PATCH 088/168] feat(FE-208,212): update purchase request form to use
 'qty' instead of 'quantity' and add credit term field

---
 .../request/PurchaseRequestForm.schema.ts     |  14 +-
 .../form/request/PurchaseRequestForm.tsx      | 337 ++++++------------
 src/types/api/purchase/purchase.d.ts          |   9 +-
 3 files changed, 125 insertions(+), 235 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index 51305585..110a3d7c 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -7,6 +7,7 @@ type PurchaseRequestFormSchemaType = {
     label: string;
   } | null;
   supplier_id: number;
+  credit_term: number;
   area?: {
     value: number;
     label: string;
@@ -34,7 +35,7 @@ type PurchaseRequestFormSchemaType = {
       label: string;
     } | null;
     product_id: number;
-    quantity: number | string;
+    qty: number | string;
   }[];
 };
 
@@ -49,7 +50,7 @@ export type PurchaseItemSchema = {
     label: string;
   } | null;
   product_id: number;
-  quantity: number | string;
+  qty: number | string;
 };
 
 const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
@@ -70,7 +71,7 @@ const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
       .required('Produk wajib dipilih!')
       .min(1, 'Produk wajib dipilih!')
       .typeError('Produk wajib dipilih!'),
-    quantity: Yup.mixed<string | number>()
+    qty: Yup.mixed<string | number>()
       .required('Kuantitas wajib diisi!')
       .test(
         'is-valid-qty',
@@ -91,6 +92,10 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
     }).nullable(),
+    credit_term: Yup.number()
+      .required('Jangka waktu kredit wajib diisi!')
+      .min(0, 'Jangka waktu kredit tidak boleh kurang dari 0!')
+      .typeError('Jangka waktu kredit wajib diisi!'),
     supplier_id: Yup.number()
       .required('Supplier wajib dipilih!')
       .min(1, 'Supplier wajib dipilih!')
@@ -143,6 +148,7 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : null,
   supplier_id: initialValues?.supplier?.id ?? 0,
+  credit_term: initialValues?.credit_term ?? 0,
   area: initialValues?.area
     ? {
         value: initialValues.area.id,
@@ -157,7 +163,6 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : null,
   location_id: initialValues?.location?.id ?? 0,
-  notes: initialValues?.notes ?? null,
   warehouse: initialValues?.warehouse
     ? {
         value: initialValues.warehouse.id,
@@ -165,5 +170,6 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : undefined,
   warehouse_id: initialValues?.warehouse?.id ?? 0,
+  notes: initialValues?.notes ?? null,
   items: [],
 });
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 4ae15afb..89879076 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -68,13 +68,13 @@ const PurchaseRequestForm = ({
     product_warehouse_id: number;
     warehouse_id: number;
     warehouse_name: string;
-    quantity: number;
+    qty: number;
   }
 
   // ===== UTILITY FUNCTIONS =====
   const getPurchaseItemError = (
     idx: number,
-    field: 'warehouse_id' | 'product_warehouse_id' | 'product_id' | 'quantity'
+    field: 'warehouse_id' | 'product_warehouse_id' | 'product_id' | 'qty'
   ): { isError: boolean; errorMessage: string } => {
     const touchedItem = formik.touched.items?.[idx];
     const errorItem = formik.errors.items?.[idx] as
@@ -191,32 +191,21 @@ const PurchaseRequestForm = ({
           typeof values.supplier_id === 'string'
             ? parseInt(values.supplier_id) || 0
             : values.supplier_id || 0,
+        credit_term: values.credit_term || 0,
         notes: values.notes || '',
-        area_id:
-          typeof values.area_id === 'string'
-            ? parseInt(values.area_id) || 0
-            : values.area_id || 0,
-        location_id:
-          typeof values.location_id === 'string'
-            ? parseInt(values.location_id) || 0
-            : values.location_id || 0,
-        warehouse_id:
-          typeof values.warehouse_id === 'string'
-            ? parseInt(values.warehouse_id) || 0
-            : values.warehouse_id || 0,
         items: (values.items || []).map((item) => ({
-          product_warehouse_id:
-            typeof item.product_warehouse_id === 'string'
-              ? parseInt(item.product_warehouse_id) || 0
-              : item.product_warehouse_id || 0,
+          warehouse_id:
+            typeof values.warehouse_id === 'string'
+              ? parseInt(values.warehouse_id) || 0
+              : values.warehouse_id || 0,
           product_id:
             typeof item.product_id === 'string'
               ? parseInt(item.product_id) || 0
               : item.product_id || 0,
-          quantity:
-            typeof item.quantity === 'string'
-              ? parseFloat(item.quantity) || 0
-              : item.quantity || 0,
+          qty:
+            typeof item.qty === 'string'
+              ? parseFloat(item.qty) || 0
+              : item.qty || 0,
         })),
       };
 
@@ -261,7 +250,7 @@ const PurchaseRequestForm = ({
         product_warehouse_id: pw.id,
         warehouse_id: pw.warehouse.id,
         warehouse_name: pw.warehouse.name,
-        quantity: pw.quantity,
+        qty: pw.quantity,
       })) || []
     );
   }, [productWarehouses]);
@@ -295,6 +284,7 @@ const PurchaseRequestForm = ({
     });
     return data;
   }, [productsResponse]);
+
   const locationsUrl = useMemo(() => {
     const params = new URLSearchParams({
       search: locationSelectInputValue,
@@ -436,7 +426,7 @@ const PurchaseRequestForm = ({
         product_warehouse_id: null,
         product: null,
         product_id: '',
-        quantity: '',
+        qty: '',
       },
     ];
     formik.setFieldValue('items', newPurchaseItems);
@@ -460,13 +450,13 @@ const PurchaseRequestForm = ({
   // ===== PURCHASE ITEM OPERATIONS =====
   const handlePurchaseItemChange = (
     idx: number,
-    field: 'quantity',
+    field: 'qty',
     value: string | number
   ) => {
-    if (field === 'quantity') {
+    if (field === 'qty') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
-      formik.setFieldValue(`items.${idx}.quantity`, numValue);
+      formik.setFieldValue(`items.${idx}.qty`, numValue);
     }
   };
 
@@ -519,28 +509,28 @@ const PurchaseRequestForm = ({
                 isClearable
               />
 
-              {/*<NumberInput*/}
-              {/*  required={!!formik.values.supplier_id}*/}
-              {/*  label='Jatuh tempo (hari)'*/}
-              {/*  name='credit_term'*/}
-              {/*  value={formik.values.credit_term || ''}*/}
-              {/*  onChange={formik.handleChange}*/}
-              {/*  onBlur={formik.handleBlur}*/}
-              {/*  isError={*/}
-              {/*    formik.touched.credit_term &&*/}
-              {/*    Boolean(formik.errors.credit_term)*/}
-              {/*  }*/}
-              {/*  errorMessage={formik.errors.credit_term as string}*/}
-              {/*  readOnly={type === 'detail' || !formik.values.supplier_id}*/}
-              {/*  disabled={type === 'detail' || !formik.values.supplier_id}*/}
-              {/*  allowNegative={false}*/}
-              {/*  decimalScale={0}*/}
-              {/*  placeholder={*/}
-              {/*    !formik.values.supplier_id*/}
-              {/*      ? 'Pilih Vendor terlebih dahulu'*/}
-              {/*      : 'Masukkan jumlah hari jatuh tempo'*/}
-              {/*  }*/}
-              {/*/>*/}
+              <NumberInput
+                required={!!formik.values.supplier_id}
+                label='Jatuh tempo (hari)'
+                name='credit_term'
+                value={formik.values.credit_term || ''}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.credit_term &&
+                  Boolean(formik.errors.credit_term)
+                }
+                errorMessage={formik.errors.credit_term as string}
+                readOnly={type === 'detail' || !formik.values.supplier_id}
+                disabled={type === 'detail' || !formik.values.supplier_id}
+                allowNegative={false}
+                decimalScale={0}
+                placeholder={
+                  !formik.values.supplier_id
+                    ? 'Pilih Vendor terlebih dahulu'
+                    : 'Masukkan jumlah hari jatuh tempo'
+                }
+              />
 
               <SelectInput
                 required
@@ -579,62 +569,6 @@ const PurchaseRequestForm = ({
                 key={`location-${formik.values.area_id}`}
               />
 
-              <SelectInput
-                required
-                label='Gudang'
-                placeholder={
-                  !formik.values.area_id
-                    ? 'Pilih Area terlebih dahulu'
-                    : formik.values.location_id
-                      ? 'Pilih Gudang...'
-                      : 'Pilih Area dan Lokasi terlebih dahulu'
-                }
-                value={formik.values.warehouse}
-                onChange={(val) => {
-                  const warehouse = val as OptionType | null;
-                  formik.setFieldTouched('warehouse', true);
-                  formik.setFieldValue('warehouse', warehouse);
-                  formik.setFieldTouched('warehouse_id', true);
-                  formik.setFieldValue(
-                    'warehouse_id',
-                    (warehouse as OptionType)?.value || 0
-                  );
-                  if (formik.values.items) {
-                    formik.values.items.forEach((_, idx) => {
-                      formik.setFieldValue(
-                        `items.${idx}.product_warehouse`,
-                        null
-                      );
-                      formik.setFieldValue(
-                        `items.${idx}.product_warehouse_id`,
-                        null
-                      );
-                      formik.setFieldValue(`items.${idx}.product`, null);
-                      formik.setFieldValue(`items.${idx}.product_id`, '');
-                    });
-                  }
-                }}
-                options={warehouseOptions}
-                onInputChange={setWarehouseSelectInputValue}
-                isLoading={isLoadingWarehouses}
-                isError={
-                  formik.touched.warehouse &&
-                  Boolean(formik.errors.warehouse_id)
-                }
-                errorMessage={formik.errors.warehouse_id as string}
-                isDisabled={
-                  type === 'detail' ||
-                  !formik.values.area_id ||
-                  !formik.values.location_id
-                }
-                isClearable={
-                  type !== 'detail' &&
-                  !!formik.values.area_id &&
-                  !!formik.values.location_id
-                }
-                key={`warehouse-${formik.values.area_id}-${formik.values.location_id}`}
-              />
-
               <div className={'col-span-2'}>
                 <TextInput
                   label='Notes'
@@ -691,6 +625,10 @@ const PurchaseRequestForm = ({
                         />
                       </th>
                     )}
+                    <th>
+                      Gudang
+                      <span className='text-error'>*</span>
+                    </th>
                     <th>
                       Item
                       <span className='text-error'>*</span>
@@ -733,113 +671,68 @@ const PurchaseRequestForm = ({
                           />
                         </td>
                       )}
-                      {/*<td>*/}
-                      {/*  <SelectInput*/}
-                      {/*    required*/}
-                      {/*    value={item.warehouse}*/}
-                      {/*    key={`warehouse-${idx}`}*/}
-                      {/*    onChange={(val) => {*/}
-                      {/*      const warehouse = val as OptionType | null;*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.warehouse`,*/}
-                      {/*        warehouse*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.warehouse_id`,*/}
-                      {/*        (warehouse as OptionType)?.value || 0*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldTouched(*/}
-                      {/*        `purchase_items.${idx}.product_warehouse`,*/}
-                      {/*        false*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.product_warehouse`,*/}
-                      {/*        null*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldTouched(*/}
-                      {/*        `purchase_items.${idx}.product_warehouse_id`,*/}
-                      {/*        false*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.product_warehouse_id`,*/}
-                      {/*        0*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldTouched(*/}
-                      {/*        `purchase_items.${idx}.product_id`,*/}
-                      {/*        false*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.product_id`,*/}
-                      {/*        0*/}
-                      {/*      );*/}
-                      {/*    }}*/}
-                      {/*    options={warehouseOptions}*/}
-                      {/*    onInputChange={setWarehouseSelectInputValue}*/}
-                      {/*    isLoading={isLoadingWarehouses}*/}
-                      {/*    isError={*/}
-                      {/*      getPurchaseItemError(idx, 'warehouse_id').isError*/}
-                      {/*    }*/}
-                      {/*    errorMessage={*/}
-                      {/*      getPurchaseItemError(idx, 'warehouse_id')*/}
-                      {/*        .errorMessage*/}
-                      {/*    }*/}
-                      {/*    isDisabled={type === 'detail'}*/}
-                      {/*    isClearable*/}
-                      {/*    placeholder='Pilih Gudang'*/}
-                      {/*    className={{*/}
-                      {/*      wrapper: 'min-w-32',*/}
-                      {/*    }}*/}
-                      {/*  />*/}
-                      {/*</td>*/}
-                      {/*<td>*/}
-                      {/*  <SelectInput*/}
-                      {/*    required*/}
-                      {/*    value={item.product_warehouse}*/}
-                      {/*    key={`product-warehouse-${idx}-${item.warehouse_id}`}*/}
-                      {/*    onChange={(val) => {*/}
-                      {/*      const productWarehouse =*/}
-                      {/*        val as ProductWarehouseOptionType | null;*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.product_warehouse`,*/}
-                      {/*        productWarehouse*/}
-                      {/*      );*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.product_warehouse_id`,*/}
-                      {/*        (productWarehouse as ProductWarehouseOptionType)*/}
-                      {/*          ?.value || 0*/}
-                      {/*      );*/}
-                      {/*      const productId =*/}
-                      {/*        (productWarehouse as ProductWarehouseOptionType)*/}
-                      {/*          ?.product_id || 0;*/}
-                      {/*      formik.setFieldValue(*/}
-                      {/*        `purchase_items.${idx}.product_id`,*/}
-                      {/*        productId*/}
-                      {/*      );*/}
-                      {/*    }}*/}
-                      {/*    options={getProductWarehouseOptionsForItem(*/}
-                      {/*      item.warehouse_id*/}
-                      {/*    )}*/}
-                      {/*    isLoading={isLoadingProductWarehouses}*/}
-                      {/*    isError={*/}
-                      {/*      getPurchaseItemError(idx, 'product_warehouse_id')*/}
-                      {/*        .isError*/}
-                      {/*    }*/}
-                      {/*    errorMessage={*/}
-                      {/*      getPurchaseItemError(idx, 'product_warehouse_id')*/}
-                      {/*        .errorMessage*/}
-                      {/*    }*/}
-                      {/*    isDisabled={type === 'detail' || !item.warehouse_id}*/}
-                      {/*    isClearable={type !== 'detail' && !!item.warehouse_id}*/}
-                      {/*    placeholder={*/}
-                      {/*      !item.warehouse_id*/}
-                      {/*        ? 'Pilih Gudang terlebih dahulu'*/}
-                      {/*        : 'Pilih Produk'*/}
-                      {/*    }*/}
-                      {/*    className={{*/}
-                      {/*      wrapper: 'min-w-32',*/}
-                      {/*    }}*/}
-                      {/*  />*/}
-                      {/*</td>*/}
+                      <td>
+                        <SelectInput
+                          required
+                          placeholder={
+                            !formik.values.area_id
+                              ? 'Pilih Area terlebih dahulu'
+                              : formik.values.location_id
+                                ? 'Pilih Gudang...'
+                                : 'Pilih Area dan Lokasi terlebih dahulu'
+                          }
+                          value={formik.values.warehouse}
+                          onChange={(val) => {
+                            const warehouse = val as OptionType | null;
+                            formik.setFieldTouched('warehouse', true);
+                            formik.setFieldValue('warehouse', warehouse);
+                            formik.setFieldTouched('warehouse_id', true);
+                            formik.setFieldValue(
+                              'warehouse_id',
+                              (warehouse as OptionType)?.value || 0
+                            );
+                            if (formik.values.items) {
+                              formik.values.items.forEach((_, idx) => {
+                                formik.setFieldValue(
+                                  `items.${idx}.product_warehouse`,
+                                  null
+                                );
+                                formik.setFieldValue(
+                                  `items.${idx}.product_warehouse_id`,
+                                  null
+                                );
+                                formik.setFieldValue(
+                                  `items.${idx}.product`,
+                                  null
+                                );
+                                formik.setFieldValue(
+                                  `items.${idx}.product_id`,
+                                  ''
+                                );
+                              });
+                            }
+                          }}
+                          options={warehouseOptions}
+                          onInputChange={setWarehouseSelectInputValue}
+                          isLoading={isLoadingWarehouses}
+                          isError={
+                            formik.touched.warehouse &&
+                            Boolean(formik.errors.warehouse_id)
+                          }
+                          errorMessage={formik.errors.warehouse_id as string}
+                          isDisabled={
+                            type === 'detail' ||
+                            !formik.values.area_id ||
+                            !formik.values.location_id
+                          }
+                          isClearable={
+                            type !== 'detail' &&
+                            !!formik.values.area_id &&
+                            !!formik.values.location_id
+                          }
+                          key={`warehouse-${formik.values.area_id}-${formik.values.location_id}`}
+                        />
+                      </td>
                       <td>
                         <SelectInput
                           required
@@ -895,25 +788,19 @@ const PurchaseRequestForm = ({
                       <td>
                         <NumberInput
                           required
-                          name={`items.${idx}.quantity`}
-                          value={item.quantity || ''}
+                          name={`items.${idx}.qty`}
+                          value={item.qty || ''}
                           onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'quantity',
-                              e.target.value
-                            )
+                            handlePurchaseItemChange(idx, 'qty', e.target.value)
                           }
                           onBlur={formik.handleBlur}
                           placeholder='Masukkan kuantitas'
                           readOnly={type === 'detail'}
                           allowNegative={false}
                           decimalScale={0}
-                          isError={
-                            getPurchaseItemError(idx, 'quantity').isError
-                          }
+                          isError={getPurchaseItemError(idx, 'qty').isError}
                           errorMessage={
-                            getPurchaseItemError(idx, 'quantity').errorMessage
+                            getPurchaseItemError(idx, 'qty').errorMessage
                           }
                           className={{
                             wrapper: 'min-w-24',
@@ -928,9 +815,7 @@ const PurchaseRequestForm = ({
                             item.product_id && productData[item.product_id]
                               ? (
                                   productData[item.product_id].product_price *
-                                  (parseFloat(
-                                    item.quantity?.toString() || '0'
-                                  ) || 0)
+                                  (parseFloat(item.qty?.toString() || '0') || 0)
                                 ).toLocaleString('en-US')
                               : ''
                           }
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 85eb6ba6..ec3d88cc 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -13,6 +13,7 @@ export type PurchaseItem = {
   product: Product;
   product_warehouse: ProductWarehouse;
   quantity: number;
+  qty: number;
   sub_qty: number;
   total_qty: number;
   total_used: number;
@@ -47,14 +48,12 @@ export type Purchase = BaseMetadata & BasePurchase;
 
 export type CreatePurchaseRequestPayload = {
   supplier_id: number;
-  area_id: number;
-  location_id: number;
-  warehouse_id: number;
+  credit_term: number;
   notes?: string | null;
   items: {
-    product_warehouse_id: number;
+    warehouse_id: number;
     product_id: number;
-    quantity: number;
+    qty: number;
   }[];
 };
 

From 0087ba384ce6c3bb8d4cbabb20f194cb6afddc8c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 14:45:46 +0700
Subject: [PATCH 089/168] refactor(FE-212): update qty validation in
 PurchaseRequestForm schema to enforce numeric input

---
 .../form/request/PurchaseRequestForm.schema.ts    | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index 110a3d7c..9b20ce0c 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -71,19 +71,10 @@ const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
       .required('Produk wajib dipilih!')
       .min(1, 'Produk wajib dipilih!')
       .typeError('Produk wajib dipilih!'),
-    qty: Yup.mixed<string | number>()
+    qty: Yup.number()
       .required('Kuantitas wajib diisi!')
-      .test(
-        'is-valid-qty',
-        'Kuantitas harus berupa angka lebih dari 0!',
-        function (value) {
-          if (value === '' || value === null || value === undefined)
-            return false;
-          const numValue =
-            typeof value === 'string' ? parseFloat(value) : value;
-          return !isNaN(numValue) && numValue > 0;
-        }
-      ),
+      .min(1, 'Kuantitas tidak boleh kurang dari 1!')
+      .typeError('Kuantitas wajib diisi!'),
   });
 
 export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSchemaType> =

From 9260f1aff6f7a7d24b7b3993faa3863b118cad34 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 14:54:15 +0700
Subject: [PATCH 090/168] refactor(FE-212): update qty validation in
 PurchaseRequestForm schema to enforce numeric input

---
 .../pages/purchase/form/request/PurchaseRequestForm.schema.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index 9b20ce0c..0872884e 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -35,7 +35,7 @@ type PurchaseRequestFormSchemaType = {
       label: string;
     } | null;
     product_id: number;
-    qty: number | string;
+    qty: number;
   }[];
 };
 
@@ -50,7 +50,7 @@ export type PurchaseItemSchema = {
     label: string;
   } | null;
   product_id: number;
-  qty: number | string;
+  qty: number;
 };
 
 const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =

From 2680d5a24d06857af0cdc1e0de257156162e6a97 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 13:24:34 +0700
Subject: [PATCH 091/168] feat(FE-212): add sales orders link and accepted file
 types constants

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

diff --git a/src/config/constant.ts b/src/config/constant.ts
index a55d5945..3bfb347d 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -58,6 +58,12 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'uil:wallet',
   },
 
+  {
+    title: 'Penjualan',
+    link: '/marketing/sales-orders',
+    icon: 'mdi:attach-money',
+  },
+
   {
     title: 'Persediaan',
     link: '/inventory',
@@ -243,3 +249,12 @@ export const RECORDING_FLAG_OPTIONS = [
   { label: 'Ayam Culling', value: 'Ayam Culling' },
   { label: 'Ayam Mati', value: 'Ayam Mati' },
 ];
+
+export const ACCEPTED_FILE_TYPE = {
+  PDF: {
+    'application/pdf': ['.pdf'],
+  },
+  IMAGE: {
+    'image/*': [],
+  },
+};

From 2f2c1fca074817ef91338eeeac58daf82a5a1e44 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 13:25:21 +0700
Subject: [PATCH 092/168] feat(FE-212): add sales orders link and accepted file
 types constants

---
 src/config/constant.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/config/constant.ts b/src/config/constant.ts
index 3bfb347d..eaeb7c1a 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -58,12 +58,6 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'uil:wallet',
   },
 
-  {
-    title: 'Penjualan',
-    link: '/marketing/sales-orders',
-    icon: 'mdi:attach-money',
-  },
-
   {
     title: 'Persediaan',
     link: '/inventory',

From 9a650a130db6f76f9eff30154b2a3acb0e18c787 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 13:35:58 +0700
Subject: [PATCH 093/168] feat(FE-208): enhance PurchaseTable with improved
 state management and memoization

---
 .../pages/purchase/PurchaseTable.tsx          | 318 ++++++++++--------
 1 file changed, 172 insertions(+), 146 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index c8a75694..f48d1da6 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -10,7 +10,6 @@ import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
-import Modal from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, {
   OptionType,
@@ -23,20 +22,25 @@ import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { cn, formatDate, formatCurrency } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
+
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Purchase } from '@/types/api/purchase/purchase';
 import { PurchaseRequestApi } from '@/services/api/purchase';
+import { SupplierApi } from '@/services/api/master-data';
+
+// ===== INTERFACES =====
+interface RowOptionsMenuProps {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Purchase, unknown>;
+  deleteClickHandler: () => void;
+}
 
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
   deleteClickHandler,
-}: {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<Purchase, unknown>;
-  deleteClickHandler: () => void;
-}) => {
+}: RowOptionsMenuProps) => {
   return (
     <RowOptionsMenuWrapper type={type}>
       <Button
@@ -78,6 +82,18 @@ const RowOptionsMenu = ({
 };
 
 const PurchaseTable = () => {
+  // ===== STATE MANAGEMENT =====
+  const [selectedSupplier, setSelectedSupplier] = useState<OptionType | null>(
+    null
+  );
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
+    null
+  );
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  // ===== TABLE FILTER STATE =====
   const {
     state: tableFilterState,
     updateFilter,
@@ -98,6 +114,17 @@ const PurchaseTable = () => {
     },
   });
 
+  // ===== MODAL HOOKS =====
+  const deleteModal = useModal();
+
+  // ===== USE SELECT HOOKS =====
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+  } = useSelect(SupplierApi.basePath, 'id', 'name');
+
+  // ===== API DATA FETCHING =====
   const {
     data: purchaseRequests,
     isLoading,
@@ -107,133 +134,117 @@ const PurchaseTable = () => {
     PurchaseRequestApi.getAllFetcher
   );
 
-  // Modal hooks
-  const deleteModal = useModal();
-
-  // Supplier modal
-  const {
-    setInputValue: setSupplierInputValue,
-    options: supplierOptions,
-    isLoadingOptions: isLoadingSupplierOptions,
-  } = useSelect('/suppliers', 'id', 'name');
-
-  // Supplier value
-  const [selectedSupplier, setSelectedSupplier] = useState<OptionType | null>(
-    null
+  // ===== COMPUTED VALUES =====
+  const selectedRowIds = useMemo(
+    () => Object.keys(rowSelection).map((item) => parseInt(item)),
+    [rowSelection]
   );
 
-  // Modal loading state
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // ===== TABLE COLUMNS DEFINITION =====
+  const purchaseColumns: ColumnDef<Purchase>[] = useMemo(
+    () => [
+      {
+        header: 'No. PR/PO',
+        cell: (props) => {
+          const { pr_number, po_number } = props.row.original;
+          return po_number ? po_number : pr_number;
+        },
+      },
+      {
+        accessorKey: 'supplier',
+        header: 'Vendor',
+        cell: (props) => props.row.original.supplier.name,
+      },
+      {
+        accessorKey: 'created_by',
+        header: 'Nama Pengaju',
+        cell: (props) => {
+          const purchase = props.row.original;
+          return (
+            purchase.created_user?.name || `User ID: ${purchase.created_by}`
+          );
+        },
+      },
+      {
+        accessorKey: 'po_date',
+        header: 'Tgl. PO',
+        cell: (props) =>
+          props.row.original.po_date
+            ? formatDate(props.row.original.po_date, 'DD-MMM-YYYY')
+            : '-',
+      },
+      {
+        accessorKey: 'due_date',
+        header: 'Jatuh Tempo',
+        cell: (props) =>
+          props.row.original.due_date
+            ? formatDate(props.row.original.due_date, 'DD-MMM-YYYY')
+            : '-',
+      },
+      {
+        header: 'Aging',
+        cell: (props) => {
+          const purchase = props.row.original;
+          if (!purchase.po_date) return '-';
+          const poDate = new Date(purchase.po_date);
+          const today = new Date();
+          const diffTime = Math.abs(today.getTime() - poDate.getTime());
+          const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+          return `${diffDays} hari`;
+        },
+      },
+      {
+        accessorKey: 'grand_total',
+        header: 'Total (Rp.)',
+        cell: (props) => formatCurrency(props.row.original.grand_total),
+      },
+      {
+        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;
 
-  // Selected purchase request for operations
-  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
-    null
+          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+          const deleteClickHandler = () => {
+            setSelectedPurchase(props.row.original);
+            deleteModal.openModal();
+          };
+
+          return (
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu
+                    type='dropdown'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowDropdownOptions>
+              )}
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu
+                    type='collapse'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowCollapseOptions>
+              )}
+            </>
+          );
+        },
+      },
+    ],
+    []
   );
 
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
-  const selectedRowIds = Object.keys(rowSelection).map((item) =>
-    parseInt(item)
-  );
-
-  const purchaseColumns: ColumnDef<Purchase>[] = [
-    {
-      header: 'No. PR/PO',
-      cell: (props) => {
-        const { pr_number, po_number } = props.row.original;
-        return po_number ? po_number : pr_number;
-      },
-    },
-    {
-      accessorKey: 'supplier',
-      header: 'Vendor',
-      cell: (props) => props.row.original.supplier.name,
-    },
-    {
-      accessorKey: 'created_by',
-      header: 'Nama Pengaju',
-      cell: (props) => {
-        const purchase = props.row.original;
-        return purchase.created_user?.name || `User ID: ${purchase.created_by}`;
-      },
-    },
-    {
-      accessorKey: 'po_date',
-      header: 'Tgl. PO',
-      cell: (props) =>
-        props.row.original.po_date
-          ? formatDate(props.row.original.po_date, 'DD-MMM-YYYY')
-          : '-',
-    },
-    {
-      accessorKey: 'due_date',
-      header: 'Jatuh Tempo',
-      cell: (props) =>
-        props.row.original.due_date
-          ? formatDate(props.row.original.due_date, 'DD-MMM-YYYY')
-          : '-',
-    },
-    {
-      header: 'Aging',
-      cell: (props) => {
-        const purchase = props.row.original;
-        if (!purchase.po_date) return '-';
-        const poDate = new Date(purchase.po_date);
-        const today = new Date();
-        const diffTime = Math.abs(today.getTime() - poDate.getTime());
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-        return `${diffDays} hari`;
-      },
-    },
-    {
-      accessorKey: 'grand_total',
-      header: 'Total (Rp.)',
-      cell: (props) => formatCurrency(props.row.original.grand_total),
-    },
-    {
-      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 = () => {
-          setSelectedPurchase(props.row.original);
-          deleteModal.openModal();
-        };
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='collapse'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
-  // Modal confirm click handler
-  const confirmationModalDeleteClickHandler = async () => {
+  // ===== EVENT HANDLERS =====
+  const confirmationModalDeleteClickHandler = useCallback(async () => {
     setIsDeleteLoading(true);
 
     try {
@@ -241,31 +252,45 @@ const PurchaseTable = () => {
       refreshPurchaseRequests();
       deleteModal.closeModal();
       toast.success('Berhasil menghapus data permintaan pembelian!');
-    } catch (error) {
+    } catch {
       toast.error('Gagal menghapus data permintaan pembelian!');
     }
 
     setIsDeleteLoading(false);
-  };
+  }, [selectedPurchase?.id, refreshPurchaseRequests, deleteModal]);
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('search', e.target.value);
-  };
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      updateFilter('search', e.target.value);
+    },
+    [updateFilter]
+  );
 
-  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const newVal = val as OptionType;
+  const pageSizeChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      setPageSize(newVal.value as number);
+    },
+    [setPageSize]
+  );
 
-    setPageSize(newVal.value as number);
-  };
+  const poDateChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      updateFilter('poDate', e.target.value);
+    },
+    [updateFilter]
+  );
 
-  const poDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('poDate', e.target.value);
-  };
-
-  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedSupplier(val as OptionType);
-    updateFilter('supplier', val ? ((val as OptionType).value as string) : '');
-  };
+  const supplierChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      setSelectedSupplier(val as OptionType);
+      updateFilter(
+        'supplier',
+        val ? ((val as OptionType).value as string) : ''
+      );
+    },
+    [updateFilter]
+  );
 
   return (
     <>
@@ -405,6 +430,7 @@ const PurchaseTable = () => {
         />
       </div>
 
+      {/* ===== MODAL COMPONENTS ===== */}
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'

From 964a4500abdddac2799b209a410bfd27a3a50013 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 13:39:42 +0700
Subject: [PATCH 094/168] feat(FE-208): update date formatting in PurchaseTable
 for improved readability

---
 src/components/pages/purchase/PurchaseTable.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index f48d1da6..31ed1abc 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -155,22 +155,12 @@ const PurchaseTable = () => {
         header: 'Vendor',
         cell: (props) => props.row.original.supplier.name,
       },
-      {
-        accessorKey: 'created_by',
-        header: 'Nama Pengaju',
-        cell: (props) => {
-          const purchase = props.row.original;
-          return (
-            purchase.created_user?.name || `User ID: ${purchase.created_by}`
-          );
-        },
-      },
       {
         accessorKey: 'po_date',
         header: 'Tgl. PO',
         cell: (props) =>
           props.row.original.po_date
-            ? formatDate(props.row.original.po_date, 'DD-MMM-YYYY')
+            ? formatDate(props.row.original.po_date, 'DD MMM YYYY')
             : '-',
       },
       {
@@ -178,7 +168,7 @@ const PurchaseTable = () => {
         header: 'Jatuh Tempo',
         cell: (props) =>
           props.row.original.due_date
-            ? formatDate(props.row.original.due_date, 'DD-MMM-YYYY')
+            ? formatDate(props.row.original.due_date, 'DD MMM YYYY')
             : '-',
       },
       {

From edd59598f9bfd20816f17b104a3ab011f4b84f7b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 13:50:54 +0700
Subject: [PATCH 095/168] refactor(FE-208,212): refine PurchaseRequestForm
 validation and state management

---
 .../request/PurchaseRequestForm.schema.ts     |   2 +-
 .../form/request/PurchaseRequestForm.tsx      | 216 ++++++++++--------
 2 files changed, 120 insertions(+), 98 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index 0872884e..06c8606d 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -21,7 +21,7 @@ type PurchaseRequestFormSchemaType = {
   warehouse?: {
     value: number;
     label: string;
-  };
+  } | null;
   warehouse_id: number;
   notes: string | null;
   items: {
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 89879076..2b6fd5ee 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -74,35 +74,26 @@ const PurchaseRequestForm = ({
   // ===== UTILITY FUNCTIONS =====
   const getPurchaseItemError = (
     idx: number,
-    field: 'warehouse_id' | 'product_warehouse_id' | 'product_id' | 'qty'
+    field: 'product_warehouse_id' | 'product_id' | 'qty'
   ): { isError: boolean; errorMessage: string } => {
-    const touchedItem = formik.touched.items?.[idx];
+    if (!formik.touched.items || !Array.isArray(formik.touched.items)) {
+      return {
+        isError: false,
+        errorMessage: '',
+      };
+    }
+
+    const touchedField = formik.touched.items[idx]?.[field];
     const errorItem = formik.errors.items?.[idx] as
       | Record<string, string>
       | undefined;
 
-    if (!touchedItem) {
-      return { isError: false, errorMessage: '' };
-    }
-
-    const isTouched = (touchedItem as Record<string, boolean>)?.[field];
-    const errorMessage = errorItem?.[field] || '';
-
     return {
-      isError: Boolean(isTouched && errorMessage),
-      errorMessage: isTouched && errorMessage ? errorMessage : '',
+      isError: Boolean(touchedField && Boolean(errorItem?.[field])),
+      errorMessage: touchedField && errorItem?.[field] ? errorItem[field] : '',
     };
   };
 
-  const getSupplierById = (supplierId: number): Supplier | null => {
-    if (!isResponseSuccess(supplierRawData)) return null;
-    return (
-      supplierRawData?.data.find(
-        (supplier: Supplier) => supplier.id === supplierId
-      ) || null
-    );
-  };
-
   // ===== SUBMISSION HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
     async (payload: CreatePurchaseRequestPayload) => {
@@ -349,74 +340,6 @@ const PurchaseRequestForm = ({
     );
   }, [warehouses]);
 
-  // ===== FIELD CHANGE HANDLERS =====
-  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const supplier = val as OptionType | null;
-    formik.setFieldTouched('supplier', true);
-    formik.setFieldValue('supplier', supplier);
-    formik.setFieldTouched('supplier_id', true);
-    formik.setFieldValue('supplier_id', (supplier as OptionType)?.value || 0);
-
-    if (supplier?.value) {
-      const supplierId =
-        typeof supplier.value === 'string'
-          ? parseInt(supplier.value)
-          : supplier.value;
-      const supplierData = getSupplierById(supplierId);
-      if (supplierData?.due_date) {
-        formik.setFieldTouched('credit_term', true);
-        formik.setFieldValue('credit_term', supplierData.due_date.toString());
-      }
-    } else {
-      // Reset credit_term field and its touched state when supplier is cleared
-      formik.setFieldTouched('credit_term', false);
-      formik.setFieldValue('credit_term', '');
-    }
-  };
-
-  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const area = val as OptionType | null;
-    formik.setFieldTouched('area', true);
-    formik.setFieldValue('area', area);
-    formik.setFieldTouched('area_id', true);
-    formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
-
-    // Reset area dependent fields
-    formik.setFieldTouched('location', false);
-    formik.setFieldValue('location', undefined);
-    formik.setFieldTouched('location_id', false);
-    formik.setFieldValue('location_id', 0);
-    setLocationSelectInputValue('');
-
-    // Reset area dependent fields in all purchase items
-    if (formik.values.items) {
-      formik.values.items.forEach((_, idx) => {
-        formik.setFieldValue(`items.${idx}.product_warehouse`, null);
-        formik.setFieldValue(`items.${idx}.product_warehouse_id`, null);
-        formik.setFieldValue(`items.${idx}.product`, null);
-        formik.setFieldValue(`items.${idx}.product_id`, '');
-      });
-    }
-  };
-
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const location = val as OptionType | null;
-    formik.setFieldTouched('location', true);
-    formik.setFieldValue('location', location);
-    formik.setFieldTouched('location_id', true);
-    formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
-
-    // Reset location dependent fields in all purchase items
-    if (formik.values.items) {
-      formik.values.items.forEach((_, idx) => {
-        formik.setFieldValue(`items.${idx}.product_warehouse`, null);
-        formik.setFieldValue(`items.${idx}.product_warehouse_id`, null);
-        formik.setFieldValue(`items.${idx}.product`, null);
-        formik.setFieldValue(`items.${idx}.product_id`, '');
-      });
-    }
-  };
-
   // Purchase Items Handlers
   const addPurchaseItem = () => {
     const newPurchaseItems = [
@@ -456,6 +379,7 @@ const PurchaseRequestForm = ({
     if (field === 'qty') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
+      formik.setFieldTouched(`items.${idx}.qty`, true);
       formik.setFieldValue(`items.${idx}.qty`, numValue);
     }
   };
@@ -497,12 +421,41 @@ const PurchaseRequestForm = ({
                 label='Vendor'
                 placeholder='Pilih Vendor...'
                 value={formik.values.supplier}
-                onChange={supplierChangeHandler}
+                onChange={(val) => {
+                  const supplier = val as OptionType | null;
+                  const supplierId = supplier?.value
+                    ? typeof supplier.value === 'string'
+                      ? parseInt(supplier.value)
+                      : supplier.value
+                    : 0;
+
+                  formik.setFieldTouched('supplier_id', true);
+                  formik.setFieldValue('supplier_id', supplierId);
+                  formik.setFieldTouched('supplier', true);
+                  formik.setFieldValue('supplier', supplier);
+
+                  if (supplierId > 0 && isResponseSuccess(supplierRawData)) {
+                    const supplierData = supplierRawData.data.find(
+                      (s: Supplier) => s.id === supplierId
+                    );
+                    if (supplierData?.due_date) {
+                      formik.setFieldTouched('credit_term', true);
+                      formik.setFieldValue(
+                        'credit_term',
+                        supplierData.due_date.toString()
+                      );
+                    }
+                  } else {
+                    formik.setFieldTouched('credit_term', false);
+                    formik.setFieldValue('credit_term', '');
+                  }
+                }}
                 options={supplierOptions}
                 onInputChange={setSupplierSelectInputValue}
                 isLoading={isLoadingSuppliers}
                 isError={
-                  formik.touched.supplier && Boolean(formik.errors.supplier_id)
+                  formik.touched.supplier_id &&
+                  Boolean(formik.errors.supplier_id)
                 }
                 errorMessage={formik.errors.supplier_id as string}
                 isDisabled={type === 'detail'}
@@ -537,11 +490,43 @@ const PurchaseRequestForm = ({
                 label='Area'
                 placeholder='Pilih Area...'
                 value={formik.values.area}
-                onChange={areaChangeHandler}
+                onChange={(val) => {
+                  const area = val as OptionType | null;
+                  formik.setFieldTouched('area_id', true);
+                  formik.setFieldValue(
+                    'area_id',
+                    (area as OptionType)?.value || 0
+                  );
+                  formik.setFieldTouched('area', true);
+                  formik.setFieldValue('area', area);
+
+                  formik.setFieldTouched('location', false);
+                  formik.setFieldValue('location', undefined);
+                  formik.setFieldTouched('location_id', false);
+                  formik.setFieldValue('location_id', 0);
+                  setLocationSelectInputValue('');
+
+                  if (formik.values.items) {
+                    formik.values.items.forEach((_, idx) => {
+                      formik.setFieldValue(
+                        `items.${idx}.product_warehouse`,
+                        null
+                      );
+                      formik.setFieldValue(
+                        `items.${idx}.product_warehouse_id`,
+                        null
+                      );
+                      formik.setFieldValue(`items.${idx}.product`, null);
+                      formik.setFieldValue(`items.${idx}.product_id`, '');
+                    });
+                  }
+                }}
                 options={areaOptions}
                 onInputChange={setAreaSelectInputValue}
                 isLoading={isLoadingAreas}
-                isError={formik.touched.area && Boolean(formik.errors.area_id)}
+                isError={
+                  formik.touched.area_id && Boolean(formik.errors.area_id)
+                }
                 errorMessage={formik.errors.area_id as string}
                 isDisabled={type === 'detail'}
                 isClearable
@@ -556,12 +541,37 @@ const PurchaseRequestForm = ({
                     : 'Pilih Lokasi...'
                 }
                 value={formik.values.area_id ? formik.values.location : null}
-                onChange={locationChangeHandler}
+                onChange={(val) => {
+                  const location = val as OptionType | null;
+                  formik.setFieldTouched('location_id', true);
+                  formik.setFieldValue(
+                    'location_id',
+                    (location as OptionType)?.value || 0
+                  );
+                  formik.setFieldTouched('location', true);
+                  formik.setFieldValue('location', location);
+
+                  if (formik.values.items) {
+                    formik.values.items.forEach((_, idx) => {
+                      formik.setFieldValue(
+                        `items.${idx}.product_warehouse`,
+                        null
+                      );
+                      formik.setFieldValue(
+                        `items.${idx}.product_warehouse_id`,
+                        null
+                      );
+                      formik.setFieldValue(`items.${idx}.product`, null);
+                      formik.setFieldValue(`items.${idx}.product_id`, '');
+                    });
+                  }
+                }}
                 options={locationOptions}
                 onInputChange={setLocationSelectInputValue}
                 isLoading={isLoadingLocations}
                 isError={
-                  formik.touched.location && Boolean(formik.errors.location_id)
+                  formik.touched.location_id &&
+                  Boolean(formik.errors.location_id)
                 }
                 errorMessage={formik.errors.location_id as string}
                 isDisabled={type === 'detail' || !formik.values.area_id}
@@ -684,13 +694,13 @@ const PurchaseRequestForm = ({
                           value={formik.values.warehouse}
                           onChange={(val) => {
                             const warehouse = val as OptionType | null;
-                            formik.setFieldTouched('warehouse', true);
-                            formik.setFieldValue('warehouse', warehouse);
                             formik.setFieldTouched('warehouse_id', true);
                             formik.setFieldValue(
                               'warehouse_id',
                               (warehouse as OptionType)?.value || 0
                             );
+                            formik.setFieldTouched('warehouse', true);
+                            formik.setFieldValue('warehouse', warehouse);
                             if (formik.values.items) {
                               formik.values.items.forEach((_, idx) => {
                                 formik.setFieldValue(
@@ -716,7 +726,7 @@ const PurchaseRequestForm = ({
                           onInputChange={setWarehouseSelectInputValue}
                           isLoading={isLoadingWarehouses}
                           isError={
-                            formik.touched.warehouse &&
+                            formik.touched.warehouse_id &&
                             Boolean(formik.errors.warehouse_id)
                           }
                           errorMessage={formik.errors.warehouse_id as string}
@@ -741,10 +751,18 @@ const PurchaseRequestForm = ({
                           onChange={(val) => {
                             const productWarehouse =
                               val as ProductWarehouseOptionType | null;
+                            formik.setFieldTouched(
+                              `items.${idx}.product_warehouse`,
+                              true
+                            );
                             formik.setFieldValue(
                               `items.${idx}.product_warehouse`,
                               productWarehouse
                             );
+                            formik.setFieldTouched(
+                              `items.${idx}.product_warehouse_id`,
+                              true
+                            );
                             formik.setFieldValue(
                               `items.${idx}.product_warehouse_id`,
                               (productWarehouse as ProductWarehouseOptionType)
@@ -754,6 +772,10 @@ const PurchaseRequestForm = ({
                             const productId =
                               (productWarehouse as ProductWarehouseOptionType)
                                 ?.product_id || 0;
+                            formik.setFieldTouched(
+                              `items.${idx}.product_id`,
+                              true
+                            );
                             formik.setFieldValue(
                               `items.${idx}.product_id`,
                               productId

From e8dd4f37596a663e092f8ad3e4cd07271400d2dc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 14:30:09 +0700
Subject: [PATCH 096/168] feat(FE-218,212,213): implement PurchaseOrderDetail
 component and update related types

---
 src/app/purchase/detail/page.tsx              |  10 +-
 .../order/PurchaseOrderAcceptApprovalForm.tsx |   6 +-
 .../order/PurchaseOrderStaffApprovalForm.tsx  |   8 +-
 .../purchase/order/PurchaseOrderDetail.tsx    | 444 +++---------------
 src/types/api/purchase/purchase.d.ts          |  22 +-
 5 files changed, 102 insertions(+), 388 deletions(-)

diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 5a497f14..29675d89 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
-import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
+import PurchaseOrderDetail from '@/components/pages/purchase/order/PurchaseOrderDetail';
 import { PurchaseRequestApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
@@ -33,12 +33,14 @@ const PurchaseDetail = () => {
   }
 
   return (
-    <div className='w-full p-4 flex flex-row justify-center'>
+    <div className='w-full p-4'>
       {isLoadingPurchase && (
-        <span className='loading loading-spinner loading-xl' />
+        <div className='w-full flex flex-row justify-center items-center'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
       )}
       {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseRequestForm type='detail' initialValues={purchase.data} />
+        <PurchaseOrderDetail type='detail' data={purchase.data} />
       )}
     </div>
   );
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index a1475c18..256ffed3 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -206,15 +206,13 @@ const PurchaseOrderAcceptApprovalForm = ({
     if (initialValues?.items) {
       return initialValues.items.map((item) => ({
         value: item.id,
-        label: `${item.product.name} (${item.quantity} ${item.product.uom.name})`,
+        label: `${item.product.name} (${item.quantity} ${item.product.uom?.name || 'unit'})`,
         id: item.id,
         quantity: item.quantity,
         product: {
           name: item.product.name,
           product_category: item.product.product_category,
-          uom: {
-            name: item.product.uom.name,
-          },
+          uom: item.product.uom,
         },
         warehouse: {
           name: item.warehouse?.name || '',
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 137b9ff7..2517b337 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -44,7 +44,7 @@ const PurchaseOrderStaffApprovalForm = ({
     product: {
       name: string;
       type?: string;
-      uom: {
+      uom?: {
         name: string;
       };
     };
@@ -170,15 +170,13 @@ const PurchaseOrderStaffApprovalForm = ({
     if (initialValues?.items) {
       return initialValues.items.map((item) => ({
         value: item.id,
-        label: `${item.product.name} (${item.quantity} ${item.product.uom.name})`,
+        label: `${item.product.name} (${item.quantity} ${item.product.uom?.name || 'unit'})`,
         id: item.id,
         quantity: item.quantity,
         product: {
           name: item.product.name,
           product_category: item.product.product_category,
-          uom: {
-            name: item.product.uom.name,
-          },
+          uom: item.product.uom,
         },
         warehouse: {
           name: item.warehouse?.name || '',
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index ec18ed15..98940a13 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -3,9 +3,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
-import ApprovalSteps, {
-  formatGroupedApprovalsToApprovalSteps,
-} from '@/components/pages/ApprovalSteps';
+import ApprovalSteps from '@/components/pages/ApprovalSteps';
 import Table from '@/components/Table';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -20,21 +18,13 @@ import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/ord
 import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
 
-import { BaseGroupedApproval } from '@/types/api/api-general';
-import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
+import { ApprovalStepStatus } from '@/components/pages/ApprovalSteps';
 import Card from '@/components/Card';
 import {
   CreateManagerApprovalRequestPayload,
   Purchase,
   PurchaseItem,
 } from '@/types/api/purchase/purchase';
-import {
-  createdUser,
-  dummyAreas,
-  dummyLocations,
-  dummyProductWarehouses,
-  dummyWarehouses,
-} from '@/dummy/marketing.dummy';
 import {
   ManagerApprovalApi,
   PurchaseDeleteItemsApi,
@@ -81,321 +71,8 @@ interface PurchaseOrderDetailProps {
   data?: Purchase;
 }
 
-const dummyPurchaseData: Purchase = {
-  id: 1,
-  pr_number: 'PR-MBU-01837',
-  po_number: 'PO-MBU-01837',
-  po_document_path: '/documents/po-mbu-01837.pdf',
-  po_date: '2025-01-10T00:00:00Z',
-  supplier: {
-    id: 1,
-    name: 'PT. CHAROEN POKPHAND JAYA FARM',
-    alias: 'CP JAYA FARM',
-    pic: 'Budi Santoso',
-    type: 'Supplier',
-    category: 'Feed',
-    hatchery: 'Jawa Barat',
-    phone: '+62-22-7563850',
-    email: 'info@cp.co.id',
-    address:
-      'Jl. Raya Bandung - Sumedang Km. 28, Desa Cisantana, Kec. Cigendel, Kabupaten Sumedang, Jawa Barat 45363',
-    npwp: '01.938.451.6-433.000',
-    account_number: '123-456-7890',
-    due_date: 30,
-    balance: 0,
-    created_at: '2025-01-01T00:00:00Z',
-    updated_at: '2025-01-01T00:00:00Z',
-    created_user: createdUser,
-  },
-  credit_term: 30,
-  due_date: '2025-11-13T00:00:00Z',
-  grand_total: 65000000,
-  notes: null,
-  area: dummyAreas[0],
-  location: dummyLocations[0],
-  items: [
-    {
-      id: 1,
-      purchase_id: 1,
-      product: {
-        id: 1,
-        name: 'CP Vaksin',
-        brand: '',
-        sku: '',
-        product_price: 0,
-        selling_price: 0,
-        tax: 0,
-        expiry_period: 0,
-        uom: {
-          id: 1,
-          name: 'Ekor',
-          created_user: {
-            id: 1,
-            id_user: 1,
-            email: 'hello@gmail.com',
-            name: 'Admin',
-          },
-          created_at: '2025-01-01T00:00:00Z',
-          updated_at: '2025-01-01T00:00:00Z',
-        },
-        product_category: {
-          id: 1,
-          code: 'DOC',
-          name: 'DOC',
-          created_user: {
-            id: 1,
-            id_user: 1,
-            email: 'hello@gmail.com',
-            name: 'Admin',
-          },
-          created_at: '2025-01-01T00:00:00Z',
-          updated_at: '2025-01-01T00:00:00Z',
-        },
-        suppliers: [],
-        flags: [],
-        created_user: {
-          id: 1,
-          id_user: 1,
-          email: 'hello@gmail.com',
-          name: 'Admin',
-        },
-        created_at: '2025-01-01T00:00:00Z',
-        updated_at: '2025-01-01T00:00:00Z',
-      },
-      product_warehouse: dummyProductWarehouses[0],
-      quantity: 10000,
-      sub_qty: 10000,
-      total_qty: 10000,
-      total_used: 0,
-      price: 6500,
-      total_price: 65000000,
-      received_date: null,
-      travel_number: null,
-      travel_number_docs: null,
-      vehicle_number: null,
-      warehouse: dummyWarehouses[0],
-    },
-    {
-      id: 2,
-      purchase_id: 2,
-      product: {
-        id: 1,
-        name: 'CP Vaksin',
-        brand: '',
-        sku: '',
-        product_price: 0,
-        selling_price: 0,
-        tax: 0,
-        expiry_period: 0,
-        uom: {
-          id: 1,
-          name: 'Ekor',
-          created_user: {
-            id: 1,
-            id_user: 1,
-            email: 'hello@gmail.com',
-            name: 'Admin',
-          },
-          created_at: '2025-01-01T00:00:00Z',
-          updated_at: '2025-01-01T00:00:00Z',
-        },
-        product_category: {
-          id: 1,
-          code: 'DOC',
-          name: 'DOC',
-          created_user: {
-            id: 1,
-            id_user: 1,
-            email: 'hello@gmail.com',
-            name: 'Admin',
-          },
-          created_at: '2025-01-01T00:00:00Z',
-          updated_at: '2025-01-01T00:00:00Z',
-        },
-        suppliers: [],
-        flags: [],
-        created_user: {
-          id: 1,
-          id_user: 1,
-          email: 'hello@gmail.com',
-          name: 'Admin',
-        },
-        created_at: '2025-01-01T00:00:00Z',
-        updated_at: '2025-01-01T00:00:00Z',
-      },
-      product_warehouse: dummyProductWarehouses[0],
-      quantity: 10000,
-      sub_qty: 10000,
-      total_qty: 10000,
-      total_used: 0,
-      price: 6500,
-      total_price: 65000000,
-      received_date: null,
-      travel_number: null,
-      travel_number_docs: null,
-      vehicle_number: null,
-      warehouse: dummyWarehouses[0],
-    },
-  ],
-  created_at: '2025-01-10T00:00:00Z',
-  updated_at: '2025-01-10T00:00:00Z',
-  created_by: 1,
-  deleted_at: null,
-  created_user: createdUser,
-  warehouse: dummyWarehouses[0],
-};
 
-const dummyGoodsReceiptItems: PurchaseItem[] = [
-  {
-    id: 1,
-    purchase_id: 1,
-    product: {
-      id: 1,
-      product_category: {
-        id: 1,
-        code: 'DOC',
-        name: 'DOC',
-        created_user: createdUser,
-        created_at: '2025-01-01T00:00:00Z',
-        updated_at: '2025-01-01T00:00:00Z',
-      },
-      name: 'CP Vaksin',
-      brand: '',
-      sku: '',
-      product_price: 0,
-      selling_price: 0,
-      tax: 0,
-      expiry_period: 0,
-      uom: {
-        id: 1,
-        name: 'Ekor',
-        created_user: createdUser,
-        created_at: '2025-01-01T00:00:00Z',
-        updated_at: '2025-01-01T00:00:00Z',
-      },
-      suppliers: [],
-      flags: [],
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'hello@gmail.com',
-        name: 'Admin',
-      },
-      created_at: '2025-01-01T00:00:00Z',
-      updated_at: '2025-01-01T00:00:00Z',
-    },
-    product_warehouse: dummyProductWarehouses[0],
-    quantity: 10000,
-    sub_qty: 10000,
-    total_qty: 10000,
-    total_used: 0,
-    price: 6500,
-    total_price: 65000000,
-    received_date: '2025-01-15T00:00:00Z',
-    travel_number: 'NSJ-1',
-    travel_number_docs: '/documents/nsj-1.pdf',
-    vehicle_number: 'NAP-1',
-    warehouse: dummyWarehouses[0],
-  },
-];
 
-const dummyGroupedApprovals: BaseGroupedApproval[] = [
-  {
-    step_number: 1,
-    step_name: 'Pengajuan',
-    approvals: [
-      {
-        step_number: 1,
-        step_name: 'Pengajuan',
-        action: 'submit',
-        notes: 'Pengajuan purchase order dibuat',
-        action_by: {
-          id: 1,
-          id_user: 1,
-          email: 'user@company.com',
-          name: 'User Pengajuan',
-        },
-        action_at: '2025-01-10T08:00:00Z',
-      },
-    ],
-  },
-  {
-    step_number: 2,
-    step_name: 'Approval Purchasing',
-    approvals: [
-      {
-        step_number: 2,
-        step_name: 'Approval Purchasing',
-        action: 'approve',
-        notes: 'Purchase order disetujui oleh purchasing',
-        action_by: {
-          id: 2,
-          id_user: 2,
-          email: 'purchasing@company.com',
-          name: 'Staff Purchasing',
-        },
-        action_at: '2025-01-10T10:30:00Z',
-      },
-    ],
-  },
-  {
-    step_number: 3,
-    step_name: 'Approval Manager Purchasing',
-    approvals: [
-      {
-        step_number: 3,
-        step_name: 'Approval Manager Purchasing',
-        action: 'approve',
-        notes: 'Purchase order disetujui oleh manager purchasing',
-        action_by: {
-          id: 3,
-          id_user: 3,
-          email: 'manager.purchasing@company.com',
-          name: 'Manager Purchasing',
-        },
-        action_at: '2025-01-10T14:15:00Z',
-      },
-    ],
-  },
-  {
-    step_number: 4,
-    step_name: 'Produk Diterima',
-    approvals: [
-      {
-        step_number: 4,
-        step_name: 'Produk Diterima',
-        action: 'receive',
-        notes: 'Produk telah diterima sesuai pesanan',
-        action_by: {
-          id: 4,
-          id_user: 4,
-          email: 'user@company.com',
-          name: 'User Pengajuan',
-        },
-        action_at: '2025-01-12T09:00:00Z',
-      },
-    ],
-  },
-  {
-    step_number: 5,
-    step_name: 'Selesai',
-    approvals: [
-      {
-        step_number: 5,
-        step_name: 'Selesai',
-        action: 'complete',
-        notes: 'Purchase order telah selesai diproses',
-        action_by: {
-          id: 5,
-          id_user: 5,
-          email: 'user@company.com',
-          name: 'User Pengajuan',
-        },
-        action_at: '2025-01-12T16:00:00Z',
-      },
-    ],
-  },
-];
 
 const PurchaseOrderDetail = ({
   type = 'detail',
@@ -420,23 +97,49 @@ const PurchaseOrderDetail = ({
     parseInt(item)
   );
 
-  // ===== STATIC DATA =====
-  const purchaseData = data || dummyPurchaseData;
+  // ===== COMPUTED VALUES =====
   const purchaseOrderItems = useMemo(
-    () => purchaseData.items || [],
-    [purchaseData.items]
+    () => data?.items || [],
+    [data?.items]
   );
-  const goodsReceiptItems = dummyGoodsReceiptItems;
-  const groupedApprovals = dummyGroupedApprovals;
-  const latestApproval =
-    groupedApprovals[groupedApprovals.length - 1]?.approvals[0];
+
+  // Create goods receipt items from received items
+  const goodsReceiptItems = useMemo(() => {
+    return purchaseOrderItems.filter(item => item.received_date);
+  }, [purchaseOrderItems]);
+
+  // Create simple approval steps from single approval data
+  const approvalSteps = useMemo(() => {
+    if (!data?.approval) return [];
+
+    // Create a simple approval step based on the single approval data
+    const status = data.approval.action === 'APPROVED' ? 'APPROVED' :
+                   data.approval.action === 'REJECTED' ? 'REJECTED' : 'WAITING';
+
+    return [{
+      name: data.approval.step_name,
+      status: status as ApprovalStepStatus,
+      logs: [{
+        action_by: data.approval.action_by?.name,
+        date: data.approval.action_at,
+        notes: data.approval.notes,
+      }],
+    }];
+  }, [data?.approval]);
+
+  const totalBeforeTax = useMemo(() => {
+    return purchaseOrderItems.reduce(
+      (sum, item) => sum + (item.total_price || 0),
+      0
+    );
+  }, [purchaseOrderItems]);
 
   // ===== SUBMISSION HANDLER =====
   const createManagerApprovalHandler = useCallback(
     async (payload: CreateManagerApprovalRequestPayload) => {
       const purchaseRequestId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
-        : purchaseData?.id || 1;
+        : data?.id || 1;
 
       if (!purchaseRequestId) {
         toast.error('Purchase Request ID is required');
@@ -454,14 +157,14 @@ const PurchaseOrderDetail = ({
       }
       toast.success(res?.message as string);
     },
-    [purchaseData?.id, searchParams]
+    [data?.id, searchParams]
   );
 
   // ===== DELETE HANDLER =====
   const deleteItemsHandler = useCallback(async () => {
     const purchaseRequestId = searchParams.get('purchaseId')
       ? parseInt(searchParams.get('purchaseId')!)
-      : purchaseData?.id || 1;
+      : data?.id || 1;
 
     if (!purchaseRequestId) {
       toast.error('Purchase Request ID is required');
@@ -501,30 +204,14 @@ const PurchaseOrderDetail = ({
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [purchaseData?.id, searchParams, selectedItem, selectedRowIds]);
+  }, [data?.id, searchParams, selectedItem, selectedRowIds]);
 
-  // ===== COMPUTED VALUES =====
-  const approvalSteps = useMemo(() => {
-    if (!groupedApprovals.length || !latestApproval) return [];
+  // Return null if no data provided
+  if (!data) {
+    return null;
+  }
 
-    try {
-      return formatGroupedApprovalsToApprovalSteps(
-        PURCHASE_ORDER_APPROVAL_LINE,
-        groupedApprovals,
-        latestApproval
-      );
-    } catch (error) {
-      console.error('Error formatting approval steps:', error);
-      return [];
-    }
-  }, [groupedApprovals, latestApproval]);
-
-  const totalBeforeTax = useMemo(() => {
-    return purchaseOrderItems.reduce(
-      (sum, item) => sum + (item.total_price || 0),
-      0
-    );
-  }, [purchaseOrderItems]);
+  const purchaseData = data;
 
   const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
     {
@@ -563,10 +250,15 @@ const PurchaseOrderDetail = ({
       cell: (props) => props.row.original.product?.name || '-',
     },
     {
-      accessorKey: 'product.product_category.name',
+      accessorKey: 'product.product_category',
       header: 'Jenis Produk',
-      cell: (props) =>
-        props.row.original.product?.product_category?.name || '-',
+      cell: (props) => {
+        const category = props.row.original.product?.product_category;
+        if (typeof category === 'string') {
+          return category;
+        }
+        return category?.name || '-';
+      },
     },
     {
       accessorKey: 'quantity',
@@ -576,7 +268,13 @@ const PurchaseOrderDetail = ({
     {
       accessorKey: 'product.uom.name',
       header: 'Satuan',
-      cell: (props) => props.row.original.product?.uom?.name || '-',
+      cell: (props) => {
+        const uom = props.row.original.product?.uom;
+        if (uom && typeof uom === 'object' && uom.name) {
+          return uom.name;
+        }
+        return uom || '-';
+      },
     },
     {
       accessorKey: 'price',
@@ -628,10 +326,12 @@ const PurchaseOrderDetail = ({
               : '-',
         },
         {
-          accessorKey: 'product_warehouse.warehouse.name',
+          accessorKey: 'warehouse.name',
           header: 'Gudang Tujuan',
-          cell: (props) =>
-            props.row.original.product_warehouse?.warehouse?.name || '-',
+          cell: (props) => {
+            const warehouse = props.row.original.warehouse;
+            return warehouse?.name || '-';
+          },
         },
         {
           accessorKey: 'travel_number',
@@ -639,10 +339,10 @@ const PurchaseOrderDetail = ({
           cell: (props) => props.row.original.travel_number || '-',
         },
         {
-          accessorKey: 'travel_number_docs',
+          accessorKey: 'travel_document_path',
           header: 'Dokumen Surat Jalan',
           cell: (props) => {
-            const documentPath = props.row.original.travel_number_docs;
+            const documentPath = props.row.original.travel_document_path;
             return documentPath ? (
               <Button
                 color='primary'
@@ -807,7 +507,7 @@ const PurchaseOrderDetail = ({
                     Area
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    : {purchaseData.area?.name || '-'}
+                    : {purchaseData.items?.[0]?.warehouse?.area?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -817,7 +517,7 @@ const PurchaseOrderDetail = ({
                     Lokasi
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    : {purchaseData.location?.name || '-'}
+                    : {purchaseData.items?.[0]?.warehouse?.type !== 'AREA' && purchaseData.items?.[0]?.warehouse?.location?.name ? purchaseData.items[0].warehouse.location.name : '-'}
                   </span>
                 </div>
               </div>
@@ -827,7 +527,7 @@ const PurchaseOrderDetail = ({
                     Gudang
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    : {purchaseData.warehouse?.name || '-'}
+                    : {purchaseData.items?.[0]?.warehouse?.name || '-'}
                   </span>
                 </div>
               </div>
@@ -848,10 +548,10 @@ const PurchaseOrderDetail = ({
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Alamat Supplier
+                    Kategori Supplier
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    : {purchaseData.supplier?.address || '-'}
+                    : {purchaseData.supplier?.category || '-'}
                   </span>
                 </div>
               </div>
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index ec3d88cc..f20c4549 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -1,4 +1,4 @@
-import { BaseMetadata } from '@/types/api/api-general';
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { Product } from '@/types/api/master-data/product';
@@ -6,11 +6,25 @@ import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { Area } from '@/types/api/master-data/area';
 import { Location } from '@/types/api/master-data/location';
 
+export type PurchaseItemProduct = {
+  id: number;
+  name: string;
+  flags?: string[];
+  uom?: {
+    name: string;
+  };
+  product_category?:
+    | {
+        name: string;
+      }
+    | string;
+};
+
 export type PurchaseItem = {
   id: number;
-  purchase_id?: number;
+  product_id: number;
   warehouse: Warehouse;
-  product: Product;
+  product: PurchaseItemProduct | Product;
   product_warehouse: ProductWarehouse;
   quantity: number;
   qty: number;
@@ -22,6 +36,7 @@ export type PurchaseItem = {
   received_date?: string | null;
   travel_number?: string | null;
   travel_number_docs?: string | null;
+  travel_document_path?: string | null;
   vehicle_number?: string | null;
 };
 
@@ -42,6 +57,7 @@ export type BasePurchase = {
   location?: Location;
   warehouse?: Warehouse;
   items?: PurchaseItem[];
+  approval?: BaseApproval;
 };
 
 export type Purchase = BaseMetadata & BasePurchase;

From d93f0c26b6f3df8b4ecdb881f7b165116ea9d7d7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 14:32:24 +0700
Subject: [PATCH 097/168] refactor(FE-212): update PurchaseOrderDetail
 component to use initialValues prop instead of data

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 69 ++++++++++---------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 98940a13..46550f24 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -68,15 +68,12 @@ const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
 
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
-  data?: Purchase;
+  initialValues?: Purchase;
 }
 
-
-
-
 const PurchaseOrderDetail = ({
   type = 'detail',
-  data,
+  initialValues,
 }: PurchaseOrderDetailProps) => {
   // ===== MODAL HOOKS =====
   const searchParams = useSearchParams();
@@ -99,33 +96,38 @@ const PurchaseOrderDetail = ({
 
   // ===== COMPUTED VALUES =====
   const purchaseOrderItems = useMemo(
-    () => data?.items || [],
-    [data?.items]
+    () => initialValues?.items || [],
+    [initialValues?.items]
   );
 
-  // Create goods receipt items from received items
   const goodsReceiptItems = useMemo(() => {
-    return purchaseOrderItems.filter(item => item.received_date);
+    return purchaseOrderItems.filter((item) => item.received_date);
   }, [purchaseOrderItems]);
 
-  // Create simple approval steps from single approval data
   const approvalSteps = useMemo(() => {
-    if (!data?.approval) return [];
+    if (!initialValues?.approval) return [];
 
-    // Create a simple approval step based on the single approval data
-    const status = data.approval.action === 'APPROVED' ? 'APPROVED' :
-                   data.approval.action === 'REJECTED' ? 'REJECTED' : 'WAITING';
+    const status =
+      initialValues.approval.action === 'APPROVED'
+        ? 'APPROVED'
+        : initialValues.approval.action === 'REJECTED'
+          ? 'REJECTED'
+          : 'WAITING';
 
-    return [{
-      name: data.approval.step_name,
-      status: status as ApprovalStepStatus,
-      logs: [{
-        action_by: data.approval.action_by?.name,
-        date: data.approval.action_at,
-        notes: data.approval.notes,
-      }],
-    }];
-  }, [data?.approval]);
+    return [
+      {
+        name: initialValues.approval.step_name,
+        status: status as ApprovalStepStatus,
+        logs: [
+          {
+            action_by: initialValues.approval.action_by?.name,
+            date: initialValues.approval.action_at,
+            notes: initialValues.approval.notes,
+          },
+        ],
+      },
+    ];
+  }, [initialValues?.approval]);
 
   const totalBeforeTax = useMemo(() => {
     return purchaseOrderItems.reduce(
@@ -139,7 +141,7 @@ const PurchaseOrderDetail = ({
     async (payload: CreateManagerApprovalRequestPayload) => {
       const purchaseRequestId = searchParams.get('purchaseId')
         ? parseInt(searchParams.get('purchaseId')!)
-        : data?.id || 1;
+        : initialValues?.id || 1;
 
       if (!purchaseRequestId) {
         toast.error('Purchase Request ID is required');
@@ -157,14 +159,14 @@ const PurchaseOrderDetail = ({
       }
       toast.success(res?.message as string);
     },
-    [data?.id, searchParams]
+    [initialValues?.id, searchParams]
   );
 
   // ===== DELETE HANDLER =====
   const deleteItemsHandler = useCallback(async () => {
     const purchaseRequestId = searchParams.get('purchaseId')
       ? parseInt(searchParams.get('purchaseId')!)
-      : data?.id || 1;
+      : initialValues?.id || 1;
 
     if (!purchaseRequestId) {
       toast.error('Purchase Request ID is required');
@@ -204,14 +206,13 @@ const PurchaseOrderDetail = ({
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [data?.id, searchParams, selectedItem, selectedRowIds]);
+  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds]);
 
-  // Return null if no data provided
-  if (!data) {
+  if (!initialValues) {
     return null;
   }
 
-  const purchaseData = data;
+  const purchaseData = initialValues;
 
   const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
     {
@@ -517,7 +518,11 @@ const PurchaseOrderDetail = ({
                     Lokasi
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
-                    : {purchaseData.items?.[0]?.warehouse?.type !== 'AREA' && purchaseData.items?.[0]?.warehouse?.location?.name ? purchaseData.items[0].warehouse.location.name : '-'}
+                    :{' '}
+                    {purchaseData.items?.[0]?.warehouse?.type !== 'AREA' &&
+                    purchaseData.items?.[0]?.warehouse?.location?.name
+                      ? purchaseData.items[0].warehouse.location.name
+                      : '-'}
                   </span>
                 </div>
               </div>

From 3d86c9ce6bae618e01ed48c0d68100530e7f1601 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 14:34:26 +0700
Subject: [PATCH 098/168] refactor(FE-Storyless): add support for 'UPDATED'
 action in approval status and make page parameter optional

---
 src/components/pages/ApprovalSteps.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx
index 7185e31b..b9590bc2 100644
--- a/src/components/pages/ApprovalSteps.tsx
+++ b/src/components/pages/ApprovalSteps.tsx
@@ -158,6 +158,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
         if (approvalGroup.approvals) {
           switch (approvalGroup?.approvals[0]?.action) {
             case 'CREATED':
+            case 'UPDATED':
             case 'APPROVED':
               approvalStatus = 'APPROVED';
               break;
@@ -256,7 +257,7 @@ const useApprovalSteps = ({
   moduleName: string;
   moduleId: string;
   params?: {
-    page: number;
+    page?: number;
     limit: number;
     search?: string;
     group_step_number?: boolean;

From f6cf22f88561d4002210b17877a6f254de5c1791 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 14:36:16 +0700
Subject: [PATCH 099/168] refactor(FE-208): update PurchaseOrderDetail
 component to use initialValues prop

---
 src/app/purchase/detail/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 29675d89..16c077b4 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -40,7 +40,7 @@ const PurchaseDetail = () => {
         </div>
       )}
       {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseOrderDetail type='detail' data={purchase.data} />
+        <PurchaseOrderDetail type='detail' initialValues={purchase.data} />
       )}
     </div>
   );

From 00c432a91836bb56ab339dcd93ec8fd0d7442ea8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 14:49:30 +0700
Subject: [PATCH 100/168] refactor(FE-208,212,213): update approval steps and
 improve PurchaseOrderDetail component structure

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 73 +++++++------------
 src/config/approval-line.ts                   |  6 +-
 2 files changed, 30 insertions(+), 49 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 46550f24..5e2813aa 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -3,7 +3,9 @@
 import { useCallback, useMemo, useState } from 'react';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
-import ApprovalSteps from '@/components/pages/ApprovalSteps';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
 import Table from '@/components/Table';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -33,6 +35,7 @@ import { isResponseError } from '@/lib/api-helper';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
+import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 
 const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
@@ -104,30 +107,21 @@ const PurchaseOrderDetail = ({
     return purchaseOrderItems.filter((item) => item.received_date);
   }, [purchaseOrderItems]);
 
-  const approvalSteps = useMemo(() => {
-    if (!initialValues?.approval) return [];
-
-    const status =
-      initialValues.approval.action === 'APPROVED'
-        ? 'APPROVED'
-        : initialValues.approval.action === 'REJECTED'
-          ? 'REJECTED'
-          : 'WAITING';
-
-    return [
-      {
-        name: initialValues.approval.step_name,
-        status: status as ApprovalStepStatus,
-        logs: [
-          {
-            action_by: initialValues.approval.action_by?.name,
-            date: initialValues.approval.action_at,
-            notes: initialValues.approval.notes,
-          },
-        ],
-      },
-    ];
-  }, [initialValues?.approval]);
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    rawDataApprovals,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: PURCHASE_ORDER_APPROVAL_LINE,
+    moduleName: 'PURCHASES',
+    moduleId: initialValues?.id?.toString() ?? '',
+    params: {
+      limit: 100,
+      group_step_number: true,
+    },
+  });
 
   const totalBeforeTax = useMemo(() => {
     return purchaseOrderItems.reduce(
@@ -262,7 +256,7 @@ const PurchaseOrderDetail = ({
       },
     },
     {
-      accessorKey: 'quantity',
+      accessorKey: 'sub_qty',
       header: 'Jumlah',
       cell: (props) => formatNumber(props.getValue() as number),
     },
@@ -370,12 +364,7 @@ const PurchaseOrderDetail = ({
           cell: (props) => props.row.original.vehicle_number || '-',
         },
         {
-          accessorKey: 'pengangkut',
-          header: 'Pengangkut',
-          cell: (props) => props.row.original.product?.name || '-',
-        },
-        {
-          accessorKey: 'quantity',
+          accessorKey: 'total_qty',
           header: 'Jumlah Total',
           cell: (props) => formatNumber(props.getValue() as number),
         },
@@ -384,11 +373,6 @@ const PurchaseOrderDetail = ({
           header: 'Jumlah Diterima',
           cell: (props) => formatNumber(props.getValue() as number),
         },
-        {
-          accessorKey: 'ekspedisi',
-          header: 'Ekspedisi',
-          cell: (props) => 'Ekspedisi 1',
-        },
         {
           accessorKey: 'price',
           header: 'Transport /Item',
@@ -475,13 +459,9 @@ const PurchaseOrderDetail = ({
       </div>
 
       {/* Steps */}
-      {approvalSteps.length > 0 ? (
+      {approvals && !approvalsLoading && (
         <div className='my-8'>
-          <ApprovalSteps approvals={approvalSteps} />
-        </div>
-      ) : (
-        <div className='text-center py-8'>
-          <p className='text-gray-500'>Status approval tidak tersedia</p>
+          <ApprovalSteps approvals={approvals} />
         </div>
       )}
 
@@ -543,17 +523,18 @@ const PurchaseOrderDetail = ({
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Nama Supplier
+                    Nama Vendor
                   </span>
                   <span className='text-gray-900 font-medium ml-3 break-all'>
-                    : {purchaseData.supplier?.name || '-'}
+                    : {purchaseData.supplier?.name || '-'} (
+                    {purchaseData.supplier?.alias || ''})
                   </span>
                 </div>
               </div>
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Kategori Supplier
+                    Kategori Vendor
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
                     : {purchaseData.supplier?.category || '-'}
diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts
index 80a906e0..f0806bf8 100644
--- a/src/config/approval-line.ts
+++ b/src/config/approval-line.ts
@@ -40,15 +40,15 @@ export const PURCHASE_ORDER_APPROVAL_LINE: ApprovalLine = [
   },
   {
     step_number: 2,
-    step_name: 'Approval Purchasing',
+    step_name: 'Staff Purchase',
   },
   {
     step_number: 3,
-    step_name: 'Approval Manager Purchasing',
+    step_name: 'Manager Purchase',
   },
   {
     step_number: 4,
-    step_name: 'Produk Diterima',
+    step_name: 'Penerimaan Produk',
   },
   {
     step_number: 5,

From 75e7b9a6de2e2425f639311f44bf1faf452832a8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 14:58:49 +0700
Subject: [PATCH 101/168] refactor(FE-208,213): update PurchaseOrderDetail and
 PurchaseOrderInvoice components for improved warehouse and supplier details

---
 .../purchase/order/PurchaseOrderDetail.tsx    |   2 +-
 .../purchase/order/PurchaseOrderInvoice.tsx   | 115 ++++++++++--------
 2 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 5e2813aa..0c4337b1 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -499,7 +499,7 @@ const PurchaseOrderDetail = ({
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
                     :{' '}
-                    {purchaseData.items?.[0]?.warehouse?.type !== 'AREA' &&
+                    {purchaseData.items?.[0]?.warehouse?.type === 'LOKASI' &&
                     purchaseData.items?.[0]?.warehouse?.location?.name
                       ? purchaseData.items[0].warehouse.location.name
                       : '-'}
diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index 0d5e5d5d..c9485f96 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -267,7 +267,9 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                 style={pdfStyles.logo}
                 id={'mbu-logo'}
               />
-              <Text style={pdfStyles.companyInfo}>PT MITRA BERLIAN UNGGAS</Text>
+              <Text style={pdfStyles.companyInfo}>
+                PT LUMBUNG TELUR INDONESIA
+              </Text>
               <Text style={pdfStyles.address}>
                 SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
                 Cipedes, Kec. Sukajadi, Kota Bandung 40162
@@ -283,8 +285,8 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                 <Text>
                   Date:{' '}
                   {purchaseData?.po_date
-                    ? formatDate(purchaseData.po_date, 'DD-MMM-YYYY')
-                    : formatDate(new Date(), 'DD-MMM-YYYY')}
+                    ? formatDate(purchaseData.po_date, 'DD MMM YYYY')
+                    : formatDate(new Date(), 'DD MMM YYYY')}
                 </Text>
               </View>
             </View>
@@ -302,20 +304,34 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
               <View style={pdfStyles.tableRow}>
                 <View style={pdfStyles.tableCell}>
                   <Text style={{ fontWeight: 'bold' }}>
-                    {purchaseData?.supplier?.name || '-'}
+                    {purchaseData?.supplier?.name || '-'} (
+                    {purchaseData?.supplier?.alias || ''})
                   </Text>
-                  <Text>{purchaseData?.supplier?.pic || '-'}</Text>
+                  <Text>{purchaseData?.supplier?.category || '-'}</Text>
                   <Text>
-                    {purchaseData?.supplier?.phone || '-'} /{' '}
-                    {purchaseData?.supplier?.email || '-'}
+                    Credit Term: {purchaseData?.credit_term || 0} hari
+                  </Text>
+                  <Text>
+                    Due Date:{' '}
+                    {purchaseData?.due_date
+                      ? formatDate(purchaseData.due_date, 'DD MMM YYYY')
+                      : '-'}
                   </Text>
-                  <Text>{purchaseData?.supplier?.address || '-'}</Text>
                 </View>
                 <View style={pdfStyles.tableCellLast}>
                   <Text style={{ fontWeight: 'bold' }}>
-                    PT MITRA BERLIAN UNGGAS
+                    PT LUMBUNG TELUR INDONESIA
+                  </Text>
+                  <Text>
+                    {purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
+                      ? purchaseData.items[0].warehouse.location.name
+                      : '-'}
+                  </Text>
+                  <Text>
+                    {purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
+                      ? purchaseData.items[0].warehouse.location.address
+                      : '-'}
                   </Text>
-                  <Text>{purchaseData?.location?.name || '-'}</Text>
                 </View>
               </View>
             </View>
@@ -331,7 +347,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                     <Text>Unit Price</Text>
                   </View>
                   <View style={pdfStyles.tableCellHeader}>
-                    <Text>Total Quantity</Text>
+                    <Text>Quantity</Text>
                   </View>
                   <View style={pdfStyles.tableCellHeaderLast}>
                     <Text>Total Amount</Text>
@@ -355,7 +371,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                         <Text>Rp{formatNumber(item.price || 0)}</Text>
                       </View>
                       <View style={pdfStyles.tableCellRight}>
-                        <Text>{formatNumber(item.total_qty || 0)}</Text>
+                        <Text>{formatNumber(item.sub_qty || 0)}</Text>
                       </View>
                       <View style={pdfStyles.tableCellRightLast}>
                         <Text>Rp{formatNumber(item.total_price || 0)}</Text>
@@ -398,57 +414,58 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                     <Text>Warehouse Name</Text>
                   </View>
                   <View style={pdfStyles.tableCellHeader}>
-                    <Text>PIC</Text>
+                    <Text>Area</Text>
                   </View>
                   <View style={pdfStyles.tableCellHeader}>
-                    <Text>Address Detail</Text>
+                    <Text>Location Address</Text>
                   </View>
                   <View style={pdfStyles.tableCellHeaderLast}>
                     <Text>Product Allocation</Text>
                   </View>
                 </View>
-                <View style={pdfStyles.tableRow}>
-                  <View style={pdfStyles.tableCell}>
-                    <Text>{purchaseData?.warehouse?.name || '-'}</Text>
-                  </View>
-                  <View style={pdfStyles.tableCell}>
-                    <Text>{purchaseData?.created_user?.name || '-'}</Text>
-                    <Text style={{ fontSize: 8 }}>
-                      {purchaseData?.created_user?.email || '-'}
-                    </Text>
-                  </View>
-                  <View style={pdfStyles.tableCell}>
-                    <Text>{purchaseData?.location?.name || '-'}</Text>
-                  </View>
-                  <View style={pdfStyles.tableCellLast}>
-                    {/* Inner table for product allocation */}
-                    <View style={pdfStyles.innerTable}>
-                      {/* Header for inner table */}
-                      <View
-                        style={[
-                          pdfStyles.innerRow,
-                          { backgroundColor: '#F5F5F5' },
-                        ]}
-                      >
-                        <Text style={pdfStyles.innerCell}>Item</Text>
-                        <Text style={pdfStyles.innerCellRightLast}>
-                          Quantity
-                        </Text>
-                      </View>
-                      {/* Data rows */}
-                      {purchaseData?.items?.map((item, index) => (
-                        <View key={index} style={pdfStyles.innerRow}>
+                {purchaseData?.items?.map((item, itemIndex) => (
+                  <View key={itemIndex} style={pdfStyles.tableRow}>
+                    <View style={pdfStyles.tableCell}>
+                      <Text>{item.warehouse?.name || '-'}</Text>
+                    </View>
+                    <View style={pdfStyles.tableCell}>
+                      <Text>{item.warehouse?.area?.name || '-'}</Text>
+                    </View>
+                    <View style={pdfStyles.tableCell}>
+                      <Text>
+                        {item.warehouse?.type === 'LOKASI'
+                          ? item.warehouse.location.address
+                          : '-'}
+                      </Text>
+                    </View>
+                    <View style={pdfStyles.tableCellLast}>
+                      {/* Inner table for product allocation */}
+                      <View style={pdfStyles.innerTable}>
+                        {/* Header for inner table */}
+                        <View
+                          style={[
+                            pdfStyles.innerRow,
+                            { backgroundColor: '#F5F5F5' },
+                          ]}
+                        >
+                          <Text style={pdfStyles.innerCell}>Item</Text>
+                          <Text style={pdfStyles.innerCellRightLast}>
+                            Quantity
+                          </Text>
+                        </View>
+                        {/* Data row */}
+                        <View style={pdfStyles.innerRow}>
                           <Text style={pdfStyles.innerCell}>
                             {item.product?.name || '-'}
                           </Text>
                           <Text style={pdfStyles.innerCellRightLast}>
-                            {formatNumber(item.total_qty || 0)}
+                            {formatNumber(item.sub_qty || 0)}
                           </Text>
                         </View>
-                      )) || []}
+                      </View>
                     </View>
                   </View>
-                </View>
+                )) || []}
               </View>
             </View>
 
@@ -467,7 +484,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                 </View>
               </View>
               <View style={pdfStyles.footerCompany}>
-                <Text>PT MITRA BERLIAN UNGGAS</Text>
+                <Text>PT LUMBUNG TELUR INDONESIA</Text>
               </View>
             </View>
           </Page>

From 8c3cd3bc53247be87ed7b6e9e16172919367d371 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 18:22:10 +0700
Subject: [PATCH 102/168] refactor(FE-208,213): enhance PurchaseOrderDetail and
 PurchaseOrderStaffApprovalForm components with initialValues prop and clean
 up unused code

---
 .../pages/purchase/PurchaseTable.tsx          | 201 +++++++-----------
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  55 +----
 .../purchase/order/PurchaseOrderDetail.tsx    |   1 +
 3 files changed, 85 insertions(+), 172 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 31ed1abc..6a74af0c 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -91,7 +91,6 @@ const PurchaseTable = () => {
     null
   );
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
 
   // ===== TABLE FILTER STATE =====
   const {
@@ -134,104 +133,94 @@ const PurchaseTable = () => {
     PurchaseRequestApi.getAllFetcher
   );
 
-  // ===== COMPUTED VALUES =====
-  const selectedRowIds = useMemo(
-    () => Object.keys(rowSelection).map((item) => parseInt(item)),
-    [rowSelection]
-  );
-
   // ===== TABLE COLUMNS DEFINITION =====
-  const purchaseColumns: ColumnDef<Purchase>[] = useMemo(
-    () => [
-      {
-        header: 'No. PR/PO',
-        cell: (props) => {
-          const { pr_number, po_number } = props.row.original;
-          return po_number ? po_number : pr_number;
-        },
+  const purchaseColumns: ColumnDef<Purchase>[] = [
+    {
+      header: 'No. PR/PO',
+      cell: (props) => {
+        const { pr_number, po_number } = props.row.original;
+        return po_number ? po_number : pr_number;
       },
-      {
-        accessorKey: 'supplier',
-        header: 'Vendor',
-        cell: (props) => props.row.original.supplier.name,
+    },
+    {
+      accessorKey: 'supplier',
+      header: 'Vendor',
+      cell: (props) => props.row.original.supplier.name,
+    },
+    {
+      accessorKey: 'po_date',
+      header: 'Tgl. PO',
+      cell: (props) =>
+        props.row.original.po_date
+          ? formatDate(props.row.original.po_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      accessorKey: 'due_date',
+      header: 'Jatuh Tempo',
+      cell: (props) =>
+        props.row.original.due_date
+          ? formatDate(props.row.original.due_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      header: 'Aging',
+      cell: (props) => {
+        const purchase = props.row.original;
+        if (!purchase.po_date) return '-';
+        const poDate = new Date(purchase.po_date);
+        const today = new Date();
+        const diffTime = Math.abs(today.getTime() - poDate.getTime());
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        return `${diffDays} hari`;
       },
-      {
-        accessorKey: 'po_date',
-        header: 'Tgl. PO',
-        cell: (props) =>
-          props.row.original.po_date
-            ? formatDate(props.row.original.po_date, 'DD MMM YYYY')
-            : '-',
-      },
-      {
-        accessorKey: 'due_date',
-        header: 'Jatuh Tempo',
-        cell: (props) =>
-          props.row.original.due_date
-            ? formatDate(props.row.original.due_date, 'DD MMM YYYY')
-            : '-',
-      },
-      {
-        header: 'Aging',
-        cell: (props) => {
-          const purchase = props.row.original;
-          if (!purchase.po_date) return '-';
-          const poDate = new Date(purchase.po_date);
-          const today = new Date();
-          const diffTime = Math.abs(today.getTime() - poDate.getTime());
-          const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-          return `${diffDays} hari`;
-        },
-      },
-      {
-        accessorKey: 'grand_total',
-        header: 'Total (Rp.)',
-        cell: (props) => formatCurrency(props.row.original.grand_total),
-      },
-      {
-        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;
+    },
+    {
+      accessorKey: 'grand_total',
+      header: 'Total (Rp.)',
+      cell: (props) => formatCurrency(props.row.original.grand_total),
+    },
+    {
+      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 isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
-          const deleteClickHandler = () => {
-            setSelectedPurchase(props.row.original);
-            deleteModal.openModal();
-          };
+        const deleteClickHandler = () => {
+          setSelectedPurchase(props.row.original);
+          deleteModal.openModal();
+        };
 
-          return (
-            <>
-              {currentPageSize > 2 && (
-                <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                  <RowOptionsMenu
-                    type='dropdown'
-                    props={props}
-                    deleteClickHandler={deleteClickHandler}
-                  />
-                </RowDropdownOptions>
-              )}
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
 
-              {currentPageSize <= 2 && (
-                <RowCollapseOptions>
-                  <RowOptionsMenu
-                    type='collapse'
-                    props={props}
-                    deleteClickHandler={deleteClickHandler}
-                  />
-                </RowCollapseOptions>
-              )}
-            </>
-          );
-        },
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
       },
-    ],
-    []
-  );
+    },
+  ];
 
   // ===== EVENT HANDLERS =====
   const confirmationModalDeleteClickHandler = useCallback(async () => {
@@ -287,7 +276,7 @@ const PurchaseTable = () => {
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
-            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+            <div className='w-full flex flex-row gap-2'>
               <Button
                 href='/purchase/add'
                 variant='outline'
@@ -297,32 +286,6 @@ const PurchaseTable = () => {
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
-
-              {selectedRowIds.length > 0 && (
-                <Button
-                  variant='outline'
-                  color='error'
-                  onClick={() => {
-                    setSelectedPurchase(
-                      isResponseSuccess(purchaseRequests)
-                        ? purchaseRequests?.data?.find((p: Purchase) =>
-                            selectedRowIds.includes(p.id)
-                          ) || null
-                        : null
-                    );
-                    deleteModal.openModal();
-                  }}
-                  disabled={selectedRowIds.length === 0}
-                  className='w-full sm:w-fit'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                  />
-                  Hapus ({selectedRowIds.length})
-                </Button>
-              )}
             </div>
 
             <DebouncedTextInput
@@ -400,8 +363,6 @@ const PurchaseTable = () => {
           isLoading={isLoading}
           sorting={sorting}
           setSorting={setSorting}
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
           className={{
             containerClassName: cn({
               'mb-20':
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 2517b337..f3c2ce36 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -170,7 +170,7 @@ const PurchaseOrderStaffApprovalForm = ({
     if (initialValues?.items) {
       return initialValues.items.map((item) => ({
         value: item.id,
-        label: `${item.product.name} (${item.quantity} ${item.product.uom?.name || 'unit'})`,
+        label: `${item.product.name} ${item.quantity}`,
         id: item.id,
         quantity: item.quantity,
         product: {
@@ -184,57 +184,8 @@ const PurchaseOrderStaffApprovalForm = ({
       }));
     }
 
-    return [
-      {
-        value: 1,
-        label: 'SEALYTE SPARK 1 x 87 gr (14 SACHET)',
-        id: 1,
-        quantity: 14,
-        product: {
-          name: 'SEALYTE SPARK 1 x 87 gr',
-          product_category: 'Bahan Baku',
-          uom: {
-            name: 'SACHET',
-          },
-        },
-        warehouse: {
-          name: 'GUDANG CIANGSANA 1 (ARCA P15)',
-        },
-      },
-      {
-        value: 2,
-        label: 'CID-2000 @ 5 KG (2 KILOGRAM)',
-        id: 2,
-        quantity: 2,
-        product: {
-          name: 'CID-2000 @ 5 KG',
-          product_category: 'Bahan Baku',
-          uom: {
-            name: 'Kilogram',
-          },
-        },
-        warehouse: {
-          name: 'GUDANG CIANGSANA 2 (ARCA P15)',
-        },
-      },
-      {
-        value: 3,
-        label: 'VITAMIN AYAM (10 DOSIS)',
-        id: 3,
-        quantity: 10,
-        product: {
-          name: 'VITAMIN AYAM',
-          product_category: 'Bahan Baku',
-          uom: {
-            name: 'DOSIS',
-          },
-        },
-        warehouse: {
-          name: 'GUDANG CIANGSANA 3 (ARCA P15)',
-        },
-      },
-    ];
-  }, [initialValues?.items, searchParams]);
+    return [];
+  }, [initialValues?.items]);
 
   const getPurchaseItemOptions = useCallback(() => {
     return purchaseItems;
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 0c4337b1..8de2f322 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -758,6 +758,7 @@ const PurchaseOrderDetail = ({
       >
         <PurchaseOrderStaffApprovalForm
           type='add'
+          initialValues={purchaseData}
           onCancel={staffApprovalModal.closeModal}
         />
       </Modal>

From 0d025ba34c5d740b1f0771b9518de91f1f070219 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 18:31:49 +0700
Subject: [PATCH 103/168] refactor(FE-208,213): streamline
 PurchaseOrderAcceptApprovalForm by removing hardcoded warehouse options and
 utilizing initialValues for dynamic data

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 93 +++++--------------
 .../purchase/order/PurchaseOrderDetail.tsx    |  1 +
 .../purchase/order/PurchaseOrderInvoice.tsx   |  6 +-
 3 files changed, 28 insertions(+), 72 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 256ffed3..cfe52d8a 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -220,77 +220,32 @@ const PurchaseOrderAcceptApprovalForm = ({
       }));
     }
 
-    return [
-      {
-        value: 1,
-        label: 'SEALYTE SPARK 1 x 87 gr (14 SACHET)',
-        id: 1,
-        quantity: 14,
-        product: {
-          name: 'SEALYTE SPARK 1 x 87 gr',
-          product_category: 'Bahan Baku',
-          uom: {
-            name: 'SACHET',
-          },
-        },
-        warehouse: {
-          name: 'GUDANG CIANGSANA 1 (ARCA P15)',
-        },
-      },
-      {
-        value: 2,
-        label: 'CID-2000 @ 5 KG (2 KILOGRAM)',
-        id: 2,
-        quantity: 2,
-        product: {
-          name: 'CID-2000 @ 5 KG',
-          product_category: 'Bahan Baku',
-          uom: {
-            name: 'Kilogram',
-          },
-        },
-        warehouse: {
-          name: 'GUDANG CIANGSANA 2 (ARCA P15)',
-        },
-      },
-      {
-        value: 3,
-        label: 'VITAMIN AYAM (10 DOSIS)',
-        id: 3,
-        quantity: 10,
-        product: {
-          name: 'VITAMIN AYAM',
-          product_category: 'Bahan Baku',
-          uom: {
-            name: 'DOSIS',
-          },
-        },
-        warehouse: {
-          name: 'GUDANG CIANGSANA 3 (ARCA P15)',
-        },
-      },
-    ];
-  }, [initialValues?.items, searchParams]);
+    return [];
+  }, [initialValues?.items]);
 
-  const warehouses: WarehouseOptionType[] = useMemo(
-    () => [
-      { value: 1, label: 'GUDANG CIANGSANA 1 (ARCA P15)', id: 1 },
-      { value: 2, label: 'GUDANG CIANGSANA 2 (ARCA P15)', id: 2 },
-      { value: 3, label: 'GUDANG CIANGSANA 3 (ARCA P15)', id: 3 },
-      { value: 7, label: 'GUDANG UTAMA', id: 7 },
-    ],
-    []
-  );
+  const warehouses: WarehouseOptionType[] = useMemo(() => {
+    if (initialValues?.items) {
+      const uniqueWarehouses = new Map();
 
-  const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(
-    () => [
-      { value: 1, label: 'JNE Express', id: 1 },
-      { value: 2, label: 'J&T Express', id: 2 },
-      { value: 3, label: 'SiCepat Express', id: 3 },
-      { value: 4, label: 'Anteraja', id: 4 },
-    ],
-    []
-  );
+      initialValues.items.forEach((item) => {
+        if (item.warehouse && !uniqueWarehouses.has(item.warehouse.id)) {
+          uniqueWarehouses.set(item.warehouse.id, {
+            value: item.warehouse.id,
+            label: item.warehouse.name,
+            id: item.warehouse.id,
+          });
+        }
+      });
+
+      return Array.from(uniqueWarehouses.values());
+    }
+
+    return [];
+  }, [initialValues?.items]);
+
+  const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(() => {
+    return [];
+  }, []);
 
   const getPurchaseItemOptions = useCallback(() => {
     return purchaseItems;
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 8de2f322..0f3d9372 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -773,6 +773,7 @@ const PurchaseOrderDetail = ({
       >
         <PurchaseOrderAcceptApprovalForm
           type='add'
+          initialValues={purchaseData}
           onCancel={acceptApprovalModal.closeModal}
         />
       </Modal>
diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index c9485f96..4e6cd75d 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -41,7 +41,7 @@ const pdfStyles = StyleSheet.create({
     fontSize: 12,
     fontWeight: 'bold',
     marginBottom: 4,
-    color: '#1f74bf', // Primary color from globals.css
+    color: '#1f74bf',
   },
   address: {
     fontSize: 8,
@@ -65,7 +65,7 @@ const pdfStyles = StyleSheet.create({
     fontSize: 18,
     fontWeight: 'bold',
     flex: 3,
-    color: '#1f74bf', // Primary color
+    color: '#1f74bf',
   },
   poInfo: {
     flex: 1,
@@ -76,7 +76,7 @@ const pdfStyles = StyleSheet.create({
     fontSize: 12,
     fontWeight: 'bold',
     marginBottom: 8,
-    color: '#1f74bf', // Primary color
+    color: '#1f74bf',
   },
   table: {
     borderWidth: 1,

From 1b90d657ff760090389d02e8c15cb33b0db7aff8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 20:43:57 +0700
Subject: [PATCH 104/168] refactor(FE-208,212): update PurchaseOrderForm and
 PurchaseOrderStaffApprovalForm for improved validation and dynamic item
 handling

---
 .../form/order/PurchaseOrderForm.schema.ts    |   9 +-
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 169 +++++++-----------
 2 files changed, 66 insertions(+), 112 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index a24ff3ac..42db9d28 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -90,15 +90,16 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
     purchase_item: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).nullable(),
+    })
+      .nullable()
+      .optional(),
     purchase_item_id: Yup.number()
       .min(1, 'Purchase item is required!')
       .required('Purchase item is required!')
       .test(
-        'is-valid-purchase-item',
-        'Purchase item must be selected!',
+        'is-valid-purchase-item-id',
+        'Purchase item ID must be valid!',
         function (value) {
-          if (!this.parent.purchase_item) return true;
           return Boolean(value && value > 0);
         }
       )
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index f3c2ce36..4a9086a8 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
@@ -8,7 +8,7 @@ import { useSearchParams } from 'next/navigation';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { OptionType } from '@/components/input/SelectInput';
 
 import {
   PurchaseRequestStaffApprovalFormDefaultValues,
@@ -56,7 +56,7 @@ const PurchaseOrderStaffApprovalForm = ({
   // ===== UTILITY FUNCTIONS =====
   const getPurchaseItemError = (
     idx: number,
-    field: 'purchase_item_id' | 'price' | 'total_price'
+    field: 'price' | 'total_price'
   ): { isError: boolean; errorMessage: string } => {
     const touchedItem = formik.touched.items?.[idx];
     const errorItem = formik.errors.items?.[idx] as
@@ -135,20 +135,20 @@ const PurchaseOrderStaffApprovalForm = ({
     onSubmit: async (values) => {
       const payload: CreateStaffApprovalRequestPayload = {
         notes: values.notes || '',
-        items: (values.items || []).map((item) => ({
-          purchase_item_id:
-            typeof item.purchase_item_id === 'string'
-              ? parseInt(item.purchase_item_id) || 0
-              : item.purchase_item_id || 0,
-          price:
-            typeof item.price === 'string'
-              ? parseFloat(item.price) || 0
-              : item.price || 0,
-          total_price:
-            typeof item.total_price === 'string'
-              ? parseFloat(item.total_price) || 0
-              : item.total_price || 0,
-        })),
+        items: purchaseItems.map((purchaseItem, idx) => {
+          const formItem = values.items?.[idx];
+          return {
+            purchase_item_id: purchaseItem.value,
+            price:
+              typeof formItem?.price === 'string'
+                ? parseFloat(formItem.price) || 0
+                : formItem?.price || 0,
+            total_price:
+              typeof formItem?.total_price === 'string'
+                ? parseFloat(formItem.total_price) || 0
+                : formItem?.total_price || 0,
+          };
+        }),
       };
 
       switch (type) {
@@ -170,9 +170,9 @@ const PurchaseOrderStaffApprovalForm = ({
     if (initialValues?.items) {
       return initialValues.items.map((item) => ({
         value: item.id,
-        label: `${item.product.name} ${item.quantity}`,
+        label: `${item.product.name} ${item.sub_qty}`,
         id: item.id,
-        quantity: item.quantity,
+        quantity: item.sub_qty,
         product: {
           name: item.product.name,
           product_category: item.product.product_category,
@@ -187,25 +187,18 @@ const PurchaseOrderStaffApprovalForm = ({
     return [];
   }, [initialValues?.items]);
 
-  const getPurchaseItemOptions = useCallback(() => {
-    return purchaseItems;
+  // Ensure form values are properly set when purchaseItems change
+  useEffect(() => {
+    if (purchaseItems.length > 0) {
+      const updatedItems = purchaseItems.map((purchaseItem) => ({
+        purchase_item_id: purchaseItem.value,
+        price: '',
+        total_price: '',
+      }));
+      formik.setFieldValue('items', updatedItems);
+    }
   }, [purchaseItems]);
 
-  // ===== FIELD CHANGE HANDLERS =====
-  const purchaseItemChangeHandler = (
-    idx: number,
-    val: OptionType | OptionType[] | null
-  ) => {
-    const purchaseItem = val as PurchaseItemOptionType | null;
-    formik.setFieldTouched(`items.${idx}.purchase_item`, true);
-    formik.setFieldValue(`items.${idx}.purchase_item`, purchaseItem);
-    formik.setFieldTouched(`items.${idx}.purchase_item_id`, true);
-    formik.setFieldValue(
-      `items.${idx}.purchase_item_id`,
-      (purchaseItem as OptionType)?.value || 0
-    );
-  };
-
   // ===== PURCHASE ITEM OPERATIONS =====
   const handlePurchaseItemChange = (
     idx: number,
@@ -217,29 +210,26 @@ const PurchaseOrderStaffApprovalForm = ({
         typeof value === 'string' ? parseFloat(value) || 0 : value;
       formik.setFieldValue(`items.${idx}.${field}`, numValue);
 
-      if (field === 'price') {
-        const selectedItem = purchaseItems.find(
-          (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
-        );
-        if (selectedItem && selectedItem.quantity && numValue > 0) {
-          const calculatedTotal = numValue * selectedItem.quantity;
-          formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
-        }
+      const selectedItem = purchaseItems[idx];
+
+      if (
+        field === 'price' &&
+        selectedItem &&
+        selectedItem.quantity > 0 &&
+        numValue >= 0
+      ) {
+        const calculatedTotal = numValue * selectedItem.quantity;
+        formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
       }
 
-      if (field === 'total_price') {
-        const selectedItem = purchaseItems.find(
-          (p) => p.value === formik.values.items?.[idx]?.purchase_item_id
-        );
-        if (
-          selectedItem &&
-          selectedItem.quantity &&
-          selectedItem.quantity > 0 &&
-          numValue > 0
-        ) {
-          const calculatedPrice = numValue / selectedItem.quantity;
-          formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
-        }
+      if (
+        field === 'total_price' &&
+        selectedItem &&
+        selectedItem.quantity > 0 &&
+        numValue >= 0
+      ) {
+        const calculatedPrice = numValue / selectedItem.quantity;
+        formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
       }
     }
   };
@@ -260,10 +250,6 @@ const PurchaseOrderStaffApprovalForm = ({
             <table className='table'>
               <thead>
                 <tr>
-                  <th>
-                    Item
-                    <span className='text-error'>*</span>
-                  </th>
                   <th>Gudang</th>
                   <th>Produk</th>
                   <th>Jenis Produk</th>
@@ -280,43 +266,16 @@ const PurchaseOrderStaffApprovalForm = ({
                 </tr>
               </thead>
               <tbody>
-                {formik.values.items?.map((item, idx) => {
-                  const selectedPurchaseItem = purchaseItems.find(
-                    (p) => p.value === item.purchase_item_id
-                  );
+                {purchaseItems?.map((purchaseItem, idx) => {
+                  const formItem = formik.values.items?.[idx];
                   return (
                     <tr key={`purchase-item-${idx}`}>
-                      <td>
-                        <SelectInput
-                          required
-                          isClearable={true}
-                          value={item.purchase_item}
-                          key={`purchase-item-${idx}`}
-                          onChange={(val) =>
-                            purchaseItemChangeHandler(idx, val)
-                          }
-                          options={getPurchaseItemOptions()}
-                          isError={
-                            getPurchaseItemError(idx, 'purchase_item_id')
-                              .isError
-                          }
-                          errorMessage={
-                            getPurchaseItemError(idx, 'purchase_item_id')
-                              .errorMessage
-                          }
-                          placeholder='Pilih Item...'
-                          className={{
-                            wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                          }}
-                        />
-                      </td>
                       <td>
                         <TextInput
                           name={`items.${idx}.warehouse`}
                           type='text'
-                          value={selectedPurchaseItem?.warehouse?.name || ''}
+                          value={purchaseItem?.warehouse?.name || ''}
                           readOnly={true}
-                          placeholder='Pilih item terlebih dahulu'
                           className={{
                             wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                           }}
@@ -327,9 +286,8 @@ const PurchaseOrderStaffApprovalForm = ({
                         <TextInput
                           name={`items.${idx}.product_name`}
                           type='text'
-                          value={selectedPurchaseItem?.product?.name || ''}
+                          value={purchaseItem?.product?.name || ''}
                           readOnly={true}
-                          placeholder='Pilih item terlebih dahulu'
                           className={{
                             wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
                           }}
@@ -341,14 +299,13 @@ const PurchaseOrderStaffApprovalForm = ({
                           name={`items.${idx}.product_category`}
                           type='text'
                           value={
-                            typeof selectedPurchaseItem?.product
-                              ?.product_category === 'string'
-                              ? selectedPurchaseItem.product.product_category
-                              : selectedPurchaseItem?.product?.product_category
-                                  ?.name || ''
+                            typeof purchaseItem?.product?.product_category ===
+                            'string'
+                              ? purchaseItem.product.product_category
+                              : purchaseItem?.product?.product_category?.name ||
+                                ''
                           }
                           readOnly={true}
-                          placeholder='Pilih item terlebih dahulu'
                           className={{
                             wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
                           }}
@@ -360,14 +317,11 @@ const PurchaseOrderStaffApprovalForm = ({
                           name={`items.${idx}.quantity`}
                           type='text'
                           value={
-                            selectedPurchaseItem?.quantity
-                              ? selectedPurchaseItem.quantity.toLocaleString(
-                                  'id-ID'
-                                )
+                            purchaseItem?.quantity
+                              ? purchaseItem.quantity.toLocaleString('id-ID')
                               : ''
                           }
                           readOnly={true}
-                          placeholder='Pilih item terlebih dahulu'
                           className={{
                             wrapper: 'min-w-24',
                           }}
@@ -378,9 +332,8 @@ const PurchaseOrderStaffApprovalForm = ({
                         <TextInput
                           name={`items.${idx}.uom`}
                           type='text'
-                          value={selectedPurchaseItem?.product?.uom?.name || ''}
+                          value={purchaseItem?.product?.uom?.name || ''}
                           readOnly={true}
-                          placeholder='Pilih item terlebih dahulu'
                           className={{
                             wrapper: 'min-w-24',
                           }}
@@ -391,7 +344,7 @@ const PurchaseOrderStaffApprovalForm = ({
                         <NumberInput
                           required
                           name={`items.${idx}.price`}
-                          value={item.price || ''}
+                          value={formItem?.price || ''}
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,
@@ -419,7 +372,7 @@ const PurchaseOrderStaffApprovalForm = ({
                         <NumberInput
                           required
                           name={`items.${idx}.total_price`}
-                          value={item.total_price || ''}
+                          value={formItem?.total_price || ''}
                           onChange={(e) =>
                             handlePurchaseItemChange(
                               idx,

From 0c79e8673601ebc87a80b72e015281e8657b49b5 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 21:00:46 +0700
Subject: [PATCH 105/168] refactor(FE-208,212): update PurchaseOrderForm and
 PurchaseOrderStaffApprovalForm for improved validation and dynamic item
 handling

---
 .../form/order/PurchaseOrderForm.schema.ts    | 104 ++++++++++--------
 src/types/api/purchase/purchase.d.ts          |  14 ++-
 2 files changed, 70 insertions(+), 48 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 42db9d28..d3e6ff17 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -4,11 +4,17 @@ import { Purchase } from '@/types/api/purchase/purchase';
 type PurchaseRequestStaffApprovalFormSchemaType = {
   notes: string | null;
   items: {
-    purchase_item?: {
+    product?: {
       value: number;
       label: string;
     } | null;
-    purchase_item_id: number;
+    product_id: number;
+    warehouse?: {
+      value: number;
+      label: string;
+    } | null;
+    warehouse_id: number;
+    qty: number;
     price: number | string;
     total_price: number | string;
   }[];
@@ -47,11 +53,17 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
 };
 
 export type PurchaseStaffApprovalItemSchema = {
-  purchase_item?: {
+  product?: {
     value: number;
     label: string;
   } | null;
-  purchase_item_id: number;
+  product_id: number;
+  warehouse?: {
+    value: number;
+    label: string;
+  } | null;
+  warehouse_id: number;
+  qty: number;
   price: number | string;
   total_price: number | string;
 };
@@ -87,49 +99,35 @@ export type PurchaseDeleteItemsSchema = {
 
 const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffApprovalItemSchema> =
   Yup.object({
-    purchase_item: Yup.object({
+    product: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    })
-      .nullable()
-      .optional(),
-    purchase_item_id: Yup.number()
-      .min(1, 'Purchase item is required!')
-      .required('Purchase item is required!')
-      .test(
-        'is-valid-purchase-item-id',
-        'Purchase item ID must be valid!',
-        function (value) {
-          return Boolean(value && value > 0);
-        }
-      )
-      .typeError('Purchase item must be selected!'),
-    price: Yup.mixed<string | number>()
+    }).nullable(),
+    product_id: Yup.number()
+      .required('Produk wajib diisi!')
+      .min(1, 'Produk wajib diisi!')
+      .typeError('Produk wajib diisi!'),
+    warehouse: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    warehouse_id: Yup.number()
+      .required('Gudang wajib diisi!')
+      .min(1, 'Gudang wajib diisi!')
+      .typeError('Gudang wajib diisi!'),
+    qty: Yup.number()
+      .required('Jumlah wajib diisi!')
+      .min(1, 'Jumlah harus berupa angka lebih dari 0!')
+      .typeError('Jumlah harus berupa angka lebih dari 0!'),
+    price: Yup.number()
       .required('Harga wajib diisi!')
-      .test(
-        'is-valid-price',
-        'Harga harus berupa angka lebih dari atau sama dengan 0!',
-        function (value) {
-          if (value === '' || value === null || value === undefined)
-            return false;
-          const numValue =
-            typeof value === 'string' ? parseFloat(value) : value;
-          return !isNaN(numValue) && numValue >= 0;
-        }
-      )
+      .min(0, 'Harga harus berupa angka lebih dari atau sama dengan 0!')
       .typeError('Harga harus berupa angka lebih dari atau sama dengan 0!'),
-    total_price: Yup.mixed<string | number>()
+    total_price: Yup.number()
       .required('Total harga wajib diisi!')
-      .test(
-        'is-valid-total-price',
-        'Total harga harus berupa angka lebih dari atau sama dengan 0!',
-        function (value) {
-          if (value === '' || value === null || value === undefined)
-            return false;
-          const numValue =
-            typeof value === 'string' ? parseFloat(value) : value;
-          return !isNaN(numValue) && numValue >= 0;
-        }
+      .min(0, 'Total harga harus berupa angka lebih dari atau sama dengan 0!')
+      .typeError(
+        'Total harga harus berupa angka lebih dari atau sama dengan 0!'
       ),
   });
 
@@ -273,7 +271,11 @@ export const PurchaseRequestStaffApprovalFormInitialValues: PurchaseRequestStaff
     notes: '',
     items: [
       {
-        purchase_item_id: 0,
+        product: null,
+        product_id: 0,
+        warehouse: null,
+        warehouse_id: 0,
+        qty: 0,
         price: '',
         total_price: '',
       },
@@ -287,13 +289,21 @@ export const PurchaseRequestStaffApprovalFormDefaultValues = (
     notes: purchase?.notes ?? null,
     items: purchase?.items
       ? purchase.items.map((item) => ({
-          purchase_item_id: item.id,
-          price: '',
-          total_price: '',
+          product: null,
+          product_id: item.product_id,
+          warehouse: null,
+          warehouse_id: item.warehouse.id,
+          qty: item.qty,
+          price: item.price,
+          total_price: item.total_price,
         }))
       : [
           {
-            purchase_item_id: 0,
+            product: null,
+            product_id: 0,
+            warehouse: null,
+            warehouse_id: 0,
+            qty: 0,
             price: '',
             total_price: '',
           },
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index f20c4549..b4b8b2ee 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -76,12 +76,24 @@ export type CreatePurchaseRequestPayload = {
 export type CreateStaffApprovalRequestPayload = {
   notes?: string | null;
   items: {
-    purchase_item_id: number;
+    product_id: number;
+    warehouse_id: number;
+    qty: number;
     price: number;
     total_price: number;
   }[];
 };
 
+export type UpdateStaffApprovalRequestPayload = {
+  items: {
+    purchase_item_id: number;
+    qty: number;
+    price: number;
+    total_price: number;
+  }[];
+  'notes?': string | null;
+};
+
 export type CreateManagerApprovalRequestPayload = {
   notes?: string | null;
 };

From 3d468d950783faeace4bb988f310bb26b2c2e201 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 22:13:14 +0700
Subject: [PATCH 106/168] refactor(FE-208,213): simplify PurchaseOrderForm and
 PurchaseOrderStaffApprovalForm by removing unused product and warehouse
 fields and enhancing price validation

---
 .../form/order/PurchaseOrderForm.schema.ts    | 64 ++++++++-----------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 30 +++------
 2 files changed, 35 insertions(+), 59 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index d3e6ff17..209671cf 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -4,15 +4,7 @@ import { Purchase } from '@/types/api/purchase/purchase';
 type PurchaseRequestStaffApprovalFormSchemaType = {
   notes: string | null;
   items: {
-    product?: {
-      value: number;
-      label: string;
-    } | null;
     product_id: number;
-    warehouse?: {
-      value: number;
-      label: string;
-    } | null;
     warehouse_id: number;
     qty: number;
     price: number | string;
@@ -53,15 +45,7 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
 };
 
 export type PurchaseStaffApprovalItemSchema = {
-  product?: {
-    value: number;
-    label: string;
-  } | null;
   product_id: number;
-  warehouse?: {
-    value: number;
-    label: string;
-  } | null;
   warehouse_id: number;
   qty: number;
   price: number | string;
@@ -99,18 +83,10 @@ export type PurchaseDeleteItemsSchema = {
 
 const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffApprovalItemSchema> =
   Yup.object({
-    product: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
     product_id: Yup.number()
       .required('Produk wajib diisi!')
       .min(1, 'Produk wajib diisi!')
       .typeError('Produk wajib diisi!'),
-    warehouse: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
     warehouse_id: Yup.number()
       .required('Gudang wajib diisi!')
       .min(1, 'Gudang wajib diisi!')
@@ -119,16 +95,34 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       .required('Jumlah wajib diisi!')
       .min(1, 'Jumlah harus berupa angka lebih dari 0!')
       .typeError('Jumlah harus berupa angka lebih dari 0!'),
-    price: Yup.number()
+    price: Yup.mixed<number | string>()
       .required('Harga wajib diisi!')
-      .min(0, 'Harga harus berupa angka lebih dari atau sama dengan 0!')
-      .typeError('Harga harus berupa angka lebih dari atau sama dengan 0!'),
-    total_price: Yup.number()
+      .test(
+        'is-valid-price',
+        'Harga harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      )
+      .typeError('Harga harus berupa angka!'),
+    total_price: Yup.mixed<number | string>()
       .required('Total harga wajib diisi!')
-      .min(0, 'Total harga harus berupa angka lebih dari atau sama dengan 0!')
-      .typeError(
-        'Total harga harus berupa angka lebih dari atau sama dengan 0!'
-      ),
+      .test(
+        'is-valid-total-price',
+        'Total harga harus berupa angka lebih dari atau sama dengan 0!',
+        function (value) {
+          if (value === '' || value === null || value === undefined)
+            return false;
+          const numValue =
+            typeof value === 'string' ? parseFloat(value) : value;
+          return !isNaN(numValue) && numValue >= 0;
+        }
+      )
+      .typeError('Total harga harus berupa angka!'),
   });
 
 const PurchaseManagerApprovalObjectSchema: Yup.ObjectSchema<PurchaseRequestManagerApprovalFormSchemaType> =
@@ -271,9 +265,7 @@ export const PurchaseRequestStaffApprovalFormInitialValues: PurchaseRequestStaff
     notes: '',
     items: [
       {
-        product: null,
         product_id: 0,
-        warehouse: null,
         warehouse_id: 0,
         qty: 0,
         price: '',
@@ -289,9 +281,7 @@ export const PurchaseRequestStaffApprovalFormDefaultValues = (
     notes: purchase?.notes ?? null,
     items: purchase?.items
       ? purchase.items.map((item) => ({
-          product: null,
           product_id: item.product_id,
-          warehouse: null,
           warehouse_id: item.warehouse.id,
           qty: item.qty,
           price: item.price,
@@ -299,9 +289,7 @@ export const PurchaseRequestStaffApprovalFormDefaultValues = (
         }))
       : [
           {
-            product: null,
             product_id: 0,
-            warehouse: null,
             warehouse_id: 0,
             qty: 0,
             price: '',
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 4a9086a8..9a61448b 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -8,7 +8,6 @@ import { useSearchParams } from 'next/navigation';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import { OptionType } from '@/components/input/SelectInput';
 
 import {
   PurchaseRequestStaffApprovalFormDefaultValues,
@@ -37,22 +36,6 @@ const PurchaseOrderStaffApprovalForm = ({
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
 
-  // ===== TYPE DEFINITIONS =====
-  interface PurchaseItemOptionType extends OptionType {
-    id: number;
-    quantity: number;
-    product: {
-      name: string;
-      type?: string;
-      uom?: {
-        name: string;
-      };
-    };
-    warehouse: {
-      name: string;
-    };
-  }
-
   // ===== UTILITY FUNCTIONS =====
   const getPurchaseItemError = (
     idx: number,
@@ -138,7 +121,9 @@ const PurchaseOrderStaffApprovalForm = ({
         items: purchaseItems.map((purchaseItem, idx) => {
           const formItem = values.items?.[idx];
           return {
-            purchase_item_id: purchaseItem.value,
+            product_id: purchaseItem.product_id || 0,
+            warehouse_id: purchaseItem.warehouse_id || 0,
+            qty: purchaseItem.quantity || 0,
             price:
               typeof formItem?.price === 'string'
                 ? parseFloat(formItem.price) || 0
@@ -170,9 +155,11 @@ const PurchaseOrderStaffApprovalForm = ({
     if (initialValues?.items) {
       return initialValues.items.map((item) => ({
         value: item.id,
-        label: `${item.product.name} ${item.sub_qty}`,
+        label: item.product.name,
         id: item.id,
         quantity: item.sub_qty,
+        product_id: item.product_id,
+        warehouse_id: item.warehouse.id,
         product: {
           name: item.product.name,
           product_category: item.product.product_category,
@@ -187,11 +174,12 @@ const PurchaseOrderStaffApprovalForm = ({
     return [];
   }, [initialValues?.items]);
 
-  // Ensure form values are properly set when purchaseItems change
   useEffect(() => {
     if (purchaseItems.length > 0) {
       const updatedItems = purchaseItems.map((purchaseItem) => ({
-        purchase_item_id: purchaseItem.value,
+        product_id: purchaseItem.product_id || 0,
+        warehouse_id: purchaseItem.warehouse_id || 0,
+        qty: purchaseItem.quantity || 0,
         price: '',
         total_price: '',
       }));

From f4bb87550c1d1252ca16cf08526212959d5f5bef Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 22:28:27 +0700
Subject: [PATCH 107/168] refactor(FE-212): add updateStaffApproval method and
 enhance PurchaseStaffApprovalItem schema with optional purchase_item_id

---
 .../form/order/PurchaseOrderForm.schema.ts       |  7 +++++++
 src/services/api/purchase.ts                     | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 209671cf..725e6085 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -4,6 +4,7 @@ import { Purchase } from '@/types/api/purchase/purchase';
 type PurchaseRequestStaffApprovalFormSchemaType = {
   notes: string | null;
   items: {
+    purchase_item_id?: number;
     product_id: number;
     warehouse_id: number;
     qty: number;
@@ -45,6 +46,7 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
 };
 
 export type PurchaseStaffApprovalItemSchema = {
+  purchase_item_id?: number;
   product_id: number;
   warehouse_id: number;
   qty: number;
@@ -83,6 +85,10 @@ export type PurchaseDeleteItemsSchema = {
 
 const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffApprovalItemSchema> =
   Yup.object({
+    purchase_item_id: Yup.number()
+      .optional()
+      .min(1, 'Purchase item ID tidak valid!')
+      .typeError('Purchase item ID harus berupa angka!'),
     product_id: Yup.number()
       .required('Produk wajib diisi!')
       .min(1, 'Produk wajib diisi!')
@@ -281,6 +287,7 @@ export const PurchaseRequestStaffApprovalFormDefaultValues = (
     notes: purchase?.notes ?? null,
     items: purchase?.items
       ? purchase.items.map((item) => ({
+          purchase_item_id: item.id,
           product_id: item.product_id,
           warehouse_id: item.warehouse.id,
           qty: item.qty,
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 865ae59c..79eec1fe 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -3,6 +3,7 @@ import {
   Purchase,
   UpdatePurchaseRequestPayload,
   CreateStaffApprovalRequestPayload,
+  UpdateStaffApprovalRequestPayload,
   CreateManagerApprovalRequestPayload,
   CreateAcceptApprovalRequestPayload,
   DeletePurchaseRequestItemPayload,
@@ -19,7 +20,7 @@ export const PurchaseRequestApi = new BaseApiService<
 export class StaffApprovalService extends BaseApiService<
   Purchase,
   CreateStaffApprovalRequestPayload,
-  unknown
+  UpdateStaffApprovalRequestPayload
 > {
   constructor(basePath: string = '') {
     super(basePath);
@@ -37,6 +38,19 @@ export class StaffApprovalService extends BaseApiService<
       }
     );
   }
+
+  async updateStaffApproval(
+    purchaseRequestId: number,
+    payload: UpdateStaffApprovalRequestPayload
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    return await this.customRequest<BaseApiResponse<{ message: string }>>(
+      `${purchaseRequestId}/approvals/staff`,
+      {
+        method: 'POST',
+        payload,
+      }
+    );
+  }
 }
 
 export class ManagerApprovalService extends BaseApiService<

From f6afb741afff63ac8548897473ad0d8ce4a11054 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 22:32:39 +0700
Subject: [PATCH 108/168] refactor(FE-208,212): enhance
 PurchaseOrderStaffApprovalForm for edit functionality and validation checks

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 120 ++++++++++++------
 1 file changed, 79 insertions(+), 41 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 9a61448b..dd8e42d2 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -18,8 +18,10 @@ import { isResponseError } from '@/lib/api-helper';
 import { StaffApprovalApi } from '@/services/api/purchase';
 import {
   CreateStaffApprovalRequestPayload,
+  UpdateStaffApprovalRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
+import { router } from 'next/client';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -37,6 +39,13 @@ const PurchaseOrderStaffApprovalForm = ({
     useState('');
 
   // ===== UTILITY FUNCTIONS =====
+  const canUpdatePurchase = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep >= 4;
+  }, [initialValues?.approval]);
+
   const getPurchaseItemError = (
     idx: number,
     field: 'price' | 'total_price'
@@ -87,8 +96,8 @@ const PurchaseOrderStaffApprovalForm = ({
   );
 
   const updateStaffApprovalHandler = useCallback(
-    async (purchaseId: number, payload: CreateStaffApprovalRequestPayload) => {
-      const res = await StaffApprovalApi.createStaffApproval(
+    async (purchaseId: number, payload: UpdateStaffApprovalRequestPayload) => {
+      const res = await StaffApprovalApi.updateStaffApproval(
         purchaseId,
         payload
       );
@@ -98,7 +107,7 @@ const PurchaseOrderStaffApprovalForm = ({
       }
       toast.success(res?.message as string);
       onCancel?.();
-      window.location.href = '/purchase';
+      await router.push(`/purchase/detail?purchaseId=${purchaseId}`);
     },
     []
   );
@@ -116,36 +125,60 @@ const PurchaseOrderStaffApprovalForm = ({
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      const payload: CreateStaffApprovalRequestPayload = {
-        notes: values.notes || '',
-        items: purchaseItems.map((purchaseItem, idx) => {
-          const formItem = values.items?.[idx];
-          return {
-            product_id: purchaseItem.product_id || 0,
-            warehouse_id: purchaseItem.warehouse_id || 0,
-            qty: purchaseItem.quantity || 0,
-            price:
-              typeof formItem?.price === 'string'
-                ? parseFloat(formItem.price) || 0
-                : formItem?.price || 0,
-            total_price:
-              typeof formItem?.total_price === 'string'
-                ? parseFloat(formItem.total_price) || 0
-                : formItem?.total_price || 0,
-          };
-        }),
-      };
+      if (type === 'edit' && !canUpdatePurchase) {
+        setPurchaseOrderFormErrorMessage(
+          'Tidak bisa diupdate. Harus melewati step 4 dahulu (Tahapan Penerimaan Produk).'
+        );
+        return;
+      }
 
-      switch (type) {
-        case 'add':
-          await createStaffApprovalHandler(payload);
-          break;
-        case 'edit':
-          await updateStaffApprovalHandler(
-            initialValues?.id as number,
-            payload
-          );
-          break;
+      if (type === 'add') {
+        const createPayload: CreateStaffApprovalRequestPayload = {
+          notes: values.notes || '',
+          items: purchaseItems.map((purchaseItem, idx) => {
+            const formItem = values.items?.[idx];
+            return {
+              product_id: purchaseItem.product_id || 0,
+              warehouse_id: purchaseItem.warehouse_id || 0,
+              qty: purchaseItem.quantity || 0,
+              price:
+                typeof formItem?.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : formItem?.price || 0,
+              total_price:
+                typeof formItem?.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : formItem?.total_price || 0,
+            };
+          }),
+        };
+
+        await createStaffApprovalHandler(createPayload);
+      } else if (type === 'edit') {
+        const updatePayload: UpdateStaffApprovalRequestPayload = {
+          'notes?': values.notes || null,
+          items: purchaseItems.map((purchaseItem, idx) => {
+            const formItem = values.items?.[idx];
+            return {
+              purchase_item_id:
+                formItem?.purchase_item_id || purchaseItem.value || 0,
+              qty: purchaseItem.quantity || 0,
+              price:
+                typeof formItem?.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : formItem?.price || 0,
+              total_price:
+                typeof formItem?.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : formItem?.total_price || 0,
+            };
+          }),
+        };
+
+        await updateStaffApprovalHandler(
+          initialValues?.id as number,
+          updatePayload
+        );
       }
     },
   });
@@ -175,17 +208,22 @@ const PurchaseOrderStaffApprovalForm = ({
   }, [initialValues?.items]);
 
   useEffect(() => {
-    if (purchaseItems.length > 0) {
-      const updatedItems = purchaseItems.map((purchaseItem) => ({
-        product_id: purchaseItem.product_id || 0,
-        warehouse_id: purchaseItem.warehouse_id || 0,
-        qty: purchaseItem.quantity || 0,
-        price: '',
-        total_price: '',
-      }));
+    if (purchaseItems.length > 0 && initialValues?.items) {
+      const updatedItems = purchaseItems.map((purchaseItem, idx) => {
+        const originalItem = initialValues.items?.[idx];
+        return {
+          purchase_item_id: type === 'edit' ? purchaseItem.value : undefined,
+          product_id: purchaseItem.product_id || 0,
+          warehouse_id: purchaseItem.warehouse_id || 0,
+          qty: purchaseItem.quantity || 0,
+          price: type === 'edit' && originalItem ? originalItem.price : '',
+          total_price:
+            type === 'edit' && originalItem ? originalItem.total_price : '',
+        };
+      });
       formik.setFieldValue('items', updatedItems);
     }
-  }, [purchaseItems]);
+  }, [purchaseItems, type, initialValues]);
 
   // ===== PURCHASE ITEM OPERATIONS =====
   const handlePurchaseItemChange = (

From 3a431352ed30a369c9b6a202631a0c32e0e251b2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 22:46:46 +0700
Subject: [PATCH 109/168] refactor(FE-208,212): enhance PurchaseOrderDetail and
 PurchaseOrderStaffApprovalForm to conditionally allow updates based on
 approval step

---
 .../order/PurchaseOrderStaffApprovalForm.tsx    |  4 ++--
 .../purchase/order/PurchaseOrderDetail.tsx      | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index dd8e42d2..d967b300 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -39,7 +39,7 @@ const PurchaseOrderStaffApprovalForm = ({
     useState('');
 
   // ===== UTILITY FUNCTIONS =====
-  const canUpdatePurchase = useMemo(() => {
+  const canUpdatePurchaseItems = useMemo(() => {
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
@@ -125,7 +125,7 @@ const PurchaseOrderStaffApprovalForm = ({
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      if (type === 'edit' && !canUpdatePurchase) {
+      if (type === 'edit' && !canUpdatePurchaseItems) {
         setPurchaseOrderFormErrorMessage(
           'Tidak bisa diupdate. Harus melewati step 4 dahulu (Tahapan Penerimaan Produk).'
         );
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 0f3d9372..74995b2e 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -107,6 +107,13 @@ const PurchaseOrderDetail = ({
     return purchaseOrderItems.filter((item) => item.received_date);
   }, [purchaseOrderItems]);
 
+  const canUpdatePurchaseItems = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep >= 4;
+  }, [initialValues?.approval]);
+
   const {
     approvals,
     isLoading: approvalsLoading,
@@ -286,7 +293,7 @@ const PurchaseOrderDetail = ({
       cell: (props) => {
         const deleteClickHandler = () => {
           setSelectedItem(props.row.original);
-          setRowSelection({}); // Clear row selection when doing single delete
+          setRowSelection({});
           deleteModal.openModal();
         };
 
@@ -593,9 +600,11 @@ const PurchaseOrderDetail = ({
             <h3 className='text-lg font-semibold text-gray-800'>
               Item Pembelian
             </h3>
-            <RowDropdownOptions isLast2Rows>
-              <ItemPembelianDropdown onEdit={editModal.openModal} />
-            </RowDropdownOptions>
+            {canUpdatePurchaseItems && (
+              <RowDropdownOptions isLast2Rows>
+                <ItemPembelianDropdown onEdit={editModal.openModal} />
+              </RowDropdownOptions>
+            )}
           </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             {/* Product Table */}

From 89b54f6f8725d40ccc9c240d20ab75fe74646715 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 22:51:29 +0700
Subject: [PATCH 110/168] refactor(FE-208,212): update PurchaseOrderDetail to
 conditionally render invoice based on update permissions

---
 .../pages/purchase/order/PurchaseOrderDetail.tsx   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 74995b2e..d56b63da 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -20,7 +20,6 @@ import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/ord
 import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
 
-import { ApprovalStepStatus } from '@/components/pages/ApprovalSteps';
 import Card from '@/components/Card';
 import {
   CreateManagerApprovalRequestPayload,
@@ -575,17 +574,14 @@ const PurchaseOrderDetail = ({
                     Nomor PO
                   </span>
                   <div className='ml-3'>
-                    {purchaseData.po_number &&
+                    {canUpdatePurchaseItems &&
+                    purchaseData.po_number &&
                     purchaseData.po_number !== 'Belum dibuat' ? (
                       <PurchaseOrderInvoice data={purchaseData} />
                     ) : (
-                      <Button
-                        color='primary'
-                        className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
-                        disabled
-                      >
-                        PO-MBU-01837
-                      </Button>
+                      <>
+                        : <i className='text-gray-400'>Belum dibuat</i>
+                      </>
                     )}
                   </div>
                 </div>

From 25544e2e386ab9cd484dc7cb91bd7e45726b0209 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 23:10:49 +0700
Subject: [PATCH 111/168] refactor(FE-208,212): enhance PurchaseOrderDetail and
 PurchaseOrderStaffApprovalForm to conditionally render invoice and item
 receipt based on approval steps

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  4 +-
 .../purchase/order/PurchaseOrderDetail.tsx    | 47 +++++++++++++++----
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index d967b300..02421c5f 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -43,7 +43,7 @@ const PurchaseOrderStaffApprovalForm = ({
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
-    return currentStep >= 4;
+    return currentStep >= 3;
   }, [initialValues?.approval]);
 
   const getPurchaseItemError = (
@@ -127,7 +127,7 @@ const PurchaseOrderStaffApprovalForm = ({
     onSubmit: async (values) => {
       if (type === 'edit' && !canUpdatePurchaseItems) {
         setPurchaseOrderFormErrorMessage(
-          'Tidak bisa diupdate. Harus melewati step 4 dahulu (Tahapan Penerimaan Produk).'
+          'Tidak bisa diupdate. Harus melewati step 3 dahulu (Approval dari Manager Purchasing).'
         );
         return;
       }
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index d56b63da..780353d6 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -113,6 +113,20 @@ const PurchaseOrderDetail = ({
     return currentStep >= 4;
   }, [initialValues?.approval]);
 
+  const canShowPurchaseOrderInvoice = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep >= 3;
+  }, [initialValues?.approval]);
+
+  const canShowPenerimaanBarang = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep === 5;
+  }, [initialValues?.approval]);
+
   const {
     approvals,
     isLoading: approvalsLoading,
@@ -162,6 +176,17 @@ const PurchaseOrderDetail = ({
     [initialValues?.id, searchParams]
   );
 
+  // ===== MODAL HANDLERS =====
+  const handleStaffApprovalModalClose = useCallback(() => {
+    refreshApprovals();
+    staffApprovalModal.closeModal();
+  }, [refreshApprovals]);
+
+  const handleEditModalClose = useCallback(() => {
+    refreshApprovals();
+    editModal.closeModal();
+  }, [refreshApprovals]);
+
   // ===== DELETE HANDLER =====
   const deleteItemsHandler = useCallback(async () => {
     const purchaseRequestId = searchParams.get('purchaseId')
@@ -197,7 +222,7 @@ const PurchaseOrderDetail = ({
         : `Berhasil menghapus ${itemIdsToDelete.length} item pembelian`;
 
       toast.success(successMessage);
-
+      refreshApprovals();
       deleteModal.closeModal();
       setSelectedItem(null);
       setRowSelection({});
@@ -574,7 +599,7 @@ const PurchaseOrderDetail = ({
                     Nomor PO
                   </span>
                   <div className='ml-3'>
-                    {canUpdatePurchaseItems &&
+                    {canShowPurchaseOrderInvoice &&
                     purchaseData.po_number &&
                     purchaseData.po_number !== 'Belum dibuat' ? (
                       <PurchaseOrderInvoice data={purchaseData} />
@@ -596,7 +621,7 @@ const PurchaseOrderDetail = ({
             <h3 className='text-lg font-semibold text-gray-800'>
               Item Pembelian
             </h3>
-            {canUpdatePurchaseItems && (
+            {canShowPurchaseOrderInvoice && (
               <RowDropdownOptions isLast2Rows>
                 <ItemPembelianDropdown onEdit={editModal.openModal} />
               </RowDropdownOptions>
@@ -697,11 +722,13 @@ const PurchaseOrderDetail = ({
             <h3 className='text-lg font-semibold text-gray-800'>
               Informasi Penerimaan Barang
             </h3>
-            <RowDropdownOptions isLast2Rows>
-              <PenerimaanBarangDropdown
-                onEdit={penerimaanBarangModal.openModal}
-              />
-            </RowDropdownOptions>
+            {canShowPenerimaanBarang && (
+              <RowDropdownOptions isLast2Rows>
+                <PenerimaanBarangDropdown
+                  onEdit={penerimaanBarangModal.openModal}
+                />
+              </RowDropdownOptions>
+            )}
           </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             <div className='overflow-x-auto'>
@@ -764,7 +791,7 @@ const PurchaseOrderDetail = ({
         <PurchaseOrderStaffApprovalForm
           type='add'
           initialValues={purchaseData}
-          onCancel={staffApprovalModal.closeModal}
+          onCancel={handleStaffApprovalModalClose}
         />
       </Modal>
 
@@ -794,7 +821,7 @@ const PurchaseOrderDetail = ({
         <PurchaseOrderStaffApprovalForm
           type='edit'
           initialValues={purchaseData}
-          onCancel={editModal.closeModal}
+          onCancel={handleEditModalClose}
         />
       </Modal>
 

From 17378d8408bf6cb41cfaad02017f248fe0e3e2c8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 18 Nov 2025 23:13:15 +0700
Subject: [PATCH 112/168] refactor(FE-208,212): rename getPurchaseItemError to
 isRepeaterInputError for clarity in validation checks

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 42 +++++++++----------
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 10 ++---
 .../form/request/PurchaseRequestForm.tsx      | 10 ++---
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index cfe52d8a..190f9599 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -67,7 +67,7 @@ const PurchaseOrderAcceptApprovalForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const getPurchaseItemError = (
+  const isRepeaterInputError = (
     idx: number,
     field:
       | 'purchase_item_id'
@@ -410,10 +410,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                         onChange={(val) => purchaseItemChangeHandler(idx, val)}
                         options={getPurchaseItemOptions()}
                         isError={
-                          getPurchaseItemError(idx, 'purchase_item_id').isError
+                          isRepeaterInputError(idx, 'purchase_item_id').isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'purchase_item_id')
+                          isRepeaterInputError(idx, 'purchase_item_id')
                             .errorMessage
                         }
                         placeholder='Pilih Item...'
@@ -436,10 +436,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         onBlur={formik.handleBlur}
                         isError={
-                          getPurchaseItemError(idx, 'received_date').isError
+                          isRepeaterInputError(idx, 'received_date').isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'received_date')
+                          isRepeaterInputError(idx, 'received_date')
                             .errorMessage
                         }
                         className={{
@@ -456,10 +456,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                         onChange={(val) => warehouseChangeHandler(idx, val)}
                         options={getWarehouseOptions()}
                         isError={
-                          getPurchaseItemError(idx, 'warehouse_id').isError
+                          isRepeaterInputError(idx, 'warehouse_id').isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'warehouse_id').errorMessage
+                          isRepeaterInputError(idx, 'warehouse_id').errorMessage
                         }
                         placeholder='Pilih Gudang...'
                         className={{
@@ -481,10 +481,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         onBlur={formik.handleBlur}
                         isError={
-                          getPurchaseItemError(idx, 'travel_number').isError
+                          isRepeaterInputError(idx, 'travel_number').isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'travel_number')
+                          isRepeaterInputError(idx, 'travel_number')
                             .errorMessage
                         }
                         placeholder='Masukkan no. surat jalan'
@@ -507,11 +507,11 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         onBlur={formik.handleBlur}
                         isError={
-                          getPurchaseItemError(idx, 'travel_document_path')
+                          isRepeaterInputError(idx, 'travel_document_path')
                             .isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'travel_document_path')
+                          isRepeaterInputError(idx, 'travel_document_path')
                             .errorMessage
                         }
                         placeholder='Masukkan path dokumen'
@@ -534,10 +534,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         onBlur={formik.handleBlur}
                         isError={
-                          getPurchaseItemError(idx, 'vehicle_number').isError
+                          isRepeaterInputError(idx, 'vehicle_number').isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'vehicle_number')
+                          isRepeaterInputError(idx, 'vehicle_number')
                             .errorMessage
                         }
                         placeholder='Masukkan nomor kendaraan'
@@ -557,11 +557,11 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }
                         options={getExpeditionVendorOptions()}
                         isError={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                          isRepeaterInputError(idx, 'expedition_vendor_id')
                             .isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'expedition_vendor_id')
+                          isRepeaterInputError(idx, 'expedition_vendor_id')
                             .errorMessage
                         }
                         placeholder='Pilih Vendor...'
@@ -589,10 +589,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                         thousandSeparator=','
                         decimalSeparator='.'
                         isError={
-                          getPurchaseItemError(idx, 'received_qty').isError
+                          isRepeaterInputError(idx, 'received_qty').isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'received_qty').errorMessage
+                          isRepeaterInputError(idx, 'received_qty').errorMessage
                         }
                         className={{
                           wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
@@ -619,11 +619,11 @@ const PurchaseOrderAcceptApprovalForm = ({
                         decimalSeparator='.'
                         inputPrefix={'Rp'}
                         isError={
-                          getPurchaseItemError(idx, 'transport_per_item')
+                          isRepeaterInputError(idx, 'transport_per_item')
                             .isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'transport_per_item')
+                          isRepeaterInputError(idx, 'transport_per_item')
                             .errorMessage
                         }
                         className={{
@@ -651,10 +651,10 @@ const PurchaseOrderAcceptApprovalForm = ({
                         decimalSeparator='.'
                         inputPrefix={'Rp'}
                         isError={
-                          getPurchaseItemError(idx, 'transport_total').isError
+                          isRepeaterInputError(idx, 'transport_total').isError
                         }
                         errorMessage={
-                          getPurchaseItemError(idx, 'transport_total')
+                          isRepeaterInputError(idx, 'transport_total')
                             .errorMessage
                         }
                         className={{
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 02421c5f..88a9773d 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -46,7 +46,7 @@ const PurchaseOrderStaffApprovalForm = ({
     return currentStep >= 3;
   }, [initialValues?.approval]);
 
-  const getPurchaseItemError = (
+  const isRepeaterInputError = (
     idx: number,
     field: 'price' | 'total_price'
   ): { isError: boolean; errorMessage: string } => {
@@ -385,9 +385,9 @@ const PurchaseOrderStaffApprovalForm = ({
                           thousandSeparator=','
                           decimalSeparator='.'
                           inputPrefix={'Rp'}
-                          isError={getPurchaseItemError(idx, 'price').isError}
+                          isError={isRepeaterInputError(idx, 'price').isError}
                           errorMessage={
-                            getPurchaseItemError(idx, 'price').errorMessage
+                            isRepeaterInputError(idx, 'price').errorMessage
                           }
                           className={{
                             wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
@@ -414,10 +414,10 @@ const PurchaseOrderStaffApprovalForm = ({
                           decimalSeparator='.'
                           inputPrefix={'Rp'}
                           isError={
-                            getPurchaseItemError(idx, 'total_price').isError
+                            isRepeaterInputError(idx, 'total_price').isError
                           }
                           errorMessage={
-                            getPurchaseItemError(idx, 'total_price')
+                            isRepeaterInputError(idx, 'total_price')
                               .errorMessage
                           }
                           className={{
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 2b6fd5ee..462a5dec 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -72,7 +72,7 @@ const PurchaseRequestForm = ({
   }
 
   // ===== UTILITY FUNCTIONS =====
-  const getPurchaseItemError = (
+  const isRepeaterInputError = (
     idx: number,
     field: 'product_warehouse_id' | 'product_id' | 'qty'
   ): { isError: boolean; errorMessage: string } => {
@@ -784,11 +784,11 @@ const PurchaseRequestForm = ({
                           options={getProductWarehouseOptionsForItem()}
                           isLoading={isLoadingProductWarehouses}
                           isError={
-                            getPurchaseItemError(idx, 'product_warehouse_id')
+                            isRepeaterInputError(idx, 'product_warehouse_id')
                               .isError
                           }
                           errorMessage={
-                            getPurchaseItemError(idx, 'product_warehouse_id')
+                            isRepeaterInputError(idx, 'product_warehouse_id')
                               .errorMessage
                           }
                           isDisabled={
@@ -820,9 +820,9 @@ const PurchaseRequestForm = ({
                           readOnly={type === 'detail'}
                           allowNegative={false}
                           decimalScale={0}
-                          isError={getPurchaseItemError(idx, 'qty').isError}
+                          isError={isRepeaterInputError(idx, 'qty').isError}
                           errorMessage={
-                            getPurchaseItemError(idx, 'qty').errorMessage
+                            isRepeaterInputError(idx, 'qty').errorMessage
                           }
                           className={{
                             wrapper: 'min-w-24',

From 89d9d407133da06217f76d77caf880dc47008555 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 09:17:17 +0700
Subject: [PATCH 113/168] refactor(FE-208,212): remove warehouse-related fields
 and logic from PurchaseOrder forms and schema

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 76 -------------------
 .../form/order/PurchaseOrderForm.schema.ts    | 29 -------
 src/types/api/purchase/purchase.d.ts          |  1 -
 3 files changed, 106 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 190f9599..f0e0eff9 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -49,15 +49,6 @@ const PurchaseOrderAcceptApprovalForm = ({
         name: string;
       };
     };
-    warehouse: {
-      name: string;
-    };
-  }
-
-  interface WarehouseOptionType {
-    value: number;
-    label: string;
-    id: number;
   }
 
   interface ExpeditionVendorOptionType {
@@ -72,7 +63,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     field:
       | 'purchase_item_id'
       | 'received_date'
-      | 'warehouse_id'
       | 'travel_number'
       | 'travel_document_path'
       | 'vehicle_number'
@@ -161,10 +151,6 @@ const PurchaseOrderAcceptApprovalForm = ({
               ? parseInt(item.purchase_item_id) || 0
               : item.purchase_item_id || 0,
           received_date: item.received_date || '',
-          warehouse_id:
-            typeof item.warehouse_id === 'string'
-              ? parseInt(item.warehouse_id) || 0
-              : item.warehouse_id || 0,
           travel_number: item.travel_number || '',
           travel_document_path: item.travel_document_path || '',
           vehicle_number: item.vehicle_number || '',
@@ -214,35 +200,12 @@ const PurchaseOrderAcceptApprovalForm = ({
           product_category: item.product.product_category,
           uom: item.product.uom,
         },
-        warehouse: {
-          name: item.warehouse?.name || '',
-        },
       }));
     }
 
     return [];
   }, [initialValues?.items]);
 
-  const warehouses: WarehouseOptionType[] = useMemo(() => {
-    if (initialValues?.items) {
-      const uniqueWarehouses = new Map();
-
-      initialValues.items.forEach((item) => {
-        if (item.warehouse && !uniqueWarehouses.has(item.warehouse.id)) {
-          uniqueWarehouses.set(item.warehouse.id, {
-            value: item.warehouse.id,
-            label: item.warehouse.name,
-            id: item.warehouse.id,
-          });
-        }
-      });
-
-      return Array.from(uniqueWarehouses.values());
-    }
-
-    return [];
-  }, [initialValues?.items]);
-
   const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(() => {
     return [];
   }, []);
@@ -251,10 +214,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     return purchaseItems;
   }, [purchaseItems]);
 
-  const getWarehouseOptions = useCallback(() => {
-    return warehouses;
-  }, [warehouses]);
-
   const getExpeditionVendorOptions = useCallback(() => {
     return expeditionVendors;
   }, [expeditionVendors]);
@@ -274,17 +233,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     );
   };
 
-  const warehouseChangeHandler = (
-    idx: number,
-    val: OptionType | OptionType[] | null
-  ) => {
-    const warehouse = val as WarehouseOptionType | null;
-    formik.setFieldTouched(`items.${idx}.warehouse`, true);
-    formik.setFieldValue(`items.${idx}.warehouse`, warehouse);
-    formik.setFieldTouched(`items.${idx}.warehouse_id`, true);
-    formik.setFieldValue(`items.${idx}.warehouse_id`, warehouse?.value || 0);
-  };
-
   const expeditionVendorChangeHandler = (
     idx: number,
     val: OptionType | OptionType[] | null
@@ -362,10 +310,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                   Tanggal Diterima
                   <span className='text-error'>*</span>
                 </th>
-                <th>
-                  Gudang Tujuan
-                  <span className='text-error'>*</span>
-                </th>
                 <th>
                   No. Surat Jalan
                   <span className='text-error'>*</span>
@@ -447,26 +391,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                         }}
                       />
                     </td>
-                    <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.warehouse}
-                        key={`warehouse-${idx}`}
-                        onChange={(val) => warehouseChangeHandler(idx, val)}
-                        options={getWarehouseOptions()}
-                        isError={
-                          isRepeaterInputError(idx, 'warehouse_id').isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(idx, 'warehouse_id').errorMessage
-                        }
-                        placeholder='Pilih Gudang...'
-                        className={{
-                          wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                        }}
-                      />
-                    </td>
                     <td>
                       <TextInput
                         required
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 725e6085..cfbef4a9 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -26,11 +26,6 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
     } | null;
     purchase_item_id: number;
     received_date: string;
-    warehouse?: {
-      value: number;
-      label: string;
-    } | null;
-    warehouse_id: number;
     travel_number: string;
     travel_document_path: string;
     vehicle_number: string;
@@ -61,11 +56,6 @@ export type PurchaseAcceptApprovalItemSchema = {
   } | null;
   purchase_item_id: number;
   received_date: string;
-  warehouse?: {
-    value: number;
-    label: string;
-  } | null;
-  warehouse_id: number;
   travel_number: string;
   travel_document_path: string;
   vehicle_number: string;
@@ -157,22 +147,6 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
     received_date: Yup.string()
       .required('Tanggal penerimaan wajib diisi!')
       .typeError('Tanggal penerimaan wajib diisi!'),
-    warehouse: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    warehouse_id: Yup.number()
-      .min(1, 'Gudang tujuan wajib diisi!')
-      .required('Gudang tujuan wajib diisi!')
-      .test(
-        'is-valid-warehouse',
-        'Gudang tujuan harus dipilih!',
-        function (value) {
-          if (!this.parent.warehouse) return true;
-          return Boolean(value && value > 0);
-        }
-      )
-      .typeError('Gudang tujuan harus dipilih!'),
     travel_number: Yup.string()
       .required('No. Surat jalan wajib diisi!')
       .typeError('No. Surat jalan wajib diisi!'),
@@ -342,7 +316,6 @@ export const PurchaseRequestAcceptApprovalFormInitialValues: PurchaseRequestAcce
       {
         purchase_item_id: 0,
         received_date: '',
-        warehouse_id: 0,
         travel_number: '',
         travel_document_path: '',
         vehicle_number: '',
@@ -363,7 +336,6 @@ export const PurchaseRequestAcceptApprovalFormDefaultValues = (
       ? purchase.items.map((item) => ({
           purchase_item_id: item.id,
           received_date: '',
-          warehouse_id: 0,
           travel_number: '',
           travel_document_path: '',
           vehicle_number: '',
@@ -376,7 +348,6 @@ export const PurchaseRequestAcceptApprovalFormDefaultValues = (
           {
             purchase_item_id: 0,
             received_date: '',
-            warehouse_id: 0,
             travel_number: '',
             travel_document_path: '',
             vehicle_number: '',
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index b4b8b2ee..804e8499 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -103,7 +103,6 @@ export type CreateAcceptApprovalRequestPayload = {
   items: {
     purchase_item_id: number;
     received_date: string;
-    warehouse_id: number;
     travel_number: string;
     travel_document_path: string;
     vehicle_number: string;

From b520b4ee54ab95b927990ee903729eb0d264d6c1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 10:19:05 +0700
Subject: [PATCH 114/168] refactor(FE-208,212,213): add transport-related
 fields and update form handling in PurchaseOrder forms

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 231 +++++++++++-------
 .../form/order/PurchaseOrderForm.schema.ts    |   7 +-
 .../purchase/order/PurchaseOrderDetail.tsx    |   4 +-
 src/services/api/purchase.ts                  |   2 +-
 src/types/api/purchase/purchase.d.ts          |   5 +
 5 files changed, 150 insertions(+), 99 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index f0e0eff9..74eaba4d 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
@@ -39,18 +39,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     useState('');
 
   // ===== TYPE DEFINITIONS =====
-  interface PurchaseItemOptionType extends OptionType {
-    id: number;
-    quantity: number;
-    product: {
-      name: string;
-      product_category: string | { name: string };
-      uom: {
-        name: string;
-      };
-    };
-  }
-
   interface ExpeditionVendorOptionType {
     value: number;
     label: string;
@@ -145,32 +133,29 @@ const PurchaseOrderAcceptApprovalForm = ({
     onSubmit: async (values) => {
       const payload: CreateAcceptApprovalRequestPayload = {
         notes: values.notes || '',
-        items: (values.items || []).map((item) => ({
-          purchase_item_id:
-            typeof item.purchase_item_id === 'string'
-              ? parseInt(item.purchase_item_id) || 0
-              : item.purchase_item_id || 0,
-          received_date: item.received_date || '',
-          travel_number: item.travel_number || '',
-          travel_document_path: item.travel_document_path || '',
-          vehicle_number: item.vehicle_number || '',
-          expedition_vendor_id:
-            typeof item.expedition_vendor_id === 'string'
-              ? parseInt(item.expedition_vendor_id) || 0
-              : item.expedition_vendor_id || 0,
-          received_qty:
-            typeof item.received_qty === 'string'
-              ? parseFloat(item.received_qty) || 0
-              : item.received_qty || 0,
-          transport_per_item:
-            typeof item.transport_per_item === 'string'
-              ? parseFloat(item.transport_per_item) || 0
-              : item.transport_per_item || 0,
-          transport_total:
-            typeof item.transport_total === 'string'
-              ? parseFloat(item.transport_total) || 0
-              : item.transport_total || 0,
-        })),
+        items:
+          values.items?.map((formItem) => {
+            return {
+              purchase_item_id: formItem.purchase_item_id || 0,
+              received_date: formItem.received_date || '',
+              travel_number: formItem.travel_number || '',
+              travel_document_path: formItem.travel_document_path || '',
+              vehicle_number: formItem.vehicle_number || '',
+              expedition_vendor_id: formItem.expedition_vendor_id || 0,
+              received_qty:
+                typeof formItem.received_qty === 'string'
+                  ? parseFloat(formItem.received_qty) || 0
+                  : formItem.received_qty || 0,
+              transport_per_item:
+                typeof formItem.transport_per_item === 'string'
+                  ? parseFloat(formItem.transport_per_item) || 0
+                  : formItem.transport_per_item || 0,
+              transport_total:
+                typeof formItem.transport_total === 'string'
+                  ? parseFloat(formItem.transport_total) || 0
+                  : formItem.transport_total || 0,
+            };
+          }) || [],
       };
 
       switch (type) {
@@ -192,13 +177,13 @@ const PurchaseOrderAcceptApprovalForm = ({
     if (initialValues?.items) {
       return initialValues.items.map((item) => ({
         value: item.id,
-        label: `${item.product.name} (${item.quantity} ${item.product.uom?.name || 'unit'})`,
+        label: item.product.name,
         id: item.id,
-        quantity: item.quantity,
+        quantity: item.sub_qty,
         product: {
           name: item.product.name,
-          product_category: item.product.product_category,
-          uom: item.product.uom,
+          product_category: item.product.product_category || '',
+          uom: item.product.uom || { name: 'unit' },
         },
       }));
     }
@@ -206,33 +191,64 @@ const PurchaseOrderAcceptApprovalForm = ({
     return [];
   }, [initialValues?.items]);
 
-  const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(() => {
-    return [];
-  }, []);
+  useEffect(() => {
+    if (purchaseItems.length > 0 && initialValues?.items) {
+      const updatedItems = initialValues.items.map((item) => {
+        return {
+          purchase_item: null,
+          purchase_item_id: item.id,
+          received_date: item.received_date
+            ? new Date(item.received_date).toISOString().split('T')[0]
+            : '',
+          travel_number: item.travel_number || '',
+          travel_document_path: item.travel_document_path || '',
+          vehicle_number: item.vehicle_number || '',
+          expedition_vendor: null,
+          expedition_vendor_id: 0,
+          received_qty: item.sub_qty ? item.sub_qty.toString() : '',
+          transport_per_item: '',
+          transport_total: '',
+        };
+      });
+      formik.setFieldValue('items', updatedItems);
+    }
+  }, [purchaseItems, initialValues]);
 
-  const getPurchaseItemOptions = useCallback(() => {
-    return purchaseItems;
-  }, [purchaseItems]);
+  const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(() => {
+    return [
+      {
+        value: 1,
+        label: 'PT. Ekspedisi Sejahtera',
+        id: 1,
+      },
+      {
+        value: 2,
+        label: 'PT. Jaya Trans Logistics',
+        id: 2,
+      },
+      {
+        value: 3,
+        label: 'PT. Cargo Express Indonesia',
+        id: 3,
+      },
+      {
+        value: 4,
+        label: 'PT. Fast Delivery Service',
+        id: 4,
+      },
+      {
+        value: 5,
+        label: 'PT. Mitra Angkutan Sejahtera',
+        id: 5,
+      },
+    ];
+  }, []);
 
   const getExpeditionVendorOptions = useCallback(() => {
     return expeditionVendors;
   }, [expeditionVendors]);
 
   // ===== FIELD CHANGE HANDLERS =====
-  const purchaseItemChangeHandler = (
-    idx: number,
-    val: OptionType | OptionType[] | null
-  ) => {
-    const purchaseItem = val as PurchaseItemOptionType | null;
-    formik.setFieldTouched(`items.${idx}.purchase_item`, true);
-    formik.setFieldValue(`items.${idx}.purchase_item`, purchaseItem);
-    formik.setFieldTouched(`items.${idx}.purchase_item_id`, true);
-    formik.setFieldValue(
-      `items.${idx}.purchase_item_id`,
-      (purchaseItem as OptionType)?.value || 0
-    );
-  };
-
   const expeditionVendorChangeHandler = (
     idx: number,
     val: OptionType | OptionType[] | null
@@ -298,14 +314,21 @@ const PurchaseOrderAcceptApprovalForm = ({
             ? 'Konfirmasi Penerimaan Produk'
             : 'Edit Penerimaan Produk'}
         </h2>
+
+        {/* Debug Info */}
+        <div className='mb-4 p-4 bg-gray-100 rounded-lg text-xs'>
+          <div>Form Valid: {formik.isValid ? '✅' : '❌'}</div>
+          <div>Form Submitting: {formik.isSubmitting ? '✅' : '❌'}</div>
+          <div>Form Errors: {JSON.stringify(formik.errors, null, 2)}</div>
+          <div>Form Touched: {JSON.stringify(formik.touched, null, 2)}</div>
+        </div>
         <div className='overflow-x-auto'>
           <table className='table'>
             <thead>
               <tr>
-                <th>
-                  Item
-                  <span className='text-error'>*</span>
-                </th>
+                <th>Produk</th>
+                <th>Jumlah</th>
+                <th>Satuan</th>
                 <th>
                   Tanggal Diterima
                   <span className='text-error'>*</span>
@@ -341,29 +364,53 @@ const PurchaseOrderAcceptApprovalForm = ({
               </tr>
             </thead>
             <tbody>
-              {formik.values.items?.map((item, idx) => {
-                purchaseItems.find((p) => p.value === item.purchase_item_id);
+              {purchaseItems?.map((purchaseItem, idx) => {
+                const formItem = formik.values.items?.[idx];
                 return (
                   <tr key={`purchase-item-${idx}`}>
                     <td>
-                      <SelectInput
-                        required
-                        isClearable={true}
-                        value={item.purchase_item}
-                        key={`purchase-item-${idx}`}
-                        onChange={(val) => purchaseItemChangeHandler(idx, val)}
-                        options={getPurchaseItemOptions()}
-                        isError={
-                          isRepeaterInputError(idx, 'purchase_item_id').isError
-                        }
-                        errorMessage={
-                          isRepeaterInputError(idx, 'purchase_item_id')
-                            .errorMessage
-                        }
-                        placeholder='Pilih Item...'
+                      <TextInput
+                        name={`items.${idx}.product_name`}
+                        type='text'
+                        value={purchaseItem?.product?.name || ''}
+                        readOnly={true}
                         className={{
                           wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
                         }}
+                        disabled={true}
+                      />
+                      <input
+                        type='hidden'
+                        name={`items.${idx}.purchase_item_id`}
+                        value={purchaseItem?.value || 0}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.quantity`}
+                        type='text'
+                        value={
+                          purchaseItem?.quantity
+                            ? purchaseItem.quantity.toLocaleString('id-ID')
+                            : ''
+                        }
+                        readOnly={true}
+                        className={{
+                          wrapper: 'min-w-32',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.uom`}
+                        type='text'
+                        value={purchaseItem?.product?.uom?.name || ''}
+                        readOnly={true}
+                        className={{
+                          wrapper: 'min-w-24',
+                        }}
+                        disabled={true}
                       />
                     </td>
                     <td>
@@ -371,7 +418,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         required
                         isNestedModal={true}
                         name={`items.${idx}.received_date`}
-                        value={item.received_date || ''}
+                        value={formItem?.received_date || ''}
                         onChange={(e) =>
                           formik.setFieldValue(
                             `items.${idx}.received_date`,
@@ -396,7 +443,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         required
                         name={`items.${idx}.travel_number`}
                         type='text'
-                        value={item.travel_number || ''}
+                        value={formItem?.travel_number || ''}
                         onChange={(e) =>
                           formik.setFieldValue(
                             `items.${idx}.travel_number`,
@@ -422,7 +469,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         required
                         name={`items.${idx}.travel_document_path`}
                         type='text'
-                        value={item.travel_document_path || ''}
+                        value={formItem?.travel_document_path || ''}
                         onChange={(e) =>
                           formik.setFieldValue(
                             `items.${idx}.travel_document_path`,
@@ -449,7 +496,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         required
                         name={`items.${idx}.vehicle_number`}
                         type='text'
-                        value={item.vehicle_number || ''}
+                        value={formItem?.vehicle_number || ''}
                         onChange={(e) =>
                           formik.setFieldValue(
                             `items.${idx}.vehicle_number`,
@@ -474,7 +521,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                       <SelectInput
                         required
                         isClearable={true}
-                        value={item.expedition_vendor}
+                        value={formItem?.expedition_vendor}
                         key={`expedition-vendor-${idx}`}
                         onChange={(val) =>
                           expeditionVendorChangeHandler(idx, val)
@@ -498,7 +545,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                       <NumberInput
                         required
                         name={`items.${idx}.received_qty`}
-                        value={item.received_qty || ''}
+                        value={formItem?.received_qty || ''}
                         onChange={(e) =>
                           handlePurchaseItemChange(
                             idx,
@@ -527,7 +574,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                       <NumberInput
                         required
                         name={`items.${idx}.transport_per_item`}
-                        value={item.transport_per_item || ''}
+                        value={formItem?.transport_per_item || ''}
                         onChange={(e) =>
                           handlePurchaseItemChange(
                             idx,
@@ -559,7 +606,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                       <NumberInput
                         required
                         name={`items.${idx}.transport_total`}
-                        value={item.transport_total || ''}
+                        value={formItem?.transport_total || ''}
                         onChange={(e) =>
                           handlePurchaseItemChange(
                             idx,
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index cfbef4a9..7dbc6c1b 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -131,19 +131,18 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
     purchase_item: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).nullable(),
+    }).nullable().optional(),
     purchase_item_id: Yup.number()
       .min(1, 'Purchase item is required!')
       .required('Purchase item is required!')
+      .typeError('Purchase item is required!')
       .test(
         'is-valid-purchase-item',
         'Purchase item must be selected!',
         function (value) {
-          if (!this.parent.purchase_item) return true;
           return Boolean(value && value > 0);
         }
-      )
-      .typeError('Purchase item must be selected!'),
+      ),
     received_date: Yup.string()
       .required('Tanggal penerimaan wajib diisi!')
       .typeError('Tanggal penerimaan wajib diisi!'),
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 780353d6..311c8bba 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -405,12 +405,12 @@ const PurchaseOrderDetail = ({
           cell: (props) => formatNumber(props.getValue() as number),
         },
         {
-          accessorKey: 'price',
+          accessorKey: 'transport_per_item',
           header: 'Transport /Item',
           cell: (props) => formatCurrency(props.getValue() as number),
         },
         {
-          accessorKey: 'total_price',
+          accessorKey: 'transport_total',
           header: 'Transport Total',
           cell: (props) => formatCurrency(props.getValue() as number),
         },
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 79eec1fe..3678d582 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -90,7 +90,7 @@ export class AcceptApprovalService extends BaseApiService<
     payload: CreateAcceptApprovalRequestPayload
   ): Promise<BaseApiResponse<{ message: string }> | undefined> {
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequestId}/approvals/receipts`,
+      `${purchaseRequestId}/receipts`,
       {
         method: 'POST',
         payload,
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 804e8499..ea128361 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -38,6 +38,11 @@ export type PurchaseItem = {
   travel_number_docs?: string | null;
   travel_document_path?: string | null;
   vehicle_number?: string | null;
+  expedition_vendor_id?: number | null;
+  expedition_vendor_name?: string | null;
+  received_qty?: number | null;
+  transport_per_item?: number | null;
+  transport_total?: number | null;
 };
 
 export type BasePurchase = {

From af5dfa92923e1a138edcbd0e44b0e9cc5bec8c57 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 10:50:53 +0700
Subject: [PATCH 115/168] refactor(FE-208,212): implement grouping of goods
 receipt items and enhance table rendering in PurchaseOrderDetail

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 259 +++++++++++-------
 1 file changed, 163 insertions(+), 96 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 311c8bba..1d4867f5 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -106,6 +106,49 @@ const PurchaseOrderDetail = ({
     return purchaseOrderItems.filter((item) => item.received_date);
   }, [purchaseOrderItems]);
 
+  const groupedGoodsReceiptItems = useMemo(() => {
+    const uniqueProducts = Array.from(
+      new Map(
+        goodsReceiptItems.map((item) => [item.product?.id, item])
+      ).values()
+    );
+
+    return uniqueProducts.map((item, index) => {
+      const productGroupItems = goodsReceiptItems.filter(
+        (groupItem) => groupItem.product?.id === item.product?.id
+      );
+
+      const totalQty = productGroupItems.reduce(
+        (sum, item) => sum + (item.total_qty || 0),
+        0
+      );
+      const receivedQty = productGroupItems.reduce(
+        (sum, item) => sum + (item.sub_qty || 0),
+        0
+      );
+      const unreceivedQty = totalQty - receivedQty;
+      const nominalReceived = productGroupItems.reduce(
+        (sum, item) => sum + (item.sub_qty || 0) * (item.price || 0),
+        0
+      );
+      const nominalUnreceived = productGroupItems.reduce(
+        (sum, item) => sum + unreceivedQty * (item.price || 0),
+        0
+      );
+
+      return {
+        productIndex: index + 1,
+        productName: item.product?.name || 'Unknown Product',
+        productGroupItems,
+        totalQty,
+        receivedQty,
+        unreceivedQty,
+        nominalReceived,
+        nominalUnreceived,
+      };
+    });
+  }, [goodsReceiptItems]);
+
   const canUpdatePurchaseItems = useMemo(() => {
     if (!initialValues?.approval) return false;
 
@@ -337,84 +380,85 @@ const PurchaseOrderDetail = ({
 
   const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [
     {
-      header: 'Header Placeholder untuk tiap Produk Penerimaan Barang',
-      columns: [
-        {
-          header: 'No',
-          cell: (props) => props.row.index + 1,
-        },
-        {
-          accessorKey: 'received_date',
-          header: 'Tanggal Penerimaan',
-          cell: (props) =>
-            props.row.original.received_date
-              ? formatDate(props.row.original.received_date, 'DD MMM YYYY')
-              : '-',
-        },
-        {
-          accessorKey: 'warehouse.name',
-          header: 'Gudang Tujuan',
-          cell: (props) => {
-            const warehouse = props.row.original.warehouse;
-            return warehouse?.name || '-';
-          },
-        },
-        {
-          accessorKey: 'travel_number',
-          header: 'No. Surat Jalan',
-          cell: (props) => props.row.original.travel_number || '-',
-        },
-        {
-          accessorKey: 'travel_document_path',
-          header: 'Dokumen Surat Jalan',
-          cell: (props) => {
-            const documentPath = props.row.original.travel_document_path;
-            return documentPath ? (
-              <Button
-                color='primary'
-                className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
-                href={documentPath}
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                <Icon
-                  icon='material-symbols:file-open-outline'
-                  width={16}
-                  height={16}
-                />
-                Lihat Dokumen
-              </Button>
-            ) : (
-              '-'
-            );
-          },
-        },
-        {
-          accessorKey: 'vehicle_number',
-          header: 'No. Armada',
-          cell: (props) => props.row.original.vehicle_number || '-',
-        },
-        {
-          accessorKey: 'total_qty',
-          header: 'Jumlah Total',
-          cell: (props) => formatNumber(props.getValue() as number),
-        },
-        {
-          accessorKey: 'sub_qty',
-          header: 'Jumlah Diterima',
-          cell: (props) => formatNumber(props.getValue() as number),
-        },
-        {
-          accessorKey: 'transport_per_item',
-          header: 'Transport /Item',
-          cell: (props) => formatCurrency(props.getValue() as number),
-        },
-        {
-          accessorKey: 'transport_total',
-          header: 'Transport Total',
-          cell: (props) => formatCurrency(props.getValue() as number),
-        },
-      ],
+      header: 'Tanggal Penerimaan',
+      accessorKey: 'received_date',
+      cell: (props) =>
+        props.row.original.received_date
+          ? formatDate(props.row.original.received_date, 'DD MMM YYYY')
+          : '-',
+    },
+    {
+      header: 'Gudang Tujuan',
+      accessorKey: 'warehouse.name',
+      cell: (props) => {
+        const warehouse = props.row.original.warehouse;
+        return warehouse?.name || '-';
+      },
+    },
+    {
+      header: 'No. Surat Jalan',
+      accessorKey: 'travel_number',
+      cell: (props) => props.row.original.travel_number || '-',
+    },
+    {
+      header: 'Dokumen Surat Jalan',
+      accessorKey: 'travel_document_path',
+      cell: (props) => {
+        const documentPath = props.row.original.travel_document_path;
+        return documentPath ? (
+          <Button
+            color='primary'
+            className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
+            href={documentPath}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <Icon
+              icon='material-symbols:file-open-outline'
+              width={16}
+              height={16}
+            />
+            Lihat Dokumen
+          </Button>
+        ) : (
+          '-'
+        );
+      },
+    },
+    {
+      header: 'No. Armada Pengangkut',
+      accessorKey: 'vehicle_number',
+      cell: (props) => props.row.original.vehicle_number || '-',
+    },
+    {
+      header: 'Jumlah Total',
+      accessorKey: 'total_qty',
+      cell: (props) => formatNumber(props.getValue() as number),
+    },
+    {
+      header: 'Jumlah Diterima',
+      accessorKey: 'sub_qty',
+      cell: (props) => formatNumber(props.getValue() as number),
+    },
+    {
+      header: 'Jumlah Retur',
+      accessorKey: 'return_qty',
+      cell: (props) => formatNumber((props.getValue() as number) || 0),
+    },
+    {
+      header: 'Ekspedisi',
+      accessorKey: 'expedition_name',
+      cell: (props) => '-',
+    },
+    {
+      header: 'Transport /Item',
+      accessorKey: 'transport_per_item',
+      cell: (props) => formatCurrency(props.getValue() as number),
+    },
+    {
+      header: 'Transport Total',
+      accessorKey: 'transport_total',
+      cell: (props) => formatCurrency(props.getValue() as number),
     },
   ];
 
@@ -732,24 +776,47 @@ const PurchaseOrderDetail = ({
           </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             <div className='overflow-x-auto'>
-              <Table<PurchaseItem>
-                data={goodsReceiptItems}
-                columns={goodsReceiptColumns}
-                isLoading={false}
-                className={{
-                  containerClassName: 'm-0',
-                  tableWrapperClassName: 'overflow-x-auto',
-                  tableClassName: 'w-full table-auto',
-                  headerRowClassName: 'bg-gray-50 border-b border-gray-200',
-                  headerColumnClassName:
-                    'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
-                  bodyRowClassName:
-                    'border-b border-gray-100 hover:bg-gray-50 transition-colors',
-                  bodyColumnClassName:
-                    'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
-                  paginationClassName: 'hidden',
-                }}
-              />
+              {groupedGoodsReceiptItems.length > 0 ? (
+                <div className='space-y-8'>
+                  {groupedGoodsReceiptItems.map((productData) => (
+                    <div
+                      key={productData.productIndex}
+                      className='border border-gray-200 rounded-lg overflow-hidden'
+                    >
+                      {/* Product Header */}
+                      <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
+                        {productData.productIndex}.{' '}
+                        {productData.productName.toUpperCase()}
+                      </div>
+
+                      {/* Product Table */}
+                      <Table<PurchaseItem>
+                        data={productData.productGroupItems}
+                        columns={goodsReceiptColumns}
+                        isLoading={false}
+                        className={{
+                          containerClassName: 'm-0',
+                          tableWrapperClassName: 'overflow-x-auto',
+                          tableClassName: 'w-full table-auto',
+                          headerRowClassName:
+                            'bg-gray-50 border-b border-gray-200',
+                          headerColumnClassName:
+                            'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
+                          bodyRowClassName:
+                            'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                          bodyColumnClassName:
+                            'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
+                          paginationClassName: 'hidden',
+                        }}
+                      />
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className='text-center py-8 text-gray-500'>
+                  Tidak ada data penerimaan barang
+                </div>
+              )}
             </div>
           </div>
         </div>

From d2a69917e7e280aa2e516a117fff1369d41077fc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 10:55:44 +0700
Subject: [PATCH 116/168] refactor(FE-208,212): improve rendering of grouped
 goods receipt items in PurchaseOrderDetail

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 1d4867f5..a65fc054 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -774,14 +774,13 @@ const PurchaseOrderDetail = ({
               </RowDropdownOptions>
             )}
           </div>
-          <div className='rounded-lg border border-gray-200 overflow-hidden'>
-            <div className='overflow-x-auto'>
-              {groupedGoodsReceiptItems.length > 0 ? (
-                <div className='space-y-8'>
-                  {groupedGoodsReceiptItems.map((productData) => (
+          <div className='overflow-x-auto'>
+            {groupedGoodsReceiptItems.length > 0 ? (
+              <div>
+                {groupedGoodsReceiptItems.map((productData, index) => (
+                  <div key={productData.productIndex}>
                     <div
-                      key={productData.productIndex}
-                      className='border border-gray-200 rounded-lg overflow-hidden'
+                      className='border border-gray-200 rounded-lg overflow-hidden mb-6'
                     >
                       {/* Product Header */}
                       <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
@@ -810,14 +809,19 @@ const PurchaseOrderDetail = ({
                         }}
                       />
                     </div>
-                  ))}
-                </div>
-              ) : (
-                <div className='text-center py-8 text-gray-500'>
-                  Tidak ada data penerimaan barang
-                </div>
-              )}
-            </div>
+
+                    {/* Add divider after table except for last item */}
+                    {index < groupedGoodsReceiptItems.length - 1 && (
+                      <div className='border-t border-gray-200 my-6'></div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className='text-center py-8 text-gray-500'>
+                Tidak ada data penerimaan barang
+              </div>
+            )}
           </div>
         </div>
       </Card>

From 07fd71558efff114b4d02e974651a04d745c8a78 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 11:02:50 +0700
Subject: [PATCH 117/168] refactor(FE-208,212): remove debug information from
 PurchaseOrderAcceptApprovalForm

---
 .../form/order/PurchaseOrderAcceptApprovalForm.tsx         | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 74eaba4d..46bb52db 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -315,13 +315,6 @@ const PurchaseOrderAcceptApprovalForm = ({
             : 'Edit Penerimaan Produk'}
         </h2>
 
-        {/* Debug Info */}
-        <div className='mb-4 p-4 bg-gray-100 rounded-lg text-xs'>
-          <div>Form Valid: {formik.isValid ? '✅' : '❌'}</div>
-          <div>Form Submitting: {formik.isSubmitting ? '✅' : '❌'}</div>
-          <div>Form Errors: {JSON.stringify(formik.errors, null, 2)}</div>
-          <div>Form Touched: {JSON.stringify(formik.touched, null, 2)}</div>
-        </div>
         <div className='overflow-x-auto'>
           <table className='table'>
             <thead>

From e3274a3353f158d53dd6fd1cd435a6d1e4170b9e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 11:37:32 +0700
Subject: [PATCH 118/168] refactor(FE-208,212): streamline approval button
 handling in PurchaseOrderDetail

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 77 ++++++++++---------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index a65fc054..c266df9c 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -149,13 +149,38 @@ const PurchaseOrderDetail = ({
     });
   }, [goodsReceiptItems]);
 
-  const canUpdatePurchaseItems = useMemo(() => {
+  const approvalStep = useMemo(() => {
+    if (!initialValues?.approval) return null;
+    return initialValues.approval.step_number;
+  }, [initialValues?.approval]);
+
+  const showApprovalButton =
+    approvalStep !== null && approvalStep >= 1 && approvalStep <= 3;
+
+  const handleApprovalClick = () => {
+    if (!approvalStep) return;
+
+    switch (approvalStep) {
+      case 1:
+        staffApprovalModal.openModal();
+        break;
+      case 2:
+        confirmationModalWithNotes.openModal();
+        break;
+      case 3:
+        acceptApprovalModal.openModal();
+        break;
+      default:
+        break;
+    }
+  };
+
+  useMemo(() => {
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
     return currentStep >= 4;
   }, [initialValues?.approval]);
-
   const canShowPurchaseOrderInvoice = useMemo(() => {
     if (!initialValues?.approval) return false;
 
@@ -498,39 +523,17 @@ const PurchaseOrderDetail = ({
     <section className='w-full'>
       {/* Approval and Action Buttons */}
       <div className='flex flex-wrap gap-3 my-6'>
-        <Button
-          onClick={() => staffApprovalModal.openModal()}
-          variant='outline'
-          color='info'
-          className='w-full sm:w-fit'
-        >
-          <Icon icon='mdi:account-check-outline' width={20} height={20} />
-          Staff Approval
-        </Button>
-
-        <Button
-          onClick={() => confirmationModalWithNotes.openModal()}
-          variant='outline'
-          color='warning'
-          className='w-full sm:w-fit'
-        >
-          <Icon icon='mdi:note-edit-outline' width={20} height={20} />
-          Manager Approval
-        </Button>
-
-        <Button
-          onClick={() => acceptApprovalModal.openModal()}
-          variant='outline'
-          color='success'
-          className='w-full sm:w-fit'
-        >
-          <Icon
-            icon='mdi:package-variant-closed-check'
-            width={20}
-            height={20}
-          />
-          Accept Approval
-        </Button>
+        {showApprovalButton && (
+          <Button
+            onClick={handleApprovalClick}
+            variant='outline'
+            color='success'
+            className='w-full sm:w-fit'
+          >
+            <Icon icon='material-symbols:check' width={20} height={20} />
+            Approve
+          </Button>
+        )}
       </div>
 
       {/* Steps */}
@@ -779,9 +782,7 @@ const PurchaseOrderDetail = ({
               <div>
                 {groupedGoodsReceiptItems.map((productData, index) => (
                   <div key={productData.productIndex}>
-                    <div
-                      className='border border-gray-200 rounded-lg overflow-hidden mb-6'
-                    >
+                    <div className='border border-gray-200 rounded-lg overflow-hidden mb-6'>
                       {/* Product Header */}
                       <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
                         {productData.productIndex}.{' '}

From 9d6455167f1bdccfb2f87c0aeb704379cb06cef9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 11:40:47 +0700
Subject: [PATCH 119/168] refactor(FE-208,212): enhance approval button layout
 and add reject option in PurchaseOrderDetail

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index c266df9c..3e2bc913 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -522,17 +522,37 @@ const PurchaseOrderDetail = ({
   return (
     <section className='w-full'>
       {/* Approval and Action Buttons */}
-      <div className='flex flex-wrap gap-3 my-6'>
+      <div className='flex justify-between items-center w-full my-6'>
+        <Button
+          href='/purchase'
+          variant='link'
+          className='w-fit p-0 text-primary'
+        >
+          <Icon icon='uil:arrow-left' width={24} height={24} />
+          Kembali
+        </Button>
+
         {showApprovalButton && (
-          <Button
-            onClick={handleApprovalClick}
-            variant='outline'
-            color='success'
-            className='w-full sm:w-fit'
-          >
-            <Icon icon='material-symbols:check' width={20} height={20} />
-            Approve
-          </Button>
+          <div className='flex flex-row gap-2'>
+            <Button
+              onClick={handleApprovalClick}
+              variant='outline'
+              color='success'
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+
+            <Button
+              variant='outline'
+              color='error'
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='material-symbols:close' width={24} height={24} />
+              Reject
+            </Button>
+          </div>
         )}
       </div>
 

From 8bda56e5d3615125e0ea170afec0eee2ab3fad5d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 13:27:36 +0700
Subject: [PATCH 120/168] refactor(FE-208,212): add refreshApprovals and
 onModalClose props to approval forms

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 21 ++++++++++++++++---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 21 ++++++++++++++++---
 .../purchase/order/PurchaseOrderDetail.tsx    | 15 ++++++++-----
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 46bb52db..109b70b4 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -27,12 +27,16 @@ interface PurchaseOrderAcceptApprovalFormProps {
   type?: 'add' | 'edit';
   initialValues?: Purchase;
   onCancel?: () => void;
+  refreshApprovals?: () => void;
+  onModalClose?: () => void;
 }
 
 const PurchaseOrderAcceptApprovalForm = ({
   type = 'add',
   initialValues,
   onCancel,
+  refreshApprovals,
+  onModalClose,
 }: PurchaseOrderAcceptApprovalFormProps) => {
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
@@ -99,9 +103,12 @@ const PurchaseOrderAcceptApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      refreshApprovals?.();
+      formik.resetForm();
       onCancel?.();
+      onModalClose?.();
     },
-    [initialValues?.id, searchParams]
+    [initialValues?.id, searchParams, refreshApprovals, onModalClose]
   );
 
   const updateAcceptApprovalHandler = useCallback(
@@ -112,10 +119,13 @@ const PurchaseOrderAcceptApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      refreshApprovals?.();
+      formik.resetForm();
       onCancel?.();
+      onModalClose?.();
       window.location.href = '/purchase';
     },
-    []
+    [refreshApprovals, onModalClose]
   );
 
   // ===== FORM CONFIGURATION =====
@@ -652,7 +662,12 @@ const PurchaseOrderAcceptApprovalForm = ({
               type='button'
               color='warning'
               className='px-4'
-              onClick={onCancel}
+              onClick={() => {
+                formik.resetForm();
+                setPurchaseOrderFormErrorMessage('');
+                onCancel?.();
+                onModalClose?.();
+              }}
             >
               Cancel
             </Button>
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 88a9773d..8c3daad5 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -27,12 +27,16 @@ interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
   initialValues?: Purchase;
   onCancel?: () => void;
+  refreshApprovals?: () => void;
+  onModalClose?: () => void;
 }
 
 const PurchaseOrderStaffApprovalForm = ({
   type = 'add',
   initialValues,
   onCancel,
+  refreshApprovals,
+  onModalClose,
 }: PurchaseOrderStaffApprovalFormProps) => {
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
@@ -90,9 +94,12 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      refreshApprovals?.();
+      formik.resetForm();
       onCancel?.();
+      onModalClose?.();
     },
-    [initialValues?.id, searchParams]
+    [initialValues?.id, searchParams, refreshApprovals, onModalClose]
   );
 
   const updateStaffApprovalHandler = useCallback(
@@ -106,10 +113,13 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
       toast.success(res?.message as string);
+      refreshApprovals?.();
+      formik.resetForm();
       onCancel?.();
+      onModalClose?.();
       await router.push(`/purchase/detail?purchaseId=${purchaseId}`);
     },
-    []
+    [refreshApprovals, onModalClose]
   );
 
   // ===== FORM CONFIGURATION =====
@@ -451,7 +461,12 @@ const PurchaseOrderStaffApprovalForm = ({
                 type='button'
                 color='warning'
                 className='px-4'
-                onClick={onCancel}
+                onClick={() => {
+                  formik.resetForm();
+                  setPurchaseOrderFormErrorMessage('');
+                  onCancel?.();
+                  onModalClose?.();
+                }}
               >
                 Cancel
               </Button>
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 3e2bc913..904177bb 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -544,11 +544,7 @@ const PurchaseOrderDetail = ({
               Approve
             </Button>
 
-            <Button
-              variant='outline'
-              color='error'
-              className='w-full sm:w-fit'
-            >
+            <Button variant='outline' color='error' className='w-full sm:w-fit'>
               <Icon icon='material-symbols:close' width={24} height={24} />
               Reject
             </Button>
@@ -864,6 +860,7 @@ const PurchaseOrderDetail = ({
             };
 
             await createManagerApprovalHandler(payload);
+            await refreshApprovals();
             confirmationModalWithNotes.closeModal();
           },
         }}
@@ -884,6 +881,8 @@ const PurchaseOrderDetail = ({
           type='add'
           initialValues={purchaseData}
           onCancel={handleStaffApprovalModalClose}
+          refreshApprovals={refreshApprovals}
+          onModalClose={staffApprovalModal.closeModal}
         />
       </Modal>
 
@@ -899,6 +898,8 @@ const PurchaseOrderDetail = ({
           type='add'
           initialValues={purchaseData}
           onCancel={acceptApprovalModal.closeModal}
+          refreshApprovals={refreshApprovals}
+          onModalClose={acceptApprovalModal.closeModal}
         />
       </Modal>
 
@@ -914,6 +915,8 @@ const PurchaseOrderDetail = ({
           type='edit'
           initialValues={purchaseData}
           onCancel={handleEditModalClose}
+          refreshApprovals={refreshApprovals}
+          onModalClose={editModal.closeModal}
         />
       </Modal>
 
@@ -929,6 +932,8 @@ const PurchaseOrderDetail = ({
           type='edit'
           initialValues={purchaseData}
           onCancel={penerimaanBarangModal.closeModal}
+          refreshApprovals={refreshApprovals}
+          onModalClose={penerimaanBarangModal.closeModal}
         />
       </Modal>
 

From 14f216a352f09f2a47091516501efaf70e2feaee Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 16:21:46 +0700
Subject: [PATCH 121/168] refactor(FE-208,212): rename product_warehouse to
 warehouse and update related schema and form handling

---
 .../request/PurchaseRequestForm.schema.ts     |  38 +--
 .../form/request/PurchaseRequestForm.tsx      | 273 +++++++-----------
 2 files changed, 113 insertions(+), 198 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index 06c8606d..a2ecdce3 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -18,18 +18,13 @@ type PurchaseRequestFormSchemaType = {
     label: string;
   } | null;
   location_id: number;
-  warehouse?: {
-    value: number;
-    label: string;
-  } | null;
-  warehouse_id: number;
   notes: string | null;
   items: {
-    product_warehouse?: {
+    warehouse?: {
       value: number;
       label: string;
     } | null;
-    product_warehouse_id: number;
+    warehouse_id: number;
     product?: {
       value: number;
       label: string;
@@ -40,11 +35,11 @@ type PurchaseRequestFormSchemaType = {
 };
 
 export type PurchaseItemSchema = {
-  product_warehouse?: {
+  warehouse?: {
     value: number;
     label: string;
   } | null;
-  product_warehouse_id: number;
+  warehouse_id: number;
   product?: {
     value: number;
     label: string;
@@ -55,14 +50,14 @@ export type PurchaseItemSchema = {
 
 const PurchaseItemObjectSchema: Yup.ObjectSchema<PurchaseItemSchema> =
   Yup.object({
-    product_warehouse: Yup.object({
+    warehouse: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
     }).nullable(),
-    product_warehouse_id: Yup.number()
-      .required('Produk wajib dipilih!')
-      .min(1, 'Produk wajib dipilih!')
-      .typeError('Produk wajib dipilih!'),
+    warehouse_id: Yup.number()
+      .required('Gudang wajib dipilih!')
+      .min(1, 'Gudang wajib dipilih!')
+      .typeError('Gudang wajib dipilih!'),
     product: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
@@ -107,14 +102,6 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
       .required('Lokasi wajib dipilih!')
       .min(1, 'Lokasi wajib dipilih!')
       .typeError('Lokasi wajib dipilih!'),
-    warehouse: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }),
-    warehouse_id: Yup.number()
-      .required('Gudang wajib dipilih!')
-      .min(1, 'Gudang wajib dipilih!')
-      .typeError('Gudang wajib dipilih!'),
     notes: Yup.string().nullable().default(null),
     items: Yup.array()
       .of(PurchaseItemObjectSchema)
@@ -154,13 +141,6 @@ export const getPurchaseRequestFormInitialValues = (
       }
     : null,
   location_id: initialValues?.location?.id ?? 0,
-  warehouse: initialValues?.warehouse
-    ? {
-        value: initialValues.warehouse.id,
-        label: initialValues.warehouse.name,
-      }
-    : undefined,
-  warehouse_id: initialValues?.warehouse?.id ?? 0,
   notes: initialValues?.notes ?? null,
   items: [],
 });
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 462a5dec..5b0271d1 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -32,7 +32,6 @@ import {
 } from '@/services/api/master-data';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Product } from '@/types/api/master-data/product';
-import { ProductWarehouseApi } from '@/services/api/inventory';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 import { PurchaseRequestApi } from '@/services/api/purchase';
 
@@ -63,18 +62,15 @@ const PurchaseRequestForm = ({
     useState('');
 
   // ===== TYPE DEFINITIONS =====
-  interface ProductWarehouseOptionType extends OptionType {
-    product_id: number;
-    product_warehouse_id: number;
-    warehouse_id: number;
-    warehouse_name: string;
-    qty: number;
+  interface ProductOptionType {
+    value: number;
+    label: string;
   }
 
   // ===== UTILITY FUNCTIONS =====
   const isRepeaterInputError = (
     idx: number,
-    field: 'product_warehouse_id' | 'product_id' | 'qty'
+    field: 'warehouse_id' | 'product_id' | 'qty'
   ): { isError: boolean; errorMessage: string } => {
     if (!formik.touched.items || !Array.isArray(formik.touched.items)) {
       return {
@@ -83,7 +79,13 @@ const PurchaseRequestForm = ({
       };
     }
 
-    const touchedField = formik.touched.items[idx]?.[field];
+    const touchedField = (
+      formik.touched.items[idx] as Partial<{
+        warehouse_id: boolean;
+        product_id: boolean;
+        qty: boolean;
+      }>
+    )?.[field];
     const errorItem = formik.errors.items?.[idx] as
       | Record<string, string>
       | undefined;
@@ -142,7 +144,6 @@ const PurchaseRequestForm = ({
 
   // ===== SELECT INPUT DATA =====
   const {
-    inputValue: supplierSelectInputValue,
     setInputValue: setSupplierSelectInputValue,
     options: supplierOptions,
     isLoadingOptions: isLoadingSuppliers,
@@ -150,7 +151,6 @@ const PurchaseRequestForm = ({
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
 
   const {
-    inputValue: areaSelectInputValue,
     setInputValue: setAreaSelectInputValue,
     options: areaOptions,
     isLoadingOptions: isLoadingAreas,
@@ -176,27 +176,23 @@ const PurchaseRequestForm = ({
         : PurchaseRequestFormSchema,
     validateOnChange: true,
     validateOnBlur: true,
+    validateOnMount: false,
+    enableReinitialize: true,
     onSubmit: async (values) => {
       const payload: CreatePurchaseRequestPayload = {
         supplier_id:
           typeof values.supplier_id === 'string'
             ? parseInt(values.supplier_id) || 0
             : values.supplier_id || 0,
-        credit_term: values.credit_term || 0,
+        credit_term:
+          typeof values.credit_term === 'string'
+            ? parseInt(values.credit_term) || 0
+            : values.credit_term || 0,
         notes: values.notes || '',
         items: (values.items || []).map((item) => ({
-          warehouse_id:
-            typeof values.warehouse_id === 'string'
-              ? parseInt(values.warehouse_id) || 0
-              : values.warehouse_id || 0,
-          product_id:
-            typeof item.product_id === 'string'
-              ? parseInt(item.product_id) || 0
-              : item.product_id || 0,
-          qty:
-            typeof item.qty === 'string'
-              ? parseFloat(item.qty) || 0
-              : item.qty || 0,
+          warehouse_id: Number(item.warehouse_id) || 0,
+          product_id: Number(item.product_id) || 0,
+          qty: Number(item.qty) || 0,
         })),
       };
 
@@ -215,57 +211,22 @@ const PurchaseRequestForm = ({
   });
 
   // ===== API DATA FETCHING =====
-  const productWarehousesUrl = useMemo(() => {
-    if (!formik.values.warehouse_id || formik.values.warehouse_id === 0) {
-      return null;
-    }
-
-    const params = new URLSearchParams({
-      warehouse_id: formik.values.warehouse_id.toString(),
-    });
-
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [formik.values.warehouse_id]);
-
-  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(productWarehousesUrl, ProductWarehouseApi.getAllFetcher);
-
-  const getProductWarehouseOptionsForItem = useCallback(() => {
-    if (!isResponseSuccess(productWarehouses)) return [];
-
-    return (
-      productWarehouses?.data.map((pw) => ({
-        value: pw.id,
-        label: pw.product.name,
-        product_id: pw.product.id,
-        product_warehouse_id: pw.id,
-        warehouse_id: pw.warehouse.id,
-        warehouse_name: pw.warehouse.name,
-        qty: pw.quantity,
-      })) || []
-    );
-  }, [productWarehouses]);
-
-  const productUrl = useMemo(() => {
-    const productIds =
-      formik.values.items
-        ?.filter(
-          (item) => item.product_id && typeof item.product_id === 'number'
-        )
-        .map((item) => item.product_id as number) || [];
-
-    return productIds.length > 0
-      ? `${ProductApi.basePath}?${new URLSearchParams({
-          id: productIds.join(','),
-        }).toString()}`
-      : null;
-  }, [formik.values.items]);
-
-  const { data: productsResponse } = useSWR(
-    productUrl,
+  const { data: productsResponse, isLoading: isLoadingProducts } = useSWR(
+    `${ProductApi.basePath}`,
     ProductApi.getAllFetcher
   );
 
+  const productOptions = useMemo(() => {
+    if (!isResponseSuccess(productsResponse)) return [];
+
+    return (
+      productsResponse?.data.map((product: Product) => ({
+        value: product.id,
+        label: product.name,
+      })) || []
+    );
+  }, [productsResponse]);
+
   const productData = useMemo(() => {
     if (!isResponseSuccess(productsResponse)) return {};
 
@@ -340,19 +301,18 @@ const PurchaseRequestForm = ({
     );
   }, [warehouses]);
 
-  // Purchase Items Handlers
   const addPurchaseItem = () => {
-    const newPurchaseItems = [
+    const newItems = [
       ...(formik.values.items || []),
       {
-        product_warehouse: null,
-        product_warehouse_id: null,
+        warehouse: null,
+        warehouse_id: 0,
         product: null,
-        product_id: '',
-        qty: '',
+        product_id: 0,
+        qty: 0,
       },
     ];
-    formik.setFieldValue('items', newPurchaseItems);
+    formik.setFieldValue('items', newItems);
   };
 
   const removePurchaseItem = (idx: number) => {
@@ -445,9 +405,25 @@ const PurchaseRequestForm = ({
                         supplierData.due_date.toString()
                       );
                     }
+
+                    if (formik.values.items) {
+                      formik.values.items.forEach((_, idx) => {
+                        formik.setFieldValue(`items.${idx}.product`, null);
+                        formik.setFieldValue(`items.${idx}.product_id`, 0);
+                        formik.setFieldValue(`items.${idx}.qty`, 0);
+                      });
+                    }
                   } else {
                     formik.setFieldTouched('credit_term', false);
                     formik.setFieldValue('credit_term', '');
+
+                    if (formik.values.items) {
+                      formik.values.items.forEach((_, idx) => {
+                        formik.setFieldValue(`items.${idx}.product`, null);
+                        formik.setFieldValue(`items.${idx}.product_id`, 0);
+                        formik.setFieldValue(`items.${idx}.qty`, 0);
+                      });
+                    }
                   }
                 }}
                 options={supplierOptions}
@@ -508,16 +484,8 @@ const PurchaseRequestForm = ({
 
                   if (formik.values.items) {
                     formik.values.items.forEach((_, idx) => {
-                      formik.setFieldValue(
-                        `items.${idx}.product_warehouse`,
-                        null
-                      );
-                      formik.setFieldValue(
-                        `items.${idx}.product_warehouse_id`,
-                        null
-                      );
                       formik.setFieldValue(`items.${idx}.product`, null);
-                      formik.setFieldValue(`items.${idx}.product_id`, '');
+                      formik.setFieldValue(`items.${idx}.product_id`, 0);
                     });
                   }
                 }}
@@ -553,16 +521,8 @@ const PurchaseRequestForm = ({
 
                   if (formik.values.items) {
                     formik.values.items.forEach((_, idx) => {
-                      formik.setFieldValue(
-                        `items.${idx}.product_warehouse`,
-                        null
-                      );
-                      formik.setFieldValue(
-                        `items.${idx}.product_warehouse_id`,
-                        null
-                      );
                       formik.setFieldValue(`items.${idx}.product`, null);
-                      formik.setFieldValue(`items.${idx}.product_id`, '');
+                      formik.setFieldValue(`items.${idx}.product_id`, 0);
                     });
                   }
                 }}
@@ -691,45 +651,42 @@ const PurchaseRequestForm = ({
                                 ? 'Pilih Gudang...'
                                 : 'Pilih Area dan Lokasi terlebih dahulu'
                           }
-                          value={formik.values.warehouse}
+                          value={item.warehouse}
                           onChange={(val) => {
                             const warehouse = val as OptionType | null;
-                            formik.setFieldTouched('warehouse_id', true);
-                            formik.setFieldValue(
-                              'warehouse_id',
-                              (warehouse as OptionType)?.value || 0
+                            const warehouseId =
+                              (warehouse as OptionType)?.value || 0;
+
+                            formik.setFieldTouched(
+                              `items.${idx}.warehouse`,
+                              true
                             );
-                            formik.setFieldTouched('warehouse', true);
-                            formik.setFieldValue('warehouse', warehouse);
-                            if (formik.values.items) {
-                              formik.values.items.forEach((_, idx) => {
-                                formik.setFieldValue(
-                                  `items.${idx}.product_warehouse`,
-                                  null
-                                );
-                                formik.setFieldValue(
-                                  `items.${idx}.product_warehouse_id`,
-                                  null
-                                );
-                                formik.setFieldValue(
-                                  `items.${idx}.product`,
-                                  null
-                                );
-                                formik.setFieldValue(
-                                  `items.${idx}.product_id`,
-                                  ''
-                                );
-                              });
-                            }
+                            formik.setFieldValue(
+                              `items.${idx}.warehouse`,
+                              warehouse
+                            );
+                            formik.setFieldTouched(
+                              `items.${idx}.warehouse_id`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `items.${idx}.warehouse_id`,
+                              warehouseId
+                            );
+
+                            formik.setFieldValue(`items.${idx}.product`, null);
+                            formik.setFieldValue(`items.${idx}.product_id`, 0);
                           }}
                           options={warehouseOptions}
                           onInputChange={setWarehouseSelectInputValue}
                           isLoading={isLoadingWarehouses}
                           isError={
-                            formik.touched.warehouse_id &&
-                            Boolean(formik.errors.warehouse_id)
+                            isRepeaterInputError(idx, 'warehouse_id').isError
+                          }
+                          errorMessage={
+                            isRepeaterInputError(idx, 'warehouse_id')
+                              .errorMessage
                           }
-                          errorMessage={formik.errors.warehouse_id as string}
                           isDisabled={
                             type === 'detail' ||
                             !formik.values.area_id ||
@@ -746,32 +703,20 @@ const PurchaseRequestForm = ({
                       <td>
                         <SelectInput
                           required
-                          value={item.product_warehouse}
-                          key={`product-warehouse-${idx}-${formik.values.warehouse_id}`}
+                          value={item.product ?? undefined}
                           onChange={(val) => {
-                            const productWarehouse =
-                              val as ProductWarehouseOptionType | null;
-                            formik.setFieldTouched(
-                              `items.${idx}.product_warehouse`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `items.${idx}.product_warehouse`,
-                              productWarehouse
-                            );
-                            formik.setFieldTouched(
-                              `items.${idx}.product_warehouse_id`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `items.${idx}.product_warehouse_id`,
-                              (productWarehouse as ProductWarehouseOptionType)
-                                ?.value || 0
-                            );
-
+                            const product = val as ProductOptionType | null;
                             const productId =
-                              (productWarehouse as ProductWarehouseOptionType)
-                                ?.product_id || 0;
+                              (product as ProductOptionType)?.value || 0;
+
+                            formik.setFieldTouched(
+                              `items.${idx}.product`,
+                              true
+                            );
+                            formik.setFieldValue(
+                              `items.${idx}.product`,
+                              product
+                            );
                             formik.setFieldTouched(
                               `items.${idx}.product_id`,
                               true
@@ -781,27 +726,17 @@ const PurchaseRequestForm = ({
                               productId
                             );
                           }}
-                          options={getProductWarehouseOptionsForItem()}
-                          isLoading={isLoadingProductWarehouses}
+                          options={productOptions}
+                          isLoading={isLoadingProducts}
                           isError={
-                            isRepeaterInputError(idx, 'product_warehouse_id')
-                              .isError
+                            isRepeaterInputError(idx, 'product_id').isError
                           }
                           errorMessage={
-                            isRepeaterInputError(idx, 'product_warehouse_id')
-                              .errorMessage
-                          }
-                          isDisabled={
-                            type === 'detail' || !formik.values.warehouse_id
-                          }
-                          isClearable={
-                            type !== 'detail' && !!formik.values.warehouse_id
-                          }
-                          placeholder={
-                            !formik.values.warehouse_id
-                              ? 'Pilih Gudang terlebih dahulu'
-                              : 'Pilih Produk'
+                            isRepeaterInputError(idx, 'product_id').errorMessage
                           }
+                          isDisabled={type === 'detail'}
+                          isClearable={type !== 'detail'}
+                          placeholder='Pilih Produk'
                           className={{
                             wrapper: 'min-w-32',
                           }}
@@ -841,7 +776,7 @@ const PurchaseRequestForm = ({
                                 ).toLocaleString('en-US')
                               : ''
                           }
-                          onChange={(e) => {}}
+                          onChange={() => {}}
                           onBlur={formik.handleBlur}
                           type='text'
                           className={{

From 432ea1e975f0bf71fa653a3d390596f00e0e6c8c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 17:12:18 +0700
Subject: [PATCH 122/168] refactor(FE-208,212): update input wrapper classes
 for improved responsiveness in PurchaseRequestForm

---
 .../pages/purchase/form/request/PurchaseRequestForm.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 5b0271d1..6dc81039 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -760,7 +760,7 @@ const PurchaseRequestForm = ({
                             isRepeaterInputError(idx, 'qty').errorMessage
                           }
                           className={{
-                            wrapper: 'min-w-24',
+                            wrapper: 'w-full min-w-32 md:min-w-48 lg:min-w-52',
                           }}
                         />
                       </td>
@@ -780,7 +780,7 @@ const PurchaseRequestForm = ({
                           onBlur={formik.handleBlur}
                           type='text'
                           className={{
-                            wrapper: 'min-w-24',
+                            wrapper: 'w-full min-w-32 md:min-w-48 lg:min-w-52',
                           }}
                           disabled={true}
                           readOnly={true}
@@ -813,7 +813,7 @@ const PurchaseRequestForm = ({
                           readOnly={true}
                           disabled={true}
                           className={{
-                            wrapper: 'min-w-24',
+                            wrapper: 'w-full min-w-32 md:min-w-48 lg:min-w-52',
                           }}
                           placeholder={
                             item.product_id

From 4e8b17f55c27354d19f46a9a43d9fa07fe3af141 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 13:32:26 +0700
Subject: [PATCH 123/168] refactor(FE-208): remove unused supplier state and
 handlers in PurchaseTable

---
 .../pages/purchase/PurchaseTable.tsx          | 67 +------------------
 1 file changed, 3 insertions(+), 64 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 6a74af0c..32dbd8d7 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
+import { ChangeEventHandler, useCallback, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -11,13 +11,9 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import TextInput from '@/components/input/TextInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { cn, formatDate, formatCurrency } from '@/lib/helper';
@@ -27,7 +23,6 @@ import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Purchase } from '@/types/api/purchase/purchase';
 import { PurchaseRequestApi } from '@/services/api/purchase';
-import { SupplierApi } from '@/services/api/master-data';
 
 // ===== INTERFACES =====
 interface RowOptionsMenuProps {
@@ -83,9 +78,6 @@ const RowOptionsMenu = ({
 
 const PurchaseTable = () => {
   // ===== STATE MANAGEMENT =====
-  const [selectedSupplier, setSelectedSupplier] = useState<OptionType | null>(
-    null
-  );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
     null
@@ -116,13 +108,6 @@ const PurchaseTable = () => {
   // ===== MODAL HOOKS =====
   const deleteModal = useModal();
 
-  // ===== USE SELECT HOOKS =====
-  const {
-    setInputValue: setSupplierInputValue,
-    options: supplierOptions,
-    isLoadingOptions: isLoadingSupplierOptions,
-  } = useSelect(SupplierApi.basePath, 'id', 'name');
-
   // ===== API DATA FETCHING =====
   const {
     data: purchaseRequests,
@@ -253,24 +238,6 @@ const PurchaseTable = () => {
     [setPageSize]
   );
 
-  const poDateChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (e) => {
-      updateFilter('poDate', e.target.value);
-    },
-    [updateFilter]
-  );
-
-  const supplierChangeHandler = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      setSelectedSupplier(val as OptionType);
-      updateFilter(
-        'supplier',
-        val ? ((val as OptionType).value as string) : ''
-      );
-    },
-    [updateFilter]
-  );
-
   return (
     <>
       <div className='w-full p-0 sm:p-4'>
@@ -299,35 +266,7 @@ const PurchaseTable = () => {
             />
           </div>
 
-          <div className='flex flex-wrap justify-between gap-4'>
-            <div className='flex flex-wrap gap-4'>
-              <TextInput
-                required
-                type='date'
-                label='Tanggal PO'
-                name='po_date'
-                placeholder='Masukkan tanggal PO'
-                value={tableFilterState.poDate}
-                onChange={poDateChangeHandler}
-                className={{
-                  wrapper: 'w-full sm:w-48',
-                }}
-              />
-
-              <SelectInput
-                label='Vendor'
-                options={supplierOptions}
-                isLoading={isLoadingSupplierOptions}
-                value={selectedSupplier}
-                onChange={supplierChangeHandler}
-                onInputChange={setSupplierInputValue}
-                isClearable
-                className={{
-                  wrapper: 'w-full sm:w-56',
-                }}
-              />
-            </div>
-
+          <div className='flex flex-wrap justify-end gap-4'>
             <SelectInput
               label='Baris'
               options={ROWS_OPTIONS}

From 343cc7c4e7bae5fc7a85aa4967ff9e11fbba9e61 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 13:34:52 +0700
Subject: [PATCH 124/168] refactor(FE-212): remove unused poDate and supplier
 fields from table filter in PurchaseTable

---
 src/components/pages/purchase/PurchaseTable.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 32dbd8d7..9912d13a 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -94,14 +94,10 @@ const PurchaseTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      poDate: '',
-      supplier: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      poDate: 'po_date',
-      supplier: 'supplier',
     },
   });
 

From 00e18d6d0d37a812d21c0abb87978330ad9ea18a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 14:13:57 +0700
Subject: [PATCH 125/168] refactor(FE-208,212): enhance form validation and
 streamline change handlers in PurchaseRequestForm

---
 .../request/PurchaseRequestForm.schema.ts     |  18 +-
 .../form/request/PurchaseRequestForm.tsx      | 233 +++++++-----------
 2 files changed, 92 insertions(+), 159 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index a2ecdce3..39e9a879 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -12,12 +12,12 @@ type PurchaseRequestFormSchemaType = {
     value: number;
     label: string;
   } | null;
-  area_id: number;
+  area_id: number | undefined;
   location?: {
     value: number;
     label: string;
   } | null;
-  location_id: number;
+  location_id: number | undefined;
   notes: string | null;
   items: {
     warehouse?: {
@@ -91,17 +91,15 @@ export const PurchaseRequestFormSchema: Yup.ObjectSchema<PurchaseRequestFormSche
       label: Yup.string().required(),
     }).nullable(),
     area_id: Yup.number()
-      .required('Area wajib dipilih!')
-      .min(1, 'Area wajib dipilih!')
-      .typeError('Area wajib dipilih!'),
+      .min(0, 'Area tidak boleh kurang dari 0!')
+      .typeError('Area harus berupa angka!'),
     location: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
     }).nullable(),
     location_id: Yup.number()
-      .required('Lokasi wajib dipilih!')
-      .min(1, 'Lokasi wajib dipilih!')
-      .typeError('Lokasi wajib dipilih!'),
+      .min(0, 'Lokasi tidak boleh kurang dari 0!')
+      .typeError('Lokasi harus berupa angka!'),
     notes: Yup.string().nullable().default(null),
     items: Yup.array()
       .of(PurchaseItemObjectSchema)
@@ -133,14 +131,14 @@ export const getPurchaseRequestFormInitialValues = (
         label: initialValues.area.name,
       }
     : null,
-  area_id: initialValues?.area?.id ?? 0,
+  area_id: initialValues?.area?.id ?? undefined,
   location: initialValues?.location
     ? {
         value: initialValues.location.id,
         label: initialValues.location.name,
       }
     : null,
-  location_id: initialValues?.location?.id ?? 0,
+  location_id: initialValues?.location?.id ?? undefined,
   notes: initialValues?.notes ?? null,
   items: [],
 });
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 6dc81039..5b8419cb 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -330,6 +330,79 @@ const PurchaseRequestForm = ({
     setSelectedPurchaseItems([]);
   };
 
+  // ===== FORM HANDLERS =====
+  const handleSupplierChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const supplier = val as OptionType | null;
+      const supplierId = Number(supplier?.value);
+
+      formik.setFieldTouched('supplier', true);
+      formik.setFieldValue('supplier', supplier);
+      formik.setFieldTouched('supplier_id', true);
+      formik.setFieldValue('supplier_id', supplierId);
+
+      if (supplierId > 0 && isResponseSuccess(supplierRawData)) {
+        const supplierData = supplierRawData.data.find(
+          (s: Supplier) => s.id === supplierId
+        );
+        if (supplierData?.due_date) {
+          formik.setFieldTouched('credit_term', true);
+          formik.setFieldValue('credit_term', supplierData.due_date.toString());
+        } else {
+          formik.setFieldTouched('credit_term', false);
+          formik.setFieldValue('credit_term', '');
+        }
+      } else {
+        formik.setFieldTouched('credit_term', false);
+        formik.setFieldValue('credit_term', '');
+      }
+
+      if (formik.values.items) {
+        formik.values.items.forEach((_, idx) => {
+          formik.setFieldValue(`items.${idx}.product`, null);
+          formik.setFieldValue(`items.${idx}.product_id`, 0);
+          formik.setFieldValue(`items.${idx}.qty`, 0);
+        });
+      }
+    },
+    [, supplierRawData]
+  );
+
+  const handleAreaChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const area = val as OptionType | null;
+      formik.setFieldTouched('area_id', true);
+      formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
+      formik.setFieldTouched('area', true);
+      formik.setFieldValue('area', area);
+    },
+    []
+  );
+
+  const handleLocationChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const location = val as OptionType | null;
+      formik.setFieldTouched('location_id', true);
+      formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
+      formik.setFieldTouched('location', true);
+      formik.setFieldValue('location', location);
+    },
+    []
+  );
+
+  const handleWarehouseChange = useCallback(
+    (idx: number, val: OptionType | OptionType[] | null) => {
+      const warehouse = val as OptionType | null;
+      const warehouseId = (warehouse as OptionType)?.value || 0;
+
+      formik.setFieldTouched(`items.${idx}.warehouse`, true);
+      formik.setFieldValue(`items.${idx}.warehouse`, warehouse);
+      formik.setFieldTouched(`items.${idx}.warehouse_id`, true);
+      formik.setFieldValue(`items.${idx}.warehouse_id`, warehouseId);
+    },
+    []
+  );
+
   // ===== PURCHASE ITEM OPERATIONS =====
   const handlePurchaseItemChange = (
     idx: number,
@@ -381,51 +454,7 @@ const PurchaseRequestForm = ({
                 label='Vendor'
                 placeholder='Pilih Vendor...'
                 value={formik.values.supplier}
-                onChange={(val) => {
-                  const supplier = val as OptionType | null;
-                  const supplierId = supplier?.value
-                    ? typeof supplier.value === 'string'
-                      ? parseInt(supplier.value)
-                      : supplier.value
-                    : 0;
-
-                  formik.setFieldTouched('supplier_id', true);
-                  formik.setFieldValue('supplier_id', supplierId);
-                  formik.setFieldTouched('supplier', true);
-                  formik.setFieldValue('supplier', supplier);
-
-                  if (supplierId > 0 && isResponseSuccess(supplierRawData)) {
-                    const supplierData = supplierRawData.data.find(
-                      (s: Supplier) => s.id === supplierId
-                    );
-                    if (supplierData?.due_date) {
-                      formik.setFieldTouched('credit_term', true);
-                      formik.setFieldValue(
-                        'credit_term',
-                        supplierData.due_date.toString()
-                      );
-                    }
-
-                    if (formik.values.items) {
-                      formik.values.items.forEach((_, idx) => {
-                        formik.setFieldValue(`items.${idx}.product`, null);
-                        formik.setFieldValue(`items.${idx}.product_id`, 0);
-                        formik.setFieldValue(`items.${idx}.qty`, 0);
-                      });
-                    }
-                  } else {
-                    formik.setFieldTouched('credit_term', false);
-                    formik.setFieldValue('credit_term', '');
-
-                    if (formik.values.items) {
-                      formik.values.items.forEach((_, idx) => {
-                        formik.setFieldValue(`items.${idx}.product`, null);
-                        formik.setFieldValue(`items.${idx}.product_id`, 0);
-                        formik.setFieldValue(`items.${idx}.qty`, 0);
-                      });
-                    }
-                  }
-                }}
+                onChange={handleSupplierChange}
                 options={supplierOptions}
                 onInputChange={setSupplierSelectInputValue}
                 isLoading={isLoadingSuppliers}
@@ -462,81 +491,27 @@ const PurchaseRequestForm = ({
               />
 
               <SelectInput
-                required
                 label='Area'
                 placeholder='Pilih Area...'
                 value={formik.values.area}
-                onChange={(val) => {
-                  const area = val as OptionType | null;
-                  formik.setFieldTouched('area_id', true);
-                  formik.setFieldValue(
-                    'area_id',
-                    (area as OptionType)?.value || 0
-                  );
-                  formik.setFieldTouched('area', true);
-                  formik.setFieldValue('area', area);
-
-                  formik.setFieldTouched('location', false);
-                  formik.setFieldValue('location', undefined);
-                  formik.setFieldTouched('location_id', false);
-                  formik.setFieldValue('location_id', 0);
-                  setLocationSelectInputValue('');
-
-                  if (formik.values.items) {
-                    formik.values.items.forEach((_, idx) => {
-                      formik.setFieldValue(`items.${idx}.product`, null);
-                      formik.setFieldValue(`items.${idx}.product_id`, 0);
-                    });
-                  }
-                }}
+                onChange={handleAreaChange}
                 options={areaOptions}
                 onInputChange={setAreaSelectInputValue}
                 isLoading={isLoadingAreas}
-                isError={
-                  formik.touched.area_id && Boolean(formik.errors.area_id)
-                }
-                errorMessage={formik.errors.area_id as string}
                 isDisabled={type === 'detail'}
                 isClearable
               />
 
               <SelectInput
-                required
                 label='Lokasi'
-                placeholder={
-                  !formik.values.area_id
-                    ? 'Pilih Area terlebih dahulu'
-                    : 'Pilih Lokasi...'
-                }
-                value={formik.values.area_id ? formik.values.location : null}
-                onChange={(val) => {
-                  const location = val as OptionType | null;
-                  formik.setFieldTouched('location_id', true);
-                  formik.setFieldValue(
-                    'location_id',
-                    (location as OptionType)?.value || 0
-                  );
-                  formik.setFieldTouched('location', true);
-                  formik.setFieldValue('location', location);
-
-                  if (formik.values.items) {
-                    formik.values.items.forEach((_, idx) => {
-                      formik.setFieldValue(`items.${idx}.product`, null);
-                      formik.setFieldValue(`items.${idx}.product_id`, 0);
-                    });
-                  }
-                }}
+                placeholder='Pilih Lokasi...'
+                value={formik.values.location}
+                onChange={handleLocationChange}
                 options={locationOptions}
                 onInputChange={setLocationSelectInputValue}
                 isLoading={isLoadingLocations}
-                isError={
-                  formik.touched.location_id &&
-                  Boolean(formik.errors.location_id)
-                }
-                errorMessage={formik.errors.location_id as string}
-                isDisabled={type === 'detail' || !formik.values.area_id}
-                isClearable={type !== 'detail' && !!formik.values.area_id}
-                key={`location-${formik.values.area_id}`}
+                isDisabled={type === 'detail'}
+                isClearable={type !== 'detail'}
               />
 
               <div className={'col-span-2'}>
@@ -643,40 +618,9 @@ const PurchaseRequestForm = ({
                       )}
                       <td>
                         <SelectInput
-                          required
-                          placeholder={
-                            !formik.values.area_id
-                              ? 'Pilih Area terlebih dahulu'
-                              : formik.values.location_id
-                                ? 'Pilih Gudang...'
-                                : 'Pilih Area dan Lokasi terlebih dahulu'
-                          }
+                          placeholder='Pilih Gudang...'
                           value={item.warehouse}
-                          onChange={(val) => {
-                            const warehouse = val as OptionType | null;
-                            const warehouseId =
-                              (warehouse as OptionType)?.value || 0;
-
-                            formik.setFieldTouched(
-                              `items.${idx}.warehouse`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `items.${idx}.warehouse`,
-                              warehouse
-                            );
-                            formik.setFieldTouched(
-                              `items.${idx}.warehouse_id`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `items.${idx}.warehouse_id`,
-                              warehouseId
-                            );
-
-                            formik.setFieldValue(`items.${idx}.product`, null);
-                            formik.setFieldValue(`items.${idx}.product_id`, 0);
-                          }}
+                          onChange={(val) => handleWarehouseChange(idx, val)}
                           options={warehouseOptions}
                           onInputChange={setWarehouseSelectInputValue}
                           isLoading={isLoadingWarehouses}
@@ -687,17 +631,8 @@ const PurchaseRequestForm = ({
                             isRepeaterInputError(idx, 'warehouse_id')
                               .errorMessage
                           }
-                          isDisabled={
-                            type === 'detail' ||
-                            !formik.values.area_id ||
-                            !formik.values.location_id
-                          }
-                          isClearable={
-                            type !== 'detail' &&
-                            !!formik.values.area_id &&
-                            !!formik.values.location_id
-                          }
-                          key={`warehouse-${formik.values.area_id}-${formik.values.location_id}`}
+                          isDisabled={type === 'detail'}
+                          isClearable={type !== 'detail'}
                         />
                       </td>
                       <td>

From 655e971788e03ab0d0239d59df6f58e7bd7b1ef4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 14:44:41 +0700
Subject: [PATCH 126/168] refactor(FE-208): update input wrapper classes for
 consistency in PurchaseRequestForm

---
 .../pages/purchase/form/request/PurchaseRequestForm.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 5b8419cb..7496ab97 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -633,6 +633,9 @@ const PurchaseRequestForm = ({
                           }
                           isDisabled={type === 'detail'}
                           isClearable={type !== 'detail'}
+                          className={{
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                          }}
                         />
                       </td>
                       <td>
@@ -673,7 +676,7 @@ const PurchaseRequestForm = ({
                           isClearable={type !== 'detail'}
                           placeholder='Pilih Produk'
                           className={{
-                            wrapper: 'min-w-32',
+                            wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
                           }}
                         />
                       </td>

From f1e5692f8f49f06890dedf8bfc13c4e2e6709769 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 14:50:36 +0700
Subject: [PATCH 127/168] refactor(FE-208,212): initialize items in
 PurchaseRequestForm with initial values

---
 .../request/PurchaseRequestForm.schema.ts     | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index 39e9a879..af84c68b 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -140,5 +140,29 @@ export const getPurchaseRequestFormInitialValues = (
     : null,
   location_id: initialValues?.location?.id ?? undefined,
   notes: initialValues?.notes ?? null,
-  items: [],
+  items: initialValues?.items?.length ? initialValues.items.map((item) => ({
+    warehouse: item.warehouse
+      ? {
+          value: item.warehouse.id,
+          label: item.warehouse.name,
+        }
+      : null,
+    warehouse_id: item.warehouse?.id ?? 0,
+    product: item.product
+      ? {
+          value: item.product.id,
+          label: item.product.name,
+        }
+      : null,
+    product_id: item.product?.id ?? 0,
+    qty: item.qty ?? 0,
+  })) : [
+    {
+      warehouse: null,
+      warehouse_id: 0,
+      product: null,
+      product_id: 0,
+      qty: 0,
+    },
+  ],
 });

From e640bce8eada42f939e1c7984f268d08383bb752 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 15:25:39 +0700
Subject: [PATCH 128/168] refactor(FE-208): streamline supplier change handling
 and reset purchase items in PurchaseRequestForm

---
 .../form/request/PurchaseRequestForm.tsx      | 58 ++++++++++++-------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 7496ab97..698fdcfe 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 import { useRouter } from 'next/navigation';
@@ -330,17 +330,9 @@ const PurchaseRequestForm = ({
     setSelectedPurchaseItems([]);
   };
 
-  // ===== FORM HANDLERS =====
-  const handleSupplierChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const supplier = val as OptionType | null;
-      const supplierId = Number(supplier?.value);
-
-      formik.setFieldTouched('supplier', true);
-      formik.setFieldValue('supplier', supplier);
-      formik.setFieldTouched('supplier_id', true);
-      formik.setFieldValue('supplier_id', supplierId);
-
+  // ===== UTILITY FUNCTIONS =====
+  const updateCreditTermBasedOnSupplier = useCallback(
+    (supplierId: number) => {
       if (supplierId > 0 && isResponseSuccess(supplierRawData)) {
         const supplierData = supplierRawData.data.find(
           (s: Supplier) => s.id === supplierId
@@ -356,16 +348,40 @@ const PurchaseRequestForm = ({
         formik.setFieldTouched('credit_term', false);
         formik.setFieldValue('credit_term', '');
       }
-
-      if (formik.values.items) {
-        formik.values.items.forEach((_, idx) => {
-          formik.setFieldValue(`items.${idx}.product`, null);
-          formik.setFieldValue(`items.${idx}.product_id`, 0);
-          formik.setFieldValue(`items.${idx}.qty`, 0);
-        });
-      }
     },
-    [, supplierRawData]
+    [supplierRawData]
+  );
+
+  const resetPurchaseItems = useCallback(() => {
+    if (formik.values.items) {
+      formik.values.items.forEach((_, idx) => {
+        formik.setFieldValue(`items.${idx}.product`, null);
+        formik.setFieldValue(`items.${idx}.product_id`, 0);
+        formik.setFieldValue(`items.${idx}.qty`, 0);
+      });
+    }
+  }, []);
+
+  // ===== SIDE EFFECTS =====
+  useEffect(() => {
+    if (formik.values.supplier_id) {
+      updateCreditTermBasedOnSupplier(Number(formik.values.supplier_id));
+      resetPurchaseItems();
+    }
+  }, [formik.values.supplier_id]);
+
+  // ===== FORM HANDLERS =====
+  const handleSupplierChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const supplier = val as OptionType | null;
+      const supplierId = Number(supplier?.value);
+
+      formik.setFieldTouched('supplier', true);
+      formik.setFieldValue('supplier', supplier);
+      formik.setFieldTouched('supplier_id', true);
+      formik.setFieldValue('supplier_id', supplierId);
+    },
+    []
   );
 
   const handleAreaChange = useCallback(

From 074e6fad050097103d2a90f9a99fb7fc35703120 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 15:33:43 +0700
Subject: [PATCH 129/168] refactor(FE-208,212): improve credit term handling
 and validation in PurchaseRequestForm

---
 .../form/request/PurchaseRequestForm.tsx      | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 698fdcfe..00b504b3 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -338,7 +338,7 @@ const PurchaseRequestForm = ({
           (s: Supplier) => s.id === supplierId
         );
         if (supplierData?.due_date) {
-          formik.setFieldTouched('credit_term', true);
+          formik.setFieldTouched('credit_term', false);
           formik.setFieldValue('credit_term', supplierData.due_date.toString());
         } else {
           formik.setFieldTouched('credit_term', false);
@@ -364,9 +364,13 @@ const PurchaseRequestForm = ({
 
   // ===== SIDE EFFECTS =====
   useEffect(() => {
-    if (formik.values.supplier_id) {
+    if (formik.values.supplier_id && Number(formik.values.supplier_id) > 0) {
       updateCreditTermBasedOnSupplier(Number(formik.values.supplier_id));
       resetPurchaseItems();
+    } else {
+      formik.setFieldTouched('credit_term', false);
+      formik.setFieldValue('credit_term', '');
+      resetPurchaseItems();
     }
   }, [formik.values.supplier_id]);
 
@@ -384,6 +388,23 @@ const PurchaseRequestForm = ({
     []
   );
 
+  const handleCreditTermChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+
+      formik.setFieldTouched('credit_term', true);
+      formik.setFieldValue('credit_term', value);
+    },
+    []
+  );
+
+  const handleCreditTermBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      formik.handleBlur(e);
+    },
+    [formik]
+  );
+
   const handleAreaChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
       const area = val as OptionType | null;
@@ -488,8 +509,8 @@ const PurchaseRequestForm = ({
                 label='Jatuh tempo (hari)'
                 name='credit_term'
                 value={formik.values.credit_term || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
+                onChange={handleCreditTermChange}
+                onBlur={handleCreditTermBlur}
                 isError={
                   formik.touched.credit_term &&
                   Boolean(formik.errors.credit_term)

From e0b4805d0ac9fc5996cf51dfb34c12e6b94093da Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 15:36:12 +0700
Subject: [PATCH 130/168] refactor(FE-208,212): reset touched fields and values
 for purchase items in PurchaseRequestForm

---
 .../pages/purchase/form/request/PurchaseRequestForm.tsx        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 00b504b3..abdeaf92 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -355,8 +355,11 @@ const PurchaseRequestForm = ({
   const resetPurchaseItems = useCallback(() => {
     if (formik.values.items) {
       formik.values.items.forEach((_, idx) => {
+        formik.setFieldTouched(`items.${idx}.product`, false);
         formik.setFieldValue(`items.${idx}.product`, null);
+        formik.setFieldTouched(`items.${idx}.product_id`, false);
         formik.setFieldValue(`items.${idx}.product_id`, 0);
+        formik.setFieldTouched(`items.${idx}.qty`, false);
         formik.setFieldValue(`items.${idx}.qty`, 0);
       });
     }

From 4ddc44b59c728482afb7f26bf63944d62a0bdaac Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 15:38:04 +0700
Subject: [PATCH 131/168] refactor(FE-208,212): enhance product selection and
 quantity input handling in PurchaseRequestForm based on supplier selection

---
 .../form/request/PurchaseRequestForm.tsx      | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index abdeaf92..d039c1c9 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -712,9 +712,17 @@ const PurchaseRequestForm = ({
                           errorMessage={
                             isRepeaterInputError(idx, 'product_id').errorMessage
                           }
-                          isDisabled={type === 'detail'}
-                          isClearable={type !== 'detail'}
-                          placeholder='Pilih Produk'
+                          isDisabled={
+                            type === 'detail' || !formik.values.supplier_id
+                          }
+                          isClearable={
+                            type !== 'detail' && !!formik.values.supplier_id
+                          }
+                          placeholder={
+                            !formik.values.supplier_id
+                              ? 'Pilih Vendor terlebih dahulu'
+                              : 'Pilih Produk'
+                          }
                           className={{
                             wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
                           }}
@@ -729,8 +737,17 @@ const PurchaseRequestForm = ({
                             handlePurchaseItemChange(idx, 'qty', e.target.value)
                           }
                           onBlur={formik.handleBlur}
-                          placeholder='Masukkan kuantitas'
-                          readOnly={type === 'detail'}
+                          placeholder={
+                            !formik.values.supplier_id
+                              ? 'Pilih Vendor terlebih dahulu'
+                              : 'Masukkan kuantitas'
+                          }
+                          readOnly={
+                            type === 'detail' || !formik.values.supplier_id
+                          }
+                          disabled={
+                            type === 'detail' || !formik.values.supplier_id
+                          }
                           allowNegative={false}
                           decimalScale={0}
                           isError={isRepeaterInputError(idx, 'qty').isError}

From 6e9d065bc6ed81bc32d3677d30afef626d49b30b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 22:16:44 +0700
Subject: [PATCH 132/168] refactor(FE-212): change HTTP method to DELETE for
 item removal in PurchaseRequestForm

---
 src/services/api/purchase.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 3678d582..7f25e9f9 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -115,7 +115,7 @@ export class PurchaseDeleteItemsService extends BaseApiService<
     return await this.customRequest<BaseApiResponse<{ message: string }>>(
       `${purchaseRequestId}/items`,
       {
-        method: 'POST',
+        method: 'DELETE',
         payload,
       }
     );

From 417d08e0fce1948344369f0928479dff1bcde879 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 22:39:04 +0700
Subject: [PATCH 133/168] refactor(FE-212,213): unify purchase API service
 references in Purchase components

---
 src/app/purchase/detail/edit/page.tsx         |   4 +-
 src/app/purchase/detail/page.tsx              |   4 +-
 .../pages/purchase/PurchaseTable.tsx          |   8 +-
 .../order/PurchaseOrderAcceptApprovalForm.tsx |   6 +-
 .../order/PurchaseOrderStaffApprovalForm.tsx  |   6 +-
 .../form/request/PurchaseRequestForm.tsx      |   8 +-
 .../purchase/order/PurchaseOrderDetail.tsx    |   9 +-
 src/services/api/purchase.ts                  | 164 +++++++-----------
 8 files changed, 85 insertions(+), 124 deletions(-)

diff --git a/src/app/purchase/detail/edit/page.tsx b/src/app/purchase/detail/edit/page.tsx
index a4d59ae2..f93d1618 100644
--- a/src/app/purchase/detail/edit/page.tsx
+++ b/src/app/purchase/detail/edit/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
-import { PurchaseRequestApi } from '@/services/api/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseEdit = () => {
@@ -14,7 +14,7 @@ const PurchaseEdit = () => {
 
   const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
     purchaseId,
-    (id: number) => PurchaseRequestApi.getSingle(id)
+    (id: number) => PurchaseApi.getSingle(id)
   );
 
   if (!purchaseId) {
diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 16c077b4..6ca2ffc7 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import PurchaseOrderDetail from '@/components/pages/purchase/order/PurchaseOrderDetail';
-import { PurchaseRequestApi } from '@/services/api/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const PurchaseDetail = () => {
@@ -14,7 +14,7 @@ const PurchaseDetail = () => {
 
   const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
     purchaseId,
-    (id: number) => PurchaseRequestApi.getSingle(id)
+    (id: number) => PurchaseApi.getSingle(id)
   );
 
   if (!purchaseId) {
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 9912d13a..6ce26828 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -22,7 +22,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Purchase } from '@/types/api/purchase/purchase';
-import { PurchaseRequestApi } from '@/services/api/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
 
 // ===== INTERFACES =====
 interface RowOptionsMenuProps {
@@ -110,8 +110,8 @@ const PurchaseTable = () => {
     isLoading,
     mutate: refreshPurchaseRequests,
   } = useSWR(
-    `${PurchaseRequestApi.basePath}${getTableFilterQueryString()}`,
-    PurchaseRequestApi.getAllFetcher
+    `${PurchaseApi.basePath}${getTableFilterQueryString()}`,
+    PurchaseApi.getAllFetcher
   );
 
   // ===== TABLE COLUMNS DEFINITION =====
@@ -208,7 +208,7 @@ const PurchaseTable = () => {
     setIsDeleteLoading(true);
 
     try {
-      await PurchaseRequestApi.delete(selectedPurchase?.id as number);
+      await PurchaseApi.delete(selectedPurchase?.id as number);
       refreshPurchaseRequests();
       deleteModal.closeModal();
       toast.success('Berhasil menghapus data permintaan pembelian!');
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 109b70b4..fda6fb94 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -16,7 +16,7 @@ import {
   PurchaseRequestAcceptApprovalFormSchema,
 } from './PurchaseOrderForm.schema';
 import { isResponseError } from '@/lib/api-helper';
-import { AcceptApprovalApi } from '@/services/api/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
 import {
   CreateAcceptApprovalRequestPayload,
   Purchase,
@@ -93,7 +93,7 @@ const PurchaseOrderAcceptApprovalForm = ({
         return;
       }
 
-      const res = await AcceptApprovalApi.acceptApproval(
+      const res = await PurchaseApi.acceptApproval.create(
         purchaseRequestId,
         payload
       );
@@ -113,7 +113,7 @@ const PurchaseOrderAcceptApprovalForm = ({
 
   const updateAcceptApprovalHandler = useCallback(
     async (purchaseId: number, payload: CreateAcceptApprovalRequestPayload) => {
-      const res = await AcceptApprovalApi.acceptApproval(purchaseId, payload);
+      const res = await PurchaseApi.acceptApproval.create(purchaseId, payload);
       if (isResponseError(res)) {
         setPurchaseOrderFormErrorMessage(res.message);
         return;
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 8c3daad5..2bf53209 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -15,7 +15,7 @@ import {
   PurchaseRequestStaffApprovalFormSchema,
 } from './PurchaseOrderForm.schema';
 import { isResponseError } from '@/lib/api-helper';
-import { StaffApprovalApi } from '@/services/api/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
 import {
   CreateStaffApprovalRequestPayload,
   UpdateStaffApprovalRequestPayload,
@@ -84,7 +84,7 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
 
-      const res = await StaffApprovalApi.createStaffApproval(
+      const res = await PurchaseApi.staffApproval.create(
         purchaseRequestId,
         payload
       );
@@ -104,7 +104,7 @@ const PurchaseOrderStaffApprovalForm = ({
 
   const updateStaffApprovalHandler = useCallback(
     async (purchaseId: number, payload: UpdateStaffApprovalRequestPayload) => {
-      const res = await StaffApprovalApi.updateStaffApproval(
+      const res = await PurchaseApi.staffApproval.update(
         purchaseId,
         payload
       );
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index d039c1c9..7c6d64e1 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -33,7 +33,7 @@ import {
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Product } from '@/types/api/master-data/product';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
-import { PurchaseRequestApi } from '@/services/api/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
 import {
@@ -99,7 +99,7 @@ const PurchaseRequestForm = ({
   // ===== SUBMISSION HANDLERS =====
   const createPurchaseRequestHandler = useCallback(
     async (payload: CreatePurchaseRequestPayload) => {
-      const res = await PurchaseRequestApi.create(payload);
+      const res = await PurchaseApi.create(payload);
       if (isResponseError(res)) {
         setPurchaseRequestFormErrorMessage(res.message);
         return;
@@ -115,7 +115,7 @@ const PurchaseRequestForm = ({
       purchaseRequestId: number,
       payload: CreatePurchaseRequestPayload
     ) => {
-      const res = await PurchaseRequestApi.update(purchaseRequestId, payload);
+      const res = await PurchaseApi.update(purchaseRequestId, payload);
       if (isResponseError(res)) {
         setPurchaseRequestFormErrorMessage(res.message);
         return;
@@ -135,7 +135,7 @@ const PurchaseRequestForm = ({
     if (!initialValues?.id) return;
 
     setIsDeleteLoading(true);
-    await PurchaseRequestApi.delete(initialValues.id);
+    await PurchaseApi.delete(initialValues.id);
     deleteModal.closeModal();
     toast.success('Successfully delete Purchase Request!');
     setIsDeleteLoading(false);
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 904177bb..82f389c1 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -26,10 +26,7 @@ import {
   Purchase,
   PurchaseItem,
 } from '@/types/api/purchase/purchase';
-import {
-  ManagerApprovalApi,
-  PurchaseDeleteItemsApi,
-} from '@/services/api/purchase';
+import { PurchaseApi } from '@/services/api/purchase';
 import { isResponseError } from '@/lib/api-helper';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
@@ -230,7 +227,7 @@ const PurchaseOrderDetail = ({
         return;
       }
 
-      const res = await ManagerApprovalApi.createManagerApproval(
+      const res = await PurchaseApi.managerApproval.create(
         purchaseRequestId,
         payload
       );
@@ -276,7 +273,7 @@ const PurchaseOrderDetail = ({
     setIsDeleteLoading(true);
 
     try {
-      const res = await PurchaseDeleteItemsApi.deleteItems(purchaseRequestId, {
+      const res = await PurchaseApi.items.delete(purchaseRequestId, {
         item_ids: itemIdsToDelete,
       });
 
diff --git a/src/services/api/purchase.ts b/src/services/api/purchase.ts
index 7f25e9f9..d0438e88 100644
--- a/src/services/api/purchase.ts
+++ b/src/services/api/purchase.ts
@@ -11,123 +11,87 @@ import {
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 
-export const PurchaseRequestApi = new BaseApiService<
+const basePurchaseApi = new BaseApiService<
   Purchase,
   CreatePurchaseRequestPayload,
   UpdatePurchaseRequestPayload
 >('/purchases');
 
-export class StaffApprovalService extends BaseApiService<
-  Purchase,
-  CreateStaffApprovalRequestPayload,
-  UpdateStaffApprovalRequestPayload
-> {
-  constructor(basePath: string = '') {
-    super(basePath);
-  }
+export const PurchaseApi = {
+  basePath: basePurchaseApi.basePath,
+  header: basePurchaseApi.header,
+  getAllFetcher: basePurchaseApi.getAllFetcher.bind(basePurchaseApi),
+  getSingle: basePurchaseApi.getSingle.bind(basePurchaseApi),
+  create: basePurchaseApi.create.bind(basePurchaseApi),
+  update: basePurchaseApi.update.bind(basePurchaseApi),
+  delete: basePurchaseApi.delete.bind(basePurchaseApi),
+  customRequest: basePurchaseApi.customRequest.bind(basePurchaseApi),
 
-  async createStaffApproval(
-    purchaseRequestId: number,
-    payload: CreateStaffApprovalRequestPayload
-  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
-    return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequestId}/approvals/staff`,
-      {
+  staffApproval: {
+    create: async (
+      purchaseRequestId: number,
+      payload: CreateStaffApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/approvals/staff`, {
         method: 'POST',
         payload,
-      }
-    );
-  }
+      });
+    },
 
-  async updateStaffApproval(
-    purchaseRequestId: number,
-    payload: UpdateStaffApprovalRequestPayload
-  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
-    return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequestId}/approvals/staff`,
-      {
+    update: async (
+      purchaseRequestId: number,
+      payload: UpdateStaffApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/approvals/staff`, {
         method: 'POST',
         payload,
-      }
-    );
-  }
-}
+      });
+    },
+  },
 
-export class ManagerApprovalService extends BaseApiService<
-  Purchase,
-  CreateManagerApprovalRequestPayload,
-  CreateManagerApprovalRequestPayload
-> {
-  constructor(basePath: string = '') {
-    super(basePath);
-  }
-
-  async createManagerApproval(
-    purchaseRequestId: number,
-    payload: CreateManagerApprovalRequestPayload
-  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
-    return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequestId}/approvals/manager`,
-      {
+  managerApproval: {
+    create: async (
+      purchaseRequestId: number,
+      payload: CreateManagerApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/approvals/manager`, {
         method: 'POST',
         payload,
-      }
-    );
-  }
-}
+      });
+    },
+  },
 
-export class AcceptApprovalService extends BaseApiService<
-  Purchase,
-  CreateAcceptApprovalRequestPayload,
-  unknown
-> {
-  constructor(basePath: string = '') {
-    super(basePath);
-  }
-
-  async acceptApproval(
-    purchaseRequestId: number,
-    payload: CreateAcceptApprovalRequestPayload
-  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
-    return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequestId}/receipts`,
-      {
+  acceptApproval: {
+    create: async (
+      purchaseRequestId: number,
+      payload: CreateAcceptApprovalRequestPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/receipts`, {
         method: 'POST',
         payload,
-      }
-    );
-  }
-}
+      });
+    },
+  },
 
-export class PurchaseDeleteItemsService extends BaseApiService<
-  Purchase,
-  DeletePurchaseRequestItemPayload,
-  unknown
-> {
-  constructor(basePath: string = '') {
-    super(basePath);
-  }
-
-  async deleteItems(
-    purchaseRequestId: number,
-    payload: DeletePurchaseRequestItemPayload
-  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
-    return await this.customRequest<BaseApiResponse<{ message: string }>>(
-      `${purchaseRequestId}/items`,
-      {
+  items: {
+    delete: async (
+      purchaseRequestId: number,
+      payload: DeletePurchaseRequestItemPayload
+    ): Promise<BaseApiResponse<{ message: string }> | undefined> => {
+      return await basePurchaseApi.customRequest<
+        BaseApiResponse<{ message: string }>
+      >(`${purchaseRequestId}/items`, {
         method: 'DELETE',
         payload,
-      }
-    );
-  }
-}
-
-export const StaffApprovalApi = new StaffApprovalService('/purchases');
-
-export const ManagerApprovalApi = new ManagerApprovalService('/purchases');
-
-export const AcceptApprovalApi = new AcceptApprovalService('/purchases');
-
-export const PurchaseDeleteItemsApi = new PurchaseDeleteItemsService(
-  '/purchases'
-);
+      });
+    },
+  },
+};

From 24e2bcf35d9e0732564a0e3c1b2c4868e387073f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 22:54:22 +0700
Subject: [PATCH 134/168] refactor(FE-212): update notes field in
 UpdateStaffApprovalRequestPayload for consistency

---
 .../purchase/form/order/PurchaseOrderStaffApprovalForm.tsx | 7 ++-----
 src/types/api/purchase/purchase.d.ts                       | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 2bf53209..e5dbbfb9 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -104,10 +104,7 @@ const PurchaseOrderStaffApprovalForm = ({
 
   const updateStaffApprovalHandler = useCallback(
     async (purchaseId: number, payload: UpdateStaffApprovalRequestPayload) => {
-      const res = await PurchaseApi.staffApproval.update(
-        purchaseId,
-        payload
-      );
+      const res = await PurchaseApi.staffApproval.update(purchaseId, payload);
       if (isResponseError(res)) {
         setPurchaseOrderFormErrorMessage(res.message);
         return;
@@ -166,7 +163,7 @@ const PurchaseOrderStaffApprovalForm = ({
         await createStaffApprovalHandler(createPayload);
       } else if (type === 'edit') {
         const updatePayload: UpdateStaffApprovalRequestPayload = {
-          'notes?': values.notes || null,
+          notes: values.notes || null,
           items: purchaseItems.map((purchaseItem, idx) => {
             const formItem = values.items?.[idx];
             return {
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index ea128361..17059ad9 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -90,13 +90,13 @@ export type CreateStaffApprovalRequestPayload = {
 };
 
 export type UpdateStaffApprovalRequestPayload = {
+  notes?: string | null;
   items: {
     purchase_item_id: number;
     qty: number;
     price: number;
     total_price: number;
   }[];
-  'notes?': string | null;
 };
 
 export type CreateManagerApprovalRequestPayload = {

From a6d187a8b3e5bcbb028d0278c23214f606285980 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 23:05:12 +0700
Subject: [PATCH 135/168] refactor(FE-208,212,213): add action field to staff
 approval request payloads and implement rejection handling in
 PurchaseOrderDetail

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  2 +
 .../purchase/order/PurchaseOrderDetail.tsx    | 74 ++++++++++++++++++-
 src/types/api/purchase/purchase.d.ts          |  2 +
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index e5dbbfb9..50c5b584 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -141,6 +141,7 @@ const PurchaseOrderStaffApprovalForm = ({
 
       if (type === 'add') {
         const createPayload: CreateStaffApprovalRequestPayload = {
+          action: 'APPROVED',
           notes: values.notes || '',
           items: purchaseItems.map((purchaseItem, idx) => {
             const formItem = values.items?.[idx];
@@ -163,6 +164,7 @@ const PurchaseOrderStaffApprovalForm = ({
         await createStaffApprovalHandler(createPayload);
       } else if (type === 'edit') {
         const updatePayload: UpdateStaffApprovalRequestPayload = {
+          action: 'APPROVED',
           notes: values.notes || null,
           items: purchaseItems.map((purchaseItem, idx) => {
             const formItem = values.items?.[idx];
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 82f389c1..993c84c3 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -23,6 +23,7 @@ import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrde
 import Card from '@/components/Card';
 import {
   CreateManagerApprovalRequestPayload,
+  CreateStaffApprovalRequestPayload,
   Purchase,
   PurchaseItem,
 } from '@/types/api/purchase/purchase';
@@ -78,6 +79,7 @@ const PurchaseOrderDetail = ({
   const searchParams = useSearchParams();
   const confirmationModalWithNotes = useModal();
   const staffApprovalModal = useModal();
+  const staffRejectionModal = useModal();
   const acceptApprovalModal = useModal();
   const editModal = useModal();
   const penerimaanBarangModal = useModal();
@@ -172,6 +174,18 @@ const PurchaseOrderDetail = ({
     }
   };
 
+  const handleRejectionClick = () => {
+    if (!approvalStep) return;
+
+    switch (approvalStep) {
+      case 1:
+        staffRejectionModal.openModal();
+        break;
+      default:
+        break;
+    }
+  };
+
   useMemo(() => {
     if (!initialValues?.approval) return false;
 
@@ -216,6 +230,32 @@ const PurchaseOrderDetail = ({
   }, [purchaseOrderItems]);
 
   // ===== SUBMISSION HANDLER =====
+  const createStaffApprovalHandler = useCallback(
+    async (payload: CreateStaffApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        toast.error('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.staffApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        toast.error(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals();
+    },
+    [initialValues?.id, searchParams, refreshApprovals]
+  );
+
   const createManagerApprovalHandler = useCallback(
     async (payload: CreateManagerApprovalRequestPayload) => {
       const purchaseRequestId = searchParams.get('purchaseId')
@@ -541,7 +581,12 @@ const PurchaseOrderDetail = ({
               Approve
             </Button>
 
-            <Button variant='outline' color='error' className='w-full sm:w-fit'>
+            <Button
+              variant='outline'
+              color='error'
+              className='w-full sm:w-fit'
+              onClick={handleRejectionClick}
+            >
               <Icon icon='material-symbols:close' width={24} height={24} />
               Reject
             </Button>
@@ -934,6 +979,33 @@ const PurchaseOrderDetail = ({
         />
       </Modal>
 
+      {/* Staff Rejection Modal */}
+      <ConfirmationModalWithNotes
+        ref={staffRejectionModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menolak (reject) permintaan pembelian ini?'
+        placeholder='(Opsional) Masukkan alasan penolakan...'
+        rows={4}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Tolak',
+          color: 'error',
+          onClick: async (notes) => {
+            const payload: CreateStaffApprovalRequestPayload = {
+              action: 'REJECTED',
+              notes: notes || null,
+              items: [],
+            };
+
+            await createStaffApprovalHandler(payload);
+            staffRejectionModal.closeModal();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+
       {/* Delete Confirmation Modal */}
       <ConfirmationModal
         ref={deleteModal.ref}
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 17059ad9..866ebf76 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -79,6 +79,7 @@ export type CreatePurchaseRequestPayload = {
 };
 
 export type CreateStaffApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
   notes?: string | null;
   items: {
     product_id: number;
@@ -90,6 +91,7 @@ export type CreateStaffApprovalRequestPayload = {
 };
 
 export type UpdateStaffApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
   notes?: string | null;
   items: {
     purchase_item_id: number;

From b2ef545f63a82ae10316cfd8a25eccd221f2f1c6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 23:21:12 +0700
Subject: [PATCH 136/168] refactor(FE-208,212,213): replace product_id and
 warehouse_id with purchase_item_id in PurchaseRequestStaffApprovalForm and
 related schemas

---
 .../form/order/PurchaseOrderForm.schema.ts    | 27 +++-----
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 62 +++++++------------
 src/types/api/purchase/purchase.d.ts          |  3 +-
 3 files changed, 33 insertions(+), 59 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 7dbc6c1b..98ed5eb0 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -2,11 +2,10 @@ import * as Yup from 'yup';
 import { Purchase } from '@/types/api/purchase/purchase';
 
 type PurchaseRequestStaffApprovalFormSchemaType = {
+  action: 'APPROVED' | 'REJECTED';
   notes: string | null;
   items: {
     purchase_item_id?: number;
-    product_id: number;
-    warehouse_id: number;
     qty: number;
     price: number | string;
     total_price: number | string;
@@ -42,8 +41,6 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
 
 export type PurchaseStaffApprovalItemSchema = {
   purchase_item_id?: number;
-  product_id: number;
-  warehouse_id: number;
   qty: number;
   price: number | string;
   total_price: number | string;
@@ -79,14 +76,6 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       .optional()
       .min(1, 'Purchase item ID tidak valid!')
       .typeError('Purchase item ID harus berupa angka!'),
-    product_id: Yup.number()
-      .required('Produk wajib diisi!')
-      .min(1, 'Produk wajib diisi!')
-      .typeError('Produk wajib diisi!'),
-    warehouse_id: Yup.number()
-      .required('Gudang wajib diisi!')
-      .min(1, 'Gudang wajib diisi!')
-      .typeError('Gudang wajib diisi!'),
     qty: Yup.number()
       .required('Jumlah wajib diisi!')
       .min(1, 'Jumlah harus berupa angka lebih dari 0!')
@@ -217,6 +206,10 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
 
 export const PurchaseRequestStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRequestStaffApprovalFormSchemaType> =
   Yup.object({
+    action: Yup.mixed<'APPROVED' | 'REJECTED'>()
+      .oneOf(['APPROVED', 'REJECTED'], 'Action harus APPROVED atau REJECTED')
+      .required('Action wajib diisi!')
+      .default('APPROVED'),
     notes: Yup.string().nullable().default(null),
     items: Yup.array()
       .of(PurchaseStaffApprovalItemObjectSchema)
@@ -241,11 +234,11 @@ export const PurchaseDeleteItemsSchema: Yup.ObjectSchema<PurchaseDeleteItemsSche
 
 export const PurchaseRequestStaffApprovalFormInitialValues: PurchaseRequestStaffApprovalFormSchemaType =
   {
+    action: 'APPROVED',
     notes: '',
     items: [
       {
-        product_id: 0,
-        warehouse_id: 0,
+        purchase_item_id: 0,
         qty: 0,
         price: '',
         total_price: '',
@@ -257,20 +250,18 @@ export const PurchaseRequestStaffApprovalFormDefaultValues = (
   purchase?: Purchase
 ): PurchaseRequestStaffApprovalFormSchemaType => {
   return {
+    action: 'APPROVED',
     notes: purchase?.notes ?? null,
     items: purchase?.items
       ? purchase.items.map((item) => ({
           purchase_item_id: item.id,
-          product_id: item.product_id,
-          warehouse_id: item.warehouse.id,
           qty: item.qty,
           price: item.price,
           total_price: item.total_price,
         }))
       : [
           {
-            product_id: 0,
-            warehouse_id: 0,
+            purchase_item_id: 0,
             qty: 0,
             price: '',
             total_price: '',
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 50c5b584..a17b445f 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -139,49 +139,33 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
 
-      if (type === 'add') {
-        const createPayload: CreateStaffApprovalRequestPayload = {
-          action: 'APPROVED',
-          notes: values.notes || '',
-          items: purchaseItems.map((purchaseItem, idx) => {
-            const formItem = values.items?.[idx];
-            return {
-              product_id: purchaseItem.product_id || 0,
-              warehouse_id: purchaseItem.warehouse_id || 0,
-              qty: purchaseItem.quantity || 0,
-              price:
-                typeof formItem?.price === 'string'
-                  ? parseFloat(formItem.price) || 0
-                  : formItem?.price || 0,
-              total_price:
-                typeof formItem?.total_price === 'string'
-                  ? parseFloat(formItem.total_price) || 0
-                  : formItem?.total_price || 0,
-            };
-          }),
-        };
+      const payload: CreateStaffApprovalRequestPayload = {
+        action: values.action || 'APPROVED',
+        notes: values.notes || '',
+        items: purchaseItems.map((purchaseItem, idx) => {
+          const formItem = values.items?.[idx];
+          return {
+            purchase_item_id: purchaseItem.id,
+            qty: purchaseItem.quantity || 0,
+            price:
+              typeof formItem?.price === 'string'
+                ? parseFloat(formItem.price) || 0
+                : formItem?.price || 0,
+            total_price:
+              typeof formItem?.total_price === 'string'
+                ? parseFloat(formItem.total_price) || 0
+                : formItem?.total_price || 0,
+          };
+        }),
+      };
 
-        await createStaffApprovalHandler(createPayload);
+      if (type === 'add') {
+        await createStaffApprovalHandler(payload);
       } else if (type === 'edit') {
         const updatePayload: UpdateStaffApprovalRequestPayload = {
-          action: 'APPROVED',
+          action: values.action || 'APPROVED',
           notes: values.notes || null,
-          items: purchaseItems.map((purchaseItem, idx) => {
-            const formItem = values.items?.[idx];
-            return {
-              purchase_item_id:
-                formItem?.purchase_item_id || purchaseItem.value || 0,
-              qty: purchaseItem.quantity || 0,
-              price:
-                typeof formItem?.price === 'string'
-                  ? parseFloat(formItem.price) || 0
-                  : formItem?.price || 0,
-              total_price:
-                typeof formItem?.total_price === 'string'
-                  ? parseFloat(formItem.total_price) || 0
-                  : formItem?.total_price || 0,
-            };
-          }),
+          items: payload.items,
         };
 
         await updateStaffApprovalHandler(
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 866ebf76..cb944ca0 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -82,8 +82,7 @@ export type CreateStaffApprovalRequestPayload = {
   action: 'APPROVED' | 'REJECTED';
   notes?: string | null;
   items: {
-    product_id: number;
-    warehouse_id: number;
+    purchase_item_id: number;
     qty: number;
     price: number;
     total_price: number;

From c8b3e52ac0b1b9700608f05cfd19dd17eb31ed77 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 23:28:05 +0700
Subject: [PATCH 137/168] refactor(FE-212): remove commented-out edit button in
 PurchaseTable component

---
 .../pages/purchase/PurchaseTable.tsx           | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 6ce26828..bf59d5ee 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -48,15 +48,15 @@ const RowOptionsMenu = ({
         Detail
       </Button>
 
-      <Button
-        href={`/purchase/detail/edit/?purchaseId=${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*/}
+      {/*  href={`/purchase/detail/edit/?purchaseId=${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}

From c1d71ee3c68833b3ff432e4a35e3ddc49498982e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 23:31:35 +0700
Subject: [PATCH 138/168] refactor(FE-212): add warehouse information to
 PurchaseOrderAcceptApprovalForm

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index fda6fb94..993e925c 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -195,6 +195,9 @@ const PurchaseOrderAcceptApprovalForm = ({
           product_category: item.product.product_category || '',
           uom: item.product.uom || { name: 'unit' },
         },
+        warehouse: {
+          name: item.warehouse?.name || '',
+        },
       }));
     }
 
@@ -330,6 +333,7 @@ const PurchaseOrderAcceptApprovalForm = ({
             <thead>
               <tr>
                 <th>Produk</th>
+                <th>Gudang</th>
                 <th>Jumlah</th>
                 <th>Satuan</th>
                 <th>
@@ -388,6 +392,18 @@ const PurchaseOrderAcceptApprovalForm = ({
                         value={purchaseItem?.value || 0}
                       />
                     </td>
+                    <td>
+                      <TextInput
+                        name={`items.${idx}.warehouse`}
+                        type='text'
+                        value={purchaseItem?.warehouse?.name || ''}
+                        readOnly={true}
+                        className={{
+                          wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
+                        }}
+                        disabled={true}
+                      />
+                    </td>
                     <td>
                       <TextInput
                         name={`items.${idx}.quantity`}

From 51f157dfad6697e0e0a0af7a2667fbe015e1ce18 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 23:50:14 +0700
Subject: [PATCH 139/168] refactor(FE-208,212): enhance quantity validation and
 formatting in PurchaseOrderAcceptApprovalForm

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 38 +++++++++++++++++--
 .../form/order/PurchaseOrderForm.schema.ts    |  6 ++-
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 993e925c..57989cad 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -22,6 +22,7 @@ import {
   Purchase,
 } from '@/types/api/purchase/purchase';
 import DateInput from '@/components/input/DateInput';
+import { formatNumber } from '@/lib/helper';
 
 interface PurchaseOrderAcceptApprovalFormProps {
   type?: 'add' | 'edit';
@@ -218,7 +219,7 @@ const PurchaseOrderAcceptApprovalForm = ({
           vehicle_number: item.vehicle_number || '',
           expedition_vendor: null,
           expedition_vendor_id: 0,
-          received_qty: item.sub_qty ? item.sub_qty.toString() : '',
+          received_qty: '',
           transport_per_item: '',
           transport_total: '',
         };
@@ -227,6 +228,21 @@ const PurchaseOrderAcceptApprovalForm = ({
     }
   }, [purchaseItems, initialValues]);
 
+  // ===== HELPER FUNCTIONS =====
+  const getQuantityExceededError = useCallback(
+    (idx: number, receivedQty: number) => {
+      if (!receivedQty) return null;
+
+      const originalQty = purchaseItems[idx]?.quantity || 0;
+      if (receivedQty > originalQty) {
+        return `Tidak boleh melebihi ${formatNumber(originalQty)}`;
+      }
+
+      return null;
+    },
+    [purchaseItems]
+  );
+
   const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(() => {
     return [
       {
@@ -410,7 +426,7 @@ const PurchaseOrderAcceptApprovalForm = ({
                         type='text'
                         value={
                           purchaseItem?.quantity
-                            ? purchaseItem.quantity.toLocaleString('id-ID')
+                            ? formatNumber(purchaseItem.quantity)
                             : ''
                         }
                         readOnly={true}
@@ -578,11 +594,25 @@ const PurchaseOrderAcceptApprovalForm = ({
                         decimalScale={0}
                         thousandSeparator=','
                         decimalSeparator='.'
+                        bottomLabel={`Total: ${purchaseItems[idx]?.quantity ? formatNumber(purchaseItems[idx].quantity) : 0}`}
                         isError={
-                          isRepeaterInputError(idx, 'received_qty').isError
+                          isRepeaterInputError(idx, 'received_qty').isError ||
+                          (formItem?.received_qty
+                            ? getQuantityExceededError(
+                                idx,
+                                Number(formItem.received_qty)
+                              ) !== null
+                            : false)
                         }
                         errorMessage={
-                          isRepeaterInputError(idx, 'received_qty').errorMessage
+                          isRepeaterInputError(idx, 'received_qty')
+                            .errorMessage ||
+                          (formItem?.received_qty
+                            ? getQuantityExceededError(
+                                idx,
+                                Number(formItem.received_qty)
+                              ) || undefined
+                            : undefined)
                         }
                         className={{
                           wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index 98ed5eb0..bfe4ed92 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -120,7 +120,9 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
     purchase_item: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).nullable().optional(),
+    })
+      .nullable()
+      .optional(),
     purchase_item_id: Yup.number()
       .min(1, 'Purchase item is required!')
       .required('Purchase item is required!')
@@ -164,7 +166,7 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
       .required('Jumlah diterima wajib diisi!')
       .test(
         'is-valid-received-qty',
-        'Jumlah diterima harus berupa angka lebih dari 0!',
+        'Harus berupa angka lebih dari 0!',
         function (value) {
           if (value === '' || value === null || value === undefined)
             return false;

From e00b7bc3f25ad9ffe7fdff540b12ebcac7af89cd Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 20 Nov 2025 23:52:35 +0700
Subject: [PATCH 140/168] refactor(FE-212): update default unit of measure in
 PurchaseOrderAcceptApprovalForm

---
 .../purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 57989cad..bac362f9 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -194,7 +194,7 @@ const PurchaseOrderAcceptApprovalForm = ({
         product: {
           name: item.product.name,
           product_category: item.product.product_category || '',
-          uom: item.product.uom || { name: 'unit' },
+          uom: item.product.uom || { name: '' },
         },
         warehouse: {
           name: item.warehouse?.name || '',

From 835074f5380359b013d8941eee3d16a379fc07bc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 09:17:00 +0700
Subject: [PATCH 141/168] refactor(FE-212): group purchase items by warehouse
 in PurchaseOrderStaffApprovalForm

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 424 +++++++++++-------
 1 file changed, 258 insertions(+), 166 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index a17b445f..97838e23 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -51,11 +51,19 @@ const PurchaseOrderStaffApprovalForm = ({
   }, [initialValues?.approval]);
 
   const isRepeaterInputError = (
-    idx: number,
+    purchaseItemId: number,
     field: 'price' | 'total_price'
   ): { isError: boolean; errorMessage: string } => {
-    const touchedItem = formik.touched.items?.[idx];
-    const errorItem = formik.errors.items?.[idx] as
+    const formItemIndex = formik.values.items?.findIndex(
+      (item) => item.purchase_item_id === purchaseItemId
+    );
+
+    if (formItemIndex === -1) {
+      return { isError: false, errorMessage: '' };
+    }
+
+    const touchedItem = formik.touched.items?.[formItemIndex];
+    const errorItem = formik.errors.items?.[formItemIndex] as
       | Record<string, string>
       | undefined;
 
@@ -200,10 +208,41 @@ const PurchaseOrderStaffApprovalForm = ({
     return [];
   }, [initialValues?.items]);
 
+  const groupedPurchaseItems = useMemo(() => {
+    if (!purchaseItems.length) return [];
+
+    const warehouseGroups = purchaseItems.reduce(
+      (acc, item) => {
+        const warehouseId = item.warehouse_id;
+        if (!acc[warehouseId]) {
+          acc[warehouseId] = {
+            warehouseId,
+            warehouseName: item.warehouse.name,
+            items: [],
+          };
+        }
+        acc[warehouseId].items.push(item);
+        return acc;
+      },
+      {} as Record<
+        number,
+        {
+          warehouseId: number;
+          warehouseName: string;
+          items: typeof purchaseItems;
+        }
+      >
+    );
+
+    return Object.values(warehouseGroups);
+  }, [purchaseItems]);
+
   useEffect(() => {
     if (purchaseItems.length > 0 && initialValues?.items) {
       const updatedItems = purchaseItems.map((purchaseItem, idx) => {
-        const originalItem = initialValues.items?.[idx];
+        const originalItem = initialValues.items?.find(
+          (item) => item.id === purchaseItem.id
+        );
         return {
           purchase_item_id: type === 'edit' ? purchaseItem.value : undefined,
           product_id: purchaseItem.product_id || 0,
@@ -219,17 +258,28 @@ const PurchaseOrderStaffApprovalForm = ({
   }, [purchaseItems, type, initialValues]);
 
   // ===== PURCHASE ITEM OPERATIONS =====
+  const findItemIndex = (purchaseItemId: number) => {
+    return purchaseItems.findIndex((item) => item.id === purchaseItemId);
+  };
+
   const handlePurchaseItemChange = (
-    idx: number,
+    purchaseItemId: number,
     field: 'price' | 'total_price',
     value: string | number
   ) => {
+    const itemIndex = findItemIndex(purchaseItemId);
+    const formItemIndex = formik.values.items?.findIndex(
+      (item) => item.purchase_item_id === purchaseItemId
+    );
+
+    if (itemIndex === -1 || formItemIndex === -1) return;
+
     if (field === 'price' || field === 'total_price') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
-      formik.setFieldValue(`items.${idx}.${field}`, numValue);
+      formik.setFieldValue(`items.${formItemIndex}.${field}`, numValue);
 
-      const selectedItem = purchaseItems[idx];
+      const selectedItem = purchaseItems[itemIndex];
 
       if (
         field === 'price' &&
@@ -238,7 +288,10 @@ const PurchaseOrderStaffApprovalForm = ({
         numValue >= 0
       ) {
         const calculatedTotal = numValue * selectedItem.quantity;
-        formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
+        formik.setFieldValue(
+          `items.${formItemIndex}.total_price`,
+          calculatedTotal
+        );
       }
 
       if (
@@ -248,7 +301,7 @@ const PurchaseOrderStaffApprovalForm = ({
         numValue >= 0
       ) {
         const calculatedPrice = numValue / selectedItem.quantity;
-        formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
+        formik.setFieldValue(`items.${formItemIndex}.price`, calculatedPrice);
       }
     }
   };
@@ -266,163 +319,202 @@ const PurchaseOrderStaffApprovalForm = ({
               : 'Edit Item Pembelian'}
           </h2>
           <div className='overflow-x-auto'>
-            <table className='table'>
-              <thead>
-                <tr>
-                  <th>Gudang</th>
-                  <th>Produk</th>
-                  <th>Jenis Produk</th>
-                  <th>Jumlah</th>
-                  <th>Satuan</th>
-                  <th>
-                    Harga Satuan
-                    <span className='text-error'>*</span>
-                  </th>
-                  <th>
-                    Total (Rp.)
-                    <span className='text-error'>*</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {purchaseItems?.map((purchaseItem, idx) => {
-                  const formItem = formik.values.items?.[idx];
-                  return (
-                    <tr key={`purchase-item-${idx}`}>
-                      <td>
-                        <TextInput
-                          name={`items.${idx}.warehouse`}
-                          type='text'
-                          value={purchaseItem?.warehouse?.name || ''}
-                          readOnly={true}
-                          className={{
-                            wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                          }}
-                          disabled={true}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`items.${idx}.product_name`}
-                          type='text'
-                          value={purchaseItem?.product?.name || ''}
-                          readOnly={true}
-                          className={{
-                            wrapper: 'min-w-52 md:min-w-72 lg:min-w-80',
-                          }}
-                          disabled={true}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`items.${idx}.product_category`}
-                          type='text'
-                          value={
-                            typeof purchaseItem?.product?.product_category ===
-                            'string'
-                              ? purchaseItem.product.product_category
-                              : purchaseItem?.product?.product_category?.name ||
-                                ''
-                          }
-                          readOnly={true}
-                          className={{
-                            wrapper: 'min-w-40 md:min-w-52 lg:min-w-64',
-                          }}
-                          disabled={true}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`items.${idx}.quantity`}
-                          type='text'
-                          value={
-                            purchaseItem?.quantity
-                              ? purchaseItem.quantity.toLocaleString('id-ID')
-                              : ''
-                          }
-                          readOnly={true}
-                          className={{
-                            wrapper: 'min-w-24',
-                          }}
-                          disabled={true}
-                        />
-                      </td>
-                      <td>
-                        <TextInput
-                          name={`items.${idx}.uom`}
-                          type='text'
-                          value={purchaseItem?.product?.uom?.name || ''}
-                          readOnly={true}
-                          className={{
-                            wrapper: 'min-w-24',
-                          }}
-                          disabled={true}
-                        />
-                      </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`items.${idx}.price`}
-                          value={formItem?.price || ''}
-                          onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'price',
-                              e.target.value
-                            )
-                          }
-                          onBlur={formik.handleBlur}
-                          placeholder='Masukkan harga satuan'
-                          allowNegative={false}
-                          decimalScale={2}
-                          thousandSeparator=','
-                          decimalSeparator='.'
-                          inputPrefix={'Rp'}
-                          isError={isRepeaterInputError(idx, 'price').isError}
-                          errorMessage={
-                            isRepeaterInputError(idx, 'price').errorMessage
-                          }
-                          className={{
-                            wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                          }}
-                        />
-                      </td>
-                      <td>
-                        <NumberInput
-                          required
-                          name={`items.${idx}.total_price`}
-                          value={formItem?.total_price || ''}
-                          onChange={(e) =>
-                            handlePurchaseItemChange(
-                              idx,
-                              'total_price',
-                              e.target.value
-                            )
-                          }
-                          onBlur={formik.handleBlur}
-                          placeholder='Masukkan total harga'
-                          allowNegative={false}
-                          decimalScale={2}
-                          thousandSeparator=','
-                          decimalSeparator='.'
-                          inputPrefix={'Rp'}
-                          isError={
-                            isRepeaterInputError(idx, 'total_price').isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(idx, 'total_price')
-                              .errorMessage
-                          }
-                          className={{
-                            wrapper: 'min-w-48 md:min-w-64 lg:min-w-72',
-                          }}
-                        />
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
+            {groupedPurchaseItems.length > 0 ? (
+              <div>
+                {groupedPurchaseItems.map((warehouseData, index) => (
+                  <div key={warehouseData.warehouseId}>
+                    <div className='border border-gray-200 rounded-lg overflow-hidden mb-6'>
+                      {/* Warehouse Header */}
+                      <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
+                        {index + 1}. {warehouseData.warehouseName.toUpperCase()}
+                      </div>
+
+                      {/* Items Table */}
+                      <div className='overflow-x-auto'>
+                        <table className='table'>
+                          <thead>
+                            <tr>
+                              <th>Produk</th>
+                              <th>Jenis Produk</th>
+                              <th>Jumlah</th>
+                              <th>Satuan</th>
+                              <th>
+                                Harga Satuan
+                                <span className='text-error'>*</span>
+                              </th>
+                              <th>
+                                Total (Rp.)
+                                <span className='text-error'>*</span>
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {warehouseData.items.map((purchaseItem) => {
+                              const formItem = formik.values.items?.find(
+                                (item) =>
+                                  item.purchase_item_id === purchaseItem.id
+                              );
+                              return (
+                                <tr key={`purchase-item-${purchaseItem.id}`}>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${purchaseItem.id}.product_name`}
+                                      type='text'
+                                      value={purchaseItem?.product?.name || ''}
+                                      readOnly={true}
+                                      className={{
+                                        wrapper:
+                                          'min-w-52 md:min-w-72 lg:min-w-80',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${purchaseItem.id}.product_category`}
+                                      type='text'
+                                      value={
+                                        typeof purchaseItem?.product
+                                          ?.product_category === 'string'
+                                          ? purchaseItem.product
+                                              .product_category
+                                          : purchaseItem?.product
+                                              ?.product_category?.name || ''
+                                      }
+                                      readOnly={true}
+                                      className={{
+                                        wrapper:
+                                          'min-w-40 md:min-w-52 lg:min-w-64',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${purchaseItem.id}.quantity`}
+                                      type='text'
+                                      value={
+                                        purchaseItem?.quantity
+                                          ? purchaseItem.quantity.toLocaleString(
+                                              'id-ID'
+                                            )
+                                          : ''
+                                      }
+                                      readOnly={true}
+                                      className={{
+                                        wrapper: 'min-w-24',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${purchaseItem.id}.uom`}
+                                      type='text'
+                                      value={
+                                        purchaseItem?.product?.uom?.name || ''
+                                      }
+                                      readOnly={true}
+                                      className={{
+                                        wrapper: 'min-w-24',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${purchaseItem.id}.price`}
+                                      value={formItem?.price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          purchaseItem.id,
+                                          'price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan harga satuan'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      isError={
+                                        isRepeaterInputError(
+                                          purchaseItem.id,
+                                          'price'
+                                        ).isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(
+                                          purchaseItem.id,
+                                          'price'
+                                        ).errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${purchaseItem.id}.total_price`}
+                                      value={formItem?.total_price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          purchaseItem.id,
+                                          'total_price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan total harga'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      isError={
+                                        isRepeaterInputError(
+                                          purchaseItem.id,
+                                          'total_price'
+                                        ).isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(
+                                          purchaseItem.id,
+                                          'total_price'
+                                        ).errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+
+                    {/* Add divider after table except for last item */}
+                    {index < groupedPurchaseItems.length - 1 && (
+                      <div className='border-t border-gray-200 my-6'></div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className='text-center py-8 text-gray-500'>
+                Tidak ada data item pembelian
+              </div>
+            )}
           </div>
           <div className={'col-span-2'}>
             <TextInput

From d624da97c3814bb583f139fa18c223dc42341b22 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 10:13:38 +0700
Subject: [PATCH 142/168] feat(FE-208): replace product name input with select
 dropdown for better usability

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 97838e23..a1d4fae1 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -8,6 +8,7 @@ import { useSearchParams } from 'next/navigation';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 
 import {
   PurchaseRequestStaffApprovalFormDefaultValues,
@@ -237,6 +238,13 @@ const PurchaseOrderStaffApprovalForm = ({
     return Object.values(warehouseGroups);
   }, [purchaseItems]);
 
+  const productOptions = useMemo(() => {
+    return purchaseItems.map((item) => ({
+      value: item.product_id,
+      label: item.product.name,
+    }));
+  }, [purchaseItems]);
+
   useEffect(() => {
     if (purchaseItems.length > 0 && initialValues?.items) {
       const updatedItems = purchaseItems.map((purchaseItem, idx) => {
@@ -357,16 +365,20 @@ const PurchaseOrderStaffApprovalForm = ({
                               return (
                                 <tr key={`purchase-item-${purchaseItem.id}`}>
                                   <td>
-                                    <TextInput
-                                      name={`items.${purchaseItem.id}.product_name`}
-                                      type='text'
-                                      value={purchaseItem?.product?.name || ''}
-                                      readOnly={true}
+                                    <SelectInput
+                                      key={`product-${purchaseItem.id}`}
+                                      value={{
+                                        value: purchaseItem?.product_id || 0,
+                                        label:
+                                          purchaseItem?.product?.name || '',
+                                      }}
+                                      options={productOptions}
+                                      isClearable={false}
+                                      isSearchable={false}
                                       className={{
                                         wrapper:
                                           'min-w-52 md:min-w-72 lg:min-w-80',
                                       }}
-                                      disabled={true}
                                     />
                                   </td>
                                   <td>

From f6fe2d4eb1655b0d7b47814ecabf86799be3a9ad Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 11:01:33 +0700
Subject: [PATCH 143/168] refactor(FE-208): remove 'Jumlah Retur' column from
 PurchaseOrderDetail for UI simplification

---
 src/components/pages/purchase/order/PurchaseOrderDetail.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 993c84c3..242abf58 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -502,11 +502,6 @@ const PurchaseOrderDetail = ({
       accessorKey: 'sub_qty',
       cell: (props) => formatNumber(props.getValue() as number),
     },
-    {
-      header: 'Jumlah Retur',
-      accessorKey: 'return_qty',
-      cell: (props) => formatNumber((props.getValue() as number) || 0),
-    },
     {
       header: 'Ekspedisi',
       accessorKey: 'expedition_name',

From c74733430bd493f4b6fb5c291d277241333f0131 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 13:26:34 +0700
Subject: [PATCH 144/168] feat(FE-208): implement conditional item deletion in
 PurchaseOrderDetail and update form handling in
 PurchaseOrderStaffApprovalForm

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 43 +++++------
 .../purchase/order/PurchaseOrderDetail.tsx    | 77 ++++++++++---------
 2 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index a1d4fae1..5717f4c1 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -252,7 +252,7 @@ const PurchaseOrderStaffApprovalForm = ({
           (item) => item.id === purchaseItem.id
         );
         return {
-          purchase_item_id: type === 'edit' ? purchaseItem.value : undefined,
+          purchase_item_id: purchaseItem.id,
           product_id: purchaseItem.product_id || 0,
           warehouse_id: purchaseItem.warehouse_id || 0,
           qty: purchaseItem.quantity || 0,
@@ -266,36 +266,27 @@ const PurchaseOrderStaffApprovalForm = ({
   }, [purchaseItems, type, initialValues]);
 
   // ===== PURCHASE ITEM OPERATIONS =====
-  const findItemIndex = (purchaseItemId: number) => {
-    return purchaseItems.findIndex((item) => item.id === purchaseItemId);
-  };
-
   const handlePurchaseItemChange = (
     purchaseItemId: number,
     field: 'price' | 'total_price',
     value: string | number
   ) => {
-    const itemIndex = findItemIndex(purchaseItemId);
     const formItemIndex = formik.values.items?.findIndex(
       (item) => item.purchase_item_id === purchaseItemId
     );
+    const purchaseItem = purchaseItems.find(
+      (item) => item.id === purchaseItemId
+    );
 
-    if (itemIndex === -1 || formItemIndex === -1) return;
+    if (formItemIndex === -1 || !purchaseItem) return;
 
     if (field === 'price' || field === 'total_price') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
       formik.setFieldValue(`items.${formItemIndex}.${field}`, numValue);
 
-      const selectedItem = purchaseItems[itemIndex];
-
-      if (
-        field === 'price' &&
-        selectedItem &&
-        selectedItem.quantity > 0 &&
-        numValue >= 0
-      ) {
-        const calculatedTotal = numValue * selectedItem.quantity;
+      if (field === 'price' && purchaseItem.quantity > 0 && numValue >= 0) {
+        const calculatedTotal = numValue * purchaseItem.quantity;
         formik.setFieldValue(
           `items.${formItemIndex}.total_price`,
           calculatedTotal
@@ -304,11 +295,10 @@ const PurchaseOrderStaffApprovalForm = ({
 
       if (
         field === 'total_price' &&
-        selectedItem &&
-        selectedItem.quantity > 0 &&
+        purchaseItem.quantity > 0 &&
         numValue >= 0
       ) {
-        const calculatedPrice = numValue / selectedItem.quantity;
+        const calculatedPrice = numValue / purchaseItem.quantity;
         formik.setFieldValue(`items.${formItemIndex}.price`, calculatedPrice);
       }
     }
@@ -362,6 +352,11 @@ const PurchaseOrderStaffApprovalForm = ({
                                 (item) =>
                                   item.purchase_item_id === purchaseItem.id
                               );
+                              const formItemIndex =
+                                formik.values.items?.findIndex(
+                                  (item) =>
+                                    item.purchase_item_id === purchaseItem.id
+                                );
                               return (
                                 <tr key={`purchase-item-${purchaseItem.id}`}>
                                   <td>
@@ -383,7 +378,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   </td>
                                   <td>
                                     <TextInput
-                                      name={`items.${purchaseItem.id}.product_category`}
+                                      name={`items.${formItemIndex}.product_category`}
                                       type='text'
                                       value={
                                         typeof purchaseItem?.product
@@ -403,7 +398,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   </td>
                                   <td>
                                     <TextInput
-                                      name={`items.${purchaseItem.id}.quantity`}
+                                      name={`items.${formItemIndex}.quantity`}
                                       type='text'
                                       value={
                                         purchaseItem?.quantity
@@ -421,7 +416,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   </td>
                                   <td>
                                     <TextInput
-                                      name={`items.${purchaseItem.id}.uom`}
+                                      name={`items.${formItemIndex}.uom`}
                                       type='text'
                                       value={
                                         purchaseItem?.product?.uom?.name || ''
@@ -436,7 +431,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   <td>
                                     <NumberInput
                                       required
-                                      name={`items.${purchaseItem.id}.price`}
+                                      name={`items.${formItemIndex}.price`}
                                       value={formItem?.price || ''}
                                       onChange={(e) =>
                                         handlePurchaseItemChange(
@@ -473,7 +468,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   <td>
                                     <NumberInput
                                       required
-                                      name={`items.${purchaseItem.id}.total_price`}
+                                      name={`items.${formItemIndex}.total_price`}
                                       value={formItem?.total_price || ''}
                                       onChange={(e) =>
                                         handlePurchaseItemChange(
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 242abf58..88f622b5 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
-import { ColumnDef, SortingState } from '@tanstack/react-table';
+import { ColumnDef, SortingState, Row, Table as TableType } from '@tanstack/react-table';
 
 import ApprovalSteps, {
   useApprovalSteps,
@@ -156,6 +156,11 @@ const PurchaseOrderDetail = ({
   const showApprovalButton =
     approvalStep !== null && approvalStep >= 1 && approvalStep <= 3;
 
+  const canDeleteItems = useMemo(() => {
+    if (!initialValues?.approval) return false;
+    return initialValues.approval.step_number >= 3;
+  }, [initialValues?.approval]);
+
   const handleApprovalClick = () => {
     if (!approvalStep) return;
 
@@ -186,12 +191,6 @@ const PurchaseOrderDetail = ({
     }
   };
 
-  useMemo(() => {
-    if (!initialValues?.approval) return false;
-
-    const currentStep = initialValues.approval.step_number;
-    return currentStep >= 4;
-  }, [initialValues?.approval]);
   const canShowPurchaseOrderInvoice = useMemo(() => {
     if (!initialValues?.approval) return false;
 
@@ -345,32 +344,36 @@ const PurchaseOrderDetail = ({
   const purchaseData = initialValues;
 
   const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <div className='w-full flex flex-row justify-center'>
-          <CheckboxInput
-            name='allRow'
-            checked={table.getIsAllRowsSelected()}
-            indeterminate={table.getIsSomeRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
-          />
-        </div>
-      ),
-      cell: ({ row }) => {
-        return (
-          <div>
-            <CheckboxInput
-              name='row'
-              checked={row.getIsSelected()}
-              disabled={!row.getCanSelect()}
-              indeterminate={row.getIsSomeSelected()}
-              onChange={row.getToggleSelectedHandler()}
-            />
-          </div>
-        );
-      },
-    },
+    ...(canDeleteItems
+      ? [
+          {
+            id: 'select',
+            header: ({ table }: { table: TableType<PurchaseItem> }) => (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              </div>
+            ),
+            cell: ({ row }: { row: Row<PurchaseItem> }) => {
+              return (
+                <div>
+                  <CheckboxInput
+                    name='row'
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
+              );
+            },
+          },
+        ]
+      : []),
     {
       header: 'No',
       cell: (props) => props.row.index + 1,
@@ -426,7 +429,7 @@ const PurchaseOrderDetail = ({
           deleteModal.openModal();
         };
 
-        return (
+        return canDeleteItems ? (
           <Button
             type='button'
             color='error'
@@ -435,7 +438,7 @@ const PurchaseOrderDetail = ({
           >
             <Icon icon='mdi:trash-can' width={16} height={16} />
           </Button>
-        );
+        ) : null;
       },
     },
   ];
@@ -738,7 +741,7 @@ const PurchaseOrderDetail = ({
                 setSorting={setSorting}
                 rowSelection={rowSelection}
                 setRowSelection={setRowSelection}
-                enableRowSelection={() => true}
+                enableRowSelection={() => canDeleteItems}
                 className={{
                   containerClassName: 'm-0',
                   tableWrapperClassName: 'overflow-x-auto',
@@ -755,7 +758,7 @@ const PurchaseOrderDetail = ({
             </div>
 
             {/* Bulk Action Buttons */}
-            {selectedRowIds.length > 0 && (
+            {selectedRowIds.length > 0 && canDeleteItems && (
               <div className='flex justify-center items-center mt-4 gap-4 px-6 py-4 bg-gray-50 border-t border-gray-200'>
                 <Button
                   type='button'

From 95a7afdaa653f166b59901cc040e37fb8a47afc6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 18:18:40 +0700
Subject: [PATCH 145/168] feat(FE-208): add refetchData prop to
 PurchaseOrderDetail and related forms for improved data synchronization

---
 src/app/purchase/detail/page.tsx              |  8 +++++--
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 13 ++++++++---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 16 +++++++++----
 .../purchase/order/PurchaseOrderDetail.tsx    | 23 +++++++++++++++----
 4 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 6ca2ffc7..955055a6 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -12,7 +12,7 @@ const PurchaseDetail = () => {
 
   const purchaseId = searchParams.get('purchaseId');
 
-  const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
+  const { data: purchase, isLoading: isLoadingPurchase, mutate: mutatePurchase } = useSWR(
     purchaseId,
     (id: number) => PurchaseApi.getSingle(id)
   );
@@ -40,7 +40,11 @@ const PurchaseDetail = () => {
         </div>
       )}
       {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseOrderDetail type='detail' initialValues={purchase.data} />
+        <PurchaseOrderDetail
+          type='detail'
+          initialValues={purchase.data}
+          refetchData={mutatePurchase}
+        />
       )}
     </div>
   );
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index bac362f9..eac38bbc 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -9,6 +9,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useRouter } from 'next/navigation';
 
 import {
   PurchaseRequestAcceptApprovalFormDefaultValues,
@@ -30,6 +31,7 @@ interface PurchaseOrderAcceptApprovalFormProps {
   onCancel?: () => void;
   refreshApprovals?: () => void;
   onModalClose?: () => void;
+  onRefetchData?: () => void;
 }
 
 const PurchaseOrderAcceptApprovalForm = ({
@@ -38,7 +40,9 @@ const PurchaseOrderAcceptApprovalForm = ({
   onCancel,
   refreshApprovals,
   onModalClose,
+  onRefetchData,
 }: PurchaseOrderAcceptApprovalFormProps) => {
+  const router = useRouter();
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
@@ -105,11 +109,13 @@ const PurchaseOrderAcceptApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
+      router.refresh();
     },
-    [initialValues?.id, searchParams, refreshApprovals, onModalClose]
+    [initialValues?.id, searchParams, refreshApprovals, onModalClose, onRefetchData]
   );
 
   const updateAcceptApprovalHandler = useCallback(
@@ -121,12 +127,13 @@ const PurchaseOrderAcceptApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
-      window.location.href = '/purchase';
+      router.refresh();
     },
-    [refreshApprovals, onModalClose]
+    [refreshApprovals, onModalClose, onRefetchData]
   );
 
   // ===== FORM CONFIGURATION =====
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 5717f4c1..d07270bd 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -8,7 +8,7 @@ import { useSearchParams } from 'next/navigation';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput from '@/components/input/SelectInput';
 
 import {
   PurchaseRequestStaffApprovalFormDefaultValues,
@@ -22,7 +22,7 @@ import {
   UpdateStaffApprovalRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
-import { router } from 'next/client';
+import { useRouter } from 'next/navigation';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -30,6 +30,7 @@ interface PurchaseOrderStaffApprovalFormProps {
   onCancel?: () => void;
   refreshApprovals?: () => void;
   onModalClose?: () => void;
+  onRefetchData?: () => void;
 }
 
 const PurchaseOrderStaffApprovalForm = ({
@@ -38,7 +39,9 @@ const PurchaseOrderStaffApprovalForm = ({
   onCancel,
   refreshApprovals,
   onModalClose,
+  onRefetchData,
 }: PurchaseOrderStaffApprovalFormProps) => {
+  const router = useRouter();
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
@@ -104,11 +107,13 @@ const PurchaseOrderStaffApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
+      router.refresh();
     },
-    [initialValues?.id, searchParams, refreshApprovals, onModalClose]
+    [initialValues?.id, searchParams, refreshApprovals, onModalClose, onRefetchData]
   );
 
   const updateStaffApprovalHandler = useCallback(
@@ -120,12 +125,13 @@ const PurchaseOrderStaffApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
-      await router.push(`/purchase/detail?purchaseId=${purchaseId}`);
+      router.refresh();
     },
-    [refreshApprovals, onModalClose]
+    [refreshApprovals, onModalClose, onRefetchData]
   );
 
   // ===== FORM CONFIGURATION =====
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 88f622b5..9d479e63 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -69,11 +69,13 @@ const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
   initialValues?: Purchase;
+  refetchData?: () => void;
 }
 
 const PurchaseOrderDetail = ({
   type = 'detail',
   initialValues,
+  refetchData,
 }: PurchaseOrderDetailProps) => {
   // ===== MODAL HOOKS =====
   const searchParams = useSearchParams();
@@ -251,8 +253,9 @@ const PurchaseOrderDetail = ({
       }
       toast.success(res?.message as string);
       refreshApprovals();
+      refetchData?.();
     },
-    [initialValues?.id, searchParams, refreshApprovals]
+    [initialValues?.id, searchParams, refreshApprovals, refetchData]
   );
 
   const createManagerApprovalHandler = useCallback(
@@ -276,20 +279,23 @@ const PurchaseOrderDetail = ({
         return;
       }
       toast.success(res?.message as string);
+      refetchData?.();
     },
-    [initialValues?.id, searchParams]
+    [initialValues?.id, searchParams, refetchData]
   );
 
   // ===== MODAL HANDLERS =====
   const handleStaffApprovalModalClose = useCallback(() => {
     refreshApprovals();
+    refetchData?.();
     staffApprovalModal.closeModal();
-  }, [refreshApprovals]);
+  }, [refreshApprovals, refetchData]);
 
   const handleEditModalClose = useCallback(() => {
     refreshApprovals();
+    refetchData?.();
     editModal.closeModal();
-  }, [refreshApprovals]);
+  }, [refreshApprovals, refetchData]);
 
   // ===== DELETE HANDLER =====
   const deleteItemsHandler = useCallback(async () => {
@@ -327,6 +333,7 @@ const PurchaseOrderDetail = ({
 
       toast.success(successMessage);
       refreshApprovals();
+      refetchData?.();
       deleteModal.closeModal();
       setSelectedItem(null);
       setRowSelection({});
@@ -335,7 +342,7 @@ const PurchaseOrderDetail = ({
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds]);
+  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds, refetchData]);
 
   if (!initialValues) {
     return null;
@@ -901,6 +908,7 @@ const PurchaseOrderDetail = ({
 
             await createManagerApprovalHandler(payload);
             await refreshApprovals();
+            await refetchData?.();
             confirmationModalWithNotes.closeModal();
           },
         }}
@@ -923,6 +931,7 @@ const PurchaseOrderDetail = ({
           onCancel={handleStaffApprovalModalClose}
           refreshApprovals={refreshApprovals}
           onModalClose={staffApprovalModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -940,6 +949,7 @@ const PurchaseOrderDetail = ({
           onCancel={acceptApprovalModal.closeModal}
           refreshApprovals={refreshApprovals}
           onModalClose={acceptApprovalModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -957,6 +967,7 @@ const PurchaseOrderDetail = ({
           onCancel={handleEditModalClose}
           refreshApprovals={refreshApprovals}
           onModalClose={editModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -974,6 +985,7 @@ const PurchaseOrderDetail = ({
           onCancel={penerimaanBarangModal.closeModal}
           refreshApprovals={refreshApprovals}
           onModalClose={penerimaanBarangModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -996,6 +1008,7 @@ const PurchaseOrderDetail = ({
             };
 
             await createStaffApprovalHandler(payload);
+            await refetchData?.();
             staffRejectionModal.closeModal();
           },
         }}

From b9990e0253465d2e823624753ce38d4cbf90eecf Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 18:54:17 +0700
Subject: [PATCH 146/168] refactor(FE-208): enhance PurchaseRequestForm to
 fetch and display supplier-specific products

---
 .../form/request/PurchaseRequestForm.tsx      | 78 +++++++++++--------
 src/types/api/master-data/supplier.d.ts       | 12 +++
 2 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 7c6d64e1..6fdbc78f 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -30,9 +30,9 @@ import {
   WarehouseApi,
   ProductApi,
 } from '@/services/api/master-data';
-import { Supplier } from '@/types/api/master-data/supplier';
-import { Product } from '@/types/api/master-data/product';
+import { Supplier, SupplierProducts } from '@/types/api/master-data/supplier';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
 import { PurchaseApi } from '@/services/api/purchase';
 
 import Card from '@/components/Card';
@@ -148,7 +148,9 @@ const PurchaseRequestForm = ({
     options: supplierOptions,
     isLoadingOptions: isLoadingSuppliers,
     rawData: supplierRawData,
-  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'SAPRONAK',
+  });
 
   const {
     setInputValue: setAreaSelectInputValue,
@@ -211,31 +213,39 @@ const PurchaseRequestForm = ({
   });
 
   // ===== API DATA FETCHING =====
-  const { data: productsResponse, isLoading: isLoadingProducts } = useSWR(
-    `${ProductApi.basePath}`,
-    ProductApi.getAllFetcher
+  const { data: supplierData, isLoading: isLoadingProducts } = useSWR(
+    formik.values.supplier_id?.toString(),
+    (id: string) => SupplierApi.getSingle(Number(id))
   );
 
-  const productOptions = useMemo(() => {
-    if (!isResponseSuccess(productsResponse)) return [];
+  const supplierProductOptions = useMemo(() => {
+    if (!supplierData || !isResponseSuccess(supplierData)) {
+      return [];
+    }
 
-    return (
-      productsResponse?.data.map((product: Product) => ({
-        value: product.id,
-        label: product.name,
-      })) || []
-    );
-  }, [productsResponse]);
+    const supplier = supplierData.data as SupplierProducts;
+    const products = supplier.products || [];
+    return products.map((product) => ({
+      value: product.id,
+      label: product.name,
+    }));
+  }, [supplierData]);
 
-  const productData = useMemo(() => {
-    if (!isResponseSuccess(productsResponse)) return {};
+  const supplierProductData = useMemo(() => {
+    if (!supplierData || !isResponseSuccess(supplierData)) {
+      return {};
+    }
 
-    const data: Record<number, Product> = {};
-    productsResponse?.data?.forEach((product: Product) => {
+    const supplier = supplierData.data as SupplierProducts;
+    const products = supplier.products || [];
+    const data: Record<number, NonNullable<typeof supplier.products>[0]> = {};
+
+    products.forEach((product) => {
       data[product.id] = product;
     });
+
     return data;
-  }, [productsResponse]);
+  }, [supplierData]);
 
   const locationsUrl = useMemo(() => {
     const params = new URLSearchParams({
@@ -704,7 +714,7 @@ const PurchaseRequestForm = ({
                               productId
                             );
                           }}
-                          options={productOptions}
+                          options={supplierProductOptions}
                           isLoading={isLoadingProducts}
                           isError={
                             isRepeaterInputError(idx, 'product_id').isError
@@ -764,11 +774,13 @@ const PurchaseRequestForm = ({
                           required
                           name={`items.${idx}.price`}
                           value={
-                            item.product_id && productData[item.product_id]
-                              ? (
-                                  productData[item.product_id].product_price *
+                            item.product_id &&
+                            supplierProductData[item.product_id]
+                              ? formatNumber(
+                                  supplierProductData[item.product_id]
+                                    .ProductPrice *
                                   (parseFloat(item.qty?.toString() || '0') || 0)
-                                ).toLocaleString('en-US')
+                                )
                               : ''
                           }
                           onChange={() => {}}
@@ -786,10 +798,13 @@ const PurchaseRequestForm = ({
                               : 'Pilih produk terlebih dahulu'
                           }
                           bottomLabel={
-                            item.product_id && productData[item.product_id]
-                              ? `Harga per unit: Rp ${productData[
-                                  item.product_id
-                                ].product_price.toLocaleString('en-US')}`
+                            item.product_id &&
+                            supplierProductData[item.product_id]
+                              ? `Harga per unit: Rp ${formatNumber(
+                                  supplierProductData[
+                                    item.product_id
+                                  ].ProductPrice
+                                )}`
                               : ''
                           }
                         />
@@ -799,8 +814,9 @@ const PurchaseRequestForm = ({
                           required
                           name={`items.${idx}.uom`}
                           value={
-                            item.product_id && productData[item.product_id]
-                              ? productData[item.product_id].uom.name
+                            item.product_id &&
+                            supplierProductData[item.product_id]
+                              ? supplierProductData[item.product_id].uom.name
                               : ''
                           }
                           onBlur={formik.handleBlur}
diff --git a/src/types/api/master-data/supplier.d.ts b/src/types/api/master-data/supplier.d.ts
index 3782cddb..81d41771 100644
--- a/src/types/api/master-data/supplier.d.ts
+++ b/src/types/api/master-data/supplier.d.ts
@@ -1,4 +1,5 @@
 import { BaseMetadata } from '@/types/api/api-general';
+import { Uom } from '@/types/api/master-data/uom';
 
 export type BaseSupplier = {
   id: number;
@@ -19,6 +20,17 @@ export type BaseSupplier = {
 
 export type Supplier = BaseMetadata & BaseSupplier;
 
+export type SupplierProducts = Supplier & {
+  products?: Array<{
+    id: number;
+    name: string;
+    ProductPrice: number;
+    SellingPrice?: number;
+    uom: Uom;
+    flags: string[];
+  }>;
+};
+
 export type CreateSupplierPayload = {
   name: string;
   alias: string;

From 1a74a9d33f6672b60ab633287ea4a7b8b8d54c96 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 20:23:58 +0700
Subject: [PATCH 147/168] feat(FE-208,212,213): integrate dynamic supplier
 selection in PurchaseOrderAcceptApprovalForm

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 63 +++++++------------
 1 file changed, 23 insertions(+), 40 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index eac38bbc..5cf5e85e 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -8,7 +8,10 @@ import { useSearchParams } from 'next/navigation';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useRouter } from 'next/navigation';
 
 import {
@@ -24,6 +27,8 @@ import {
 } from '@/types/api/purchase/purchase';
 import DateInput from '@/components/input/DateInput';
 import { formatNumber } from '@/lib/helper';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { SupplierApi } from '@/services/api/master-data';
 
 interface PurchaseOrderAcceptApprovalFormProps {
   type?: 'add' | 'edit';
@@ -47,13 +52,6 @@ const PurchaseOrderAcceptApprovalForm = ({
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
 
-  // ===== TYPE DEFINITIONS =====
-  interface ExpeditionVendorOptionType {
-    value: number;
-    label: string;
-    id: number;
-  }
-
   // ===== UTILITY FUNCTIONS =====
   const isRepeaterInputError = (
     idx: number,
@@ -115,7 +113,13 @@ const PurchaseOrderAcceptApprovalForm = ({
       onModalClose?.();
       router.refresh();
     },
-    [initialValues?.id, searchParams, refreshApprovals, onModalClose, onRefetchData]
+    [
+      initialValues?.id,
+      searchParams,
+      refreshApprovals,
+      onModalClose,
+      onRefetchData,
+    ]
   );
 
   const updateAcceptApprovalHandler = useCallback(
@@ -136,6 +140,15 @@ const PurchaseOrderAcceptApprovalForm = ({
     [refreshApprovals, onModalClose, onRefetchData]
   );
 
+  // ===== SELECT INPUT DATA =====
+  const {
+    setInputValue: setExpeditionsSelectInputValue,
+    options: expeditionVendors,
+    isLoadingOptions: isLoadingExpeditions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'BOP',
+  });
+
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo(() => {
     return initialValues
@@ -250,36 +263,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     [purchaseItems]
   );
 
-  const expeditionVendors: ExpeditionVendorOptionType[] = useMemo(() => {
-    return [
-      {
-        value: 1,
-        label: 'PT. Ekspedisi Sejahtera',
-        id: 1,
-      },
-      {
-        value: 2,
-        label: 'PT. Jaya Trans Logistics',
-        id: 2,
-      },
-      {
-        value: 3,
-        label: 'PT. Cargo Express Indonesia',
-        id: 3,
-      },
-      {
-        value: 4,
-        label: 'PT. Fast Delivery Service',
-        id: 4,
-      },
-      {
-        value: 5,
-        label: 'PT. Mitra Angkutan Sejahtera',
-        id: 5,
-      },
-    ];
-  }, []);
-
   const getExpeditionVendorOptions = useCallback(() => {
     return expeditionVendors;
   }, [expeditionVendors]);
@@ -289,7 +272,7 @@ const PurchaseOrderAcceptApprovalForm = ({
     idx: number,
     val: OptionType | OptionType[] | null
   ) => {
-    const expeditionVendor = val as ExpeditionVendorOptionType | null;
+    const expeditionVendor = val as OptionType | null;
     formik.setFieldTouched(`items.${idx}.expedition_vendor`, true);
     formik.setFieldValue(`items.${idx}.expedition_vendor`, expeditionVendor);
     formik.setFieldTouched(`items.${idx}.expedition_vendor_id`, true);

From ffea96edf999efc95ea3b4d2380df7028d7fe06c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 20:30:06 +0700
Subject: [PATCH 148/168] refactor(FE-208): update deletion logic in
 PurchaseOrderDetail to allow item deletion only at approval step 3

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 61 ++++++++++++-------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 9d479e63..6bc5d99b 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -1,7 +1,12 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
-import { ColumnDef, SortingState, Row, Table as TableType } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  SortingState,
+  Row,
+  Table as TableType,
+} from '@tanstack/react-table';
 
 import ApprovalSteps, {
   useApprovalSteps,
@@ -160,7 +165,7 @@ const PurchaseOrderDetail = ({
 
   const canDeleteItems = useMemo(() => {
     if (!initialValues?.approval) return false;
-    return initialValues.approval.step_number >= 3;
+    return initialValues.approval.step_number === 3;
   }, [initialValues?.approval]);
 
   const handleApprovalClick = () => {
@@ -342,7 +347,13 @@ const PurchaseOrderDetail = ({
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds, refetchData]);
+  }, [
+    initialValues?.id,
+    searchParams,
+    selectedItem,
+    selectedRowIds,
+    refetchData,
+  ]);
 
   if (!initialValues) {
     return null;
@@ -427,27 +438,31 @@ const PurchaseOrderDetail = ({
       header: 'Total (Rp.)',
       cell: (props) => formatCurrency(props.getValue() as number),
     },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        const deleteClickHandler = () => {
-          setSelectedItem(props.row.original);
-          setRowSelection({});
-          deleteModal.openModal();
-        };
+    ...(canDeleteItems
+      ? [
+          {
+            header: 'Aksi',
+            cell: (props: { row: Row<PurchaseItem> }) => {
+              const deleteClickHandler = () => {
+                setSelectedItem(props.row.original);
+                setRowSelection({});
+                deleteModal.openModal();
+              };
 
-        return canDeleteItems ? (
-          <Button
-            type='button'
-            color='error'
-            className='text-sm'
-            onClick={deleteClickHandler}
-          >
-            <Icon icon='mdi:trash-can' width={16} height={16} />
-          </Button>
-        ) : null;
-      },
-    },
+              return (
+                <Button
+                  type='button'
+                  color='error'
+                  className='text-sm'
+                  onClick={deleteClickHandler}
+                >
+                  <Icon icon='mdi:trash-can' width={16} height={16} />
+                </Button>
+              );
+            },
+          },
+        ]
+      : []),
   ];
 
   const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [

From 5b28067203d9b5f68b398817a3ea66291cff27c1 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 21 Nov 2025 22:46:50 +0700
Subject: [PATCH 149/168] feat(FE-208,212,213): enhance
 PurchaseOrderStaffApprovalForm with product and warehouse selection for new
 items

---
 .../form/order/PurchaseOrderForm.schema.ts    |  95 ++-
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 568 +++++++++++++++---
 src/types/api/purchase/purchase.d.ts          |   8 +-
 3 files changed, 593 insertions(+), 78 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index bfe4ed92..e0a5b7e4 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -6,6 +6,16 @@ type PurchaseRequestStaffApprovalFormSchemaType = {
   notes: string | null;
   items: {
     purchase_item_id?: number;
+    product_id?: number | null;
+    warehouse_id?: number | null;
+    product?: {
+      value: number;
+      label: string;
+    } | null;
+    warehouse?: {
+      value: number;
+      label: string;
+    } | null;
     qty: number;
     price: number | string;
     total_price: number | string;
@@ -41,6 +51,16 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
 
 export type PurchaseStaffApprovalItemSchema = {
   purchase_item_id?: number;
+  product_id?: number | null;
+  warehouse_id?: number | null;
+  product?: {
+    value: number;
+    label: string;
+  } | null;
+  warehouse?: {
+    value: number;
+    label: string;
+  } | null;
   qty: number;
   price: number | string;
   total_price: number | string;
@@ -74,8 +94,28 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
   Yup.object({
     purchase_item_id: Yup.number()
       .optional()
-      .min(1, 'Purchase item ID tidak valid!')
+      .min(0, 'Purchase item ID tidak valid!')
       .typeError('Purchase item ID harus berupa angka!'),
+    product: Yup.object({
+      value: Yup.number().required(),
+      label: Yup.string().required(),
+    })
+      .nullable()
+      .optional(),
+    product_id: Yup.number()
+      .optional()
+      .nullable()
+      .typeError('Product ID harus berupa angka!'),
+    warehouse: Yup.object({
+      value: Yup.number().required(),
+      label: Yup.string().required(),
+    })
+      .nullable()
+      .optional(),
+    warehouse_id: Yup.number()
+      .optional()
+      .nullable()
+      .typeError('Warehouse ID harus berupa angka!'),
     qty: Yup.number()
       .required('Jumlah wajib diisi!')
       .min(1, 'Jumlah harus berupa angka lebih dari 0!')
@@ -217,7 +257,36 @@ export const PurchaseRequestStaffApprovalFormSchema: Yup.ObjectSchema<PurchaseRe
       .of(PurchaseStaffApprovalItemObjectSchema)
       .min(1, 'Minimal harus ada 1 item pembelian!')
       .required('Item pembelian wajib diisi!')
-      .typeError('Item pembelian wajib diisi!'),
+      .typeError('Item pembelian wajib diisi!')
+      .test(
+        'items-validation',
+        'Setiap item harus valid: existing items hanya butuh purchase_item_id, new items butuh product_id & warehouse_id',
+        function (items) {
+          if (!items || items.length === 0) return false;
+
+          return items.every((item) => {
+            const isExisting =
+              item.purchase_item_id && item.purchase_item_id > 0;
+
+            const isNew = !item.purchase_item_id || item.purchase_item_id === 0;
+
+            if (isExisting) {
+              return true;
+            }
+
+            if (isNew) {
+              return Boolean(
+                item.product_id &&
+                  item.product_id > 0 &&
+                  item.warehouse_id &&
+                  item.warehouse_id > 0
+              );
+            }
+
+            return false;
+          });
+        }
+      ),
   });
 
 export const PurchaseDeleteItemsSchema: Yup.ObjectSchema<PurchaseDeleteItemsSchema> =
@@ -240,7 +309,10 @@ export const PurchaseRequestStaffApprovalFormInitialValues: PurchaseRequestStaff
     notes: '',
     items: [
       {
-        purchase_item_id: 0,
+        product_id: 0,
+        warehouse_id: 0,
+        product: null,
+        warehouse: null,
         qty: 0,
         price: '',
         total_price: '',
@@ -257,13 +329,26 @@ export const PurchaseRequestStaffApprovalFormDefaultValues = (
     items: purchase?.items
       ? purchase.items.map((item) => ({
           purchase_item_id: item.id,
-          qty: item.qty,
+          product_id: item.product_id || 0,
+          warehouse_id: item.warehouse?.id || 0,
+          product: {
+            value: item.product_id || 0,
+            label: item.product?.name || '',
+          },
+          warehouse: {
+            value: item.warehouse?.id || 0,
+            label: item.warehouse?.name || '',
+          },
+          qty: item.sub_qty || item.qty || 0,
           price: item.price,
           total_price: item.total_price,
         }))
       : [
           {
-            purchase_item_id: 0,
+            product_id: 0,
+            warehouse_id: 0,
+            product: null,
+            warehouse: null,
             qty: 0,
             price: '',
             total_price: '',
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index d07270bd..8a988bae 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -5,15 +5,25 @@ import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { useModal } from '@/components/Modal';
+import { WarehouseApi, SupplierApi } from '@/services/api/master-data';
+import { SupplierProducts } from '@/types/api/master-data/supplier';
+import { isResponseSuccess } from '@/lib/api-helper';
 
 import {
   PurchaseRequestStaffApprovalFormDefaultValues,
   PurchaseRequestStaffApprovalFormInitialValues,
   PurchaseRequestStaffApprovalFormSchema,
+  PurchaseStaffApprovalItemSchema,
 } from './PurchaseOrderForm.schema';
 import { isResponseError } from '@/lib/api-helper';
 import { PurchaseApi } from '@/services/api/purchase';
@@ -43,8 +53,15 @@ const PurchaseOrderStaffApprovalForm = ({
 }: PurchaseOrderStaffApprovalFormProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const deleteModal = useModal();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
+  const [selectedItemForDelete, setSelectedItemForDelete] = useState<
+    number | null
+  >(null);
+  const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(
+    null
+  );
 
   // ===== UTILITY FUNCTIONS =====
   const canUpdatePurchaseItems = useMemo(() => {
@@ -55,19 +72,11 @@ const PurchaseOrderStaffApprovalForm = ({
   }, [initialValues?.approval]);
 
   const isRepeaterInputError = (
-    purchaseItemId: number,
-    field: 'price' | 'total_price'
+    idx: number,
+    field: 'price' | 'total_price' | 'product_id' | 'warehouse_id'
   ): { isError: boolean; errorMessage: string } => {
-    const formItemIndex = formik.values.items?.findIndex(
-      (item) => item.purchase_item_id === purchaseItemId
-    );
-
-    if (formItemIndex === -1) {
-      return { isError: false, errorMessage: '' };
-    }
-
-    const touchedItem = formik.touched.items?.[formItemIndex];
-    const errorItem = formik.errors.items?.[formItemIndex] as
+    const touchedItem = formik.touched.items?.[idx];
+    const errorItem = formik.errors.items?.[idx] as
       | Record<string, string>
       | undefined;
 
@@ -84,6 +93,10 @@ const PurchaseOrderStaffApprovalForm = ({
     };
   };
 
+  const isNewItem = (item: PurchaseStaffApprovalItemSchema) => {
+    return !item.purchase_item_id || item.purchase_item_id === 0;
+  };
+
   // ===== SUBMISSION HANDLERS =====
   const createStaffApprovalHandler = useCallback(
     async (payload: CreateStaffApprovalRequestPayload) => {
@@ -113,7 +126,13 @@ const PurchaseOrderStaffApprovalForm = ({
       onModalClose?.();
       router.refresh();
     },
-    [initialValues?.id, searchParams, refreshApprovals, onModalClose, onRefetchData]
+    [
+      initialValues?.id,
+      searchParams,
+      refreshApprovals,
+      onModalClose,
+      onRefetchData,
+    ]
   );
 
   const updateStaffApprovalHandler = useCallback(
@@ -134,6 +153,86 @@ const PurchaseOrderStaffApprovalForm = ({
     [refreshApprovals, onModalClose, onRefetchData]
   );
 
+  // ===== DELETE HANDLER =====
+  const deleteItemsHandler = useCallback(async () => {
+    const purchaseRequestId = searchParams.get('purchaseId')
+      ? parseInt(searchParams.get('purchaseId')!)
+      : initialValues?.id || 1;
+
+    if (!purchaseRequestId) {
+      toast.error('Purchase Request ID is required');
+      return;
+    }
+
+    const itemIdsToDelete = selectedItemForDelete
+      ? [selectedItemForDelete]
+      : [];
+
+    if (itemIdsToDelete.length === 0) {
+      toast.error('Tidak ada item yang dipilih untuk dihapus');
+      return;
+    }
+
+    try {
+      const res = await PurchaseApi.items.delete(purchaseRequestId, {
+        item_ids: itemIdsToDelete,
+      });
+
+      if (isResponseError(res)) {
+        toast.error(res.message || 'Gagal menghapus item pembelian');
+        return;
+      }
+
+      const successMessage = 'Item pembelian berhasil dihapus';
+      toast.success(successMessage);
+
+      refreshApprovals?.();
+      onRefetchData?.();
+      deleteModal.closeModal();
+      setSelectedItemForDelete(null);
+      setSelectedItemIndex(null);
+
+      if (selectedItemIndex !== null) {
+        const updatedPurchaseItems = formik.values.items?.filter(
+          (_, i) => i !== selectedItemIndex
+        );
+        formik.setFieldValue('items', updatedPurchaseItems);
+      }
+    } catch (error) {
+      toast.error('Terjadi kesalahan saat menghapus item pembelian');
+      console.error('Delete item error:', error);
+    }
+  }, [
+    initialValues?.id,
+    searchParams,
+    selectedItemForDelete,
+    selectedItemIndex,
+    refreshApprovals,
+    onRefetchData,
+    deleteModal,
+  ]);
+
+  // ===== API DATA FETCHING FOR SUPPLIER PRODUCTS =====
+  const { data: supplierData, isLoading: isLoadingSupplierProducts } = useSWR(
+    initialValues?.supplier?.id
+      ? SupplierApi.basePath + '/' + initialValues.supplier.id
+      : null,
+    (url: string) => SupplierApi.getSingle(Number(url.split('/').pop()))
+  );
+
+  const supplierProductOptions = useMemo(() => {
+    if (!supplierData || !isResponseSuccess(supplierData)) {
+      return [];
+    }
+
+    const supplier = supplierData.data as SupplierProducts;
+    const products = supplier.products || [];
+    return products.map((product) => ({
+      value: product.id,
+      label: product.name,
+    }));
+  }, [supplierData]);
+
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo(() => {
     return initialValues
@@ -154,35 +253,97 @@ const PurchaseOrderStaffApprovalForm = ({
         return;
       }
 
-      const payload: CreateStaffApprovalRequestPayload = {
-        action: values.action || 'APPROVED',
-        notes: values.notes || '',
-        items: purchaseItems.map((purchaseItem, idx) => {
-          const formItem = values.items?.[idx];
-          return {
-            purchase_item_id: purchaseItem.id,
-            qty: purchaseItem.quantity || 0,
+      const itemsPayload = (values.items || []).map((formItem) => {
+        const isNewItemForm =
+          !formItem.purchase_item_id || formItem.purchase_item_id === 0;
+
+        let cleanPayload: UpdateStaffApprovalRequestPayload['items'][0];
+
+        if (isNewItemForm) {
+          cleanPayload = {
+            product_id: Number(formItem.product_id) || 0,
+            warehouse_id: Number(formItem.warehouse_id) || 0,
+            qty: Number(formItem.qty) || 0,
             price:
-              typeof formItem?.price === 'string'
+              typeof formItem.price === 'string'
                 ? parseFloat(formItem.price) || 0
-                : formItem?.price || 0,
+                : Number(formItem.price) || 0,
             total_price:
-              typeof formItem?.total_price === 'string'
+              typeof formItem.total_price === 'string'
                 ? parseFloat(formItem.total_price) || 0
-                : formItem?.total_price || 0,
+                : Number(formItem.total_price) || 0,
           };
-        }),
+        } else {
+          cleanPayload = {
+            purchase_item_id: Number(formItem.purchase_item_id) || 0,
+            qty: Number(formItem.qty) || 0,
+            price:
+              typeof formItem.price === 'string'
+                ? parseFloat(formItem.price) || 0
+                : Number(formItem.price) || 0,
+            total_price:
+              typeof formItem.total_price === 'string'
+                ? parseFloat(formItem.total_price) || 0
+                : Number(formItem.total_price) || 0,
+          };
+        }
+        return cleanPayload;
+      });
+
+      const payload: UpdateStaffApprovalRequestPayload = {
+        action: values.action || 'APPROVED',
+        notes: values.notes || null,
+        items: itemsPayload,
       };
 
       if (type === 'add') {
-        await createStaffApprovalHandler(payload);
+        await createStaffApprovalHandler(
+          payload as CreateStaffApprovalRequestPayload
+        );
       } else if (type === 'edit') {
+        const updateItemsPayload = (values.items || []).map((formItem) => {
+          const isNewItemForm =
+            !formItem.purchase_item_id || formItem.purchase_item_id === 0;
+
+          let cleanPayload: UpdateStaffApprovalRequestPayload['items'][0];
+
+          if (isNewItemForm) {
+            cleanPayload = {
+              product_id: Number(formItem.product_id) || 0,
+              warehouse_id: Number(formItem.warehouse_id) || 0,
+              qty: Number(formItem.qty) || 0,
+              price:
+                typeof formItem.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : Number(formItem.price) || 0,
+              total_price:
+                typeof formItem.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : Number(formItem.total_price) || 0,
+            };
+          } else {
+            cleanPayload = {
+              purchase_item_id: Number(formItem.purchase_item_id) || 0,
+              qty: Number(formItem.qty) || 0,
+              price:
+                typeof formItem.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : Number(formItem.price) || 0,
+              total_price:
+                typeof formItem.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : Number(formItem.total_price) || 0,
+            };
+          }
+
+          return cleanPayload;
+        });
+
         const updatePayload: UpdateStaffApprovalRequestPayload = {
           action: values.action || 'APPROVED',
           notes: values.notes || null,
-          items: payload.items,
+          items: updateItemsPayload,
         };
-
         await updateStaffApprovalHandler(
           initialValues?.id as number,
           updatePayload
@@ -198,7 +359,7 @@ const PurchaseOrderStaffApprovalForm = ({
         value: item.id,
         label: item.product.name,
         id: item.id,
-        quantity: item.sub_qty,
+        quantity: item.sub_qty || item.qty || 0,
         product_id: item.product_id,
         warehouse_id: item.warehouse.id,
         product: {
@@ -244,68 +405,113 @@ const PurchaseOrderStaffApprovalForm = ({
     return Object.values(warehouseGroups);
   }, [purchaseItems]);
 
-  const productOptions = useMemo(() => {
-    return purchaseItems.map((item) => ({
-      value: item.product_id,
-      label: item.product.name,
-    }));
-  }, [purchaseItems]);
-
   useEffect(() => {
     if (purchaseItems.length > 0 && initialValues?.items) {
-      const updatedItems = purchaseItems.map((purchaseItem, idx) => {
+      const updatedItems = purchaseItems.map((purchaseItem) => {
         const originalItem = initialValues.items?.find(
           (item) => item.id === purchaseItem.id
         );
-        return {
+        const itemData = {
           purchase_item_id: purchaseItem.id,
           product_id: purchaseItem.product_id || 0,
           warehouse_id: purchaseItem.warehouse_id || 0,
-          qty: purchaseItem.quantity || 0,
+          qty: originalItem?.qty || purchaseItem.quantity || 0,
           price: type === 'edit' && originalItem ? originalItem.price : '',
           total_price:
             type === 'edit' && originalItem ? originalItem.total_price : '',
         };
+        return itemData;
       });
       formik.setFieldValue('items', updatedItems);
     }
   }, [purchaseItems, type, initialValues]);
 
   // ===== PURCHASE ITEM OPERATIONS =====
+  const addPurchaseItem = () => {
+    const existingWarehouseId =
+      formik.values.items?.find((item) => (item.warehouse_id || 0) > 0)
+        ?.warehouse_id ||
+      groupedPurchaseItems[0]?.warehouseId ||
+      0;
+
+    const warehouseObject = initialValues?.items?.find(
+      (item) => item.warehouse.id === existingWarehouseId
+    )?.warehouse;
+
+    const newItem = {
+      product_id: 0,
+      product: null,
+      warehouse_id: existingWarehouseId,
+      warehouse: warehouseObject
+        ? {
+            value: warehouseObject.id,
+            label: warehouseObject.name,
+          }
+        : null,
+      qty: 0,
+      price: '',
+      total_price: '',
+    };
+    const newItems = [...(formik.values.items || []), newItem];
+    formik.setFieldValue('items', newItems);
+  };
+
+  const removePurchaseItem = (idx: number) => {
+    const itemToRemove = formik.values.items?.[idx];
+
+    if (
+      !itemToRemove?.purchase_item_id ||
+      itemToRemove.purchase_item_id === 0
+    ) {
+      const updatedPurchaseItems = formik.values.items?.filter(
+        (_, i) => i !== idx
+      );
+      formik.setFieldValue('items', updatedPurchaseItems);
+      return;
+    }
+    setSelectedItemForDelete(itemToRemove.purchase_item_id);
+    setSelectedItemIndex(idx);
+    deleteModal.openModal();
+  };
+
+  const handleProductChange = (
+    idx: number,
+    val: OptionType | OptionType[] | null
+  ) => {
+    const product = val as OptionType | null;
+    const productId = (product as OptionType)?.value || 0;
+
+    formik.setFieldTouched(`items.${idx}.product`, true);
+    formik.setFieldValue(`items.${idx}.product`, product);
+    formik.setFieldTouched(`items.${idx}.product_id`, true);
+    formik.setFieldValue(`items.${idx}.product_id`, productId);
+  };
+
   const handlePurchaseItemChange = (
-    purchaseItemId: number,
+    idx: number,
     field: 'price' | 'total_price',
     value: string | number
   ) => {
-    const formItemIndex = formik.values.items?.findIndex(
-      (item) => item.purchase_item_id === purchaseItemId
-    );
-    const purchaseItem = purchaseItems.find(
-      (item) => item.id === purchaseItemId
-    );
+    const formItem = formik.values.items?.[idx];
 
-    if (formItemIndex === -1 || !purchaseItem) return;
+    if (!formItem) {
+      return;
+    }
 
     if (field === 'price' || field === 'total_price') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
-      formik.setFieldValue(`items.${formItemIndex}.${field}`, numValue);
 
-      if (field === 'price' && purchaseItem.quantity > 0 && numValue >= 0) {
-        const calculatedTotal = numValue * purchaseItem.quantity;
-        formik.setFieldValue(
-          `items.${formItemIndex}.total_price`,
-          calculatedTotal
-        );
+      formik.setFieldValue(`items.${idx}.${field}`, numValue);
+
+      if (field === 'price' && formItem.qty > 0 && numValue >= 0) {
+        const calculatedTotal = numValue * formItem.qty;
+        formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
       }
 
-      if (
-        field === 'total_price' &&
-        purchaseItem.quantity > 0 &&
-        numValue >= 0
-      ) {
-        const calculatedPrice = numValue / purchaseItem.quantity;
-        formik.setFieldValue(`items.${formItemIndex}.price`, calculatedPrice);
+      if (field === 'total_price' && formItem.qty > 0 && numValue >= 0) {
+        const calculatedPrice = numValue / formItem.qty;
+        formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
       }
     }
   };
@@ -350,9 +556,11 @@ const PurchaseOrderStaffApprovalForm = ({
                                 Total (Rp.)
                                 <span className='text-error'>*</span>
                               </th>
+                              <th>Action</th>
                             </tr>
                           </thead>
                           <tbody>
+                            {/* Existing Items */}
                             {warehouseData.items.map((purchaseItem) => {
                               const formItem = formik.values.items?.find(
                                 (item) =>
@@ -363,6 +571,13 @@ const PurchaseOrderStaffApprovalForm = ({
                                   (item) =>
                                     item.purchase_item_id === purchaseItem.id
                                 );
+
+                              if (
+                                !formItem?.purchase_item_id ||
+                                formItem.purchase_item_id === 0
+                              )
+                                return null;
+
                               return (
                                 <tr key={`purchase-item-${purchaseItem.id}`}>
                                   <td>
@@ -373,7 +588,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                         label:
                                           purchaseItem?.product?.name || '',
                                       }}
-                                      options={productOptions}
+                                      options={supplierProductOptions}
                                       isClearable={false}
                                       isSearchable={false}
                                       className={{
@@ -441,7 +656,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                       value={formItem?.price || ''}
                                       onChange={(e) =>
                                         handlePurchaseItemChange(
-                                          purchaseItem.id,
+                                          formItemIndex,
                                           'price',
                                           e.target.value
                                         )
@@ -455,13 +670,13 @@ const PurchaseOrderStaffApprovalForm = ({
                                       inputPrefix={'Rp'}
                                       isError={
                                         isRepeaterInputError(
-                                          purchaseItem.id,
+                                          formItemIndex,
                                           'price'
                                         ).isError
                                       }
                                       errorMessage={
                                         isRepeaterInputError(
-                                          purchaseItem.id,
+                                          formItemIndex,
                                           'price'
                                         ).errorMessage
                                       }
@@ -478,7 +693,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                       value={formItem?.total_price || ''}
                                       onChange={(e) =>
                                         handlePurchaseItemChange(
-                                          purchaseItem.id,
+                                          formItemIndex,
                                           'total_price',
                                           e.target.value
                                         )
@@ -492,13 +707,13 @@ const PurchaseOrderStaffApprovalForm = ({
                                       inputPrefix={'Rp'}
                                       isError={
                                         isRepeaterInputError(
-                                          purchaseItem.id,
+                                          formItemIndex,
                                           'total_price'
                                         ).isError
                                       }
                                       errorMessage={
                                         isRepeaterInputError(
-                                          purchaseItem.id,
+                                          formItemIndex,
                                           'total_price'
                                         ).errorMessage
                                       }
@@ -508,6 +723,190 @@ const PurchaseOrderStaffApprovalForm = ({
                                       }}
                                     />
                                   </td>
+                                  <td>
+                                    <div className='flex justify-center'>
+                                      {canUpdatePurchaseItems && (
+                                        <Button
+                                          type='button'
+                                          color='error'
+                                          onClick={() =>
+                                            removePurchaseItem(formItemIndex)
+                                          }
+                                          title='Hapus item'
+                                        >
+                                          <Icon
+                                            icon='mdi:trash-can'
+                                            width={16}
+                                            height={16}
+                                          />
+                                        </Button>
+                                      )}
+                                    </div>
+                                  </td>
+                                </tr>
+                              );
+                            })}
+
+                            {/* New Items */}
+                            {formik.values.items?.map((formItem, idx) => {
+                              const isNewItemForm = isNewItem(formItem);
+                              if (!isNewItemForm) return null;
+
+                              return (
+                                <tr key={`new-item-${idx}`}>
+                                  <td>
+                                    <SelectInput
+                                      required
+                                      value={formItem.product}
+                                      onChange={(val) =>
+                                        handleProductChange(idx, val)
+                                      }
+                                      options={supplierProductOptions}
+                                      isLoading={isLoadingSupplierProducts}
+                                      isError={
+                                        isRepeaterInputError(idx, 'product_id')
+                                          .isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(idx, 'product_id')
+                                          .errorMessage
+                                      }
+                                      placeholder='Pilih Produk'
+                                      className={{
+                                        wrapper:
+                                          'min-w-52 md:min-w-72 lg:min-w-80',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${idx}.product_category`}
+                                      type='text'
+                                      readOnly={true}
+                                      className={{
+                                        wrapper:
+                                          'min-w-40 md:min-w-52 lg:min-w-64',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${idx}.qty`}
+                                      value={formItem?.qty || ''}
+                                      onChange={(e) => {
+                                        const numValue =
+                                          typeof e.target.value === 'string'
+                                            ? parseFloat(e.target.value) || 0
+                                            : e.target.value;
+                                        formik.setFieldValue(
+                                          `items.${idx}.qty`,
+                                          numValue
+                                        );
+                                      }}
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan jumlah'
+                                      allowNegative={false}
+                                      decimalScale={0}
+                                      className={{
+                                        wrapper: 'min-w-24',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <TextInput
+                                      name={`items.${idx}.uom`}
+                                      type='text'
+                                      readOnly={true}
+                                      className={{
+                                        wrapper: 'min-w-24',
+                                      }}
+                                      disabled={true}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${idx}.price`}
+                                      value={formItem?.price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          idx,
+                                          'price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan harga satuan'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      isError={
+                                        isRepeaterInputError(idx, 'price')
+                                          .isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(idx, 'price')
+                                          .errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <NumberInput
+                                      required
+                                      name={`items.${idx}.total_price`}
+                                      value={formItem?.total_price || ''}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          idx,
+                                          'total_price',
+                                          e.target.value
+                                        )
+                                      }
+                                      onBlur={formik.handleBlur}
+                                      placeholder='Masukkan total harga'
+                                      allowNegative={false}
+                                      decimalScale={2}
+                                      thousandSeparator=','
+                                      decimalSeparator='.'
+                                      inputPrefix={'Rp'}
+                                      isError={
+                                        isRepeaterInputError(idx, 'total_price')
+                                          .isError
+                                      }
+                                      errorMessage={
+                                        isRepeaterInputError(idx, 'total_price')
+                                          .errorMessage
+                                      }
+                                      className={{
+                                        wrapper:
+                                          'min-w-48 md:min-w-64 lg:min-w-72',
+                                      }}
+                                    />
+                                  </td>
+                                  <td>
+                                    <div className='flex justify-center'>
+                                      <Button
+                                        type='button'
+                                        color='error'
+                                        onClick={() => removePurchaseItem(idx)}
+                                        title='Hapus item baru'
+                                      >
+                                        <Icon
+                                          icon='mdi:trash-can'
+                                          width={16}
+                                          height={16}
+                                        />
+                                      </Button>
+                                    </div>
+                                  </td>
                                 </tr>
                               );
                             })}
@@ -516,6 +915,19 @@ const PurchaseOrderStaffApprovalForm = ({
                       </div>
                     </div>
 
+                    {/* Add Item Button */}
+                    <div className='flex justify-center items-center mt-4'>
+                      <Button
+                        type='button'
+                        color='success'
+                        onClick={addPurchaseItem}
+                        className='w-fit'
+                      >
+                        <Icon icon='ic:round-plus' width={24} height={24} />
+                        Tambah Item Baru
+                      </Button>
+                    </div>
+
                     {/* Add divider after table except for last item */}
                     {index < groupedPurchaseItems.length - 1 && (
                       <div className='border-t border-gray-200 my-6'></div>
@@ -583,6 +995,22 @@ const PurchaseOrderStaffApprovalForm = ({
           )}
         </div>
       </form>
+
+      {/* Delete Confirmation Modal */}
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menghapus item pembelian ini?'
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Hapus',
+          color: 'error',
+          onClick: deleteItemsHandler,
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
     </>
   );
 };
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index cb944ca0..56cbd810 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -92,12 +92,14 @@ export type CreateStaffApprovalRequestPayload = {
 export type UpdateStaffApprovalRequestPayload = {
   action: 'APPROVED' | 'REJECTED';
   notes?: string | null;
-  items: {
-    purchase_item_id: number;
+  items: Array<{
+    purchase_item_id?: number;
+    product_id?: number;
+    warehouse_id?: number;
     qty: number;
     price: number;
     total_price: number;
-  }[];
+  }>;
 };
 
 export type CreateManagerApprovalRequestPayload = {

From 30ab69ae217efa66680381e93267d79f13c2cd59 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 00:52:23 +0700
Subject: [PATCH 150/168] refactor(FE-208,212,213): update PurchaseOrderForm
 and PurchaseOrderStaffApprovalForm to allow optional product and warehouse
 fields and control visibility of action buttons based on approval step

---
 .../form/order/PurchaseOrderForm.schema.ts    | 24 +++---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 73 +++++++++++--------
 2 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index e0a5b7e4..96836bc6 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -9,12 +9,12 @@ type PurchaseRequestStaffApprovalFormSchemaType = {
     product_id?: number | null;
     warehouse_id?: number | null;
     product?: {
-      value: number;
-      label: string;
+      value?: number;
+      label?: string;
     } | null;
     warehouse?: {
-      value: number;
-      label: string;
+      value?: number;
+      label?: string;
     } | null;
     qty: number;
     price: number | string;
@@ -54,12 +54,12 @@ export type PurchaseStaffApprovalItemSchema = {
   product_id?: number | null;
   warehouse_id?: number | null;
   product?: {
-    value: number;
-    label: string;
+    value?: number;
+    label?: string;
   } | null;
   warehouse?: {
-    value: number;
-    label: string;
+    value?: number;
+    label?: string;
   } | null;
   qty: number;
   price: number | string;
@@ -97,8 +97,8 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       .min(0, 'Purchase item ID tidak valid!')
       .typeError('Purchase item ID harus berupa angka!'),
     product: Yup.object({
-      value: Yup.number().required(),
-      label: Yup.string().required(),
+      value: Yup.number(),
+      label: Yup.string(),
     })
       .nullable()
       .optional(),
@@ -107,8 +107,8 @@ const PurchaseStaffApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseStaffAppro
       .nullable()
       .typeError('Product ID harus berupa angka!'),
     warehouse: Yup.object({
-      value: Yup.number().required(),
-      label: Yup.string().required(),
+      value: Yup.number(),
+      label: Yup.string(),
     })
       .nullable()
       .optional(),
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 8a988bae..029fd2e3 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -68,9 +68,20 @@ const PurchaseOrderStaffApprovalForm = ({
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
+    // Allow editing from step 3 onwards
+    // Hide delete/add buttons from step 4 onwards
     return currentStep >= 3;
   }, [initialValues?.approval]);
 
+  const canShowDeleteAddButtons = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    // Show delete/add buttons only up to step 3
+    // Hide from step 4 onwards
+    return currentStep < 4;
+  }, [initialValues?.approval]);
+
   const isRepeaterInputError = (
     idx: number,
     field: 'price' | 'total_price' | 'product_id' | 'warehouse_id'
@@ -344,6 +355,7 @@ const PurchaseOrderStaffApprovalForm = ({
           notes: values.notes || null,
           items: updateItemsPayload,
         };
+
         await updateStaffApprovalHandler(
           initialValues?.id as number,
           updatePayload
@@ -556,7 +568,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                 Total (Rp.)
                                 <span className='text-error'>*</span>
                               </th>
-                              <th>Action</th>
+                              {canShowDeleteAddButtons && <th>Action</th>}
                             </tr>
                           </thead>
                           <tbody>
@@ -725,22 +737,23 @@ const PurchaseOrderStaffApprovalForm = ({
                                   </td>
                                   <td>
                                     <div className='flex justify-center'>
-                                      {canUpdatePurchaseItems && (
-                                        <Button
-                                          type='button'
-                                          color='error'
-                                          onClick={() =>
-                                            removePurchaseItem(formItemIndex)
-                                          }
-                                          title='Hapus item'
-                                        >
-                                          <Icon
-                                            icon='mdi:trash-can'
-                                            width={16}
-                                            height={16}
-                                          />
-                                        </Button>
-                                      )}
+                                      {canUpdatePurchaseItems &&
+                                        canShowDeleteAddButtons && (
+                                          <Button
+                                            type='button'
+                                            color='error'
+                                            onClick={() =>
+                                              removePurchaseItem(formItemIndex)
+                                            }
+                                            title='Hapus item'
+                                          >
+                                            <Icon
+                                              icon='mdi:trash-can'
+                                              width={16}
+                                              height={16}
+                                            />
+                                          </Button>
+                                        )}
                                     </div>
                                   </td>
                                 </tr>
@@ -757,7 +770,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   <td>
                                     <SelectInput
                                       required
-                                      value={formItem.product}
+                                      value={formItem.product as OptionType | null}
                                       onChange={(val) =>
                                         handleProductChange(idx, val)
                                       }
@@ -916,17 +929,19 @@ const PurchaseOrderStaffApprovalForm = ({
                     </div>
 
                     {/* Add Item Button */}
-                    <div className='flex justify-center items-center mt-4'>
-                      <Button
-                        type='button'
-                        color='success'
-                        onClick={addPurchaseItem}
-                        className='w-fit'
-                      >
-                        <Icon icon='ic:round-plus' width={24} height={24} />
-                        Tambah Item Baru
-                      </Button>
-                    </div>
+                    {canShowDeleteAddButtons && (
+                      <div className='flex justify-center items-center mt-4'>
+                        <Button
+                          type='button'
+                          color='success'
+                          onClick={addPurchaseItem}
+                          className='w-fit'
+                        >
+                          <Icon icon='ic:round-plus' width={24} height={24} />
+                          Tambah Item Baru
+                        </Button>
+                      </div>
+                    )}
 
                     {/* Add divider after table except for last item */}
                     {index < groupedPurchaseItems.length - 1 && (

From ef95d1a0e8ca0d4ecb8952154a484bffe66ec0e4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 00:58:06 +0700
Subject: [PATCH 151/168] refactor(FE-208): improve deletion logic in
 PurchaseOrderDetail to restrict item deletion to approval step 3 and enhance
 approval step handling

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 6bc5d99b..860a8ed7 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -160,13 +160,36 @@ const PurchaseOrderDetail = ({
     return initialValues.approval.step_number;
   }, [initialValues?.approval]);
 
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    rawDataApprovals,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: PURCHASE_ORDER_APPROVAL_LINE,
+    moduleName: 'PURCHASES',
+    moduleId: initialValues?.id?.toString() ?? '',
+    params: {
+      limit: 100,
+      group_step_number: true,
+    },
+  });
+
   const showApprovalButton =
     approvalStep !== null && approvalStep >= 1 && approvalStep <= 3;
 
   const canDeleteItems = useMemo(() => {
     if (!initialValues?.approval) return false;
-    return initialValues.approval.step_number === 3;
-  }, [initialValues?.approval]);
+
+    const currentStep = initialValues.approval.step_number;
+
+    const hasReachedStep5 = rawDataApprovals?.some(
+      (approval) => approval.step_number === 5
+    );
+
+    return currentStep === 3 && !hasReachedStep5;
+  }, [initialValues?.approval, rawDataApprovals]);
 
   const handleApprovalClick = () => {
     if (!approvalStep) return;
@@ -212,22 +235,6 @@ const PurchaseOrderDetail = ({
     return currentStep === 5;
   }, [initialValues?.approval]);
 
-  const {
-    approvals,
-    isLoading: approvalsLoading,
-    rawDataApprovals,
-    refresh: refreshApprovals,
-  } = useApprovalSteps({
-    latestApproval: initialValues?.approval,
-    approvalLines: PURCHASE_ORDER_APPROVAL_LINE,
-    moduleName: 'PURCHASES',
-    moduleId: initialValues?.id?.toString() ?? '',
-    params: {
-      limit: 100,
-      group_step_number: true,
-    },
-  });
-
   const totalBeforeTax = useMemo(() => {
     return purchaseOrderItems.reduce(
       (sum, item) => sum + (item.total_price || 0),

From 0fefe5e03547d6fad7bf5922afe31a656b01f813 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 09:47:20 +0700
Subject: [PATCH 152/168] feat(FE-212): enhance PurchaseOrderStaffApprovalForm
 to dynamically determine form type and validate product selection for
 duplicates

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 108 +++++++++++++++---
 1 file changed, 94 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 029fd2e3..57af080f 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -33,6 +33,7 @@ import {
   Purchase,
 } from '@/types/api/purchase/purchase';
 import { useRouter } from 'next/navigation';
+import { useApprovalSteps } from '@/components/pages/ApprovalSteps';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -44,13 +45,43 @@ interface PurchaseOrderStaffApprovalFormProps {
 }
 
 const PurchaseOrderStaffApprovalForm = ({
-  type = 'add',
+  type: propType,
   initialValues,
   onCancel,
   refreshApprovals,
   onModalClose,
   onRefetchData,
 }: PurchaseOrderStaffApprovalFormProps) => {
+  const { rawDataApprovals } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: [],
+    moduleName: 'PURCHASES',
+    moduleId: initialValues?.id?.toString() ?? '',
+    params: {
+      limit: 100,
+      group_step_number: true,
+    },
+  });
+
+  const type = useMemo(() => {
+    if (propType && (propType === 'add' || propType === 'edit')) {
+      return propType;
+    }
+
+    if (!rawDataApprovals || rawDataApprovals.length === 0) {
+      return 'add';
+    }
+
+    const firstApproval = rawDataApprovals[0];
+    const hasOnlyInitialStep =
+      rawDataApprovals.length === 1 &&
+      firstApproval?.step_number === 1 &&
+      'action' in firstApproval &&
+      firstApproval.action === 'CREATED';
+
+    return hasOnlyInitialStep ? 'add' : 'edit';
+  }, [rawDataApprovals, propType]);
+
   const router = useRouter();
   const searchParams = useSearchParams();
   const deleteModal = useModal();
@@ -68,8 +99,6 @@ const PurchaseOrderStaffApprovalForm = ({
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
-    // Allow editing from step 3 onwards
-    // Hide delete/add buttons from step 4 onwards
     return currentStep >= 3;
   }, [initialValues?.approval]);
 
@@ -77,8 +106,6 @@ const PurchaseOrderStaffApprovalForm = ({
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
-    // Show delete/add buttons only up to step 3
-    // Hide from step 4 onwards
     return currentStep < 4;
   }, [initialValues?.approval]);
 
@@ -231,18 +258,31 @@ const PurchaseOrderStaffApprovalForm = ({
     (url: string) => SupplierApi.getSingle(Number(url.split('/').pop()))
   );
 
-  const supplierProductOptions = useMemo(() => {
+  const baseSupplierProductOptions: OptionType[] = useMemo(() => {
     if (!supplierData || !isResponseSuccess(supplierData)) {
       return [];
     }
 
     const supplier = supplierData.data as SupplierProducts;
     const products = supplier.products || [];
+
+    if (type === 'edit' && initialValues?.items) {
+      const currentProductIds = initialValues.items.map(
+        (item) => item.product_id
+      );
+      return products
+        .filter((product) => currentProductIds.includes(product.id))
+        .map((product) => ({
+          value: product.id,
+          label: product.name,
+        }));
+    }
+
     return products.map((product) => ({
       value: product.id,
       label: product.name,
     }));
-  }, [supplierData]);
+  }, [supplierData, type, initialValues?.items]);
 
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo(() => {
@@ -364,6 +404,8 @@ const PurchaseOrderStaffApprovalForm = ({
     },
   });
 
+  const supplierProductOptions = baseSupplierProductOptions;
+
   // ===== API DATA FETCHING =====
   const purchaseItems = useMemo(() => {
     if (initialValues?.items) {
@@ -426,6 +468,10 @@ const PurchaseOrderStaffApprovalForm = ({
         const itemData = {
           purchase_item_id: purchaseItem.id,
           product_id: purchaseItem.product_id || 0,
+          product: {
+            value: purchaseItem.product_id || 0,
+            label: purchaseItem.product?.name || '',
+          },
           warehouse_id: purchaseItem.warehouse_id || 0,
           qty: originalItem?.qty || purchaseItem.quantity || 0,
           price: type === 'edit' && originalItem ? originalItem.price : '',
@@ -493,6 +539,34 @@ const PurchaseOrderStaffApprovalForm = ({
     const product = val as OptionType | null;
     const productId = (product as OptionType)?.value || 0;
 
+    if (Number(productId) > 0) {
+      const currentItem = formik.values.items?.[idx];
+      const warehouseId = currentItem?.warehouse_id || 0;
+
+      const isDuplicate = formik.values.items?.some(
+        (item, itemIdx) =>
+          itemIdx !== idx &&
+          item.product_id === productId &&
+          item.warehouse_id === warehouseId
+      );
+
+      if (isDuplicate) {
+        const existingItem = formik.values.items?.find(
+          (item, itemIdx) =>
+            itemIdx !== idx &&
+            item.product_id === productId &&
+            item.warehouse_id === warehouseId
+        );
+        const existingProductName =
+          existingItem?.product?.label || 'produk ini';
+
+        toast.error(
+          `Tidak bisa menambahkan item yang sama. ${existingProductName} sudah ada di gudang ini.`
+        );
+        return;
+      }
+    }
+
     formik.setFieldTouched(`items.${idx}.product`, true);
     formik.setFieldValue(`items.${idx}.product`, product);
     formik.setFieldTouched(`items.${idx}.product_id`, true);
@@ -568,7 +642,9 @@ const PurchaseOrderStaffApprovalForm = ({
                                 Total (Rp.)
                                 <span className='text-error'>*</span>
                               </th>
-                              {canShowDeleteAddButtons && <th>Action</th>}
+                              {canShowDeleteAddButtons && type === 'edit' && (
+                                <th>Action</th>
+                              )}
                             </tr>
                           </thead>
                           <tbody>
@@ -595,14 +671,16 @@ const PurchaseOrderStaffApprovalForm = ({
                                   <td>
                                     <SelectInput
                                       key={`product-${purchaseItem.id}`}
-                                      value={{
-                                        value: purchaseItem?.product_id || 0,
-                                        label:
-                                          purchaseItem?.product?.name || '',
-                                      }}
+                                      value={
+                                        formItem?.product as OptionType | null
+                                      }
+                                      onChange={(val) =>
+                                        handleProductChange(formItemIndex, val)
+                                      }
                                       options={supplierProductOptions}
                                       isClearable={false}
                                       isSearchable={false}
+                                      isDisabled={type === 'add'}
                                       className={{
                                         wrapper:
                                           'min-w-52 md:min-w-72 lg:min-w-80',
@@ -770,7 +848,9 @@ const PurchaseOrderStaffApprovalForm = ({
                                   <td>
                                     <SelectInput
                                       required
-                                      value={formItem.product as OptionType | null}
+                                      value={
+                                        formItem.product as OptionType | null
+                                      }
                                       onChange={(val) =>
                                         handleProductChange(idx, val)
                                       }

From b12a1ebd36de515b1e9bac36e7e34e0bf266d4ca Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 10:11:30 +0700
Subject: [PATCH 153/168] feat(FE-212): add rawDataApprovals prop to
 PurchaseOrderStaffApprovalForm for improved approval data handling

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 25 +++++--------------
 .../purchase/order/PurchaseOrderDetail.tsx    |  2 ++
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 57af080f..3f55737e 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -9,13 +9,10 @@ import useSWR from 'swr';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
-import { WarehouseApi, SupplierApi } from '@/services/api/master-data';
+import { SupplierApi } from '@/services/api/master-data';
 import { SupplierProducts } from '@/types/api/master-data/supplier';
 import { isResponseSuccess } from '@/lib/api-helper';
 
@@ -32,8 +29,8 @@ import {
   UpdateStaffApprovalRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
+import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
 import { useRouter } from 'next/navigation';
-import { useApprovalSteps } from '@/components/pages/ApprovalSteps';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -42,6 +39,7 @@ interface PurchaseOrderStaffApprovalFormProps {
   refreshApprovals?: () => void;
   onModalClose?: () => void;
   onRefetchData?: () => void;
+  rawDataApprovals?: BaseApproval[] | BaseGroupedApproval[];
 }
 
 const PurchaseOrderStaffApprovalForm = ({
@@ -51,18 +49,8 @@ const PurchaseOrderStaffApprovalForm = ({
   refreshApprovals,
   onModalClose,
   onRefetchData,
+  rawDataApprovals,
 }: PurchaseOrderStaffApprovalFormProps) => {
-  const { rawDataApprovals } = useApprovalSteps({
-    latestApproval: initialValues?.approval,
-    approvalLines: [],
-    moduleName: 'PURCHASES',
-    moduleId: initialValues?.id?.toString() ?? '',
-    params: {
-      limit: 100,
-      group_step_number: true,
-    },
-  });
-
   const type = useMemo(() => {
     if (propType && (propType === 'add' || propType === 'edit')) {
       return propType;
@@ -76,8 +64,7 @@ const PurchaseOrderStaffApprovalForm = ({
     const hasOnlyInitialStep =
       rawDataApprovals.length === 1 &&
       firstApproval?.step_number === 1 &&
-      'action' in firstApproval &&
-      firstApproval.action === 'CREATED';
+      ('action' in firstApproval ? firstApproval.action === 'CREATED' : false);
 
     return hasOnlyInitialStep ? 'add' : 'edit';
   }, [rawDataApprovals, propType]);
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 860a8ed7..11faab80 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -954,6 +954,7 @@ const PurchaseOrderDetail = ({
           refreshApprovals={refreshApprovals}
           onModalClose={staffApprovalModal.closeModal}
           onRefetchData={refetchData}
+          rawDataApprovals={rawDataApprovals}
         />
       </Modal>
 
@@ -990,6 +991,7 @@ const PurchaseOrderDetail = ({
           refreshApprovals={refreshApprovals}
           onModalClose={editModal.closeModal}
           onRefetchData={refetchData}
+          rawDataApprovals={rawDataApprovals}
         />
       </Modal>
 

From f9215738aa7386f886dac2ebfab898911ad339e7 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 10:16:39 +0700
Subject: [PATCH 154/168] feat(FE-212): add quantity validation to
 PurchaseOrderAcceptApprovalForm to prevent submission with exceeded received
 quantities

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 5cf5e85e..7909ade9 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -263,6 +263,22 @@ const PurchaseOrderAcceptApprovalForm = ({
     [purchaseItems]
   );
 
+  const hasQuantityExceededErrors = useMemo(() => {
+    if (!formik.values.items || purchaseItems.length === 0) return false;
+
+    return formik.values.items.some((item, idx) => {
+      if (!item.received_qty) return false;
+
+      const receivedQty =
+        typeof item.received_qty === 'string'
+          ? parseFloat(item.received_qty) || 0
+          : item.received_qty;
+
+      const originalQty = purchaseItems[idx]?.quantity || 0;
+      return receivedQty > originalQty;
+    });
+  }, [formik.values.items, purchaseItems]);
+
   const getExpeditionVendorOptions = useCallback(() => {
     return expeditionVendors;
   }, [expeditionVendors]);
@@ -713,7 +729,11 @@ const PurchaseOrderAcceptApprovalForm = ({
               color='primary'
               className='px-4'
               isLoading={formik.isSubmitting}
-              disabled={!formik.isValid || formik.isSubmitting}
+              disabled={
+                !formik.isValid ||
+                formik.isSubmitting ||
+                hasQuantityExceededErrors
+              }
             >
               Submit
             </Button>

From 6a39c2fd3f54f927fdf0273c7f8926a72f963a8d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 10:17:38 +0700
Subject: [PATCH 155/168] refactor(FE-208): swap accessor keys for total_qty
 and sub_qty in PurchaseOrderDetail for accurate data representation

---
 src/components/pages/purchase/order/PurchaseOrderDetail.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 11faab80..2f3bbfb0 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -526,12 +526,12 @@ const PurchaseOrderDetail = ({
     },
     {
       header: 'Jumlah Total',
-      accessorKey: 'total_qty',
+      accessorKey: 'sub_qty',
       cell: (props) => formatNumber(props.getValue() as number),
     },
     {
       header: 'Jumlah Diterima',
-      accessorKey: 'sub_qty',
+      accessorKey: 'total_qty',
       cell: (props) => formatNumber(props.getValue() as number),
     },
     {

From 23abdbb78f9ab4d09a19737a5b4ec12fcd8be8f4 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 10:21:36 +0700
Subject: [PATCH 156/168] refactor(FE-208): display formatted total and
 subtotal quantities in PurchaseOrderInvoice for improved clarity

---
 src/components/pages/purchase/order/PurchaseOrderInvoice.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index 4e6cd75d..d7497d7e 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -459,6 +459,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                             {item.product?.name || '-'}
                           </Text>
                           <Text style={pdfStyles.innerCellRightLast}>
+                            {formatNumber(item.total_qty || 0)} of{' '}
                             {formatNumber(item.sub_qty || 0)}
                           </Text>
                         </View>

From 5b84a19afab8d10d3225a66fe77e036202ef88fd Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 10:35:56 +0700
Subject: [PATCH 157/168] refactor(FE-Issue): add max length validation for
 product category name in ProductCategoryForm

---
 .../product-category/form/ProductCategoryForm.schema.ts       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
index c9cb2b7b..bbcf9a8d 100644
--- a/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
+++ b/src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts
@@ -10,7 +10,9 @@ export const ProductCategoryFormSchema: Yup.ObjectSchema<ProductCategoryFormSche
     code: Yup.string()
       .required('Kode wajib diisi!')
       .max(3, 'Kode kategori produk melebihi 3 karakter!'),
-    name: Yup.string().required('Nama wajib diisi!'),
+    name: Yup.string()
+      .required('Nama wajib diisi!')
+      .max(50, 'Nama kategori produk melebihi 50 karakter!'),
   });
 
 export const UpdateProductCategoryFormSchema = ProductCategoryFormSchema;

From 34c1da94d81f7040dc25d7d6f48cf06e3e4c863b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 10:47:27 +0700
Subject: [PATCH 158/168] refactor(FE-Issue): remove unused product and
 warehouse selection from MovementTable for cleaner UI

---
 .../inventory/movement/MovementTable.tsx      | 65 +------------------
 1 file changed, 2 insertions(+), 63 deletions(-)

diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index 8ff39e3d..35625883 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -9,12 +9,10 @@ import { Icon } from '@iconify/react';
 import { Movement } from '@/types/api/inventory/movement';
 import { MovementApi } from '@/services/api/inventory';
 import { cn } from '@/lib/helper';
-import { Product } from '@/types/api/master-data/product';
-import { Warehouse } from '@/types/api/master-data/warehouse';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { OptionType, useSelect } from '@/components/input/SelectInput';
+import { OptionType } from '@/components/input/SelectInput';
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput from '@/components/input/SelectInput';
@@ -52,38 +50,15 @@ const MovementTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      product: '',
-      warehouse: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      product: 'product_id',
-      warehouse: 'warehouse_id',
     },
   });
 
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  const {
-    setInputValue: setProductInputValue,
-    options: productOptions,
-    isLoadingOptions: isLoadingProductOptions,
-  } = useSelect<Product>('/products', 'id', 'name');
-
-  const {
-    setInputValue: setWarehouseInputValue,
-    options: warehouseOptions,
-    isLoadingOptions: isLoadingWarehouseOptions,
-  } = useSelect<Warehouse>('/warehouses', 'id', 'name');
-
-  const [selectedProduct, setSelectedProduct] = useState<OptionType | null>(
-    null
-  );
-  const [selectedWarehouse, setSelectedWarehouse] = useState<OptionType | null>(
-    null
-  );
-
   const { data: movements, isLoading } = useSWR(
     `${MovementApi.basePath}${getTableFilterQueryString()}`,
     MovementApi.getAllFetcher
@@ -99,16 +74,6 @@ const MovementTable = () => {
     setPage(1);
   };
 
-  const productChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedProduct(val as OptionType);
-    updateFilter('product', val ? ((val as OptionType).value as string) : '');
-  };
-
-  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedWarehouse(val as OptionType);
-    updateFilter('warehouse', val ? ((val as OptionType).value as string) : '');
-  };
-
   const movementColumns: ColumnDef<Movement>[] = [
     {
       header: '#',
@@ -200,33 +165,7 @@ const MovementTable = () => {
             />
           </div>
 
-          <div className='grid grid-cols-12 justify-end gap-4'>
-            <SelectInput
-              label='Produk'
-              options={productOptions}
-              isLoading={isLoadingProductOptions}
-              value={selectedProduct}
-              onChange={productChangeHandler}
-              onInputChange={setProductInputValue}
-              isClearable
-              className={{
-                wrapper: 'col-span-12 sm:col-span-4',
-              }}
-            />
-
-            <SelectInput
-              label='Gudang'
-              options={warehouseOptions}
-              isLoading={isLoadingWarehouseOptions}
-              value={selectedWarehouse}
-              onChange={warehouseChangeHandler}
-              onInputChange={setWarehouseInputValue}
-              isClearable
-              className={{
-                wrapper: 'col-span-12 sm:col-span-4',
-              }}
-            />
-
+          <div className='flex justify-end gap-4'>
             <SelectInput
               label='Baris'
               options={ROWS_OPTIONS}

From c12a58cb6d696e1d563cd9dc50d74d86d7f52270 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 11:07:23 +0700
Subject: [PATCH 159/168] refactor(FE-208): add validation to ensure
 destination warehouse is different from source warehouse in MovementForm

---
 .../movement/form/MovementForm.schema.ts      | 10 ++-
 .../inventory/movement/form/MovementForm.tsx  | 75 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 39f7c669..0d9b3277 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -171,7 +171,15 @@ export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> =
     }).nullable(),
     destination_warehouse_id: Yup.number()
       .required('Gudang tujuan wajib diisi!')
-      .typeError('Gudang tujuan wajib diisi!'),
+      .typeError('Gudang tujuan wajib diisi!')
+      .test(
+        'different-warehouse',
+        'Gudang tujuan tidak boleh sama dengan gudang asal!',
+        function (value) {
+          const { source_warehouse_id } = this.parent;
+          return !value || !source_warehouse_id || value !== source_warehouse_id;
+        }
+      ),
     products: Yup.array()
       .of(ProductObjectSchema)
       .min(1, 'Minimal harus ada 1 produk!')
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 438c09c6..29f44503 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -745,6 +745,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     }
   }, [formik.values.source_warehouse_id]);
 
+  useEffect(() => {
+    if (
+      formik.values.source_warehouse_id &&
+      formik.values.destination_warehouse_id &&
+      formik.values.source_warehouse_id ===
+        formik.values.destination_warehouse_id
+    ) {
+      formik.setFieldError(
+        'destination_warehouse_id',
+        'Gudang tujuan tidak boleh sama dengan gudang asal!'
+      );
+    } else {
+      if (
+        formik.errors.destination_warehouse_id ===
+        'Gudang tujuan tidak boleh sama dengan gudang asal!'
+      ) {
+        formik.setFieldError('destination_warehouse_id', undefined);
+      }
+    }
+  }, [
+    formik.values.source_warehouse_id,
+    formik.values.destination_warehouse_id,
+    formik.errors.destination_warehouse_id,
+  ]);
+
   return (
     <>
       <section className='w-full'>
@@ -828,10 +853,33 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   formik.setFieldTouched('source_warehouse', true);
                   formik.setFieldValue('source_warehouse', val);
                   formik.setFieldTouched('source_warehouse_id', true);
+                  const newSourceWarehouseId = (val as WarehouseOptionType)
+                    ?.value;
                   formik.setFieldValue(
                     'source_warehouse_id',
-                    (val as WarehouseOptionType)?.value
+                    newSourceWarehouseId
                   );
+                  if (
+                    newSourceWarehouseId &&
+                    formik.values.destination_warehouse_id &&
+                    newSourceWarehouseId ===
+                      formik.values.destination_warehouse_id
+                  ) {
+                    formik.setFieldError(
+                      'destination_warehouse_id',
+                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
+                    );
+                  } else {
+                    if (
+                      formik.errors.destination_warehouse_id ===
+                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
+                    ) {
+                      formik.setFieldError(
+                        'destination_warehouse_id',
+                        undefined
+                      );
+                    }
+                  }
                 }}
                 options={warehouseOptions}
                 onInputChange={setWarehouseSelectInputValue}
@@ -899,10 +947,33 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   formik.setFieldTouched('destination_warehouse', true);
                   formik.setFieldValue('destination_warehouse', val);
                   formik.setFieldTouched('destination_warehouse_id', true);
+                  const newDestinationWarehouseId = (val as WarehouseOptionType)
+                    ?.value;
                   formik.setFieldValue(
                     'destination_warehouse_id',
-                    (val as WarehouseOptionType)?.value
+                    newDestinationWarehouseId
                   );
+                  if (
+                    newDestinationWarehouseId &&
+                    formik.values.source_warehouse_id &&
+                    newDestinationWarehouseId ===
+                      formik.values.source_warehouse_id
+                  ) {
+                    formik.setFieldError(
+                      'destination_warehouse_id',
+                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
+                    );
+                  } else {
+                    if (
+                      formik.errors.destination_warehouse_id ===
+                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
+                    ) {
+                      formik.setFieldError(
+                        'destination_warehouse_id',
+                        undefined
+                      );
+                    }
+                  }
                 }}
                 options={warehouseOptions}
                 onInputChange={setWarehouseSelectInputValue}

From 6ce5a5b625ad649c08e3b181ab2b411fc69da6c2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 11:10:49 +0700
Subject: [PATCH 160/168] refactor(FE-208): filter supplier options by category
 in MovementForm for improved data relevance

---
 .../pages/inventory/movement/form/MovementForm.tsx          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 29f44503..1d4e791b 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -26,6 +26,7 @@ import {
   DeliverySchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
 import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import { MovementApi } from '@/services/api/inventory';
@@ -100,11 +101,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     isLoadingOptions: isLoadingWarehouses,
   } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
 
+  // ===== SELECT INPUT DATA =====
   const {
     setInputValue: setSupplierSelectInputValue,
     options: supplierOptions,
     isLoadingOptions: isLoadingSuppliers,
-  } = useSelect(SupplierApi.basePath, 'id', 'name', 'search');
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'BOP',
+  });
 
   const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
   const { data: warehouses } = useSWR(

From 3c7f630580e38647871e6daec6ae1731bc120320 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 11:17:06 +0700
Subject: [PATCH 161/168] feat(FE-Storyless): add date input for transfer date
 in MovementForm

---
 .../pages/inventory/movement/form/MovementForm.tsx     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 1d4e791b..431d3c22 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -8,6 +8,7 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
+import DateInput from '@/components/input/DateInput';
 import SelectInput, {
   OptionType,
   useSelect,
@@ -309,6 +310,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     };
   };
 
+  const handleTransferDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    formik.setFieldValue('transfer_date', e.target.value);
+  };
+
   // ===== EVENT HANDLERS =====
   // Product Handlers
   const addProduct = () => {
@@ -821,13 +826,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 errorMessage={formik.errors.transfer_reason}
                 readOnly={type === 'detail'}
               />
-              <TextInput
+              <DateInput
                 required
                 label='Tanggal Transfer'
-                type='date'
                 name='transfer_date'
                 value={formik.values.transfer_date}
-                onChange={formik.handleChange}
+                onChange={handleTransferDateChange}
                 onBlur={formik.handleBlur}
                 isError={
                   formik.touched.transfer_date &&

From 5bb94b5679642b819c384e4ccd9369414b181a6a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 11:33:28 +0700
Subject: [PATCH 162/168] refactor(FE-Issue): add validation to prevent
 selecting the same warehouse for source and destination in MovementForm

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

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 431d3c22..bfee353e 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -176,6 +176,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     enableReinitialize: true,
     onSubmit: async (values) => {
       setMovementFormErrorMessage('');
+      if (values.source_warehouse_id === values.destination_warehouse_id) {
+        const sourceWarehouseName =
+          (values.source_warehouse as WarehouseOptionType)?.label ||
+          'Gudang asal';
+        const destinationWarehouseName =
+          (values.destination_warehouse as WarehouseOptionType)?.label ||
+          'gudang tujuan';
+
+        setMovementFormErrorMessage(
+          `Tidak bisa submit form. ${sourceWarehouseName} tidak boleh sama dengan ${destinationWarehouseName}.`
+        );
+        toast.error(
+          `Tidak bisa submit form. Gudang asal dan tujuan tidak boleh sama!`
+        );
+        return;
+      }
       const documents: File[] = [];
       const deliveriesPayload = values.deliveries.map((d) => {
         let documentIndex = 0;
@@ -858,35 +874,40 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 placeholder='Pilih gudang asal...'
                 value={formik.values.source_warehouse}
                 onChange={(val) => {
+                  const newSourceWarehouseId = (val as WarehouseOptionType)
+                    ?.value;
+
+                  if (newSourceWarehouseId) {
+                    if (
+                      newSourceWarehouseId ===
+                      formik.values.destination_warehouse_id
+                    ) {
+                      const destinationWarehouseName =
+                        (
+                          formik.values
+                            .destination_warehouse as WarehouseOptionType
+                        )?.label || 'gudang tujuan';
+
+                      toast.error(
+                        `Tidak bisa memilih gudang yang sama. Gudang asal tidak boleh sama dengan ${destinationWarehouseName}.`
+                      );
+                      return; // Prevent setting the value
+                    }
+                  }
+
                   formik.setFieldTouched('source_warehouse', true);
                   formik.setFieldValue('source_warehouse', val);
                   formik.setFieldTouched('source_warehouse_id', true);
-                  const newSourceWarehouseId = (val as WarehouseOptionType)
-                    ?.value;
                   formik.setFieldValue(
                     'source_warehouse_id',
                     newSourceWarehouseId
                   );
+
                   if (
-                    newSourceWarehouseId &&
-                    formik.values.destination_warehouse_id &&
-                    newSourceWarehouseId ===
-                      formik.values.destination_warehouse_id
+                    formik.errors.destination_warehouse_id ===
+                    'Gudang tujuan tidak boleh sama dengan gudang asal!'
                   ) {
-                    formik.setFieldError(
-                      'destination_warehouse_id',
-                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
-                    );
-                  } else {
-                    if (
-                      formik.errors.destination_warehouse_id ===
-                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
-                    ) {
-                      formik.setFieldError(
-                        'destination_warehouse_id',
-                        undefined
-                      );
-                    }
+                    formik.setFieldError('destination_warehouse_id', undefined);
                   }
                 }}
                 options={warehouseOptions}
@@ -952,35 +973,38 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 placeholder='Pilih gudang tujuan...'
                 value={formik.values.destination_warehouse}
                 onChange={(val) => {
+                  const newDestinationWarehouseId = (val as WarehouseOptionType)
+                    ?.value;
+
+                  if (newDestinationWarehouseId) {
+                    if (
+                      newDestinationWarehouseId ===
+                      formik.values.source_warehouse_id
+                    ) {
+                      const sourceWarehouseName =
+                        (formik.values.source_warehouse as WarehouseOptionType)
+                          ?.label || 'gudang asal';
+
+                      toast.error(
+                        `Tidak bisa memilih gudang yang sama. Gudang tujuan tidak boleh sama dengan ${sourceWarehouseName}.`
+                      );
+                      return;
+                    }
+                  }
+
                   formik.setFieldTouched('destination_warehouse', true);
                   formik.setFieldValue('destination_warehouse', val);
                   formik.setFieldTouched('destination_warehouse_id', true);
-                  const newDestinationWarehouseId = (val as WarehouseOptionType)
-                    ?.value;
                   formik.setFieldValue(
                     'destination_warehouse_id',
                     newDestinationWarehouseId
                   );
+
                   if (
-                    newDestinationWarehouseId &&
-                    formik.values.source_warehouse_id &&
-                    newDestinationWarehouseId ===
-                      formik.values.source_warehouse_id
+                    formik.errors.destination_warehouse_id ===
+                    'Gudang tujuan tidak boleh sama dengan gudang asal!'
                   ) {
-                    formik.setFieldError(
-                      'destination_warehouse_id',
-                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
-                    );
-                  } else {
-                    if (
-                      formik.errors.destination_warehouse_id ===
-                      'Gudang tujuan tidak boleh sama dengan gudang asal!'
-                    ) {
-                      formik.setFieldError(
-                        'destination_warehouse_id',
-                        undefined
-                      );
-                    }
+                    formik.setFieldError('destination_warehouse_id', undefined);
                   }
                 }}
                 options={warehouseOptions}
@@ -1701,7 +1725,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     hasInvalidQty ||
                     hasExceededStock ||
                     !formik.isValid ||
-                    formik.isSubmitting
+                    formik.isSubmitting ||
+                    (formik.values.source_warehouse_id ===
+                      formik.values.destination_warehouse_id &&
+                      formik.values.source_warehouse_id !== 0 &&
+                      formik.values.destination_warehouse_id !== 0)
                   }
                 >
                   Submit

From ad79f29494660bb9d386c00fe9fa6f73e86075a8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 13:00:57 +0700
Subject: [PATCH 163/168] refactor(FE-212): update supplier data fetching logic
 to handle invalid supplier IDs in PurchaseRequestForm

---
 .../pages/purchase/form/request/PurchaseRequestForm.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 6fdbc78f..41732013 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -214,7 +214,9 @@ const PurchaseRequestForm = ({
 
   // ===== API DATA FETCHING =====
   const { data: supplierData, isLoading: isLoadingProducts } = useSWR(
-    formik.values.supplier_id?.toString(),
+    formik.values.supplier_id && Number(formik.values.supplier_id) > 0
+      ? formik.values.supplier_id?.toString()
+      : null,
     (id: string) => SupplierApi.getSingle(Number(id))
   );
 

From 09065f59cf02e32f850d8268b6c08cfb74bde322 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 13:23:23 +0700
Subject: [PATCH 164/168] refactor(FE-212): enhance approval step logic in
 PurchaseOrderStaffApprovalForm for better item management

---
 .../inventory/movement/form/MovementForm.tsx  |  2 +-
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 35 ++++++++++++++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index bfee353e..ae9b68d9 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -891,7 +891,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       toast.error(
                         `Tidak bisa memilih gudang yang sama. Gudang asal tidak boleh sama dengan ${destinationWarehouseName}.`
                       );
-                      return; // Prevent setting the value
+                      return;
                     }
                   }
 
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 3f55737e..9cbca9ee 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -60,14 +60,23 @@ const PurchaseOrderStaffApprovalForm = ({
       return 'add';
     }
 
-    const firstApproval = rawDataApprovals[0];
-    const hasOnlyInitialStep =
-      rawDataApprovals.length === 1 &&
-      firstApproval?.step_number === 1 &&
-      ('action' in firstApproval ? firstApproval.action === 'CREATED' : false);
+    const currentStep = initialValues?.approval?.step_number || 1;
 
-    return hasOnlyInitialStep ? 'add' : 'edit';
-  }, [rawDataApprovals, propType]);
+    switch (currentStep) {
+      case 1:
+        // Step 1 (Pengajuan) - Ini dari @PurchaseRequestForm
+        return 'add';
+      case 2:
+        // Step 2 (Staff Purchase) - Staff approval pertama kali
+        return 'add';
+      case 3:
+        // Step 3 (Manager Purchase) - Manager approval, boleh edit/delete/add items
+        return 'edit';
+      default:
+        // Step 4+ (Penerimaan Barang dan selesai), tidak boleh edit kalau sudah disetujui
+        return 'edit';
+    }
+  }, [rawDataApprovals, propType, initialValues?.approval?.step_number]);
 
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -93,8 +102,16 @@ const PurchaseOrderStaffApprovalForm = ({
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
-    return currentStep < 4;
-  }, [initialValues?.approval]);
+
+    // Step 2 (Staff Purchase) dengan mode 'add' tidak boleh add/delete items
+    // User hanya boleh input harga dan total harga untuk items yang sudah ada
+    if (currentStep === 2 && type === 'add') {
+      return false;
+    }
+
+    // Step 3 (Manager Purchase) boleh add/delete items
+    return currentStep === 3;
+  }, [initialValues?.approval, type]);
 
   const isRepeaterInputError = (
     idx: number,

From 01b95956061989041fedcb676766ecc260ad9f6c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 13:32:10 +0700
Subject: [PATCH 165/168] refactor(FE-212): replace quantity input with
 NumberInput for editable rows in PurchaseOrderStaffApprovalForm

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 56 +++++++++++++------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 9cbca9ee..13581d08 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -712,22 +712,46 @@ const PurchaseOrderStaffApprovalForm = ({
                                     />
                                   </td>
                                   <td>
-                                    <TextInput
-                                      name={`items.${formItemIndex}.quantity`}
-                                      type='text'
-                                      value={
-                                        purchaseItem?.quantity
-                                          ? purchaseItem.quantity.toLocaleString(
-                                              'id-ID'
-                                            )
-                                          : ''
-                                      }
-                                      readOnly={true}
-                                      className={{
-                                        wrapper: 'min-w-24',
-                                      }}
-                                      disabled={true}
-                                    />
+                                    {type === 'edit' ? (
+                                      <NumberInput
+                                        name={`items.${formItemIndex}.qty`}
+                                        value={formItem?.qty || purchaseItem?.quantity || ''}
+                                        onChange={(e) => {
+                                          const numValue =
+                                            typeof e.target.value === 'string'
+                                              ? parseFloat(e.target.value) || 0
+                                              : e.target.value;
+                                          formik.setFieldValue(
+                                            `items.${formItemIndex}.qty`,
+                                            numValue
+                                          );
+                                        }}
+                                        onBlur={formik.handleBlur}
+                                        placeholder='Masukkan jumlah'
+                                        allowNegative={false}
+                                        decimalScale={0}
+                                        className={{
+                                          wrapper: 'min-w-24',
+                                        }}
+                                      />
+                                    ) : (
+                                      <TextInput
+                                        name={`items.${formItemIndex}.quantity`}
+                                        type='text'
+                                        value={
+                                          purchaseItem?.quantity
+                                            ? purchaseItem.quantity.toLocaleString(
+                                                'id-ID'
+                                              )
+                                            : ''
+                                        }
+                                        readOnly={true}
+                                        className={{
+                                          wrapper: 'min-w-24',
+                                        }}
+                                        disabled={true}
+                                      />
+                                    )}
                                   </td>
                                   <td>
                                     <TextInput

From 62c3d2af53790e47786f2c2aef442cf412e95957 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 13:36:38 +0700
Subject: [PATCH 166/168] refactor(FE-212): add quantity field handling in
 PurchaseOrderStaffApprovalForm for improved item updates

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 13581d08..017a0952 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -579,7 +579,7 @@ const PurchaseOrderStaffApprovalForm = ({
 
   const handlePurchaseItemChange = (
     idx: number,
-    field: 'price' | 'total_price',
+    field: 'price' | 'total_price' | 'qty',
     value: string | number
   ) => {
     const formItem = formik.values.items?.[idx];
@@ -588,6 +588,16 @@ const PurchaseOrderStaffApprovalForm = ({
       return;
     }
 
+    if (field === 'qty') {
+      const numValue =
+        typeof value === 'string' ? parseFloat(value) || 0 : value;
+
+      formik.setFieldValue(`items.${idx}.qty`, numValue);
+
+      formik.setFieldValue(`items.${idx}.price`, '');
+      formik.setFieldValue(`items.${idx}.total_price`, '');
+    }
+
     if (field === 'price' || field === 'total_price') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
@@ -715,17 +725,18 @@ const PurchaseOrderStaffApprovalForm = ({
                                     {type === 'edit' ? (
                                       <NumberInput
                                         name={`items.${formItemIndex}.qty`}
-                                        value={formItem?.qty || purchaseItem?.quantity || ''}
-                                        onChange={(e) => {
-                                          const numValue =
-                                            typeof e.target.value === 'string'
-                                              ? parseFloat(e.target.value) || 0
-                                              : e.target.value;
-                                          formik.setFieldValue(
-                                            `items.${formItemIndex}.qty`,
-                                            numValue
-                                          );
-                                        }}
+                                        value={
+                                          formItem?.qty ||
+                                          purchaseItem?.quantity ||
+                                          ''
+                                        }
+                                        onChange={(e) =>
+                                          handlePurchaseItemChange(
+                                            formItemIndex,
+                                            'qty',
+                                            e.target.value
+                                          )
+                                        }
                                         onBlur={formik.handleBlur}
                                         placeholder='Masukkan jumlah'
                                         allowNegative={false}
@@ -916,16 +927,13 @@ const PurchaseOrderStaffApprovalForm = ({
                                       required
                                       name={`items.${idx}.qty`}
                                       value={formItem?.qty || ''}
-                                      onChange={(e) => {
-                                        const numValue =
-                                          typeof e.target.value === 'string'
-                                            ? parseFloat(e.target.value) || 0
-                                            : e.target.value;
-                                        formik.setFieldValue(
-                                          `items.${idx}.qty`,
-                                          numValue
-                                        );
-                                      }}
+                                      onChange={(e) =>
+                                        handlePurchaseItemChange(
+                                          idx,
+                                          'qty',
+                                          e.target.value
+                                        )
+                                      }
                                       onBlur={formik.handleBlur}
                                       placeholder='Masukkan jumlah'
                                       allowNegative={false}

From 274322606de8ce3e00564341720656a97f18cee9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 22 Nov 2025 13:47:24 +0700
Subject: [PATCH 167/168] refactor(FE-212): enhance quantity and price handling
 in PurchaseOrderStaffApprovalForm with improved validation and formatting

---
 .../order/PurchaseOrderStaffApprovalForm.tsx  | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 017a0952..63756ad9 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -23,6 +23,7 @@ import {
   PurchaseStaffApprovalItemSchema,
 } from './PurchaseOrderForm.schema';
 import { isResponseError } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
 import { PurchaseApi } from '@/services/api/purchase';
 import {
   CreateStaffApprovalRequestPayload,
@@ -590,7 +591,11 @@ const PurchaseOrderStaffApprovalForm = ({
 
     if (field === 'qty') {
       const numValue =
-        typeof value === 'string' ? parseFloat(value) || 0 : value;
+        typeof value === 'string'
+          ? value === ''
+            ? ''
+            : parseFloat(value) || 0
+          : value;
 
       formik.setFieldValue(`items.${idx}.qty`, numValue);
 
@@ -600,16 +605,30 @@ const PurchaseOrderStaffApprovalForm = ({
 
     if (field === 'price' || field === 'total_price') {
       const numValue =
-        typeof value === 'string' ? parseFloat(value) || 0 : value;
+        typeof value === 'string'
+          ? value === ''
+            ? ''
+            : parseFloat(value) || 0
+          : value;
 
       formik.setFieldValue(`items.${idx}.${field}`, numValue);
 
-      if (field === 'price' && formItem.qty > 0 && numValue >= 0) {
+      if (
+        field === 'price' &&
+        formItem.qty > 0 &&
+        numValue !== '' &&
+        numValue >= 0
+      ) {
         const calculatedTotal = numValue * formItem.qty;
         formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
       }
 
-      if (field === 'total_price' && formItem.qty > 0 && numValue >= 0) {
+      if (
+        field === 'total_price' &&
+        formItem.qty > 0 &&
+        numValue !== '' &&
+        numValue >= 0
+      ) {
         const calculatedPrice = numValue / formItem.qty;
         formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
       }
@@ -692,6 +711,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                         handleProductChange(formItemIndex, val)
                                       }
                                       options={supplierProductOptions}
+                                      placeholder='Pilih produk'
                                       isClearable={false}
                                       isSearchable={false}
                                       isDisabled={type === 'add'}
@@ -699,6 +719,9 @@ const PurchaseOrderStaffApprovalForm = ({
                                         wrapper:
                                           'min-w-52 md:min-w-72 lg:min-w-80',
                                       }}
+                                      bottomLabel={
+                                        'Previous: ' + purchaseItem.product.name
+                                      }
                                     />
                                   </td>
                                   <td>
@@ -726,9 +749,8 @@ const PurchaseOrderStaffApprovalForm = ({
                                       <NumberInput
                                         name={`items.${formItemIndex}.qty`}
                                         value={
-                                          formItem?.qty ||
-                                          purchaseItem?.quantity ||
-                                          ''
+                                          formik.values.items?.[formItemIndex]
+                                            ?.qty ?? ''
                                         }
                                         onChange={(e) =>
                                           handlePurchaseItemChange(
@@ -741,8 +763,9 @@ const PurchaseOrderStaffApprovalForm = ({
                                         placeholder='Masukkan jumlah'
                                         allowNegative={false}
                                         decimalScale={0}
+                                        bottomLabel={`Previous: ${formatNumber(purchaseItem.quantity)}`}
                                         className={{
-                                          wrapper: 'min-w-24',
+                                          wrapper: 'min-w-32',
                                         }}
                                       />
                                     ) : (
@@ -797,6 +820,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                       thousandSeparator=','
                                       decimalSeparator='.'
                                       inputPrefix={'Rp'}
+                                      bottomLabel={`Previous: Rp${formatNumber(initialValues?.items?.find((item) => item.id === purchaseItem.id)?.price || 0, 'id-ID', 2, 2)}`}
                                       isError={
                                         isRepeaterInputError(
                                           formItemIndex,
@@ -834,6 +858,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                       thousandSeparator=','
                                       decimalSeparator='.'
                                       inputPrefix={'Rp'}
+                                      bottomLabel={`Previous: Rp${formatNumber(initialValues?.items?.find((item) => item.id === purchaseItem.id)?.total_price || 0, 'id-ID', 2, 2)}`}
                                       isError={
                                         isRepeaterInputError(
                                           formItemIndex,

From 824eed910a2188050ab42264feb52d9645efac93 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 24 Nov 2025 08:34:50 +0700
Subject: [PATCH 168/168] fix(resolve): fix resolve merge

---
 .husky/pre-commit                             |  3 ++
 src/app/purchase/detail/page.tsx              |  9 ++--
 .../movement/form/MovementForm.schema.ts      |  4 +-
 .../request/PurchaseRequestForm.schema.ts     | 52 ++++++++++---------
 .../form/request/PurchaseRequestForm.tsx      |  8 +--
 5 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index e69de29b..3782914b 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,3 @@
+npm run format
+npm run lint
+npm run build
\ No newline at end of file
diff --git a/src/app/purchase/detail/page.tsx b/src/app/purchase/detail/page.tsx
index 955055a6..df0de97b 100644
--- a/src/app/purchase/detail/page.tsx
+++ b/src/app/purchase/detail/page.tsx
@@ -12,10 +12,11 @@ const PurchaseDetail = () => {
 
   const purchaseId = searchParams.get('purchaseId');
 
-  const { data: purchase, isLoading: isLoadingPurchase, mutate: mutatePurchase } = useSWR(
-    purchaseId,
-    (id: number) => PurchaseApi.getSingle(id)
-  );
+  const {
+    data: purchase,
+    isLoading: isLoadingPurchase,
+    mutate: mutatePurchase,
+  } = useSWR(purchaseId, (id: number) => PurchaseApi.getSingle(id));
 
   if (!purchaseId) {
     router.back();
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 0d9b3277..5ea844ab 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -177,7 +177,9 @@ export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> =
         'Gudang tujuan tidak boleh sama dengan gudang asal!',
         function (value) {
           const { source_warehouse_id } = this.parent;
-          return !value || !source_warehouse_id || value !== source_warehouse_id;
+          return (
+            !value || !source_warehouse_id || value !== source_warehouse_id
+          );
         }
       ),
     products: Yup.array()
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
index af84c68b..414371c3 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.schema.ts
@@ -140,29 +140,31 @@ export const getPurchaseRequestFormInitialValues = (
     : null,
   location_id: initialValues?.location?.id ?? undefined,
   notes: initialValues?.notes ?? null,
-  items: initialValues?.items?.length ? initialValues.items.map((item) => ({
-    warehouse: item.warehouse
-      ? {
-          value: item.warehouse.id,
-          label: item.warehouse.name,
-        }
-      : null,
-    warehouse_id: item.warehouse?.id ?? 0,
-    product: item.product
-      ? {
-          value: item.product.id,
-          label: item.product.name,
-        }
-      : null,
-    product_id: item.product?.id ?? 0,
-    qty: item.qty ?? 0,
-  })) : [
-    {
-      warehouse: null,
-      warehouse_id: 0,
-      product: null,
-      product_id: 0,
-      qty: 0,
-    },
-  ],
+  items: initialValues?.items?.length
+    ? initialValues.items.map((item) => ({
+        warehouse: item.warehouse
+          ? {
+              value: item.warehouse.id,
+              label: item.warehouse.name,
+            }
+          : null,
+        warehouse_id: item.warehouse?.id ?? 0,
+        product: item.product
+          ? {
+              value: item.product.id,
+              label: item.product.name,
+            }
+          : null,
+        product_id: item.product?.id ?? 0,
+        qty: item.qty ?? 0,
+      }))
+    : [
+        {
+          warehouse: null,
+          warehouse_id: 0,
+          product: null,
+          product_id: 0,
+          qty: 0,
+        },
+      ],
 });
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 41732013..7100b134 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -781,7 +781,8 @@ const PurchaseRequestForm = ({
                               ? formatNumber(
                                   supplierProductData[item.product_id]
                                     .ProductPrice *
-                                  (parseFloat(item.qty?.toString() || '0') || 0)
+                                    (parseFloat(item.qty?.toString() || '0') ||
+                                      0)
                                 )
                               : ''
                           }
@@ -803,9 +804,8 @@ const PurchaseRequestForm = ({
                             item.product_id &&
                             supplierProductData[item.product_id]
                               ? `Harga per unit: Rp ${formatNumber(
-                                  supplierProductData[
-                                    item.product_id
-                                  ].ProductPrice
+                                  supplierProductData[item.product_id]
+                                    .ProductPrice
                                 )}`
                               : ''
                           }