From 4be719b9d82eab7b42b3f6276478ab29c51cbbcb Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 26 Dec 2025 16:21:22 +0700
Subject: [PATCH] feat(FE-331): implement permission guard in purchase

---
 .../pages/purchase/PurchaseTable.tsx          |  71 ++++++-----
 .../order/PurchaseOrderStaffApprovalForm.tsx  |  34 +++---
 .../purchase/order/PurchaseOrderDetail.tsx    | 111 +++++++++++-------
 3 files changed, 128 insertions(+), 88 deletions(-)

diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index a77e1158..81f45cc9 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -15,6 +15,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -38,15 +39,17 @@ const RowOptionsMenu = ({
 }: RowOptionsMenuProps) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/purchase/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>
+      <RequirePermission permissions='lti.purchase.detail'>
+        <Button
+          href={`/purchase/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>
+      </RequirePermission>
 
       {/*<Button*/}
       {/*  href={`/purchase/detail/edit/?purchaseId=${props.row.original.id}`}*/}
@@ -58,20 +61,22 @@ const RowOptionsMenu = ({
       {/*  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>
+      <RequirePermission permissions='lti.purchase.delete'>
+        <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>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -227,15 +232,17 @@ const PurchaseTable = () => {
         <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 flex flex-row gap-2'>
-              <Button
-                href='/purchase/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.purchase.create'>
+                <Button
+                  href='/purchase/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 1fcd7a94..76d9c11d 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -32,6 +32,7 @@ import {
 } from '@/types/api/purchase/purchase';
 import { BaseApproval, BaseGroupedApproval } from '@/types/api/api-general';
 import { useRouter } from 'next/navigation';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -897,20 +898,25 @@ const PurchaseOrderStaffApprovalForm = ({
                                     <div className='flex justify-center'>
                                       {canUpdatePurchaseItems &&
                                         canShowDeleteAddButtons && (
-                                          <Button
-                                            type='button'
-                                            color='error'
-                                            onClick={() =>
-                                              removePurchaseItem(formItemIndex)
-                                            }
-                                            title='Hapus item'
-                                          >
-                                            <Icon
-                                              icon='mdi:trash-can'
-                                              width={16}
-                                              height={16}
-                                            />
-                                          </Button>
+                                          <RequirePermission permissions='lti.purchase.delete.item'>
+                                            <Button
+                                              type='button'
+                                              color='error'
+                                              className='text-sm w-fit'
+                                              onClick={() =>
+                                                removePurchaseItem(
+                                                  formItemIndex
+                                                )
+                                              }
+                                              title='Hapus item'
+                                            >
+                                              <Icon
+                                                icon='mdi:trash-can'
+                                                width={16}
+                                                height={16}
+                                              />
+                                            </Button>
+                                          </RequirePermission>
                                         )}
                                     </div>
                                   </td>
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 35d9e104..de07ee52 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -39,19 +39,22 @@ 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';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 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>
+      <RequirePermission permissions='lti.purchase.update'>
+        <Button
+          onClick={onEdit}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -59,15 +62,17 @@ 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>
+      <RequirePermission permissions='lti.purchase.receive'>
+        <Button
+          onClick={onEdit}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -496,14 +501,16 @@ const PurchaseOrderDetail = ({
               };
 
               return (
-                <Button
-                  type='button'
-                  color='error'
-                  className='text-sm'
-                  onClick={deleteClickHandler}
-                >
-                  <Icon icon='mdi:trash-can' width={16} height={16} />
-                </Button>
+                <RequirePermission permissions='lti.purchase.delete.item'>
+                  <Button
+                    type='button'
+                    color='error'
+                    className='text-sm'
+                    onClick={deleteClickHandler}
+                  >
+                    <Icon icon='mdi:trash-can' width={16} height={16} />
+                  </Button>
+                </RequirePermission>
               );
             },
           },
@@ -632,25 +639,45 @@ const PurchaseOrderDetail = ({
 
         {showApprovalButton && (
           <div className='flex flex-row gap-2'>
-            <Button
-              onClick={handleApprovalClick}
-              variant='outline'
-              color='success'
-              className='w-full sm:w-fit'
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
             >
-              <Icon icon='material-symbols:check' width={24} height={24} />
-              Approve
-            </Button>
+              <Button
+                onClick={handleApprovalClick}
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
 
-            <Button
-              variant='outline'
-              color='error'
-              className='w-full sm:w-fit'
-              onClick={handleRejectionClick}
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
             >
-              <Icon icon='material-symbols:close' width={24} height={24} />
-              Reject
-            </Button>
+              <Button
+                variant='outline'
+                color='error'
+                className='w-full sm:w-fit'
+                onClick={handleRejectionClick}
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </RequirePermission>
           </div>
         )}
       </div>