refactor(FE): Refactor master-data pages to simplify component rendering

2026-05-24 15:25:46 +00:00 · 2026-03-02 11:17:54 +07:00
parent 7db6ae4077
commit aadf10b8b9
25 changed files with 2118 additions and 2269 deletions
@@ -1,92 +1,121 @@
 'use client';

-import Button from '@/components/Button';
-import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
-import { ProductionStandard } from '@/types/api/master-data/production-standard';
-import { Icon } from '@iconify/react';
+import { useMemo, useState } from 'react';
 import useSWR from 'swr';
-import { ProductionStandardApi } from '@/services/api/master-data';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
-import { CellContext } from '@tanstack/react-table';
-import { useModal } from '@/components/Modal';
-import { useState } from 'react';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
-import { cn } from '@/lib/helper';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
+import PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
+
+import { ProductionStandard } from '@/types/api/master-data/production-standard';
+import { ProductionStandardApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';

 const RowOptionsMenu = ({
-  type = 'dropdown',
+  popoverPosition = 'bottom',
  props,
  deleteClickHandler,
 }: {
-  type: 'dropdown' | 'collapse';
+  popoverPosition: 'bottom' | 'top';
  props: CellContext<ProductionStandard, unknown>;
  deleteClickHandler: () => void;
 }) => {
+  const popoverId = `production-standard#${props.row.original.id}`;
+  const popoverAnchorName = `--anchor-production-standard#${props.row.original.id}`;
+
+  const closePopover = () => {
+    document.getElementById(popoverId)?.hidePopover();
+  };
+
  return (
-    <RowOptionsMenuWrapper type={type}>
-      <RequirePermission permissions='lti.master.production_standards.detail'>
-        <Button
-          href={`/master-data/production-standard/detail/?productionStandardId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-      </RequirePermission>
+    <div className='relative'>
+      <PopoverButton
+        tabIndex={0}
+        variant='ghost'
+        color='none'
+        popoverTarget={popoverId}
+        anchorName={popoverAnchorName}
+      >
+        <Icon icon='material-symbols:more-vert' width={16} height={16} />
+      </PopoverButton>

-      <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>
+      <PopoverContent
+        id={popoverId}
+        anchorName={popoverAnchorName}
+        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
+        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
+      >
+        <div className='flex flex-col bg-base-100 rounded-xl'>
+          <RequirePermission permissions='lti.master.production_standards.detail'>
+            <Button
+              href={`/master-data/production-standard/detail/?productionStandardId=${props.row.original.id}`}
+              variant='ghost'
+              color='none'
+              className='p-3 justify-start text-sm font-semibold w-full'
+              onClick={closePopover}
+            >
+              <Icon icon='heroicons:eye' width={20} height={20} />
+              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='none'
+              className='p-3 justify-start text-sm font-semibold w-full'
+              onClick={closePopover}
+            >
+              <Icon icon='heroicons:pencil-square' width={20} height={20} />
+              Edit
+            </Button>
+          </RequirePermission>
+          <RequirePermission permissions='lti.master.production_standards.delete'>
+            <Button
+              onClick={() => {
+                deleteClickHandler();
+                closePopover();
+              }}
+              variant='ghost'
+              color='none'
+              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
+            >
+              <Icon icon='heroicons:trash' width={20} height={20} />
+              Delete
+            </Button>
+          </RequirePermission>
+        </div>
+      </PopoverContent>
+    </div>
  );
 };

 const ProductionStandardTable = () => {
-  const deleteModal = useModal();
+  const [sorting, setSorting] = useState<SortingState>([]);

+  const {
+    data: productionStandards,
+    isLoading,
+    mutate: refreshProductionStandards,
+  } = useSWR(
+    `${ProductionStandardApi.basePath}`,
+    ProductionStandardApi.getAllFetcher
+  );
+
+  const deleteModal = useModal();
  const [selectedProductionStandard, setSelectedProductionStandard] = useState<
    ProductionStandard | undefined
  >(undefined);
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);

-  const { data: productionStandards, mutate: refreshProductionStandards } =
-    useSWR(
-      `${ProductionStandardApi.basePath}`,
-      ProductionStandardApi.getAllFetcher
-    );
-
  const confirmationModalDeleteClickHandler = async () => {
    setIsDeleteLoading(true);

@@ -107,112 +136,107 @@ const ProductionStandardTable = () => {
    setIsDeleteLoading(false);
  };

+  const productionStandardColumns: ColumnDef<ProductionStandard>[] = useMemo(
+    () => [
+      {
+        header: 'No',
+        cell: (props) => props.row.index + 1,
+      },
+      {
+        accessorKey: 'name',
+        header: 'Nama',
+      },
+      {
+        accessorFn: (row) => row.project_category ?? '-',
+        header: 'Kategori',
+      },
+      {
+        header: 'Aksi',
+        cell: (props: CellContext<ProductionStandard, unknown>) => {
+          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 (
+            <RowOptionsMenu
+              props={props}
+              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
+              deleteClickHandler={deleteClickHandler}
+            />
+          );
+        },
+      },
+    ],
+    [deleteModal]
+  );
+
  return (
    <>
-      <div className='flex flex-col gap-6 p-6'>
-        <div className='flex flex-row gap-6 justify-start'>
-          <RequirePermission permissions='lti.master.production_standards.create'>
-            <Button
-              href='/master-data/production-standard/add'
-              variant='outline'
-            >
-              <Icon icon='mdi:plus' /> Tambah
-            </Button>
-          </RequirePermission>
+      <div className='w-full'>
+        {/* Header Section */}
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
+          {/* Action Buttons */}
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
+            <RequirePermission permissions='lti.master.production_standards.create'>
+              <Button
+                href='/master-data/production-standard/add'
+                color='primary'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+              >
+                <Icon icon='heroicons:plus' width={20} height={20} />
+                Add Standard Production
+              </Button>
+            </RequirePermission>
+          </div>
        </div>
-        <RequirePermission permissions='lti.master.production_standards.list'>
+
+        {/* Table Section */}
+        <div className='flex flex-col mb-4'>
          <Table<ProductionStandard>
            data={
              isResponseSuccess(productionStandards)
                ? productionStandards.data
                : []
            }
-            columns={[
-              {
-                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>
-                      )}
-                    </>
-                  );
-                },
-              },
-            ]}
+            columns={productionStandardColumns}
+            isLoading={isLoading}
+            sorting={sorting}
+            setSorting={setSorting}
            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'
-              ),
+              containerClassName: cn('p-3 mb-0', {
+                'w-full':
+                  isResponseSuccess(productionStandards) &&
+                  productionStandards?.data?.length === 0,
+              }),
+              headerColumnClassName: 'text-nowrap',
            }}
          />
-        </RequirePermission>
+        </div>
      </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,
-          }}
-        />
-      </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,
+        }}
+      />
    </>
  );
 };