Merge branch 'feat/FE/US-304/permission-guard' into 'development'

[FEAT/FE][US#304] Permission Guard

See merge request mbugroup/lti-web-client!115

src/components/FloatingActionsButton.tsx

@@ -5,6 +5,8 @@ import Tooltip from '@/components/Tooltip';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 
+import { useAuth } from '@/services/hooks/useAuth';
+
 type FloatingActionsButtonProps = {
   actions: {
     action: 'DETAIL' | 'EDIT' | 'DELETE';
@@ -13,6 +15,7 @@ type FloatingActionsButtonProps = {
     onClick?: () => void;
     hidden?: boolean;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   approvals: {
     action: 'APPROVED' | 'REJECTED';
@@ -20,6 +23,7 @@ type FloatingActionsButtonProps = {
     label?: string;
     onClick?: () => void;
     disabled?: boolean;
+    permissions?: string | string[];
   }[];
   selectedRowIds: number[];
   onClose: () => void;
@@ -31,6 +35,7 @@ const FloatingActionsButton = ({
   selectedRowIds,
   onClose,
 }: FloatingActionsButtonProps) => {
+  const { permissionCheck } = useAuth();
   // Jika tidak ada baris yang dipilih, jangan tampilkan FAB
   const positionStyles =
     selectedRowIds.length > 0
@@ -71,7 +76,18 @@ const FloatingActionsButton = ({
             <div className='flex gap-4 items-center'>
               {/* Render Aksi dari props.actions */}
               {actions
-                .filter((action) => !action.hidden)
+                .filter((action) => {
+                  if (action.hidden) return false;
+                  if (action.permissions) {
+                    if (typeof action.permissions === 'string') {
+                      return permissionCheck(action.permissions);
+                    }
+                    return action.permissions.some((permission) =>
+                      permissionCheck(permission)
+                    );
+                  }
+                  return true;
+                })
                 .map((action, index) => {
                   return (
                     <Button
@@ -111,7 +127,19 @@ const FloatingActionsButton = ({
 
         {/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
         <div className={`grid grid-cols-${approvals.length} gap-3`}>
-          {approvals.map((approval, index) => (
+          {approvals
+            .filter((approval) => {
+              if (approval.permissions) {
+                if (typeof approval.permissions === 'string') {
+                  return permissionCheck(approval.permissions);
+                }
+                return approval.permissions.some((permission) =>
+                  permissionCheck(permission)
+                );
+              }
+              return true;
+            })
+            .map((approval, index) => (
               <Button
                 key={index}
                 onClick={approval.onClick}

src/components/MainDrawer.tsx

@@ -9,10 +9,13 @@ import Drawer from '@/components/Drawer';
 import Navbar from '@/components/Navbar';
 import Button from '@/components/Button';
 import SidebarMenu from '@/components/molecules/SidebarMenu';
+import PermissionNotFound from '@/components/helper/PermissionNotFound';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
 import { isPathActive } from '@/lib/helper';
+import { ROUTE_PERMISSIONS } from '@/config/route-permission';
+import { useAuth } from '@/services/hooks/useAuth';
 
 const MainDrawerContent = () => {
   const pathname = usePathname();
@@ -62,6 +65,11 @@ const MainDrawer = ({
 }>) => {
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
+  const { permissionCheck } = useAuth();
+
+  const isPermitted = ROUTE_PERMISSIONS[pathname]?.some((permission) =>
+    permissionCheck(permission)
+  );
 
   const getPageTitle = useCallback(() => {
     let title = '';
@@ -101,6 +109,10 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
+  if (!isPermitted) {
+    return <PermissionNotFound />;
+  }
+
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/helper/PermissionNotFound.tsx

@@ -0,0 +1,12 @@
+const PermissionNotFound = () => {
+  return (
+    <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <p className='text-gray-600 text-center'>
+        You do not have permission to access this page.
+      </p>
+    </div>
+  );
+};
+
+export default PermissionNotFound;

src/components/helper/RequirePermission.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAuth } from '@/services/hooks/useAuth';
+
+interface RequirePermissionProps {
+  children: React.ReactNode;
+  permissions: string | string[];
+}
+
+const RequirePermission = ({
+  children,
+  permissions,
+}: RequirePermissionProps) => {
+  const { permissionCheck } = useAuth();
+
+  const isPermitted =
+    typeof permissions === 'string'
+      ? permissionCheck(permissions)
+      : permissions.some((permission) => permissionCheck(permission));
+
+  if (!isPermitted) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default RequirePermission;

src/components/molecules/SidebarMenu.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import Menu from '@/components/menu/Menu';
 import { Icon } from '@iconify/react';
 import { cn, isPathActive } from '@/lib/helper';
+import { useAuth } from '@/services/hooks/useAuth';
 
 export interface SidebarMenuItem {
   type?: 'item' | 'title';
@@ -9,6 +10,7 @@ export interface SidebarMenuItem {
   link: string;
   icon?: string;
   submenu?: SidebarMenuItem[];
+  permission?: string[];
 }
 
 interface SidebarMenuItemProps {
@@ -22,8 +24,17 @@ interface SidebarMenuProps {
 }
 
 const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+  const { permissionCheck } = useAuth();
   const isItemActive = isPathActive(activeLink, item.link);
 
+  const isUserPermitted = item.permission
+    ? item.permission?.some((permissionName) => permissionCheck(permissionName))
+    : true;
+
+  if (!isUserPermitted) {
+    return null;
+  }
+
   const menuItemWithoutSubmenu = (
     <li>
       <Link
@@ -78,13 +89,15 @@ const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
 const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
   return (
     <Menu>
-      {menu.map((menuItem, menuIdx) => (
+      {menu.map((menuItem, menuIdx) => {
+        return (
           <SidebarMenuItem
             key={menuIdx}
             item={menuItem}
             activeLink={activeLink}
           />
-      ))}
+        );
+      })}
     </Menu>
   );
 };

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

src/components/pages/expense/ExpenseRealizationContent.tsx

@@ -4,6 +4,7 @@ import toast from 'react-hot-toast';
 import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
+import RequirePermission from '@/components/helper/RequirePermission';
 import Card from '@/components/Card';
 import DropFileInput from '@/components/input/DropFileInput';
 
@@ -62,7 +63,7 @@ const ExpenseRealizationContent = ({
     <div>
       <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
         <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
-          {/* TODO: apply RBAC */}
+          <RequirePermission permissions='lti.expense.update.realization'>
             <Button
               type='button'
               color='warning'
@@ -72,6 +73,7 @@ const ExpenseRealizationContent = ({
               <Icon icon='mdi:pencil-outline' width={24} height={24} />
               Edit Realisasi
             </Button>
+          </RequirePermission>
         </div>
       </div>
 
@@ -124,6 +126,7 @@ const ExpenseRealizationContent = ({
                     )}
                 </div>
 
+                <RequirePermission permissions='lti.expense.document.realization'>
                   <div className='flex flex-col gap-2'>
                     <DropFileInput
                       name='documents'
@@ -154,6 +157,7 @@ const ExpenseRealizationContent = ({
                         </Button>
                       )}
                   </div>
+                </RequirePermission>
               </td>
             </tr>
           </tbody>

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -19,6 +19,7 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import ExpensePDFPreviewButton from '@/components/pages/expense//pdf/ExpensePDFButton';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { formatCurrency, formatDate } from '@/lib/helper';
@@ -255,6 +256,7 @@ const ExpenseRequestContent = ({
 
           <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
             {isCurrentApprovalOnManager && (
+              <RequirePermission permissions='lti.expense.approve.manager'>
                 <Button
                   variant='outline'
                   color='info'
@@ -264,9 +266,11 @@ const ExpenseRequestContent = ({
                   <Icon icon='lucide-lab:farm' width={24} height={24} />
                   Approve Manager
                 </Button>
+              </RequirePermission>
             )}
 
             {isCurrentApprovalOnFinance && (
+              <RequirePermission permissions='lti.expense.approve.finance'>
                 <Button
                   variant='outline'
                   color='success'
@@ -276,9 +280,11 @@ const ExpenseRequestContent = ({
                   <Icon icon='tdesign:money' width={24} height={24} />
                   Approve Finance
                 </Button>
+              </RequirePermission>
             )}
 
             {isCurrentApprovalOnRealization && (
+              <RequirePermission permissions='lti.expense.complete.expense'>
                 <Button
                   variant='outline'
                   color='success'
@@ -292,9 +298,16 @@ const ExpenseRequestContent = ({
                   />
                   Selesai
                 </Button>
+              </RequirePermission>
             )}
 
             {showRejectButton && (
+              <RequirePermission
+                permissions={[
+                  'lti.expense.approve.manager',
+                  'lti.expense.approve.finance',
+                ]}
+              >
                 <Button
                   variant='outline'
                   color='error'
@@ -304,9 +317,11 @@ const ExpenseRequestContent = ({
                   <Icon icon='material-symbols:close' width={24} height={24} />
                   Reject
                 </Button>
+              </RequirePermission>
             )}
 
             {isExpenseCanBeRealized && (
+              <RequirePermission permissions='lti.expense.create.realization'>
                 <Button
                   variant='outline'
                   color='info'
@@ -320,10 +335,12 @@ const ExpenseRequestContent = ({
                   />
                   Realisasi
                 </Button>
+              </RequirePermission>
             )}
 
             <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
               {showEditButton && (
+                <RequirePermission permissions='lti.expense.update'>
                   <Button
                     type='button'
                     color='warning'
@@ -333,8 +350,10 @@ const ExpenseRequestContent = ({
                     <Icon icon='mdi:pencil-outline' width={24} height={24} />
                     Edit
                   </Button>
+                </RequirePermission>
               )}
 
+              <RequirePermission permissions='lti.expense.delete'>
                 <Button
                   type='button'
                   color='error'
@@ -349,6 +368,7 @@ const ExpenseRequestContent = ({
                   />
                   Delete
                 </Button>
+              </RequirePermission>
             </div>
           </div>
 
@@ -485,6 +505,7 @@ const ExpenseRequestContent = ({
                         )}
                     </div>
 
+                    <RequirePermission permissions='lti.expense.document'>
                       <div className='flex flex-col gap-2'>
                         <DropFileInput
                           name='documents'
@@ -510,11 +531,16 @@ const ExpenseRequestContent = ({
                               isLoading={formik.isSubmitting}
                               className='w-fit self-end'
                             >
-                            <Icon icon='ic:round-plus' width={24} height={24} />
+                              <Icon
+                                icon='ic:round-plus'
+                                width={24}
+                                height={24}
+                              />
                               Tambah
                             </Button>
                           )}
                       </div>
+                    </RequirePermission>
                   </td>
                 </tr>
               </tbody>

src/components/pages/expense/ExpensesTable.tsx

@@ -28,6 +28,7 @@ import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import DateInput from '@/components/input/DateInput';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
@@ -67,6 +68,7 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
+        <RequirePermission permissions='lti.expense.detail'>
           <Button
             href={`/expense/detail/?expenseId=${props.row.original.id}`}
             variant='ghost'
@@ -76,20 +78,28 @@ const RowOptionsMenu = ({
             <Icon icon='mdi:eye-outline' width={16} height={16} />
             Detail
           </Button>
+        </RequirePermission>
 
         {showEditButton && (
+          <RequirePermission permissions='lti.expense.update'>
             <Button
               href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
               variant='ghost'
               color='warning'
               className='justify-start text-sm'
             >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={16}
+                height={16}
+              />
               Edit
             </Button>
+          </RequirePermission>
         )}
 
         {showRealizationButton && (
+          <RequirePermission permissions='lti.expense.create.realization'>
             <Button
               href={`/expense/realization/?expenseId=${props.row.original.id}`}
               variant='ghost'
@@ -103,8 +113,10 @@ const RowOptionsMenu = ({
               />
               Realisasi
             </Button>
+          </RequirePermission>
         )}
 
+        <RequirePermission permissions='lti.expense.delete'>
           <Button
             onClick={deleteClickHandler}
             variant='ghost'
@@ -119,6 +131,7 @@ const RowOptionsMenu = ({
             />
             Delete
           </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -559,6 +572,7 @@ const ExpensesTable = () => {
           <div className='flex flex-col gap-2 mb-4'>
             <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
               <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+                <RequirePermission permissions='lti.expense.create'>
                   <Button
                     href='/expense/add'
                     variant='outline'
@@ -568,9 +582,11 @@ const ExpensesTable = () => {
                     <Icon icon='ic:round-plus' width={24} height={24} />
                     Tambah
                   </Button>
+                </RequirePermission>
 
                 {selectedRowIds.length > 0 && (
                   <>
+                    <RequirePermission permissions='lti.expense.approve.manager'>
                       <Button
                         variant='outline'
                         color='info'
@@ -581,7 +597,9 @@ const ExpensesTable = () => {
                         <Icon icon='lucide-lab:farm' width={24} height={24} />
                         Approve Manager
                       </Button>
+                    </RequirePermission>
 
+                    <RequirePermission permissions='lti.expense.approve.finance'>
                       <Button
                         variant='outline'
                         color='success'
@@ -592,7 +610,14 @@ const ExpensesTable = () => {
                         <Icon icon='tdesign:money' width={24} height={24} />
                         Approve Finance
                       </Button>
+                    </RequirePermission>
 
+                    <RequirePermission
+                      permissions={[
+                        'lti.expense.approve.manager',
+                        'lti.expense.approve.finance',
+                      ]}
+                    >
                       <Button
                         variant='outline'
                         color='error'
@@ -610,6 +635,7 @@ const ExpensesTable = () => {
                         />
                         Reject
                       </Button>
+                    </RequirePermission>
                   </>
                 )}
               </div>

src/components/pages/expense/form/ExpenseRealizationForm.tsx

@@ -16,6 +16,7 @@ import DateInput from '@/components/input/DateInput';
 import DropFileInput from '@/components/input/DropFileInput';
 import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 import ExpenseRealizationKandangDetailExpense from '@/components/pages/expense/form/ExpenseRealizationKandangDetailExpense';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   CreateExpenseRealizationPayload,
@@ -290,6 +291,7 @@ const ExpenseRealizationForm = ({
             className={{ wrapper: 'col-span-12' }}
           />
 
+          <RequirePermission permissions='lti.expense.document.realization'>
             <DropFileInput
               label='Dokumen Realisasi'
               name='documents'
@@ -305,6 +307,7 @@ const ExpenseRealizationForm = ({
                 inputWrapper: 'h-12 flex items-center',
               }}
             />
+          </RequirePermission>
 
           {formik.values.existing_documents &&
             formik.values.existing_documents.length > 0 && (
@@ -357,6 +360,7 @@ const ExpenseRealizationForm = ({
           {type !== 'add' && (
             <div className='flex flex-row justify-start gap-2'>
               {type !== 'edit' && (
+                <RequirePermission permissions='lti.expense.update'>
                   <Button
                     type='button'
                     color='warning'
@@ -371,6 +375,7 @@ const ExpenseRealizationForm = ({
                     />
                     Edit
                   </Button>
+                </RequirePermission>
               )}
             </div>
           )}

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -18,6 +18,7 @@ import DateInput from '@/components/input/DateInput';
 import ExpenseKandangsTable from '@/components/pages/expense/form/ExpenseKandangsTable';
 import DropFileInput from '@/components/input/DropFileInput';
 import ExpenseRequestKandangDetailExpense from '@/components/pages/expense/form/ExpenseRequestKandangDetailExpense';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ExpenseRequestFormSchema,
@@ -385,6 +386,7 @@ const ExpenseRequestForm = ({
               className={{ wrapper: 'col-span-12' }}
             />
 
+            <RequirePermission permissions='lti.expense.document'>
               <DropFileInput
                 label='Dokumen Pengajuan'
                 name='documents'
@@ -400,6 +402,7 @@ const ExpenseRequestForm = ({
                   inputWrapper: 'h-12 flex items-center',
                 }}
               />
+            </RequirePermission>
 
             {formik.values.existing_documents &&
               formik.values.existing_documents.length > 0 && (
@@ -461,6 +464,7 @@ const ExpenseRequestForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.expense.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -475,8 +479,10 @@ const ExpenseRequestForm = ({
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.expense.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -491,6 +497,7 @@ const ExpenseRequestForm = ({
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -4,6 +4,7 @@ import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -175,6 +176,7 @@ const InventoryAdjustmentTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.inventory.create'>
                 <Button
                   href='/inventory/adjustment/add'
                   variant='outline'
@@ -184,6 +186,7 @@ const InventoryAdjustmentTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
 
               {/* <DebouncedTextInput
                 name='search'

src/components/pages/inventory/movement/MovementTable.tsx

@@ -19,6 +19,7 @@ import SelectInput 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';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -28,6 +29,7 @@ const RowOptionsMenu = ({
   props: CellContext<Movement, unknown>;
 }) => (
   <RowOptionsMenuWrapper type={type}>
+    <RequirePermission permissions='lti.inventory.transfer.detail'>
       <Button
         href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
         variant='ghost'
@@ -37,6 +39,7 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -145,6 +148,7 @@ const MovementTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row gap-2'>
+              <RequirePermission permissions='lti.inventory.transfer.create'>
                 <Button
                   href='/inventory/movement/add'
                   variant='outline'
@@ -154,6 +158,7 @@ const MovementTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/inventory/product/InventoryProductTable.tsx

@@ -7,6 +7,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatNumber } from '@/lib/helper';
@@ -31,6 +32,7 @@ const RowOptionsMenu = ({
   props: CellContext<InventoryProduct, unknown>;
 }) => (
   <RowOptionsMenuWrapper type={type}>
+    <RequirePermission permissions='lti.inventory.product_stock.detail'>
       <Button
         href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
         variant='ghost'
@@ -40,6 +42,7 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 

src/components/pages/marketing/MarketingTable.tsx

@@ -26,6 +26,8 @@ import { useRouter } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
+import RequirePermission from '@/components/helper/RequirePermission';
+import { useAuth } from '@/services/hooks/useAuth';
 
 const RowsOptionsMenu = ({
   type = 'dropdown',
@@ -50,6 +52,7 @@ const RowsOptionsMenu = ({
       )}
     >
       <div className='flex flex-col gap-1'>
+        <RequirePermission permissions='lti.marketing.delivery_order.detail'>
           <Button
             href={`/marketing/detail?marketingId=${props.row.original.id}`}
             variant='ghost'
@@ -59,7 +62,15 @@ const RowsOptionsMenu = ({
             <Icon icon='mdi:eye-outline' width={16} height={16} />
             Detail
           </Button>
+        </RequirePermission>
         {props.row.original.latest_approval.step_number != 1 && (
+          <RequirePermission
+            permissions={
+              props.row.original.latest_approval.step_number == 3
+                ? 'lti.marketing.delivery_order.update'
+                : 'lti.marketing.delivery_order.create'
+            }
+          >
             <Button
               href={
                 props.row.original.latest_approval.step_number == 3
@@ -80,8 +91,10 @@ const RowsOptionsMenu = ({
               <Icon icon='mdi:truck' width={16} height={16} />
               Deliver
             </Button>
+          </RequirePermission>
         )}
         {props.row.original.latest_approval.step_number != 3 && (
+          <RequirePermission permissions='lti.marketing.sales_order.update'>
             <Button
               href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
               variant='ghost'
@@ -91,7 +104,9 @@ const RowsOptionsMenu = ({
               <Icon icon='mdi:pencil-outline' width={16} height={16} />
               Edit
             </Button>
+          </RequirePermission>
         )}
+        <RequirePermission permissions='lti.marketing.sales_order.delete'>
           <Button
             onClick={deleteClickHandler}
             variant='ghost'
@@ -101,6 +116,7 @@ const RowsOptionsMenu = ({
             <Icon icon='mdi:delete-outline' width={16} height={16} />
             Delete
           </Button>
+        </RequirePermission>
       </div>
     </div>
   );
@@ -116,6 +132,7 @@ const MarketingTable = () => {
   );
   const [selectedItem, setSelectedItem] = useState<Marketing | null>(null);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const { permissionCheck } = useAuth();
 
   const router = useRouter();
 
@@ -270,10 +287,14 @@ const MarketingTable = () => {
       <div className='flex flex-col gap-4'>
         <div className='flex flex-col gap-2 mb-4'>
           <TableToolbar
-            addButton={{
+            addButton={
+              permissionCheck('lti.marketing.sales_order.create')
+                ? {
                     href: '/marketing/add/sales-orders',
                     label: 'Tambah Sales Order',
-            }}
+                  }
+                : undefined
+            }
             search={{
               value: search,
               onChange: searchChangeHandler,
@@ -281,6 +302,7 @@ const MarketingTable = () => {
             }}
           />
           <div className='flex flex-row gap-2'>
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
               <Button
                 color='success'
                 onClick={approveClickHandler}
@@ -290,7 +312,9 @@ const MarketingTable = () => {
                 <Icon icon='material-symbols:check' width={24} height={24} />
                 Approve
               </Button>
+            </RequirePermission>
 
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
               <Button
                 color='error'
                 onClick={rejectClickHandler}
@@ -300,6 +324,7 @@ const MarketingTable = () => {
                 <Icon icon='material-symbols:close' width={24} height={24} />
                 Reject
               </Button>
+            </RequirePermission>
           </div>
           <TableRowSizeSelector
             value={pageSize}

src/components/pages/marketing/detail/MarketingDetail.tsx

@@ -33,6 +33,7 @@ import { useState } from 'react';
 import toast from 'react-hot-toast';
 import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
 import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const MarketingDetail = ({
   initialValues,
@@ -134,6 +135,7 @@ const MarketingDetail = ({
         <div className='flex-row flex gap-3'>
           {initialValues?.latest_approval?.step_number == 1 && (
             <>
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
                 <Button
                   color='success'
                   onClick={approveClickHandler}
@@ -145,6 +147,9 @@ const MarketingDetail = ({
                   <Icon icon='mdi:check' width={24} height={24} />
                   Approve
                 </Button>
+              </RequirePermission>
+
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
                 <Button
                   color='error'
                   onClick={rejectClickHandler}
@@ -156,9 +161,17 @@ const MarketingDetail = ({
                   <Icon icon='mdi:close' width={24} height={24} />
                   Reject
                 </Button>
+              </RequirePermission>
             </>
           )}
           {initialValues?.latest_approval?.step_number != 1 && (
+            <RequirePermission
+              permissions={
+                initialValues?.latest_approval?.step_number == 3
+                  ? 'lti.marketing.delivery_order.update'
+                  : 'lti.marketing.delivery_order.create'
+              }
+            >
               <Button
                 color='success'
                 href={
@@ -173,6 +186,7 @@ const MarketingDetail = ({
                   : 'Tambah '}
                 Delivery Order
               </Button>
+            </RequirePermission>
           )}
         </div>
 
@@ -413,6 +427,7 @@ const MarketingDetail = ({
         )}
         <div className='flex flex-row gap-3'>
           {initialValues?.latest_approval?.step_number != 3 && (
+            <RequirePermission permissions='lti.marketing.sales_order.update'>
               <Button
                 color='warning'
                 type='button'
@@ -421,11 +436,14 @@ const MarketingDetail = ({
                 <Icon icon='mdi:pencil' width={24} height={24} />
                 Edit
               </Button>
+            </RequirePermission>
           )}
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
             <Button color='error' onClick={deleteClickHandler}>
               <Icon icon='mdi:delete' width={24} height={24} />
               Hapus
             </Button>
+          </RequirePermission>
         </div>
       </div>
       <ConfirmationModal

src/components/pages/marketing/form/MarketingForm.tsx

@@ -47,6 +47,7 @@ import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-v
 import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
@@ -689,6 +690,7 @@ const MarketingForm = ({
       {/* Actions button */}
       {formType == 'edit' && (
         <div className='flex flex-row justify-start'>
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
             <Button
               type='button'
               color='error'
@@ -698,6 +700,7 @@ const MarketingForm = ({
               <Icon icon='mdi:trash' width={24} height={24} />
               Hapus
             </Button>
+          </RequirePermission>
         </div>
       )}
 

src/components/pages/master-data/area/AreasTable.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 { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
@@ -34,6 +35,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.area.detail'>
         <Button
           href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
           variant='ghost'
@@ -43,7 +45,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.area.update'>
         <Button
           href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
           variant='ghost'
@@ -53,7 +57,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.area.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -68,6 +74,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,6 +199,8 @@ const AreasTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.area.create'>
                   <Button
                     href='/master-data/area/add'
                     variant='outline'
@@ -201,6 +210,8 @@ const AreasTable = () => {
                     <Icon icon='ic:round-plus' width={24} height={24} />
                     Tambah
                   </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/area/form/AreaForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   AreaFormSchema,
@@ -160,6 +161,7 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.area.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -174,8 +176,10 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.area.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -190,6 +194,7 @@ const AreaForm = ({ type = 'add', initialValues }: AreaFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/bank/BanksTable.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 { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
@@ -34,6 +35,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.banks.detail'>
         <Button
           href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
           variant='ghost'
@@ -43,7 +45,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.banks.update'>
         <Button
           href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
           variant='ghost'
@@ -53,7 +57,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.banks.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -68,6 +74,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -205,6 +212,7 @@ const BanksTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.banks.create'>
                 <Button
                   href='/master-data/bank/add'
                   variant='outline'
@@ -214,6 +222,7 @@ const BanksTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/bank/form/BankForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   BankFormSchema,
@@ -208,6 +209,7 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.banks.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -222,8 +224,10 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.banks.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -238,6 +242,7 @@ const BankForm = ({ type = 'add', initialValues }: BankFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -9,6 +9,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -32,6 +33,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.customer.detail'>
         <Button
           href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
           variant='ghost'
@@ -41,6 +43,8 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.update'>
         <Button
           href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
           variant='ghost'
@@ -50,6 +54,8 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -64,6 +70,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -200,6 +207,7 @@ const CustomersTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.customer.create'>
                 <Button
                   href='/master-data/customer/add'
                   variant='outline'
@@ -209,6 +217,7 @@ const CustomersTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -27,6 +27,7 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import useSWR from 'swr';
 import { UserApi } from '@/services/api/user';
 import { TYPE_OPTIONS } from '@/config/constant';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -319,6 +320,7 @@ const CustomerForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.customer.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -333,8 +335,10 @@ const CustomerForm = ({
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.customer.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -349,6 +353,7 @@ const CustomerForm = ({
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/fcr/FcrsTable.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 { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
@@ -34,6 +35,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.fcr.detail'>
         <Button
           href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
           variant='ghost'
@@ -43,7 +45,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.fcr.update'>
         <Button
           href={`/master-data/fcr/detail/edit/?fcrId=${props.row.original.id}`}
           variant='ghost'
@@ -53,7 +57,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.fcr.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -68,6 +74,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,6 +199,7 @@ const FcrsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.fcr.create'>
                 <Button
                   href='/master-data/fcr/add'
                   variant='outline'
@@ -201,6 +209,7 @@ const FcrsTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/fcr/form/FcrForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   FcrFormSchema,
@@ -296,6 +297,7 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.fcr.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -310,8 +312,10 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.fcr.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -326,6 +330,7 @@ const FcrForm = ({ type = 'add', initialValues }: FcrFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/flock/FlocksTable.tsx

@@ -13,6 +13,7 @@ import { useModal } from '@/components/Modal';
 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 toast from 'react-hot-toast';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
@@ -32,6 +33,7 @@ const RowsOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.flocks.update'>
         <Button
           href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
           variant='ghost'
@@ -46,6 +48,8 @@ const RowsOptions = ({
           />
           Edit
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.detail'>
         <Button
           href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
           variant='ghost'
@@ -60,6 +64,8 @@ const RowsOptions = ({
           />
           Detail
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -74,6 +80,7 @@ const RowsOptions = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -196,6 +203,7 @@ const FlockTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.flocks.create'>
                 <Button
                   href='/master-data/flock/add'
                   variant='outline'
@@ -205,6 +213,7 @@ const FlockTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/flock/form/FlockForm.tsx

@@ -16,6 +16,7 @@ import { Icon } from '@iconify/react';
 import TextInput from '@/components/input/TextInput';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface FlockCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -130,6 +131,7 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.flocks.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -144,7 +146,9 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
                 {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.flocks.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -159,6 +163,7 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/kandang/KandangsTable.tsx

@@ -20,6 +20,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 { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
@@ -39,6 +40,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.kandangs.detail'>
         <Button
           href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
           variant='ghost'
@@ -48,7 +50,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.kandangs.update'>
         <Button
           href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
           variant='ghost'
@@ -58,7 +62,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.kandangs.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -73,6 +79,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -243,6 +250,8 @@ const KandangsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.kandangs.create'>
                   <Button
                     href='/master-data/kandang/add'
                     variant='outline'
@@ -252,6 +261,8 @@ const KandangsTable = () => {
                     <Icon icon='ic:round-plus' width={24} height={24} />
                     Tambah
                   </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/kandang/form/KandangForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   KandangFormSchema,
@@ -285,6 +286,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.kandangs.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -299,8 +301,10 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.kandangs.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -315,6 +319,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/location/LocationsTable.tsx

@@ -20,6 +20,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 { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
@@ -39,6 +40,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.locations.detail'>
         <Button
           href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
           variant='ghost'
@@ -48,7 +50,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.locations.update'>
         <Button
           href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
           variant='ghost'
@@ -58,7 +62,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.locations.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -73,6 +79,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -230,6 +237,8 @@ const LocationsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.locations.create'>
                   <Button
                     href='/master-data/location/add'
                     variant='outline'
@@ -239,6 +248,8 @@ const LocationsTable = () => {
                     <Icon icon='ic:round-plus' width={24} height={24} />
                     Tambah
                   </Button>
+                </RequirePermission>
+              </div>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/location/form/LocationForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   LocationFormSchema,
@@ -229,6 +230,7 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.locations.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -243,8 +245,10 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.locations.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -259,6 +263,7 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/nonstock/NonstocksTable.tsx

@@ -20,6 +20,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 { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
@@ -39,6 +40,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.nonstocks.detail'>
         <Button
           href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
           variant='ghost'
@@ -48,7 +50,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.nonstocks.update'>
         <Button
           href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
           variant='ghost'
@@ -58,7 +62,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.nonstocks.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -73,6 +79,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -242,6 +249,7 @@ const NonstocksTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.nonstocks.create'>
                 <Button
                   href='/master-data/nonstock/add'
                   variant='outline'
@@ -251,6 +259,7 @@ const NonstocksTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   NonstockFormSchema,
@@ -298,6 +299,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.nonstocks.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -312,8 +314,10 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.nonstocks.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -328,6 +332,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/product-category/ProductCategoryTable.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 { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
@@ -34,6 +35,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.product_categories.detail'>
         <Button
           href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
           variant='ghost'
@@ -43,6 +45,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.update'>
         <Button
           href={`/master-data/product-category/detail/edit/?productCategoryId=${props.row.original.id}`}
           variant='ghost'
@@ -52,6 +57,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:pencil-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -66,6 +74,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -193,6 +202,7 @@ const ProductCategoryTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.product_categories.create'>
                 <Button
                   href='/master-data/product-category/add'
                   variant='outline'
@@ -202,6 +212,7 @@ const ProductCategoryTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
             <DebouncedTextInput
               name='search'

src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ProductCategoryFormSchema,
@@ -183,6 +184,7 @@ const ProductCategoryForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.product_categories.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -197,8 +199,10 @@ const ProductCategoryForm = ({
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.product_categories.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -213,6 +217,7 @@ const ProductCategoryForm = ({
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/product/ProductTable.tsx

@@ -20,6 +20,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 { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
@@ -38,6 +39,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => (
   <RowOptionsMenuWrapper type={type}>
+    <RequirePermission permissions='lti.master.products.detail'>
       <Button
         href={`/master-data/product/detail/?productId=${props.row.original.id}`}
         variant='ghost'
@@ -47,6 +49,8 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.update'>
       <Button
         href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
         variant='ghost'
@@ -56,6 +60,8 @@ const RowOptionsMenu = ({
         <Icon icon='material-symbols:edit-outline' width={16} height={16} />
         Edit
       </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.delete'>
       <Button
         onClick={deleteClickHandler}
         variant='ghost'
@@ -70,6 +76,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -273,6 +280,7 @@ const ProductsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.products.create'>
                 <Button
                   href='/master-data/product/add'
                   variant='outline'
@@ -282,6 +290,7 @@ const ProductsTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
             <DebouncedTextInput
               name='search'

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -16,6 +16,7 @@ import SelectInput, {
 } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   ProductFormSchema,
@@ -413,6 +414,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.products.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -427,7 +429,9 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.products.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -442,6 +446,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -9,6 +9,7 @@ import Table from '@/components/Table';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -32,6 +33,7 @@ const RowOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.suppliers.detail'>
         <Button
           href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
           variant='ghost'
@@ -46,6 +48,8 @@ const RowOptions = ({
           />
           Detail
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.update'>
         <Button
           href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
           variant='ghost'
@@ -60,6 +64,8 @@ const RowOptions = ({
           />
           Edit
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -74,6 +80,7 @@ const RowOptions = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -219,6 +226,7 @@ const SuppliersTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.suppliers.create'>
                 <Button
                   href='/master-data/supplier/add'
                   variant='outline'
@@ -228,6 +236,7 @@ const SuppliersTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -24,6 +24,7 @@ import TextInput from '@/components/input/TextInput';
 import TextArea from '@/components/input/TextArea';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface SupplierCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -406,6 +407,7 @@ const SupplierForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.suppliers.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -420,8 +422,10 @@ const SupplierForm = ({
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.suppliers.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -436,6 +440,7 @@ const SupplierForm = ({
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/uom/UomsTable.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 { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
@@ -34,6 +35,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.uoms.detail'>
         <Button
           href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
           variant='ghost'
@@ -43,7 +45,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.uoms.update'>
         <Button
           href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
           variant='ghost'
@@ -53,7 +57,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.uoms.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -68,6 +74,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,6 +199,7 @@ const UomsTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.uoms.create'>
                 <Button
                   href='/master-data/uom/add'
                   variant='outline'
@@ -201,6 +209,7 @@ const UomsTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/uom/form/UomForm.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   UomFormSchema,
@@ -160,6 +161,7 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.uoms.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -174,8 +176,10 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.uoms.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -190,6 +194,7 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

src/components/pages/master-data/warehouse/WarehousesTable.tsx

@@ -20,6 +20,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 { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi } from '@/services/api/master-data';
@@ -39,6 +40,7 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.warehouses.detail'>
         <Button
           href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
           variant='ghost'
@@ -48,7 +50,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.warehouses.update'>
         <Button
           href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
           variant='ghost'
@@ -58,7 +62,9 @@ const RowOptionsMenu = ({
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
 
+      <RequirePermission permissions='lti.master.warehouses.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -73,6 +79,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -270,6 +277,7 @@ const WarehousesTable = () => {
         <div className='flex flex-col gap-2 mb-4'>
           <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
             <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.warehouses.create'>
                 <Button
                   href='/master-data/warehouse/add'
                   variant='outline'
@@ -279,6 +287,7 @@ const WarehousesTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

src/components/pages/master-data/warehouse/form/WarehouseForm.tsx

@@ -12,6 +12,7 @@ import TextInput from '@/components/input/TextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 import {
   WarehouseFormSchema,
@@ -435,6 +436,7 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
+                <RequirePermission permissions='lti.master.warehouses.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -449,8 +451,10 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
 
                 {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.warehouses.update'>
                     <Button
                       type='button'
                       color='warning'
@@ -465,6 +469,7 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                       />
                       Edit
                     </Button>
+                  </RequirePermission>
                 )}
               </div>
             )}

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,6 +48,7 @@ const RowOptionsMenu = ({
       )}
     >
       <div className='flex flex-col gap-1'>
+        <RequirePermission permissions='lti.production.project_flocks.detail'>
           <Button
             href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
             variant='ghost'
@@ -55,7 +58,9 @@ const RowOptionsMenu = ({
             <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'
@@ -65,8 +70,10 @@ const RowOptionsMenu = ({
               <Icon icon='mdi:home-import-outline' width={16} height={16} />
               Chickin
             </Button>
+          </RequirePermission>
         )}
         {props.row.original.approval.step_name === 'Pengajuan' && (
+          <RequirePermission permissions='lti.production.project_flocks.update'>
             <Button
               href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
               variant='ghost'
@@ -76,7 +83,9 @@ const RowOptionsMenu = ({
               <Icon icon='mdi:pencil-outline' width={16} height={16} />
               Edit
             </Button>
+          </RequirePermission>
         )}
+        <RequirePermission permissions='lti.production.project_flocks.delete'>
           <Button
             onClick={deleteClickHandler}
             variant='ghost'
@@ -90,6 +99,7 @@ const RowOptionsMenu = ({
             />
             Delete
           </Button>
+        </RequirePermission>
       </div>
     </div>
   );
@@ -287,6 +297,7 @@ 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'>
+              <RequirePermission permissions='lti.production.project_flocks.create'>
                 <Button
                   color='primary'
                   className='w-full sm:w-fit'
@@ -295,6 +306,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   <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}

src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx

@@ -22,6 +22,7 @@ import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import Link from 'next/link';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ProjectFlockChickinDetail = ({
   projectFlockId,
@@ -484,6 +485,7 @@ const ProjectFlockChickinDetail = ({
                             {kandang.kandang.name}
                           </span>
                         </div>
+                        <RequirePermission permissions='lti.production.chickins.create'>
                           <Button
                             variant='outline'
                             className='py-1 text-sm'
@@ -499,6 +501,7 @@ const ProjectFlockChickinDetail = ({
                               height={11}
                             />
                           </Button>
+                        </RequirePermission>
                       </div>
                     ))}
                 </div>

src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -29,6 +29,7 @@ import {
 } from '@/config/approval-line';
 import useSWR from 'swr';
 import { ProjectFlockKandangApi } from '@/services/api/production';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const ProjectFlockDetail = ({
   projectFlock,
@@ -110,6 +111,7 @@ const ProjectFlockDetail = ({
           leftIconHref='/production/project-flock'
           subtitle={`Created On ${formatDate(projectFlock.created_at, 'MMM DD, YYYY')}`}
         >
+          <RequirePermission permissions='lti.production.project_flocks.update'>
             <Link
               href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
               className='p-0'
@@ -120,6 +122,8 @@ const ProjectFlockDetail = ({
                 </Button>
               </Tooltip>
             </Link>
+          </RequirePermission>
+          <RequirePermission permissions='lti.production.project_flocks.delete'>
             <Button
               variant='link'
               className='p-0 text-error'
@@ -131,6 +135,7 @@ const ProjectFlockDetail = ({
                 <Icon icon='mdi:trash-can-outline' width={20} height={20} />
               </Tooltip>
             </Button>
+          </RequirePermission>
         </DrawerHeader>
 
         {/* Informasi Umum */}
@@ -418,6 +423,7 @@ const ProjectFlockDetail = ({
               </RadioGroup>
             </Card>
             <div className='grid grid-cols-4 gap-3'>
+              <RequirePermission permissions='lti.production.chickins.create'>
                 <Link
                   href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}&projectFlockId=${projectFlock.id}`}
                   className='m-0 p-0'
@@ -434,6 +440,8 @@ const ProjectFlockDetail = ({
                     Chickin <Icon icon='mdi:checkbox-marked-outline' />
                   </Button>
                 </Link>
+              </RequirePermission>
+              <RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
                 <Link
                   href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandang?.project_flock_kandang_id}`}
                   className='m-0 p-0'
@@ -450,6 +458,7 @@ const ProjectFlockDetail = ({
                     Close <Icon icon='mdi:checkbox-marked-circle-outline' />
                   </Button>
                 </Link>
+              </RequirePermission>
             </div>
           </div>
         </div>

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -47,6 +47,7 @@ import Card from '@/components/Card';
 import ProjectFlockKandangTable from '@/components/pages/production/project-flock/form/ProjectFlockKandangTable';
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { useUiStore } from '@/stores/ui/ui.store';
+import RequirePermission from '@/components/helper/RequirePermission';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 
 interface ProjectFlockFormProps {
@@ -734,6 +735,7 @@ const ProjectFlockForm = ({
         )}
         {formType == 'detail' && (
           <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
+            <RequirePermission permissions='lti.production.project_flocks.approve'>
               <Button
                 variant='outline'
                 color='success'
@@ -749,6 +751,8 @@ const ProjectFlockForm = ({
                 <Icon icon='material-symbols:check' width={24} height={24} />
                 Approve
               </Button>
+            </RequirePermission>
+            <RequirePermission permissions='lti.production.project_flocks.approve'>
               <Button
                 variant='outline'
                 color='error'
@@ -764,6 +768,7 @@ const ProjectFlockForm = ({
                 <Icon icon='mdi:times' width={24} height={24} />
                 Reject
               </Button>
+            </RequirePermission>
           </div>
         )}
         <form
@@ -1127,6 +1132,13 @@ const ProjectFlockForm = ({
               </div>
             </div> */}
             {formType !== 'detail' && (
+              <RequirePermission
+                permissions={
+                  formType == 'add'
+                    ? 'lti.production.project_flocks.create'
+                    : 'lti.production.project_flocks.update'
+                }
+              >
                 <Button
                   type='submit'
                   color='primary'
@@ -1137,6 +1149,7 @@ const ProjectFlockForm = ({
                   <Icon icon='mdi:plus' width={24} height={24} />
                   {formType == 'add' ? 'Add Flock' : 'Update Flock'}
                 </Button>
+              </RequirePermission>
             )}
           </div>
         </form>

src/components/pages/production/recording/RecordingTable.tsx

@@ -6,6 +6,7 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState, CellContext } from '@tanstack/react-table';
 import { cn, formatDate } from '@/lib/helper';
+import RequirePermission from '@/components/helper/RequirePermission';
 import { useModal } from '@/components/Modal';
 import Modal from '@/components/Modal';
 import Button from '@/components/Button';
@@ -59,6 +60,7 @@ const RowOptionsMenu = ({
 
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.production.recording.detail'>
         <Button
           href={`/production/recording/detail/?recordingId=${props.row.original.id}`}
           variant='ghost'
@@ -68,6 +70,8 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.production.recording.update'>
         <Button
           href={`/production/recording/detail/edit/?recordingId=${props.row.original.id}`}
           variant='ghost'
@@ -77,7 +81,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:pencil-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
       {!isApproved && !isRejected && (
+        <RequirePermission permissions='lti.production.recording.approve'>
           <Button
             onClick={approveClickHandler}
             variant='ghost'
@@ -87,8 +93,10 @@ const RowOptionsMenu = ({
             <Icon icon='material-symbols:check' width={16} height={16} />
             Approve
           </Button>
+        </RequirePermission>
       )}
       {!isApproved && !isRejected && (
+        <RequirePermission permissions='lti.production.recording.approve'>
           <Button
             onClick={rejectClickHandler}
             variant='ghost'
@@ -98,7 +106,9 @@ const RowOptionsMenu = ({
             <Icon icon='material-symbols:close' width={16} height={16} />
             Reject
           </Button>
+        </RequirePermission>
       )}
+      <RequirePermission permissions='lti.production.recording.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -113,6 +123,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -514,6 +525,7 @@ const RecordingTable = () => {
       <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.recording.create'>
               <Button
                 href='/production/recording/add'
                 variant='outline'
@@ -523,9 +535,11 @@ const RecordingTable = () => {
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
+            </RequirePermission>
 
             {selectedRowIds.length > 0 && (
               <>
+                <RequirePermission permissions='lti.production.recording.approve'>
                   <Button
                     variant='outline'
                     color='success'
@@ -538,10 +552,16 @@ const RecordingTable = () => {
                     }
                     className='w-full sm:w-fit'
                   >
-                  <Icon icon='material-symbols:check' width={24} height={24} />
+                    <Icon
+                      icon='material-symbols:check'
+                      width={24}
+                      height={24}
+                    />
                     Approve
                   </Button>
+                </RequirePermission>
 
+                <RequirePermission permissions='lti.production.recording.approve'>
                   <Button
                     variant='outline'
                     color='error'
@@ -554,9 +574,14 @@ const RecordingTable = () => {
                     }
                     className='w-full sm:w-fit'
                   >
-                  <Icon icon='material-symbols:close' width={24} height={24} />
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
                     Reject
                   </Button>
+                </RequirePermission>
               </>
             )}
           </div>

src/components/pages/production/recording/form/RecordingForm.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 Card from '@/components/Card';
 import Badge from '@/components/Badge';
 import NumberInput from '@/components/input/NumberInput';
@@ -1492,6 +1493,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               !isRecordingApproved(initialValues) &&
               !isRecordingRejected(initialValues) && (
                 <div className='flex flex-row gap-2'>
+                  <RequirePermission permissions='lti.production.recording.approve'>
                     <Button
                       variant='outline'
                       color='success'
@@ -1509,7 +1511,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       />
                       Approve
                     </Button>
+                  </RequirePermission>
 
+                  <RequirePermission permissions='lti.production.recording.approve'>
                     <Button
                       variant='outline'
                       color='error'
@@ -1527,6 +1531,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       />
                       Reject
                     </Button>
+                  </RequirePermission>
                 </div>
               )}
           </div>
@@ -2696,6 +2701,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             {/* Left side - Detail & Edit actions */}
             <div className='flex flex-col sm:flex-row justify-start gap-2 w-full sm:w-auto'>
               {type === 'detail' && deleteRecordingClickHandler && (
+                <RequirePermission permissions='lti.production.recording.delete'>
                   <Button
                     type='button'
                     color='error'
@@ -2710,8 +2716,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     />
                     Delete
                   </Button>
+                </RequirePermission>
               )}
               {type === 'detail' && initialValues && (
+                <RequirePermission permissions='lti.production.recording.update'>
                   <Button
                     type='button'
                     color='warning'
@@ -2726,6 +2734,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     />
                     Edit
                   </Button>
+                </RequirePermission>
               )}
             </div>
             {/* Right side actions */}

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>

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,6 +39,7 @@ const RowOptionsMenu = ({
 }: RowOptionsMenuProps) => {
   return (
     <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.purchase.detail'>
         <Button
           href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
           variant='ghost'
@@ -47,6 +49,7 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:eye-outline' width={16} height={16} />
           Detail
         </Button>
+      </RequirePermission>
 
       {/*<Button*/}
       {/*  href={`/purchase/detail/edit/?purchaseId=${props.row.original.id}`}*/}
@@ -58,6 +61,7 @@ const RowOptionsMenu = ({
       {/*  Edit*/}
       {/*</Button>*/}
 
+      <RequirePermission permissions='lti.purchase.delete'>
         <Button
           onClick={deleteClickHandler}
           variant='ghost'
@@ -72,6 +76,7 @@ const RowOptionsMenu = ({
           />
           Delete
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -227,6 +232,7 @@ 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'>
+              <RequirePermission permissions='lti.purchase.create'>
                 <Button
                   href='/purchase/add'
                   variant='outline'
@@ -236,6 +242,7 @@ const PurchaseTable = () => {
                   <Icon icon='ic:round-plus' width={24} height={24} />
                   Tambah
                 </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,11 +898,15 @@ const PurchaseOrderStaffApprovalForm = ({
                                     <div className='flex justify-center'>
                                       {canUpdatePurchaseItems &&
                                         canShowDeleteAddButtons && (
+                                          <RequirePermission permissions='lti.purchase.delete.item'>
                                             <Button
                                               type='button'
                                               color='error'
+                                              className='text-sm w-fit'
                                               onClick={() =>
-                                              removePurchaseItem(formItemIndex)
+                                                removePurchaseItem(
+                                                  formItemIndex
+                                                )
                                               }
                                               title='Hapus item'
                                             >
@@ -911,6 +916,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                                 height={16}
                                               />
                                             </Button>
+                                          </RequirePermission>
                                         )}
                                     </div>
                                   </td>

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -39,10 +39,12 @@ 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'>
+      <RequirePermission permissions='lti.purchase.update'>
         <Button
           onClick={onEdit}
           variant='ghost'
@@ -52,6 +54,7 @@ const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -59,6 +62,7 @@ const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
 const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
     <RowOptionsMenuWrapper type='dropdown'>
+      <RequirePermission permissions='lti.purchase.receive'>
         <Button
           onClick={onEdit}
           variant='ghost'
@@ -68,6 +72,7 @@ const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
           <Icon icon='material-symbols:edit-outline' width={16} height={16} />
           Edit
         </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -496,6 +501,7 @@ const PurchaseOrderDetail = ({
               };
 
               return (
+                <RequirePermission permissions='lti.purchase.delete.item'>
                   <Button
                     type='button'
                     color='error'
@@ -504,6 +510,7 @@ const PurchaseOrderDetail = ({
                   >
                     <Icon icon='mdi:trash-can' width={16} height={16} />
                   </Button>
+                </RequirePermission>
               );
             },
           },
@@ -632,6 +639,15 @@ const PurchaseOrderDetail = ({
 
         {showApprovalButton && (
           <div className='flex flex-row gap-2'>
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
+            >
               <Button
                 onClick={handleApprovalClick}
                 variant='outline'
@@ -641,7 +657,17 @@ const PurchaseOrderDetail = ({
                 <Icon icon='material-symbols:check' width={24} height={24} />
                 Approve
               </Button>
+            </RequirePermission>
 
+            <RequirePermission
+              permissions={
+                approvalStep === 1
+                  ? 'lti.purchase.approve.staff'
+                  : approvalStep === 2
+                    ? 'lti.purchase.approve.manager'
+                    : 'lti.purchase.receive'
+              }
+            >
               <Button
                 variant='outline'
                 color='error'
@@ -651,6 +677,7 @@ const PurchaseOrderDetail = ({
                 <Icon icon='material-symbols:close' width={24} height={24} />
                 Reject
               </Button>
+            </RequirePermission>
           </div>
         )}
       </div>

src/config/constant.ts

@@ -10,14 +10,20 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Produksi',
     link: '/production',
     icon: 'heroicons-outline:wrench-screwdriver',
+    permission: [
+      'lti.production.project_flocks.list',
+      'lti.production.recording.list',
+    ],
     submenu: [
       {
         text: 'Daftar Flock',
         link: '/production/project-flock',
+        permission: ['lti.production.project_flocks.list'],
       },
       {
         text: 'Recording',
         link: '/production/recording',
+        permission: ['lti.production.recording.list'],
       },
       {
         text: 'Transfer to Laying',
@@ -29,6 +35,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Pembelian',
     link: '/purchase',
     icon: 'heroicons-outline:shopping-cart',
+    permission: ['lti.purchase.list'],
   },
   {
     text: 'Penjualan',
@@ -36,14 +43,16 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     icon: 'heroicons-outline:currency-dollar',
   },
   {
-    text: 'Biaya Operasional',
+    text: 'Biaya',
     link: '/expense',
     icon: 'heroicons:wallet',
+    permission: ['lti.expense.list'],
   },
   {
     text: 'Closing',
     link: '/closing',
     icon: 'heroicons-outline:presentation-chart-bar',
+    permission: ['lti.closing.list'],
   },
   {
     text: 'Laporan',
@@ -68,18 +77,26 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Persediaan',
     link: '/inventory',
     icon: 'heroicons-outline:folder',
+    permission: [
+      'lti.inventory.product_stock.list',
+      'lti.inventory.product_warehouses.list',
+      'lti.inventory.transfer.list',
+    ],
     submenu: [
       {
         text: 'Stok Produk',
         link: '/inventory/product',
+        permission: ['lti.inventory.product_stock.list'],
       },
       {
         text: 'Penyesuaian Stok',
         link: '/inventory/adjustment',
+        permission: ['lti.inventory.product_stock.list'],
       },
       {
         text: 'Transfer Stok',
         link: '/inventory/movement',
+        permission: ['lti.inventory.transfer.list'],
       },
     ],
   },
@@ -87,58 +104,86 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Master Data',
     link: '/master-data',
     icon: 'heroicons-outline:circle-stack',
+    permission: [
+      'lti.master.area.list',
+      'lti.master.banks.list',
+      'lti.master.customer.list',
+      'lti.master.fcr.list',
+      'lti.master.flocks.list',
+      'lti.master.kandangs.list',
+      'lti.master.locations.list',
+      'lti.master.nonstocks.list',
+      'lti.master.product_categories.list',
+      'lti.master.products.list',
+      'lti.master.suppliers.list',
+      'lti.master.uoms.list',
+      'lti.master.warehouses.list',
+    ],
     submenu: [
       {
         text: 'Produk',
         link: '/master-data/product',
+        permission: ['lti.master.products.list'],
       },
       {
         text: 'Kategori Produk',
         link: '/master-data/product-category',
+        permission: ['lti.master.product_categories.list'],
       },
       {
         text: 'Bank',
         link: '/master-data/bank',
+        permission: ['lti.master.banks.list'],
       },
       {
         text: 'Area',
         link: '/master-data/area',
+        permission: ['lti.master.area.list'],
       },
       {
         text: 'Lokasi',
         link: '/master-data/location',
+        permission: ['lti.master.locations.list'],
       },
       {
         text: 'Kandang',
         link: '/master-data/kandang',
+        permission: ['lti.master.kandangs.list'],
       },
       {
         text: 'Warehouse',
         link: '/master-data/warehouse',
+        permission: ['lti.master.warehouses.list'],
       },
       {
         text: 'Customer',
         link: '/master-data/customer',
+        permission: ['lti.master.customer.list'],
       },
       {
         text: 'UOM',
         link: '/master-data/uom',
+        permission: ['lti.master.uoms.list'],
       },
       {
         text: 'Non-Stock',
         link: '/master-data/nonstock',
+        permission: ['lti.master.nonstocks.list'],
       },
       {
         text: 'FCR',
         link: '/master-data/fcr',
+        permission: ['lti.master.fcr.list'],
       },
       {
         text: 'Supplier',
         link: '/master-data/supplier',
+        permission: ['lti.master.suppliers.list'],
       },
       {
         text: 'Flock',
         link: '/master-data/flock',
+        permission: ['lti.master.flocks.list'],
       },
     ],
   },

src/config/route-permission.ts

@@ -0,0 +1,155 @@
+export const ROUTE_PERMISSIONS: Record<string, string[]> = {
+  '/': ['lti.dashboard.list'],
+
+  // Dashboard
+  '/dashboard/': ['lti.dashboard.list'],
+
+  // Production
+  // Production - Project Flock
+  '/production/project-flock/': ['lti.production.project_flocks.list'],
+  '/production/project-flock/add/': ['lti.production.project_flocks.create'],
+  '/production/project-flock/detail/': ['lti.production.project_flocks.detail'],
+  '/production/project-flock/detail/edit/': [
+    'lti.production.project_flocks.update',
+  ],
+  '/production/project-flock/chickin/add/kandang/': [
+    'lti.production.chickins.create',
+  ],
+  '/production/project-flock/closing/': [
+    'lti.production.project_flock_kandangs.closing',
+  ],
+
+  // Production - Recording
+  '/production/recording/': ['lti.production.recording.list'],
+  '/production/recording/add/': ['lti.production.recording.create'],
+  '/production/recording/detail/': ['lti.production.recording.detail'],
+  '/production/recording/detail/edit/': ['lti.production.recording.update'],
+
+  // Production - Transfer to Laying
+  '/production/transfer-to-laying/': ['lti.production.transfer_to_laying.list'],
+  '/production/transfer-to-laying/add/': [
+    'lti.production.transfer_to_laying.create',
+  ],
+  '/production/transfer-to-laying/detail/': [
+    'lti.production.transfer_to_laying.detail',
+  ],
+  '/production/transfer-to-laying/detail/edit/': [
+    'lti.production.transfer_to_laying.update',
+  ],
+
+  // Purchase
+  '/purchase/': ['lti.purchase.list'],
+  '/purchase/add/': ['lti.purchase.create'],
+  '/purchase/detail/': ['lti.purchase.detail'],
+  '/purchase/detail/edit/': ['lti.purchase.update'],
+
+  // Marketing
+  '/marketing/': ['lti.marketing.delivery_order.list'],
+  '/marketing/add/delivery-orders/': ['lti.marketing.delivery_order.create'],
+  '/marketing/add/sales-orders/': ['lti.marketing.sales_order.create'],
+  '/marketing/detail/': ['lti.marketing.delivery_order.detail'],
+  '/marketing/detail/delivery-orders/edit/': [
+    'lti.marketing.delivery_order.update',
+  ],
+  '/marketing/detail/sales-orders/edit/': ['lti.marketing.sales_order.update'],
+
+  // Expense
+  '/expense/': ['lti.expense.list'],
+  '/expense/add/': ['lti.expense.create'],
+  '/expense/detail/': ['lti.expense.detail'],
+  '/expense/detail/edit/': ['lti.expense.update'],
+  '/expense/realization/': ['lti.expense.create.realization'],
+  '/expense/realization/edit/': ['lti.expense.update.realization'],
+
+  // Closing
+  '/closing/': ['lti.closing.list'],
+  '/closing/detail/': ['lti.closing.detail'],
+
+  // Report
+  '/report/logistic-stock/': ['lti.repport.purchasesupplier.list'],
+  '/report/expense/': ['lti.repport.expense.list'],
+  '/report/marketing/': ['lti.repport.delivery.list'],
+
+  // Inventory
+  '/inventory/adjustment/': ['lti.inventory.list'],
+  '/inventory/adjustment/add/': ['lti.inventory.create'],
+  '/inventory/adjustment/detail/': ['lti.inventory.detail'],
+  '/inventory/movement/': ['lti.inventory.transfer.list'],
+  '/inventory/movement/add/': ['lti.inventory.transfer.create'],
+  '/inventory/movement/detail/': ['lti.inventory.transfer.detail'],
+  '/inventory/movement/detail/edit/': ['lti.inventory.transfer.update'],
+  '/inventory/product/': ['lti.inventory.product_stock.list'],
+  '/inventory/product/detail/': ['lti.inventory.product_stock.detail'],
+
+  // Master Data
+  '/master-data/product/': ['lti.master.products.list'],
+  '/master-data/product/add/': ['lti.master.products.create'],
+  '/master-data/product/detail/': ['lti.master.products.detail'],
+  '/master-data/product/detail/edit/': ['lti.master.products.update'],
+
+  '/master-data/product-category/': ['lti.master.product_categories.list'],
+  '/master-data/product-category/add/': [
+    'lti.master.product_categories.create',
+  ],
+  '/master-data/product-category/detail/': [
+    'lti.master.product_categories.detail',
+  ],
+  '/master-data/product-category/detail/edit/': [
+    'lti.master.product_categories.update',
+  ],
+
+  '/master-data/bank/': ['lti.master.banks.list'],
+  '/master-data/bank/add/': ['lti.master.banks.create'],
+  '/master-data/bank/detail/': ['lti.master.banks.detail'],
+  '/master-data/bank/detail/edit/': ['lti.master.banks.update'],
+
+  '/master-data/area/': ['lti.master.area.list'],
+  '/master-data/area/add/': ['lti.master.area.create'],
+  '/master-data/area/detail/': ['lti.master.area.detail'],
+  '/master-data/area/detail/edit/': ['lti.master.area.update'],
+
+  '/master-data/location/': ['lti.master.locations.list'],
+  '/master-data/location/add/': ['lti.master.locations.create'],
+  '/master-data/location/detail/': ['lti.master.locations.detail'],
+  '/master-data/location/detail/edit/': ['lti.master.locations.update'],
+
+  '/master-data/kandang/': ['lti.master.kandangs.list'],
+  '/master-data/kandang/add/': ['lti.master.kandangs.create'],
+  '/master-data/kandang/detail/': ['lti.master.kandangs.detail'],
+  '/master-data/kandang/detail/edit/': ['lti.master.kandangs.update'],
+
+  '/master-data/warehouse/': ['lti.master.warehouses.list'],
+  '/master-data/warehouse/add/': ['lti.master.warehouses.create'],
+  '/master-data/warehouse/detail/': ['lti.master.warehouses.detail'],
+  '/master-data/warehouse/detail/edit/': ['lti.master.warehouses.update'],
+
+  '/master-data/customer/': ['lti.master.customer.list'],
+  '/master-data/customer/add/': ['lti.master.customer.create'],
+  '/master-data/customer/detail/': ['lti.master.customer.detail'],
+  '/master-data/customer/detail/edit/': ['lti.master.customer.update'],
+
+  '/master-data/uom/': ['lti.master.uoms.list'],
+  '/master-data/uom/add/': ['lti.master.uoms.create'],
+  '/master-data/uom/detail/': ['lti.master.uoms.detail'],
+  '/master-data/uom/detail/edit/': ['lti.master.uoms.update'],
+
+  '/master-data/nonstock/': ['lti.master.nonstocks.list'],
+  '/master-data/nonstock/add/': ['lti.master.nonstocks.create'],
+  '/master-data/nonstock/detail/': ['lti.master.nonstocks.detail'],
+  '/master-data/nonstock/detail/edit/': ['lti.master.nonstocks.update'],
+
+  '/master-data/fcr/': ['lti.master.fcr.list'],
+  '/master-data/fcr/add/': ['lti.master.fcr.create'],
+  '/master-data/fcr/detail/': ['lti.master.fcr.detail'],
+  '/master-data/fcr/detail/edit/': ['lti.master.fcr.update'],
+
+  '/master-data/supplier/': ['lti.master.suppliers.list'],
+  '/master-data/supplier/add/': ['lti.master.suppliers.create'],
+  '/master-data/supplier/detail/': ['lti.master.suppliers.detail'],
+  '/master-data/supplier/detail/edit/': ['lti.master.suppliers.update'],
+
+  '/master-data/flock/': ['lti.master.flocks.list'],
+  '/master-data/flock/add/': ['lti.master.flocks.create'],
+  '/master-data/flock/detail/': ['lti.master.flocks.detail'],
+  '/master-data/flock/detail/edit/': ['lti.master.flocks.update'],
+};