refactor(FE): Refactor ProductTable and RowOptionsMenu for improved

clarity

src/app/master-data/product/page.tsx

@@ -1,11 +1,7 @@
 import ProductsTable from '@/components/pages/master-data/product/ProductTable';
 
 const Product = () => {
-  return (
+  return <ProductsTable />;
-    <section className='w-full p-4'>
-      <ProductsTable />
-    </section>
-  );
 };
 
 export default Product;

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

@@ -1,13 +1,8 @@
 'use client';
 
-import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useMemo, useState } from 'react';
 import useSWR from 'swr';
-import {
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-  CellContext,
-  ColumnDef,
-  ColumnSort,
-  SortingState,
-} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
@@ -16,69 +11,94 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-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 PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
 
 import { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
 import { cn, formatCurrency } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  type = 'dropdown',
+  popoverPosition = 'bottom',
   props,
   deleteClickHandler,
 }: {
-  type: 'dropdown' | 'collapse';
+  popoverPosition: 'bottom' | 'top';
   props: CellContext<Product, unknown>;
   deleteClickHandler: () => void;
-}) => (
+}) => {
-  <RowOptionsMenuWrapper type={type}>
+  const popoverId = `product#${props.row.original.id}`;
-    <RequirePermission permissions='lti.master.products.detail'>
+  const popoverAnchorName = `--anchor-product#${props.row.original.id}`;
-      <Button
+
-        href={`/master-data/product/detail/?productId=${props.row.original.id}`}
+  const closePopover = () => {
+    document.getElementById(popoverId)?.hidePopover();
+  };
+
+  return (
+    <div className='relative'>
+      <PopoverButton
+        tabIndex={0}
         variant='ghost'
-        color='primary'
+        color='none'
-        className='justify-start text-sm'
+        popoverTarget={popoverId}
+        anchorName={popoverAnchorName}
       >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-        Detail
+      </PopoverButton>
-      </Button>
+
-    </RequirePermission>
+      <PopoverContent
-    <RequirePermission permissions='lti.master.products.update'>
+        id={popoverId}
-      <Button
+        anchorName={popoverAnchorName}
-        href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
+        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        variant='ghost'
+        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-        color='warning'
-        className='justify-start text-sm'
       >
-        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        <div className='flex flex-col bg-base-100 rounded-xl'>
-        Edit
+          <RequirePermission permissions='lti.master.products.detail'>
-      </Button>
+            <Button
-    </RequirePermission>
+              href={`/master-data/product/detail/?productId=${props.row.original.id}`}
-    <RequirePermission permissions='lti.master.products.delete'>
+              variant='ghost'
-      <Button
+              color='none'
-        onClick={deleteClickHandler}
+              className='p-3 justify-start text-sm font-semibold w-full'
-        variant='ghost'
+              onClick={closePopover}
-        color='error'
+            >
-        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+              <Icon icon='heroicons:eye' width={20} height={20} />
-      >
+              Detail
-        <Icon
+            </Button>
-          icon='material-symbols:delete-outline-rounded'
+          </RequirePermission>
-          width={16}
+          <RequirePermission permissions='lti.master.products.update'>
-          height={16}
+            <Button
-          className='justify-start text-sm'
+              href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
-        />
+              variant='ghost'
-        Delete
+              color='none'
-      </Button>
+              className='p-3 justify-start text-sm font-semibold w-full'
-    </RequirePermission>
+              onClick={closePopover}
-  </RowOptionsMenuWrapper>
+            >
-);
+              <Icon icon='heroicons:pencil-square' width={20} height={20} />
+              Edit
+            </Button>
+          </RequirePermission>
+          <RequirePermission permissions='lti.master.products.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 ProductsTable = () => {
   const {
@@ -90,21 +110,15 @@ const ProductsTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      nameSort: '',
-      skuSort: '',
-      brandSort: '',
-      categorySort: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      nameSort: 'sort_name',
-      skuSort: 'sort_sku',
-      brandSort: 'sort_brand',
-      categorySort: 'sort_category',
     },
   });
 
+  const [sorting, setSorting] = useState<SortingState>([]);
+
   const {
     data: products,
     isLoading,
@@ -119,124 +133,10 @@ const ProductsTable = () => {
     undefined
   );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [sorting, setSorting] = useState<SortingState>([]);
 
-  const productsColumns: ColumnDef<Product>[] = [
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    {
+    updateFilter('search', e.target.value);
-      header: '#',
+  };
-      cell: (props) =>
-        tableFilterState.pageSize * (tableFilterState.page - 1) +
-        props.row.index +
-        1,
-    },
-    {
-      accessorKey: 'name',
-      header: 'Nama',
-    },
-    {
-      accessorKey: 'sku',
-      header: 'SKU',
-    },
-    {
-      accessorKey: 'brand',
-      header: 'Merek',
-    },
-    {
-      accessorKey: 'product_category',
-      header: 'Kategori',
-      cell: (props) => props.row.original.product_category?.name ?? '-',
-    },
-    {
-      accessorKey: 'uom',
-      header: 'Satuan',
-      cell: (props) => props.row.original.uom?.name ?? '-',
-    },
-    {
-      accessorKey: 'product_price',
-      header: 'Harga Produk',
-      cell: (props) =>
-        props.row.original.product_price
-          ? formatCurrency(props.row.original.product_price)
-          : '-',
-    },
-    {
-      accessorKey: 'selling_price',
-      header: 'Harga Jual',
-      cell: (props) =>
-        props.row.original.selling_price
-          ? formatCurrency(props.row.original.selling_price)
-          : '-',
-    },
-    {
-      accessorKey: 'tax',
-      header: 'Pajak (%)',
-      cell: (props) => props.row.original.tax ?? '-',
-    },
-    {
-      accessorKey: 'expiry_period',
-      header: 'Kadaluarsa (hari)',
-      cell: (props) => props.row.original.expiry_period ?? '-',
-    },
-    {
-      accessorKey: 'suppliers',
-      header: 'Supplier',
-      cell: (props) =>
-        props.row.original.suppliers?.map((s) => s.name).join(', ') || '-',
-    },
-    {
-      accessorKey: 'flag',
-      header: 'Flag',
-      cell: (props) =>
-        props.row.original.flag ? props.row.original.flag : '-',
-    },
-    {
-      accessorKey: 'subs_flags',
-      header: 'Kategori Flags',
-      cell: (props) =>
-        props.row.original.sub_flags?.length
-          ? props.row.original.sub_flags.join(', ')
-          : '-',
-    },
-    {
-      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 = () => {
-          setSelectedProduct(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>
-            )}
-          </>
-        );
-      },
-    },
-  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -258,110 +158,175 @@ const ProductsTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+  const productsColumns: ColumnDef<Product>[] = useMemo(
-    updateFilter('search', e.target.value);
+    () => [
-  };
+      {
+        header: 'No',
+        cell: (props) =>
+          tableFilterState.pageSize * (tableFilterState.page - 1) +
+          props.row.index +
+          1,
+      },
+      {
+        accessorKey: 'name',
+        header: 'Nama',
+      },
+      {
+        accessorKey: 'sku',
+        header: 'SKU',
+      },
+      {
+        accessorKey: 'brand',
+        header: 'Merek',
+      },
+      {
+        accessorFn: (row) => row.product_category?.name ?? '-',
+        header: 'Kategori',
+      },
+      {
+        accessorFn: (row) => row.uom?.name ?? '-',
+        header: 'Satuan',
+      },
+      {
+        accessorKey: 'product_price',
+        header: 'Harga Produk',
+        cell: (props) =>
+          props.row.original.product_price
+            ? formatCurrency(props.row.original.product_price)
+            : '-',
+      },
+      {
+        accessorKey: 'selling_price',
+        header: 'Harga Jual',
+        cell: (props) =>
+          props.row.original.selling_price
+            ? formatCurrency(props.row.original.selling_price)
+            : '-',
+      },
+      {
+        accessorKey: 'tax',
+        header: 'Pajak (%)',
+        cell: (props) => props.row.original.tax ?? '-',
+      },
+      {
+        accessorKey: 'expiry_period',
+        header: 'Kadaluarsa (hari)',
+        cell: (props) => props.row.original.expiry_period ?? '-',
+      },
+      {
+        accessorFn: (row) =>
+          row.suppliers?.map((s) => s.name).join(', ') || '-',
+        header: 'Supplier',
+      },
+      {
+        accessorKey: 'flag',
+        header: 'Flag',
+        cell: (props) =>
+          props.row.original.flag ? props.row.original.flag : '-',
+      },
+      {
+        accessorFn: (row) =>
+          row.sub_flags?.length ? row.sub_flags.join(', ') : '-',
+        header: 'Kategori Flags',
+      },
+      {
+        header: 'Aksi',
+        cell: (props: CellContext<Product, 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 pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-    const newVal = val as OptionType;
-    setPageSize(newVal.value as number);
-  };
 
-  const updateSortingFilter = useCallback(
+          const deleteClickHandler = () => {
-    (
+            setSelectedProduct(props.row.original);
-      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+            deleteModal.openModal();
-      sortFilter: ColumnSort | undefined
+          };
-    ) => {
+
-      if (!sortFilter) {
+          return (
-        updateFilter(sortName, '');
+            <RowOptionsMenu
-      } else {
+              props={props}
-        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-      }
+              deleteClickHandler={deleteClickHandler}
-    },
+            />
-    [updateFilter]
+          );
+        },
+      },
+    ],
+    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
   );
 
-  useEffect(() => {
-    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
-    const skuSortFilter = sorting.find((sortItem) => sortItem.id === 'sku');
-    const brandSortFilter = sorting.find((sortItem) => sortItem.id === 'brand');
-    const categorySortFilter = sorting.find(
-      (sortItem) => sortItem.id === 'product_category'
-    );
-
-    updateSortingFilter('nameSort', nameSortFilter);
-    updateSortingFilter('skuSort', skuSortFilter);
-    updateSortingFilter('brandSort', brandSortFilter);
-    updateSortingFilter('categorySort', categorySortFilter);
-  }, [sorting, updateSortingFilter]);
-
   return (
     <>
-      <div className='w-full p-0 sm:p-4'>
+      <div className='w-full'>
-        <div className='flex flex-col gap-2 mb-4'>
+        {/* Header Section */}
-          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-            <div className='w-full flex flex-row'>
+          {/* Action Buttons */}
-              <RequirePermission permissions='lti.master.products.create'>
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-                <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'
+                color='primary'
-                  color='primary'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-                >
+              >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
+                <Icon icon='heroicons:plus' width={20} height={20} />
-                  Tambah
+                Tambah Produk
-                </Button>
+              </Button>
-              </RequirePermission>
+            </RequirePermission>
-            </div>
+          </div>
+
+          {/* Search */}
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
               placeholder='Cari Produk'
-              value={tableFilterState.search}
+              value={tableFilterState.search ?? ''}
               onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
+              startAdornment={
-            />
+                <Icon
-          </div>
+                  icon='heroicons:magnifying-glass'
-          <div className='flex flex-row justify-end'>
+                  width={20}
-            <SelectInput
+                  height={20}
-              label='Baris'
+                />
-              options={ROWS_OPTIONS}
+              }
-              value={{
+              className={{
-                label: String(tableFilterState.pageSize),
+                wrapper: 'w-full min-w-24 max-w-3xs',
-                value: tableFilterState.pageSize,
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
               }}
-              onChange={pageSizeChangeHandler}
-              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
-        <Table<Product>
+
-          data={isResponseSuccess(products) ? products?.data : []}
+        {/* Table Section */}
-          columns={productsColumns}
+        <div className='flex flex-col mb-4'>
-          pageSize={tableFilterState.pageSize}
+          <Table<Product>
-          page={isResponseSuccess(products) ? products?.meta?.page : 0}
+            data={isResponseSuccess(products) ? products?.data : []}
-          totalItems={
+            columns={productsColumns}
-            isResponseSuccess(products) ? products?.meta?.total_results : 0
+            pageSize={tableFilterState.pageSize}
-          }
+            page={isResponseSuccess(products) ? products?.meta?.page : 0}
-          onPageChange={setPage}
+            totalItems={
-          isLoading={isLoading}
+              isResponseSuccess(products) ? products?.meta?.total_results : 0
-          sorting={sorting}
+            }
-          setSorting={setSorting}
+            onPageChange={setPage}
-          className={{
+            onPageSizeChange={setPageSize}
-            containerClassName: cn({
+            isLoading={isLoading}
-              'mb-20':
+            sorting={sorting}
-                isResponseSuccess(products) && products?.data?.length === 0,
+            setSorting={setSorting}
-            }),
+            className={{
-            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+              containerClassName: cn('p-3 mb-0', {
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
+                'w-full':
-            headerRowClassName: 'border-b border-b-gray-200',
+                  isResponseSuccess(products) && products?.data?.length === 0,
-            headerColumnClassName:
+              }),
-              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+              headerColumnClassName: 'text-nowrap',
-            bodyRowClassName: 'border-b border-b-gray-200',
+            }}
-            bodyColumnClassName:
+          />
-              'px-6 py-3 last:flex last:flex-row last:justify-end',
+        </div>
-          }}
-        />
       </div>
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'