From 57fa67c05a5821f9b43127469831a2d06e08a99a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 2 Jan 2026 14:22:57 +0700
Subject: [PATCH] refactor(FE): Support MovementDocument in movement form

---
 .../movement/form/MovementForm.schema.ts      | 13 ++--
 .../inventory/movement/form/MovementForm.tsx  | 67 +++++++++++++------
 src/types/api/inventory/movement.d.ts         |  9 +++
 3 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 5ea844ab..9b2c8557 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -1,5 +1,5 @@
 import * as Yup from 'yup';
-import { Movement } from '@/types/api/inventory/movement';
+import { Movement, MovementDocument } from '@/types/api/inventory/movement';
 
 type MovementFormSchemaType = {
   transfer_reason: string;
@@ -29,7 +29,7 @@ type MovementFormSchemaType = {
   deliveries: {
     delivery_cost?: number | string;
     delivery_cost_per_item?: number | string;
-    document?: File | string | null;
+    document?: File | MovementDocument | null;
     document_path?: string | null;
     driver_name: string;
     vehicle_plate: string;
@@ -61,7 +61,7 @@ export type ProductSchema = {
 export type DeliverySchema = {
   delivery_cost?: number | string;
   delivery_cost_per_item?: number | string;
-  document?: File | string | null;
+  document?: File | MovementDocument | null;
   document_path?: string | null;
   driver_name: string;
   vehicle_plate: string;
@@ -129,13 +129,12 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     }),
   document_path: Yup.string().optional(),
   document_index: Yup.number().optional(),
-  document: Yup.mixed<File | string>()
+  document: Yup.mixed<File | MovementDocument>()
     .nullable()
     .test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
       if (!value) return true;
-      if (typeof value === 'string') return true;
       if (value instanceof File) return value.size <= 2 * 1024 * 1024;
-      return false;
+      return true;
     }),
   driver_name: Yup.string().required('Nama sopir wajib diisi!'),
   vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
@@ -241,7 +240,7 @@ export const getMovementFormInitialValues = (
         delivery_cost: d.shipping_cost_total ?? undefined,
         delivery_cost_per_item: d.shipping_cost_item ?? undefined,
         document_number: d.document_number ?? '',
-        document: d.document_path ?? null,
+        document: d.document ?? null,
         document_path: d.document_path ?? null,
         driver_name: d.driver_name ?? '',
         vehicle_plate: d.vehicle_plate ?? '',
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index a4c24330..3c49295e 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -35,6 +35,7 @@ import FileInput from '@/components/input/FileInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import Badge from '@/components/Badge';
 import Card from '@/components/Card';
+import { S3_PUBLIC_BASE_URL } from '@/config/constant';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -1532,27 +1533,51 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         {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>
+                              {delivery.document_path ? (
+                                <Button
+                                  color='primary'
+                                  className='w-full min-w-52 flex items-center justify-center gap-2'
+                                  href={`${S3_PUBLIC_BASE_URL}/${delivery.document_path.startsWith('/') ? delivery.document_path.slice(1) : delivery.document_path}`}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                >
+                                  <Icon
+                                    icon='material-symbols:file-open-outline'
+                                    width={20}
+                                    height={20}
+                                  />
+                                  Lihat Dokumen
+                                </Button>
+                              ) : delivery.document &&
+                                delivery.document instanceof File === false ? (
+                                <Button
+                                  color='primary'
+                                  className='w-full min-w-52 flex items-center justify-center gap-2'
+                                  href={`${S3_PUBLIC_BASE_URL}/${delivery.document.path.startsWith('/') ? delivery.document.path.slice(1) : delivery.document.path}`}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                >
+                                  <Icon
+                                    icon='material-symbols:file-open-outline'
+                                    width={20}
+                                    height={20}
+                                  />
+                                  {delivery.document.name}
+                                </Button>
+                              ) : (
+                                <Button
+                                  color='neutral'
+                                  className='w-full min-w-52 flex items-center justify-center gap-2 cursor-not-allowed'
+                                  disabled
+                                >
+                                  <Icon
+                                    icon='material-symbols:description'
+                                    width={20}
+                                    height={20}
+                                  />
+                                  Tidak ada dokumen
+                                </Button>
+                              )}
                             </div>
                           </>
                         ) : (
diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts
index 3114518f..2f6caceb 100644
--- a/src/types/api/inventory/movement.d.ts
+++ b/src/types/api/inventory/movement.d.ts
@@ -14,6 +14,14 @@ type MovementWarehouse = {
   };
 };
 
+export type MovementDocument = {
+  id: number;
+  path: string;
+  name: string;
+  ext: string;
+  size: number;
+};
+
 export type BaseMovement = {
   id: number;
   transfer_reason: string;
@@ -39,6 +47,7 @@ export type BaseMovement = {
     document_path: string;
     shipping_cost_item: number;
     shipping_cost_total: number;
+    document?: MovementDocument;
     items: {
       id: number;
       stock_transfer_detail_id: number;