feat(FE-331): implement permission guard in transfer to laying

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -26,6 +26,7 @@ import TextInput from '@/components/input/TextInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
@@ -56,12 +57,12 @@ const RowOptionsMenu = ({
 
   const showDeleteButton = showEditButton;
 
-  // TODO: apply RBAC
   const showApproveButton = showEditButton;
   const showRejectButton = showEditButton;
 
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
         <Button
           href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
           variant='ghost'
@@ -71,8 +72,10 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
       {showEditButton && (
+        <RequirePermission permissions='lti.production.transfer_to_laying.update'>
           <Button
             href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
             variant='ghost'
@@ -82,10 +85,12 @@ const RowOptionsMenu = ({
             <Icon icon='material-symbols:edit-outline' width={16} height={16} />
             Edit
           </Button>
+        </RequirePermission>
       )}
 
       {/* TODO: apply RBAC */}
       {showApproveButton && (
+        <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
           <Button
             variant='ghost'
             color='success'
@@ -95,8 +100,10 @@ const RowOptionsMenu = ({
             <Icon icon='material-symbols:check' width={24} height={24} />
             Approve
           </Button>
+        </RequirePermission>
       )}
       {showRejectButton && (
+        <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
           <Button
             variant='ghost'
             color='error'
@@ -106,8 +113,10 @@ const RowOptionsMenu = ({
             <Icon icon='material-symbols:close' width={24} height={24} />
             Reject
           </Button>
+        </RequirePermission>
       )}
       {showDeleteButton && (
+        <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
           <Button
             onClick={deleteClickHandler}
             variant='ghost'
@@ -122,6 +131,7 @@ const RowOptionsMenu = ({
             />
             Delete
           </Button>
+        </RequirePermission>
       )}
     </RowOptionsMenuWrapper>
   );
@@ -502,6 +512,7 @@ const TransferToLayingsTable = () => {
         <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'>
+              <RequirePermission permissions='lti.production.transfer_to_laying.create'>
                 <Button
                   href='/production/transfer-to-laying/add'
                   variant='outline'
@@ -511,9 +522,11 @@ const TransferToLayingsTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
 
               {selectedRowIds.length > 0 && (
                 <>
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
                     <Button
                       variant='outline'
                       color='success'
@@ -528,7 +541,9 @@ const TransferToLayingsTable = () => {
                       />
                       Approve
                     </Button>
+                  </RequirePermission>
 
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
                     <Button
                       variant='outline'
                       color='error'
@@ -543,6 +558,7 @@ const TransferToLayingsTable = () => {
                       />
                       Reject
                     </Button>
+                  </RequirePermission>
                 </>
               )}
             </div>

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

@@ -8,6 +8,7 @@ import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import RequirePermission from '@/components/helper/RequirePermission';
 import SelectInput, {
   OptionType,
   useSelect,
@@ -500,7 +501,7 @@ const TransferToLayingForm = ({
             <>
               {isShowApproveRejectButton && (
                 <div className='w-full flex flex-row justify-end gap-2'>
-                  {/* TODO: apply RBAC */}
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
                     <Button
                       variant='outline'
                       color='success'
@@ -514,7 +515,9 @@ const TransferToLayingForm = ({
                       />
                       Approve
                     </Button>
+                  </RequirePermission>
 
+                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
                     <Button
                       variant='outline'
                       color='error'
@@ -528,6 +531,7 @@ const TransferToLayingForm = ({
                       />
                       Reject
                     </Button>
+                  </RequirePermission>
                 </div>
               )}
             </>
@@ -788,6 +792,7 @@ const TransferToLayingForm = ({
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
                 {isShowDeleteButton && (
+                  <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
                     <Button
                       type='button'
                       color='error'
@@ -802,9 +807,11 @@ const TransferToLayingForm = ({
                       />
                       Delete
                     </Button>
+                  </RequirePermission>
                 )}
 
                 {type !== 'edit' && isShowEditButton && (
+                  <RequirePermission permissions='lti.production.transfer_to_laying.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -819,6 +826,7 @@ const TransferToLayingForm = ({
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}
@@ -833,6 +841,13 @@ const TransferToLayingForm = ({
                   Reset
                 </Button>
 
+                <RequirePermission
+                  permissions={
+                    type === 'add'
+                      ? 'lti.production.transfer_to_laying.create'
+                      : 'lti.production.transfer_to_laying.update'
+                  }
+                >
                   <Button
                     type='submit'
                     color='primary'
@@ -842,6 +857,7 @@ const TransferToLayingForm = ({
                   >
                     Submit
                   </Button>
+                </RequirePermission>
               </div>
             )}
           </div>