chore(FE-331): update report permission

[FEAT/FE][US#334] Slicing and Integrate API Expedition HPP Report Table

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

src/app/closing/detail/page.tsx

@@ -24,6 +24,11 @@ const ClosingDetailPage = () => {
     () => ClosingApi.getPenjualan(Number(closingId))
   );
 
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
   if (!closingId) {
     router.back();
 
@@ -39,7 +44,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales;
+  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -50,6 +55,11 @@ const ClosingDetailPage = () => {
           id={Number(closingId)}
           initialValue={closing.data}
           salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          hppExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.data
+              : undefined
+          }
         />
       )}
     </div>

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) => (
-        <SidebarMenuItem
-          key={menuIdx}
-          item={menuItem}
-          activeLink={activeLink}
-        />
-      ))}
+      {menu.map((menuItem, menuIdx) => {
+        return (
+          <SidebarMenuItem
+            key={menuIdx}
+            item={menuItem}
+            activeLink={activeLink}
+          />
+        );
+      })}
     </Menu>
   );
 };

src/components/pages/closing/ClosingDetail.tsx

@@ -12,22 +12,26 @@ import ClosingProductionDataTabContent from '@/components/pages/closing/ClosingP
 import {
   ClosingGeneralInformation,
   BaseClosingSales,
+  ClosingHppExpedition,
 } from '@/types/api/closing';
 import ClosingSapronakCalculationTabContent from '@/components/pages/closing/ClosingSapronakCalculationTabContent';
 import ClosingOverheadTabContent from '@/components/pages/closing/ClosingOverheadTabContent';
 import ClosingFinanceTabContent from '@/components/pages/closing/ClosingFinanceTabContent';
 import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
+import HppExpeditionReportTable from './hpp-ekspedisi/HppExpeditionReportTable';
 
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
   salesData?: BaseClosingSales;
+  hppExpeditionData?: ClosingHppExpedition;
 }
 
 const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
   salesData,
+  hppExpeditionData,
 }) => {
   const [activeTab, setActiveTab] = useState<string>('sapronak');
 
@@ -56,7 +60,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: 'HPP Ekspedisi',
+        content: <HppExpeditionReportTable initialValues={hppExpeditionData} />,
       },
       {
         id: 'dataProduksi',

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,17 +45,18 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      {/* TODO: apply RBAC */}
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/closing/detail/?closingId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
+        <RequirePermission permissions='lti.closing.detail'>
+          <Button
+            href={`/closing/detail/?closingId=${props.row.original.id}`}
+            variant='ghost'
+            color='primary'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
+          </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );

src/components/pages/closing/hpp-ekspedisi/HppExpeditionReportTable.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import { formatCurrency } from '@/lib/helper';
+import { BaseHppExpedition, BaseExpeditionCost } from '@/types/api/closing';
+
+interface HppExpeditionReportTableProps {
+  type?: 'detail';
+  initialValues?: BaseHppExpedition;
+}
+
+const HppExpeditionReportTable = ({
+  type = 'detail',
+  initialValues,
+}: HppExpeditionReportTableProps) => {
+  const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {
+    return initialValues?.expedition_costs || [];
+  }, [initialValues]);
+
+  const totals = useMemo(() => {
+    const totalHpp = initialValues?.total_hpp_amount || 0;
+
+    return {
+      totalHpp,
+    };
+  }, [initialValues]);
+
+  const costOfRevenueExpeditionColumns: ColumnDef<BaseExpeditionCost>[] =
+    useMemo(
+      () => [
+        {
+          id: 'id',
+          accessorKey: 'id',
+          header: 'No',
+          cell: (props) => {
+            return <div>{props.row.index + 1}</div>;
+          },
+          footer: () => (
+            <div className='font-semibold text-gray-900'>
+              Total HPP Ekspedisi
+            </div>
+          ),
+        },
+        {
+          id: 'expedition_vendor_name',
+          accessorKey: 'expedition_vendor_name',
+          header: 'Nama Ekspedisi',
+          cell: (props) => props.getValue() || '-',
+        },
+        {
+          id: 'hpp_amount',
+          accessorKey: 'hpp_amount',
+          header: 'HPP Ekspedisi',
+          cell: (props) => {
+            const value = props.getValue() as number;
+            return <div className='text-right'>{formatCurrency(value)}</div>;
+          },
+          footer: () => (
+            <div className='text-right font-semibold text-gray-900'>
+              {formatCurrency(totals.totalHpp)}
+            </div>
+          ),
+        },
+      ],
+      [totals]
+    );
+
+  return (
+    <>
+      <section className='w-full'>
+        <div className='p-4'>
+          <h2 className='text-xl font-semibold mb-4'>HPP Ekspedisi</h2>
+          <Card
+            className={{
+              wrapper: 'w-full bg-base-100',
+              body: 'p-0',
+            }}
+          >
+            <Table
+              data={costOfRevenueExpeditionData}
+              columns={costOfRevenueExpeditionColumns}
+              renderFooter={costOfRevenueExpeditionData.length > 0}
+              className={{
+                tableWrapperClassName: 'overflow-x-auto',
+                tableClassName: 'w-full table-auto text-sm',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
+                bodyRowClassName:
+                  'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+                bodyColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                tableFooterClassName:
+                  'bg-gray-100 font-semibold border border-gray-200',
+                footerRowClassName: 'border-t-2 border-gray-300',
+                footerColumnClassName:
+                  'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+              }}
+            />
+          </Card>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default HppExpeditionReportTable;

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,16 +63,17 @@ 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 */}
-          <Button
-            type='button'
-            color='warning'
-            href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
-            className='px-4 grow sm:grow-0'
-          >
-            <Icon icon='mdi:pencil-outline' width={24} height={24} />
-            Edit Realisasi
-          </Button>
+          <RequirePermission permissions='lti.expense.update.realization'>
+            <Button
+              type='button'
+              color='warning'
+              href={`/expense/realization/edit/?expenseId=${initialValues?.id}`}
+              className='px-4 grow sm:grow-0'
+            >
+              <Icon icon='mdi:pencil-outline' width={24} height={24} />
+              Edit Realisasi
+            </Button>
+          </RequirePermission>
         </div>
       </div>
 
@@ -124,36 +126,38 @@ const ExpenseRealizationContent = ({
                     )}
                 </div>
 
-                <div className='flex flex-col gap-2'>
-                  <DropFileInput
-                    name='documents'
-                    values={formik.values.documents}
-                    onChange={realizationDocumentsChangeHandler}
-                    onDelete={realizationDocumentsDeleteHandler}
-                    accept={{
-                      ...ACCEPTED_FILE_TYPE.PDF,
-                      ...ACCEPTED_FILE_TYPE.IMAGE,
-                    }}
-                    maxFiles={10}
-                    className={{
-                      wrapper: 'mt-2',
-                      inputWrapper: 'flex items-center',
-                    }}
-                  />
+                <RequirePermission permissions='lti.expense.document.realization'>
+                  <div className='flex flex-col gap-2'>
+                    <DropFileInput
+                      name='documents'
+                      values={formik.values.documents}
+                      onChange={realizationDocumentsChangeHandler}
+                      onDelete={realizationDocumentsDeleteHandler}
+                      accept={{
+                        ...ACCEPTED_FILE_TYPE.PDF,
+                        ...ACCEPTED_FILE_TYPE.IMAGE,
+                      }}
+                      maxFiles={10}
+                      className={{
+                        wrapper: 'mt-2',
+                        inputWrapper: 'flex items-center',
+                      }}
+                    />
 
-                  {formik.values.documents &&
-                    formik.values.documents.length > 0 && (
-                      <Button
-                        onClick={formik.submitForm}
-                        disabled={formik.isSubmitting}
-                        isLoading={formik.isSubmitting}
-                        className='w-fit self-end'
-                      >
-                        <Icon icon='ic:round-plus' width={24} height={24} />
-                        Tambah
-                      </Button>
-                    )}
-                </div>
+                    {formik.values.documents &&
+                      formik.values.documents.length > 0 && (
+                        <Button
+                          onClick={formik.submitForm}
+                          disabled={formik.isSubmitting}
+                          isLoading={formik.isSubmitting}
+                          className='w-fit self-end'
+                        >
+                          <Icon icon='ic:round-plus' width={24} height={24} />
+                          Tambah
+                        </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,100 +256,119 @@ const ExpenseRequestContent = ({
 
           <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
             {isCurrentApprovalOnManager && (
-              <Button
-                variant='outline'
-                color='info'
-                onClick={approveClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='lucide-lab:farm' width={24} height={24} />
-                Approve Manager
-              </Button>
+              <RequirePermission permissions='lti.expense.approve.manager'>
+                <Button
+                  variant='outline'
+                  color='info'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='lucide-lab:farm' width={24} height={24} />
+                  Approve Manager
+                </Button>
+              </RequirePermission>
             )}
 
             {isCurrentApprovalOnFinance && (
-              <Button
-                variant='outline'
-                color='success'
-                onClick={approveClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='tdesign:money' width={24} height={24} />
-                Approve Finance
-              </Button>
+              <RequirePermission permissions='lti.expense.approve.finance'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={approveClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='tdesign:money' width={24} height={24} />
+                  Approve Finance
+                </Button>
+              </RequirePermission>
             )}
 
             {isCurrentApprovalOnRealization && (
-              <Button
-                variant='outline'
-                color='success'
-                onClick={completeExpenseClickHandler}
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='material-symbols:done-all-rounded'
-                  width={24}
-                  height={24}
-                />
-                Selesai
-              </Button>
+              <RequirePermission permissions='lti.expense.complete.expense'>
+                <Button
+                  variant='outline'
+                  color='success'
+                  onClick={completeExpenseClickHandler}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon
+                    icon='material-symbols:done-all-rounded'
+                    width={24}
+                    height={24}
+                  />
+                  Selesai
+                </Button>
+              </RequirePermission>
             )}
 
             {showRejectButton && (
-              <Button
-                variant='outline'
-                color='error'
-                onClick={rejectClickHandler}
-                className='w-full:w-fit'
+              <RequirePermission
+                permissions={[
+                  'lti.expense.approve.manager',
+                  'lti.expense.approve.finance',
+                ]}
               >
-                <Icon icon='material-symbols:close' width={24} height={24} />
-                Reject
-              </Button>
+                <Button
+                  variant='outline'
+                  color='error'
+                  onClick={rejectClickHandler}
+                  className='w-full:w-fit'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
             )}
 
             {isExpenseCanBeRealized && (
-              <Button
-                variant='outline'
-                color='info'
-                href={`/expense/realization/?expenseId=${initialValues?.id}`}
-                className='w-full sm:w-fit'
-              >
-                <Icon
-                  icon='material-symbols:money-bag-rounded'
-                  width={24}
-                  height={24}
-                />
-                Realisasi
-              </Button>
+              <RequirePermission permissions='lti.expense.create.realization'>
+                <Button
+                  variant='outline'
+                  color='info'
+                  href={`/expense/realization/?expenseId=${initialValues?.id}`}
+                  className='w-full sm:w-fit'
+                >
+                  <Icon
+                    icon='material-symbols:money-bag-rounded'
+                    width={24}
+                    height={24}
+                  />
+                  Realisasi
+                </Button>
+              </RequirePermission>
             )}
 
             <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
               {showEditButton && (
-                <Button
-                  type='button'
-                  color='warning'
-                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
-                  className='px-4 grow sm:grow-0'
-                >
-                  <Icon icon='mdi:pencil-outline' width={24} height={24} />
-                  Edit
-                </Button>
+                <RequirePermission permissions='lti.expense.update'>
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    className='px-4 grow sm:grow-0'
+                  >
+                    <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                    Edit
+                  </Button>
+                </RequirePermission>
               )}
 
-              <Button
-                type='button'
-                color='error'
-                onClick={deleteExpenseClickHandler}
-                className='px-4 grow sm:grow-0'
-              >
-                <Icon
-                  icon='material-symbols:delete-outline-rounded'
-                  width={24}
-                  height={24}
-                  className='justify-start text-sm'
-                />
-                Delete
-              </Button>
+              <RequirePermission permissions='lti.expense.delete'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteExpenseClickHandler}
+                  className='px-4 grow sm:grow-0'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+              </RequirePermission>
             </div>
           </div>
 
@@ -485,36 +505,42 @@ const ExpenseRequestContent = ({
                         )}
                     </div>
 
-                    <div className='flex flex-col gap-2'>
-                      <DropFileInput
-                        name='documents'
-                        values={formik.values.documents}
-                        onChange={requestDocumentsChangeHandler}
-                        onDelete={requestDocumentsDeleteHandler}
-                        accept={{
-                          ...ACCEPTED_FILE_TYPE.PDF,
-                          ...ACCEPTED_FILE_TYPE.IMAGE,
-                        }}
-                        maxFiles={10}
-                        className={{
-                          wrapper: 'mt-2',
-                          inputWrapper: 'flex items-center',
-                        }}
-                      />
+                    <RequirePermission permissions='lti.expense.document'>
+                      <div className='flex flex-col gap-2'>
+                        <DropFileInput
+                          name='documents'
+                          values={formik.values.documents}
+                          onChange={requestDocumentsChangeHandler}
+                          onDelete={requestDocumentsDeleteHandler}
+                          accept={{
+                            ...ACCEPTED_FILE_TYPE.PDF,
+                            ...ACCEPTED_FILE_TYPE.IMAGE,
+                          }}
+                          maxFiles={10}
+                          className={{
+                            wrapper: 'mt-2',
+                            inputWrapper: 'flex items-center',
+                          }}
+                        />
 
-                      {formik.values.documents &&
-                        formik.values.documents.length > 0 && (
-                          <Button
-                            onClick={formik.submitForm}
-                            disabled={formik.isSubmitting}
-                            isLoading={formik.isSubmitting}
-                            className='w-fit self-end'
-                          >
-                            <Icon icon='ic:round-plus' width={24} height={24} />
-                            Tambah
-                          </Button>
-                        )}
-                    </div>
+                        {formik.values.documents &&
+                          formik.values.documents.length > 0 && (
+                            <Button
+                              onClick={formik.submitForm}
+                              disabled={formik.isSubmitting}
+                              isLoading={formik.isSubmitting}
+                              className='w-fit self-end'
+                            >
+                              <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,58 +68,70 @@ const RowOptionsMenu = ({
   return (
     <RowOptionsMenuWrapper type={type}>
       <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <Button
-          href={`/expense/detail/?expenseId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-
-        {showEditButton && (
+        <RequirePermission permissions='lti.expense.detail'>
           <Button
-            href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+            href={`/expense/detail/?expenseId=${props.row.original.id}`}
             variant='ghost'
-            color='warning'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
+            <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}
+              />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
 
         {showRealizationButton && (
-          <Button
-            href={`/expense/realization/?expenseId=${props.row.original.id}`}
-            variant='ghost'
-            color='info'
-            className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
-          >
-            <Icon
-              icon='material-symbols:money-bag-rounded'
-              width={16}
-              height={16}
-            />
-            Realisasi
-          </Button>
+          <RequirePermission permissions='lti.expense.create.realization'>
+            <Button
+              href={`/expense/realization/?expenseId=${props.row.original.id}`}
+              variant='ghost'
+              color='info'
+              className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
+            >
+              <Icon
+                icon='material-symbols:money-bag-rounded'
+                width={16}
+                height={16}
+              />
+              Realisasi
+            </Button>
+          </RequirePermission>
         )}
 
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.expense.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+        </RequirePermission>
       </div>
     </RowOptionsMenuWrapper>
   );
@@ -559,57 +572,70 @@ 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'>
-                <Button
-                  href='/expense/add'
-                  variant='outline'
-                  color='primary'
-                  className='w-full sm:w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
-                </Button>
+                <RequirePermission permissions='lti.expense.create'>
+                  <Button
+                    href='/expense/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
 
                 {selectedRowIds.length > 0 && (
                   <>
-                    <Button
-                      variant='outline'
-                      color='info'
-                      onClick={bulkApproveClickHandler}
-                      disabled={!isAllSelectedRowLatestApprovalOnManager}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon icon='lucide-lab:farm' width={24} height={24} />
-                      Approve Manager
-                    </Button>
+                    <RequirePermission permissions='lti.expense.approve.manager'>
+                      <Button
+                        variant='outline'
+                        color='info'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnManager}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='lucide-lab:farm' width={24} height={24} />
+                        Approve Manager
+                      </Button>
+                    </RequirePermission>
 
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={bulkApproveClickHandler}
-                      disabled={!isAllSelectedRowLatestApprovalOnFinance}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon icon='tdesign:money' width={24} height={24} />
-                      Approve Finance
-                    </Button>
+                    <RequirePermission permissions='lti.expense.approve.finance'>
+                      <Button
+                        variant='outline'
+                        color='success'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnFinance}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='tdesign:money' width={24} height={24} />
+                        Approve Finance
+                      </Button>
+                    </RequirePermission>
 
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={bulkRejectClickHandler}
-                      disabled={
-                        !isAllSelectedRowLatestApprovalOnManager &&
-                        !isAllSelectedRowLatestApprovalOnFinance
-                      }
-                      className='w-full sm:w-fit'
+                    <RequirePermission
+                      permissions={[
+                        'lti.expense.approve.manager',
+                        'lti.expense.approve.finance',
+                      ]}
                     >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </Button>
+                      <Button
+                        variant='outline'
+                        color='error'
+                        onClick={bulkRejectClickHandler}
+                        disabled={
+                          !isAllSelectedRowLatestApprovalOnManager &&
+                          !isAllSelectedRowLatestApprovalOnFinance
+                        }
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon
+                          icon='material-symbols:close'
+                          width={24}
+                          height={24}
+                        />
+                        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,21 +291,23 @@ const ExpenseRealizationForm = ({
             className={{ wrapper: 'col-span-12' }}
           />
 
-          <DropFileInput
-            label='Dokumen Realisasi'
-            name='documents'
-            values={formik.values.documents}
-            onChange={realizationDocumentsChangeHandler}
-            onDelete={realizationDocumentsDeleteHandler}
-            accept={{
-              ...ACCEPTED_FILE_TYPE.PDF,
-              ...ACCEPTED_FILE_TYPE.IMAGE,
-            }}
-            className={{
-              wrapper: 'col-span-12',
-              inputWrapper: 'h-12 flex items-center',
-            }}
-          />
+          <RequirePermission permissions='lti.expense.document.realization'>
+            <DropFileInput
+              label='Dokumen Realisasi'
+              name='documents'
+              values={formik.values.documents}
+              onChange={realizationDocumentsChangeHandler}
+              onDelete={realizationDocumentsDeleteHandler}
+              accept={{
+                ...ACCEPTED_FILE_TYPE.PDF,
+                ...ACCEPTED_FILE_TYPE.IMAGE,
+              }}
+              className={{
+                wrapper: 'col-span-12',
+                inputWrapper: 'h-12 flex items-center',
+              }}
+            />
+          </RequirePermission>
 
           {formik.values.existing_documents &&
             formik.values.existing_documents.length > 0 && (
@@ -357,20 +360,22 @@ const ExpenseRealizationForm = ({
           {type !== 'add' && (
             <div className='flex flex-row justify-start gap-2'>
               {type !== 'edit' && (
-                <Button
-                  type='button'
-                  color='warning'
-                  href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:edit-outline'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Edit
-                </Button>
+                <RequirePermission permissions='lti.expense.update'>
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    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,21 +386,23 @@ const ExpenseRequestForm = ({
               className={{ wrapper: 'col-span-12' }}
             />
 
-            <DropFileInput
-              label='Dokumen Pengajuan'
-              name='documents'
-              values={formik.values.documents}
-              onChange={requestDocumentsChangeHandler}
-              onDelete={requestDocumentsDeleteHandler}
-              accept={{
-                ...ACCEPTED_FILE_TYPE.PDF,
-                ...ACCEPTED_FILE_TYPE.IMAGE,
-              }}
-              className={{
-                wrapper: 'col-span-12',
-                inputWrapper: 'h-12 flex items-center',
-              }}
-            />
+            <RequirePermission permissions='lti.expense.document'>
+              <DropFileInput
+                label='Dokumen Pengajuan'
+                name='documents'
+                values={formik.values.documents}
+                onChange={requestDocumentsChangeHandler}
+                onDelete={requestDocumentsDeleteHandler}
+                accept={{
+                  ...ACCEPTED_FILE_TYPE.PDF,
+                  ...ACCEPTED_FILE_TYPE.IMAGE,
+                }}
+                className={{
+                  wrapper: 'col-span-12',
+                  inputWrapper: 'h-12 flex items-center',
+                }}
+              />
+            </RequirePermission>
 
             {formik.values.existing_documents &&
               formik.values.existing_documents.length > 0 && (
@@ -461,36 +464,40 @@ const ExpenseRequestForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteExpenseClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.expense.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteExpenseClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.expense.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/expense/detail/edit/?expenseId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,15 +176,17 @@ 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'>
-              <Button
-                href='/inventory/adjustment/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.inventory.create'>
+                <Button
+                  href='/inventory/adjustment/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <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,15 +29,17 @@ const RowOptionsMenu = ({
   props: CellContext<Movement, unknown>;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
+    <RequirePermission permissions='lti.inventory.transfer.detail'>
+      <Button
+        href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -145,15 +148,17 @@ 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'>
-              <Button
-                href='/inventory/movement/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.inventory.transfer.create'>
+                <Button
+                  href='/inventory/movement/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,15 +32,17 @@ const RowOptionsMenu = ({
   props: CellContext<InventoryProduct, unknown>;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
+    <RequirePermission permissions='lti.inventory.product_stock.detail'>
+      <Button
+        href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
   </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,57 +52,71 @@ const RowsOptionsMenu = ({
       )}
     >
       <div className='flex flex-col gap-1'>
-        <Button
-          href={`/marketing/detail?marketingId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-        {props.row.original.latest_approval.step_number != 1 && (
+        <RequirePermission permissions='lti.marketing.delivery_order.detail'>
           <Button
-            href={
-              props.row.original.latest_approval.step_number == 3
-                ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
-                : props.row.original.latest_approval.step_number == 2
-                  ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
-                  : undefined
-            }
-            onClick={() => {
-              if (props.row.original.latest_approval.step_number == 2) {
-                deliveryClickHandler?.();
-              }
-            }}
+            href={`/marketing/detail?marketingId=${props.row.original.id}`}
             variant='ghost'
-            color='success'
+            color='primary'
             className='justify-start text-sm'
           >
-            <Icon icon='mdi:truck' width={16} height={16} />
-            Deliver
+            <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
+                  ? `/marketing/detail/delivery-orders/edit?marketingId=${props.row.original.id}`
+                  : props.row.original.latest_approval.step_number == 2
+                    ? `/marketing/add/delivery-orders?marketingId=${props.row.original.id}`
+                    : undefined
+              }
+              onClick={() => {
+                if (props.row.original.latest_approval.step_number == 2) {
+                  deliveryClickHandler?.();
+                }
+              }}
+              variant='ghost'
+              color='success'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:truck' width={16} height={16} />
+              Deliver
+            </Button>
+          </RequirePermission>
         )}
         {props.row.original.latest_approval.step_number != 3 && (
-          <Button
-            href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='mdi:pencil-outline' width={16} height={16} />
-            Edit
-          </Button>
+          <RequirePermission permissions='lti.marketing.sales_order.update'>
+            <Button
+              href={`/marketing/detail/sales-orders/edit?marketingId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon icon='mdi:pencil-outline' width={16} height={16} />
+              Edit
+            </Button>
+          </RequirePermission>
         )}
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='text-error hover:text-inherit justify-start text-sm'
-        >
-          <Icon icon='mdi:delete-outline' width={16} height={16} />
-          Delete
-        </Button>
+        <RequirePermission permissions='lti.marketing.sales_order.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='text-error hover:text-inherit justify-start text-sm'
+          >
+            <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={{
-              href: '/marketing/add/sales-orders',
-              label: 'Tambah Sales Order',
-            }}
+            addButton={
+              permissionCheck('lti.marketing.sales_order.create')
+                ? {
+                    href: '/marketing/add/sales-orders',
+                    label: 'Tambah Sales Order',
+                  }
+                : undefined
+            }
             search={{
               value: search,
               onChange: searchChangeHandler,
@@ -281,25 +302,29 @@ const MarketingTable = () => {
             }}
           />
           <div className='flex flex-row gap-2'>
-            <Button
-              color='success'
-              onClick={approveClickHandler}
-              className='justify-start text-sm'
-              disabled={disableApprove}
-            >
-              <Icon icon='material-symbols:check' width={24} height={24} />
-              Approve
-            </Button>
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
+              <Button
+                color='success'
+                onClick={approveClickHandler}
+                className='justify-start text-sm'
+                disabled={disableApprove}
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+            </RequirePermission>
 
-            <Button
-              color='error'
-              onClick={rejectClickHandler}
-              className='justify-start text-sm'
-              disabled={disableReject}
-            >
-              <Icon icon='material-symbols:close' width={24} height={24} />
-              Reject
-            </Button>
+            <RequirePermission permissions='lti.marketing.sales_order.approve'>
+              <Button
+                color='error'
+                onClick={rejectClickHandler}
+                className='justify-start text-sm'
+                disabled={disableReject}
+              >
+                <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,45 +135,58 @@ const MarketingDetail = ({
         <div className='flex-row flex gap-3'>
           {initialValues?.latest_approval?.step_number == 1 && (
             <>
-              <Button
-                color='success'
-                onClick={approveClickHandler}
-                disabled={
-                  initialValues?.latest_approval?.step_number == 1 &&
-                  initialValues?.latest_approval?.action == 'REJECTED'
-                }
-              >
-                <Icon icon='mdi:check' width={24} height={24} />
-                Approve
-              </Button>
-              <Button
-                color='error'
-                onClick={rejectClickHandler}
-                disabled={
-                  initialValues?.latest_approval?.step_number == 1 &&
-                  initialValues?.latest_approval?.action == 'REJECTED'
-                }
-              >
-                <Icon icon='mdi:close' width={24} height={24} />
-                Reject
-              </Button>
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='success'
+                  onClick={approveClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:check' width={24} height={24} />
+                  Approve
+                </Button>
+              </RequirePermission>
+
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='error'
+                  onClick={rejectClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
             </>
           )}
           {initialValues?.latest_approval?.step_number != 1 && (
-            <Button
-              color='success'
-              href={
+            <RequirePermission
+              permissions={
                 initialValues?.latest_approval?.step_number == 3
-                  ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
-                  : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                  ? 'lti.marketing.delivery_order.update'
+                  : 'lti.marketing.delivery_order.create'
               }
             >
-              <Icon icon='mdi:truck' width={24} height={24} />
-              {initialValues?.latest_approval?.step_number == 3
-                ? 'Edit '
-                : 'Tambah '}
-              Delivery Order
-            </Button>
+              <Button
+                color='success'
+                href={
+                  initialValues?.latest_approval?.step_number == 3
+                    ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+                    : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                }
+              >
+                <Icon icon='mdi:truck' width={24} height={24} />
+                {initialValues?.latest_approval?.step_number == 3
+                  ? 'Edit '
+                  : 'Tambah '}
+                Delivery Order
+              </Button>
+            </RequirePermission>
           )}
         </div>
 
@@ -413,19 +427,23 @@ const MarketingDetail = ({
         )}
         <div className='flex flex-row gap-3'>
           {initialValues?.latest_approval?.step_number != 3 && (
-            <Button
-              color='warning'
-              type='button'
-              href={`/marketing/detail/${initialValues?.latest_approval.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
-            >
-              <Icon icon='mdi:pencil' width={24} height={24} />
-              Edit
-            </Button>
+            <RequirePermission permissions='lti.marketing.sales_order.update'>
+              <Button
+                color='warning'
+                type='button'
+                href={`/marketing/detail/${initialValues?.latest_approval.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
+              >
+                <Icon icon='mdi:pencil' width={24} height={24} />
+                Edit
+              </Button>
+            </RequirePermission>
           )}
-          <Button color='error' onClick={deleteClickHandler}>
-            <Icon icon='mdi:delete' width={24} height={24} />
-            Hapus
-          </Button>
+          <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,15 +690,17 @@ const MarketingForm = ({
       {/* Actions button */}
       {formType == 'edit' && (
         <div className='flex flex-row justify-start'>
-          <Button
-            type='button'
-            color='error'
-            onClick={handleDelete}
-            isLoading={isLoading}
-          >
-            <Icon icon='mdi:trash' width={24} height={24} />
-            Hapus
-          </Button>
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
+            <Button
+              type='button'
+              color='error'
+              onClick={handleDelete}
+              isLoading={isLoading}
+            >
+              <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,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.area.detail'>
+        <Button
+          href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.area.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,19 @@ 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'>
-              <Button
-                href='/master-data/area/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.area.create'>
+                  <Button
+                    href='/master-data/area/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <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,36 +161,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteAreaClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.area.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteAreaClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.area.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.banks.detail'>
+        <Button
+          href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.banks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -205,15 +212,17 @@ 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'>
-              <Button
-                href='/master-data/bank/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.banks.create'>
+                <Button
+                  href='/master-data/bank/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,36 +209,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteBankClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.banks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteBankClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.banks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,38 +33,44 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.customer.detail'>
+        <Button
+          href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -200,15 +207,17 @@ 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'>
-              <Button
-                href='/master-data/customer/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.customer.create'>
+                <Button
+                  href='/master-data/customer/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,36 +320,40 @@ const CustomerForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteCustomerHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.customer.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteCustomerHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.customer.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/fcr/detail/edit/?fcrId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.fcr.detail'>
+        <Button
+          href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.fcr.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,17 @@ 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'>
-              <Button
-                href='/master-data/fcr/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.fcr.create'>
+                <Button
+                  href='/master-data/fcr/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,36 +297,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteFcrClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.fcr.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteFcrClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.fcr.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,48 +33,54 @@ const RowsOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='material-symbols:edit-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.flocks.update'>
+        <Button
+          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
           className='justify-start text-sm'
-        />
-        Edit
-      </Button>
-      <Button
-        href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='mdi:eye-outline'
-          width={16}
-          height={16}
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.detail'>
+        <Button
+          href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Detail
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon
+            icon='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -196,15 +203,17 @@ 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'>
-              <Button
-                href='/master-data/flock/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.flocks.create'>
+                <Button
+                  href='/master-data/flock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,35 +131,39 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={() => deleteModal.openModal()}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.flocks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                    color='error'
+                    onClick={() => deleteModal.openModal()}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.flocks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.kandangs.detail'>
+        <Button
+          href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.kandangs.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -243,15 +250,19 @@ 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'>
-              <Button
-                href='/master-data/kandang/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.kandangs.create'>
+                  <Button
+                    href='/master-data/kandang/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <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,36 +286,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteKandangClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.kandangs.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/kandang/detail/edit/?kandangId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteKandangClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.kandangs.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/kandang/detail/edit/?kandangId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.locations.detail'>
+        <Button
+          href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.locations.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -230,15 +237,19 @@ 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'>
-              <Button
-                href='/master-data/location/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.locations.create'>
+                  <Button
+                    href='/master-data/location/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <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,36 +230,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteLocationClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.locations.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/location/detail/edit/?locationId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteLocationClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.locations.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/location/detail/edit/?locationId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.nonstocks.detail'>
+        <Button
+          href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.nonstocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -242,15 +249,17 @@ 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'>
-              <Button
-                href='/master-data/nonstock/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.nonstocks.create'>
+                <Button
+                  href='/master-data/nonstock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,36 +299,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteNonstockClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.nonstocks.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteNonstockClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.nonstocks.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,38 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/product-category/detail/edit/?productCategoryId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:pencil-outline' width={16} height={16} />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='mdi:delete-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.product_categories.detail'>
+        <Button
+          href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='mdi:delete-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -193,15 +202,17 @@ 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'>
-              <Button
-                href='/master-data/product-category/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.product_categories.create'>
+                <Button
+                  href='/master-data/product-category/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
             <DebouncedTextInput
               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,36 +184,40 @@ const ProductCategoryForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteProductCategoryClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.product_categories.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/product-category/detail/edit/?productCategoryId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteProductCategoryClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.product_categories.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/product-category/detail/edit/?productCategoryId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,38 +39,44 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => (
   <RowOptionsMenuWrapper type={type}>
-    <Button
-      href={`/master-data/product/detail/?productId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
-    <Button
-      href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
-      variant='ghost'
-      color='warning'
-      className='justify-start text-sm'
-    >
-      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-      Edit
-    </Button>
-    <Button
-      onClick={deleteClickHandler}
-      variant='ghost'
-      color='error'
-      className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-    >
-      <Icon
-        icon='material-symbols:delete-outline-rounded'
-        width={16}
-        height={16}
+    <RequirePermission permissions='lti.master.products.detail'>
+      <Button
+        href={`/master-data/product/detail/?productId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
         className='justify-start text-sm'
-      />
-      Delete
-    </Button>
+      >
+        <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'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.delete'>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RequirePermission>
   </RowOptionsMenuWrapper>
 );
 
@@ -273,15 +280,17 @@ 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'>
-              <Button
-                href='/master-data/product/add'
-                variant='outline'
-                className='w-full sm:w-fit'
-                color='primary'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.products.create'>
+                <Button
+                  href='/master-data/product/add'
+                  variant='outline'
+                  className='w-full sm:w-fit'
+                  color='primary'
+                >
+                  <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,35 +414,39 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteProductClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.products.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/product/detail/edit/?productId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteProductClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.products.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/product/detail/edit/?productId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,48 +33,54 @@ const RowOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon
-          icon='mdi:eye-outline'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.suppliers.detail'>
+        <Button
+          href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Detail
-      </Button>
-      <Button
-        href={`/master-data/supplier/detail/edit/?supplierId=${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='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.update'>
+        <Button
+          href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
           className='justify-start text-sm'
-        />
-        Edit
-      </Button>
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
-          className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -219,15 +226,17 @@ 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'>
-              <Button
-                href='/master-data/supplier/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.suppliers.create'>
+                <Button
+                  href='/master-data/supplier/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,36 +407,40 @@ const SupplierForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {formType !== 'add' && (
               <div className='flex flex-row justify-start gap-2'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteSupplierHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {formType !== 'edit' && (
+                <RequirePermission permissions='lti.master.suppliers.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteSupplierHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {formType !== 'edit' && (
+                  <RequirePermission permissions='lti.master.suppliers.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,40 +35,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.uoms.detail'>
+        <Button
+          href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.uoms.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -192,15 +199,17 @@ 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'>
-              <Button
-                href='/master-data/uom/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.uoms.create'>
+                <Button
+                  href='/master-data/uom/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,36 +161,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteUomClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.uoms.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/uom/detail/edit/?uomId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteUomClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.uoms.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/uom/detail/edit/?uomId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      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,40 +40,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
-        href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-
-      <Button
-        href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
-        variant='ghost'
-        color='warning'
-        className='justify-start text-sm'
-      >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-        Edit
-      </Button>
-
-      <Button
-        onClick={deleteClickHandler}
-        variant='ghost'
-        color='error'
-        className='text-error hover:text-inherit'
-      >
-        <Icon
-          icon='material-symbols:delete-outline-rounded'
-          width={16}
-          height={16}
+      <RequirePermission permissions='lti.master.warehouses.detail'>
+        <Button
+          href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
-        Delete
-      </Button>
+        >
+          <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'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.warehouses.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
     </RowOptionsMenuWrapper>
   );
 };
@@ -270,15 +277,17 @@ 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'>
-              <Button
-                href='/master-data/warehouse/add'
-                variant='outline'
-                color='primary'
-                className='w-full sm:w-fit'
-              >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
-              </Button>
+              <RequirePermission permissions='lti.master.warehouses.create'>
+                <Button
+                  href='/master-data/warehouse/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
 
             <DebouncedTextInput

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,36 +436,40 @@ 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'>
-                <Button
-                  type='button'
-                  color='error'
-                  onClick={deleteWarehouseClickHandler}
-                  className='px-4'
-                >
-                  <Icon
-                    icon='material-symbols:delete-outline-rounded'
-                    width={24}
-                    height={24}
-                    className='justify-start text-sm'
-                  />
-                  Delete
-                </Button>
-
-                {type !== 'edit' && (
+                <RequirePermission permissions='lti.master.warehouses.delete'>
                   <Button
                     type='button'
-                    color='warning'
-                    href={`/master-data/warehouse/detail/edit/?warehouseId=${initialValues?.id}`}
+                    color='error'
+                    onClick={deleteWarehouseClickHandler}
                     className='px-4'
                   >
                     <Icon
-                      icon='material-symbols:edit-outline'
+                      icon='material-symbols:delete-outline-rounded'
                       width={24}
                       height={24}
                       className='justify-start text-sm'
                     />
-                    Edit
+                    Delete
                   </Button>
+                </RequirePermission>
+
+                {type !== 'edit' && (
+                  <RequirePermission permissions='lti.master.warehouses.update'>
+                    <Button
+                      type='button'
+                      color='warning'
+                      href={`/master-data/warehouse/detail/edit/?warehouseId=${initialValues?.id}`}
+                      className='px-4'
+                    >
+                      <Icon
+                        icon='material-symbols:edit-outline'
+                        width={24}
+                        height={24}
+                        className='justify-start text-sm'
+                      />
+                      Edit
+                    </Button>
+                  </RequirePermission>
                 )}
               </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'],
+};

src/services/api/closing.ts

@@ -10,6 +10,7 @@ import {
   ClosingOverhead,
   ClosingSapronakCalculation,
   ClosingProductionData,
+  ClosingHppExpedition,
 } from '@/types/api/closing';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { httpClient, httpClientFetcher } from '@/services/http/client';
@@ -156,6 +157,24 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
       return undefined;
     }
   }
+
+  async getHppEkspedisi(
+    id: number
+  ): Promise<BaseApiResponse<ClosingHppExpedition> | undefined> {
+    try {
+      const getHppEkspedisiPath = `${this.basePath}/${id}/expedition-hpp`;
+      const getHppEkspedisiRes =
+        await httpClient<BaseApiResponse<ClosingHppExpedition>>(
+          getHppEkspedisiPath
+        );
+      return getHppEkspedisiRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ClosingHppExpedition>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
 }
 
 export const ClosingApi = new ClosingApiService('/closings');

src/types/api/closing.d.ts

@@ -283,3 +283,16 @@ export interface DataSummarySubTotal {
   rp_per_kg: number;
   amount: number;
 }
+
+export type BaseExpeditionCost = {
+  id: number;
+  expedition_vendor_name: string;
+  hpp_amount: number;
+};
+
+export type BaseHppExpedition = {
+  expedition_costs: BaseExpeditionCost[];
+  total_hpp_amount: number;
+};
+
+export type ClosingHppExpedition = BaseMetadata & BaseHppExpedition;