feat(FE-331): implement permission guard in project flock

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -25,6 +25,8 @@ import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
+import RequirePermission from '@/components/helper/RequirePermission';
+
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
@@ -46,50 +48,58 @@ const RowOptionsMenu = ({
       )}
     >
       <div className='flex flex-col gap-1'>
-        <Button
-          href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-        {props.row.original.approval.step_name === 'Aktif' && (
+        <RequirePermission permissions='lti.production.project_flocks.detail'>
           <Button
-            href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+            href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
             variant='ghost'
-            color='success'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='mdi:home-import-outline' width={16} height={16} />
-            Chickin
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
           </Button>
+        </RequirePermission>
+        {props.row.original.approval.step_name === 'Aktif' && (
+          <RequirePermission permissions='lti.production.chickins.create'>
+            <Button
+              href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
+              variant='ghost'
+              color='success'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:home-import-outline' width={16} height={16} />
+              Chickin
+            </Button>
+          </RequirePermission>
         )}
         {props.row.original.approval.step_name === 'Pengajuan' && (
-          <Button
-            href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='mdi:pencil-outline' width={16} height={16} />
-            Edit
-          </Button>
+          <RequirePermission permissions='lti.production.project_flocks.update'>
+            <Button
+              href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:pencil-outline' width={16} height={16} />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='text-error hover:text-inherit justify-start text-sm'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.production.project_flocks.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='text-error hover:text-inherit justify-start text-sm'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </div>
   );
@@ -287,14 +297,16 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col justify-between items-end gap-2'>
             <div className='flex flex-col sm:flex-row gap-3 w-full'>
-              <Button
-                color='primary'
-                className='w-full sm:w-fit'
-                href='/production/project-flock/add'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.production.project_flocks.create'>
+                <Button
+                  color='primary'
+                  className='w-full sm:w-fit'
+                  href='/production/project-flock/add'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
               {/* <Button
                 variant='outline'
                 color='success'
@@ -630,6 +642,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               );
               setRowSelection({});
             },
+            permissions: 'lti.production.project_flocks.detail',
           },
           {
             action: 'DELETE',
@@ -639,6 +652,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
             onClick: () => {
               deleteModal.openModal();
             },
+            permissions: 'lti.production.project_flocks.delete',
           },
         ]}
         approvals={[
@@ -651,6 +665,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               confirmModal.openModal();
             },
             disabled: !canApprove,
+            permissions: 'lti.production.project_flocks.approve',
           },
           {
             icon: 'mdi:times',
@@ -660,6 +675,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               setApprovalAction('REJECTED');
               confirmModal.openModal();
             },
+            permissions: 'lti.production.project_flocks.approve',
           },
         ]}
         selectedRowIds={selectedRowIds}