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

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
-              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>