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

src/components/pages/master-data/production-standard/ProductionStandardTable.tsx

@@ -17,6 +17,7 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import { cn } from '@/lib/helper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -29,40 +30,46 @@ const RowOptionsMenu = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <Button
+      <RequirePermission permissions='lti.master.production_standards.detail'>
-        href={`/master-data/production-standard/detail/?productionStandardId=${props.row.original.id}`}
+        <Button
-        variant='ghost'
+          href={`/master-data/production-standard/detail/?productionStandardId=${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/production-standard/detail/edit/?productionStandardId=${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.production_standards.update'>
+        <Button
+          href={`/master-data/production-standard/detail/edit/?productionStandardId=${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.production_standards.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>
   );
 };
@@ -101,99 +108,108 @@ const ProductionStandardTable = () => {
     <>
       <div className='flex flex-col gap-6 p-6'>
         <div className='flex flex-row gap-6 justify-start'>
-          <Button href='/master-data/production-standard/add' variant='outline'>
+          <RequirePermission permissions='lti.master.production_standards.create'>
-            <Icon icon='mdi:plus' /> Tambah
+            <Button
-          </Button>
+              href='/master-data/production-standard/add'
+              variant='outline'
+            >
+              <Icon icon='mdi:plus' /> Tambah
+            </Button>
+          </RequirePermission>
         </div>
-        <Table<ProductionStandard>
+        <RequirePermission permissions='lti.master.production_standards.list'>
-          data={
+          <Table<ProductionStandard>
-            isResponseSuccess(productionStandards)
+            data={
-              ? productionStandards.data
+              isResponseSuccess(productionStandards)
-              : []
+                ? productionStandards.data
-          }
+                : []
-          columns={[
+            }
-            {
+            columns={[
-              header: 'No',
+              {
-              accessorFn: (row, index) => index + 1,
+                header: 'No',
-            },
+                accessorFn: (row, index) => index + 1,
-            {
-              header: 'Nama',
-              accessorKey: 'name',
-            },
-            {
-              header: 'Kategori',
-              accessorFn: (row) => row.project_category,
-            },
-            {
-              header: 'Aksi',
-              cell: (props) => {
-                const currentPageSize =
-                  props.table.getPaginationRowModel().rows.length;
-                const currentPageRows =
-                  props.table.getPaginationRowModel().flatRows;
-                const currentRowRelativeIndex =
-                  currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
-                const isLast2Rows =
-                  currentRowRelativeIndex > currentPageSize - 2;
-
-                const deleteClickHandler = () => {
-                  setSelectedProductionStandard(props.row.original);
-                  deleteModal.openModal();
-                };
-
-                return (
-                  <>
-                    {currentPageSize > 2 && (
-                      <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                        <RowOptionsMenu
-                          type='dropdown'
-                          props={props}
-                          deleteClickHandler={deleteClickHandler}
-                        />
-                      </RowDropdownOptions>
-                    )}
-
-                    {currentPageSize <= 2 && (
-                      <RowCollapseOptions>
-                        <RowOptionsMenu
-                          type='collapse'
-                          props={props}
-                          deleteClickHandler={deleteClickHandler}
-                        />
-                      </RowCollapseOptions>
-                    )}
-                  </>
-                );
               },
-            },
+              {
-          ]}
+                header: 'Nama',
-          className={{
+                accessorKey: 'name',
-            headerColumnClassName: cn(
+              },
-              TABLE_DEFAULT_STYLING.headerColumnClassName,
+              {
-              'last:flex last:flex-row last:justify-end'
+                header: 'Kategori',
-            ),
+                accessorFn: (row) => row.project_category,
-            bodyColumnClassName: cn(
+              },
-              TABLE_DEFAULT_STYLING.bodyColumnClassName,
+              {
-              'last:flex last:flex-row last:justify-end'
+                header: 'Aksi',
-            ),
+                cell: (props) => {
+                  const currentPageSize =
+                    props.table.getPaginationRowModel().rows.length;
+                  const currentPageRows =
+                    props.table.getPaginationRowModel().flatRows;
+                  const currentRowRelativeIndex =
+                    currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+                  const isLast2Rows =
+                    currentRowRelativeIndex > currentPageSize - 2;
+
+                  const deleteClickHandler = () => {
+                    setSelectedProductionStandard(props.row.original);
+                    deleteModal.openModal();
+                  };
+
+                  return (
+                    <>
+                      {currentPageSize > 2 && (
+                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowDropdownOptions>
+                      )}
+
+                      {currentPageSize <= 2 && (
+                        <RowCollapseOptions>
+                          <RowOptionsMenu
+                            type='collapse'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowCollapseOptions>
+                      )}
+                    </>
+                  );
+                },
+              },
+            ]}
+            className={{
+              headerColumnClassName: cn(
+                TABLE_DEFAULT_STYLING.headerColumnClassName,
+                'last:flex last:flex-row last:justify-end'
+              ),
+              bodyColumnClassName: cn(
+                TABLE_DEFAULT_STYLING.bodyColumnClassName,
+                'last:flex last:flex-row last:justify-end'
+              ),
+            }}
+          />
+        </RequirePermission>
+      </div>
+      <RequirePermission permissions='lti.master.production_standards.delete'>
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Production Standard ini (${selectedProductionStandard?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
           }}
         />
-      </div>
+      </RequirePermission>
-      <ConfirmationModal
-        ref={deleteModal.ref}
-        type='error'
-        text={`Apakah anda yakin ingin menghapus data Production Standard ini (${selectedProductionStandard?.name})?`}
-        secondaryButton={{
-          text: 'Tidak',
-        }}
-        primaryButton={{
-          text: 'Ya',
-          color: 'error',
-          isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
-        }}
-      />
     </>
   );
 };

src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx

@@ -28,6 +28,7 @@ import { isResponseError } from '@/lib/api-helper';
 import toast from 'react-hot-toast';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { useModal } from '@/components/Modal';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 type TableRowsType = {
   customRow: boolean;
@@ -1146,39 +1147,45 @@ const ProductionStandardForm = ({
         >
           {formType === 'detail' && (
             <div className='gap-2 flex items-center'>
+              <RequirePermission permissions='lti.master.production_standards.update'>
+                <Button
+                  className='min-w-24'
+                  color='warning'
+                  href={`/master-data/production-standard/detail/edit?productionStandardId=${initialValue?.id}`}
+                >
+                  <Icon icon='mdi:pencil' />
+                  Edit
+                </Button>
+              </RequirePermission>
+              <RequirePermission permissions='lti.master.production_standards.delete'>
+                <Button
+                  type='button'
+                  className='min-w-24'
+                  color='error'
+                  onClick={() => {
+                    deleteModal.openModal();
+                  }}
+                >
+                  <Icon icon='mdi:delete' />
+                  Hapus
+                </Button>
+              </RequirePermission>
+            </div>
+          )}
+          {formType == 'edit' && (
+            <RequirePermission permissions='lti.master.production_standards.delete'>
               <Button
-                className='min-w-24'
-                color='warning'
-                href={`/master-data/production-standard/detail/edit?productionStandardId=${initialValue?.id}`}
-              >
-                <Icon icon='mdi:pencil' />
-                Edit
-              </Button>
-              <Button
-                type='button'
                 className='min-w-24'
                 color='error'
                 onClick={() => {
                   deleteModal.openModal();
                 }}
+                type='button'
               >
                 <Icon icon='mdi:delete' />
                 Hapus
               </Button>
-            </div>
+            </RequirePermission>
-          )}
-          {formType == 'edit' && (
-            <Button
-              className='min-w-24'
-              color='error'
-              onClick={() => {
-                deleteModal.openModal();
-              }}
-              type='button'
-            >
-              <Icon icon='mdi:delete' />
-              Hapus
-            </Button>
           )}
           <div className='gap-2 flex items-center'>
             {formType === 'detail' ? 'Detail' : 'Total'}{' '}

src/config/route-permission.ts

@@ -152,4 +152,15 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
   '/master-data/flock/add/': ['lti.master.flocks.create'],
   '/master-data/flock/detail/': ['lti.master.flocks.detail'],
   '/master-data/flock/detail/edit/': ['lti.master.flocks.update'],
+
+  '/master-data/production-standard/': ['lti.master.production_standards.list'],
+  '/master-data/production-standard/add/': [
+    'lti.master.production_standards.create',
+  ],
+  '/master-data/production-standard/detail/': [
+    'lti.master.production_standards.detail',
+  ],
+  '/master-data/production-standard/detail/edit/': [
+    'lti.master.production_standards.update',
+  ],
 };