feat(FE-331): implement permission guard in closing

src/components/pages/closing/ClosingsTable.tsx

@@ -15,6 +15,8 @@ import 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, formatCurrency, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -43,8 +45,8 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      {/* TODO: apply RBAC */}
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
+        <RequirePermission permissions='lti.closing.detail'>
           <Button
             href={`/closing/detail/?closingId=${props.row.original.id}`}
             variant='ghost'
@@ -54,6 +56,7 @@ const RowOptionsMenu = ({
             <Icon icon='mdi:eye-outline' width={16} height={16} />
             Detail
           </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );