feat(FE-331): implement permission guard in master data

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
+      <RequirePermission permissions='lti.master.area.detail'>
-        href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <div className='w-full flex flex-row'>
-                href='/master-data/area/add'
+                <RequirePermission permissions='lti.master.area.create'>
-                variant='outline'
+                  <Button
-                color='primary'
+                    href='/master-data/area/add'
-                className='w-full sm:w-fit'
+                    variant='outline'
-              >
+                    color='primary'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                    className='w-full sm:w-fit'
-                Tambah
+                  >
-              </Button>
+                    <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
+                <RequirePermission permissions='lti.master.area.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.banks.detail'>
-        href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <RequirePermission permissions='lti.master.banks.create'>
-                href='/master-data/bank/add'
+                <Button
-                variant='outline'
+                  href='/master-data/bank/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.banks.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/bank/detail/edit/?bankId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.customer.detail'>
-        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <RequirePermission permissions='lti.master.customer.create'>
-                href='/master-data/customer/add'
+                <Button
-                variant='outline'
+                  href='/master-data/customer/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.customer.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.fcr.detail'>
-        href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/fcr/detail/?fcrId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <RequirePermission permissions='lti.master.fcr.create'>
-                href='/master-data/fcr/add'
+                <Button
-                variant='outline'
+                  href='/master-data/fcr/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.fcr.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/fcr/detail/edit/?fcrId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.flocks.update'>
-        href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
-        color='warning'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='warning'
-      >
-        <Icon
-          icon='material-symbols:edit-outline'
-          width={16}
-          height={16}
           className='justify-start text-sm'
-        />
+        >
-        Edit
+          <Icon
-      </Button>
+            icon='material-symbols:edit-outline'
-      <Button
+            width={16}
-        href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+            height={16}
-        variant='ghost'
+            className='justify-start text-sm'
-        color='primary'
+          />
-        className='justify-start text-sm'
+          Edit
-      >
+        </Button>
-        <Icon
+      </RequirePermission>
-          icon='mdi:eye-outline'
+      <RequirePermission permissions='lti.master.flocks.detail'>
-          width={16}
+        <Button
-          height={16}
+          href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
           className='justify-start text-sm'
-        />
+        >
-        Detail
+          <Icon
-      </Button>
+            icon='mdi:eye-outline'
-      <Button
+            width={16}
-        onClick={deleteClickHandler}
+            height={16}
-        variant='ghost'
+            className='justify-start text-sm'
-        color='error'
+          />
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          Detail
-      >
+        </Button>
-        <Icon
+      </RequirePermission>
-          icon='material-symbols:delete-outline-rounded'
+      <RequirePermission permissions='lti.master.flocks.delete'>
-          width={16}
+        <Button
-          height={16}
+          onClick={deleteClickHandler}
-          className='justify-start text-sm'
+          variant='ghost'
-        />
+          color='error'
-        Delete
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      </Button>
+        >
+          <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
+              <RequirePermission permissions='lti.master.flocks.create'>
-                href='/master-data/flock/add'
+                <Button
-                variant='outline'
+                  href='/master-data/flock/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.flocks.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.kandangs.detail'>
-        href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <div className='w-full flex flex-row'>
-                href='/master-data/kandang/add'
+                <RequirePermission permissions='lti.master.kandangs.create'>
-                variant='outline'
+                  <Button
-                color='primary'
+                    href='/master-data/kandang/add'
-                className='w-full sm:w-fit'
+                    variant='outline'
-              >
+                    color='primary'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                    className='w-full sm:w-fit'
-                Tambah
+                  >
-              </Button>
+                    <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
+                <RequirePermission permissions='lti.master.kandangs.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/kandang/detail/edit/?kandangId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.locations.detail'>
-        href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <div className='w-full flex flex-row'>
-                href='/master-data/location/add'
+                <RequirePermission permissions='lti.master.locations.create'>
-                variant='outline'
+                  <Button
-                color='primary'
+                    href='/master-data/location/add'
-                className='w-full sm:w-fit'
+                    variant='outline'
-              >
+                    color='primary'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                    className='w-full sm:w-fit'
-                Tambah
+                  >
-              </Button>
+                    <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
+                <RequirePermission permissions='lti.master.locations.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/location/detail/edit/?locationId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.nonstocks.detail'>
-        href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <RequirePermission permissions='lti.master.nonstocks.create'>
-                href='/master-data/nonstock/add'
+                <Button
-                variant='outline'
+                  href='/master-data/nonstock/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.nonstocks.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.product_categories.detail'>
-        href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <RequirePermission permissions='lti.master.product_categories.create'>
-                href='/master-data/product-category/add'
+                <Button
-                variant='outline'
+                  href='/master-data/product-category/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.product_categories.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/product-category/detail/edit/?productCategoryId=${initialValues?.id}`}
+                    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
+    <RequirePermission permissions='lti.master.products.detail'>
-      href={`/master-data/product/detail/?productId=${props.row.original.id}`}
+      <Button
-      variant='ghost'
+        href={`/master-data/product/detail/?productId=${props.row.original.id}`}
-      color='primary'
+        variant='ghost'
-      className='justify-start text-sm'
+        color='primary'
-    >
-      <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}
         className='justify-start text-sm'
-      />
+      >
-      Delete
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
-    </Button>
+        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
+              <RequirePermission permissions='lti.master.products.create'>
-                href='/master-data/product/add'
+                <Button
-                variant='outline'
+                  href='/master-data/product/add'
-                className='w-full sm:w-fit'
+                  variant='outline'
-                color='primary'
+                  className='w-full sm:w-fit'
-              >
+                  color='primary'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.products.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/product/detail/edit/?productId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.suppliers.detail'>
-        href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <Icon
-          icon='mdi:eye-outline'
-          width={16}
-          height={16}
           className='justify-start text-sm'
-        />
+        >
-        Detail
+          <Icon
-      </Button>
+            icon='mdi:eye-outline'
-      <Button
+            width={16}
-        href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+            height={16}
-        variant='ghost'
+            className='justify-start text-sm'
-        color='warning'
+          />
-        className='justify-start text-sm'
+          Detail
-      >
+        </Button>
-        <Icon
+      </RequirePermission>
-          icon='material-symbols:edit-outline'
+      <RequirePermission permissions='lti.master.suppliers.update'>
-          width={16}
+        <Button
-          height={16}
+          href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
           className='justify-start text-sm'
-        />
+        >
-        Edit
+          <Icon
-      </Button>
+            icon='material-symbols:edit-outline'
-      <Button
+            width={16}
-        onClick={deleteClickHandler}
+            height={16}
-        variant='ghost'
+            className='justify-start text-sm'
-        color='error'
+          />
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          Edit
-      >
+        </Button>
-        <Icon
+      </RequirePermission>
-          icon='material-symbols:delete-outline-rounded'
+      <RequirePermission permissions='lti.master.suppliers.delete'>
-          width={16}
+        <Button
-          height={16}
+          onClick={deleteClickHandler}
-          className='justify-start text-sm'
+          variant='ghost'
-        />
+          color='error'
-        Delete
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-      </Button>
+        >
+          <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
+              <RequirePermission permissions='lti.master.suppliers.create'>
-                href='/master-data/supplier/add'
+                <Button
-                variant='outline'
+                  href='/master-data/supplier/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.suppliers.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/supplier/detail/edit/?supplierId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.uoms.detail'>
-        href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <RequirePermission permissions='lti.master.uoms.create'>
-                href='/master-data/uom/add'
+                <Button
-                variant='outline'
+                  href='/master-data/uom/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.uoms.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/uom/detail/edit/?uomId=${initialValues?.id}`}
+                    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
+      <RequirePermission permissions='lti.master.warehouses.detail'>
-        href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
-        color='primary'
+          variant='ghost'
-        className='justify-start text-sm'
+          color='primary'
-      >
-        <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}
           className='justify-start text-sm'
-        />
+        >
-        Delete
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
-      </Button>
+          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
+              <RequirePermission permissions='lti.master.warehouses.create'>
-                href='/master-data/warehouse/add'
+                <Button
-                variant='outline'
+                  href='/master-data/warehouse/add'
-                color='primary'
+                  variant='outline'
-                className='w-full sm:w-fit'
+                  color='primary'
-              >
+                  className='w-full sm:w-fit'
-                <Icon icon='ic:round-plus' width={24} height={24} />
+                >
-                Tambah
+                  <Icon icon='ic:round-plus' width={24} height={24} />
-              </Button>
+                  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
+                <RequirePermission permissions='lti.master.warehouses.delete'>
-                  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' && (
                   <Button
                     type='button'
-                    color='warning'
+                    color='error'
-                    href={`/master-data/warehouse/detail/edit/?warehouseId=${initialValues?.id}`}
+                    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>
             )}