feat(FE-208): create PurchaseDetail page with dummy data and integrate PurchaseRequestForm

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;

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'

src/components/pages/purchase/form/request/PurchaseRequestForm.tsx

@@ -507,13 +507,7 @@ const PurchaseRequestForm = ({
               body: 'flex flex-col gap-6',
             }}
           >
-            <div
+            <div className={'grid grid-cols-1 md:grid-cols-2 gap-6'}>
-              className={
-                type === 'detail'
-                  ? 'flex flex-col gap-6'
-                  : '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>