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

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

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

src/components/pages/master-data/bank/BanksTable.tsx

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

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

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

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

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

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

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

src/components/pages/master-data/fcr/FcrsTable.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

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

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

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

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

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

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

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

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

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

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

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

src/components/pages/master-data/uom/UomsTable.tsx

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

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

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

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

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

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

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