refactor(FE): Refactor MovementTable to use Popover for row actions

src/components/pages/inventory/movement/MovementTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { SortingState, CellContext, ColumnDef } from '@tanstack/react-table';
 
@@ -11,37 +11,62 @@ import { MovementApi } from '@/services/api/inventory';
 import { cn } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { ROWS_OPTIONS } from '@/config/constant';
-import { OptionType } from '@/components/input/SelectInput';
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput 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';
 
 const RowOptionsMenu = ({
-  type = 'dropdown',
+  popoverPosition = 'bottom',
   props,
 }: {
-  type: 'dropdown' | 'collapse';
+  popoverPosition: 'bottom' | 'top';
   props: CellContext<Movement, unknown>;
-}) => (
-  <RowOptionsMenuWrapper type={type}>
-    <RequirePermission permissions='lti.inventory.transfer.detail'>
-      <Button
-        href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
+}) => {
+  const popoverId = `movement#${props.row.original.id}`;
+  const popoverAnchorName = `--anchor-movement#${props.row.original.id}`;
+
+  const closePopover = () => {
+    document.getElementById(popoverId)?.hidePopover();
+  };
+
+  return (
+    <div className='relative'>
+      <PopoverButton
+        tabIndex={0}
         variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
+        color='none'
+        popoverTarget={popoverId}
+        anchorName={popoverAnchorName}
       >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-    </RequirePermission>
-  </RowOptionsMenuWrapper>
-);
+        <Icon icon='material-symbols:more-vert' width={16} height={16} />
+      </PopoverButton>
+
+      <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.inventory.transfer.detail'>
+            <Button
+              href={`/inventory/movement/detail/?movementId=${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>
+        </div>
+      </PopoverContent>
+    </div>
+  );
+};
 
 const MovementTable = () => {
   const {
@@ -71,121 +96,108 @@ const MovementTable = () => {
     updateFilter('search', e.target.value);
   };
 
-  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const newVal = val as OptionType;
-    setPageSize(newVal.value as number);
-    setPage(1);
-  };
-
-  const movementColumns: ColumnDef<Movement>[] = [
-    {
-      header: '#',
-      cell: (props) =>
-        tableFilterState.pageSize * (tableFilterState.page - 1) +
-        props.row.index +
-        1,
-    },
-    {
-      accessorFn: (row) => row.source_warehouse?.name,
-      header: 'Gudang Asal',
-    },
-    {
-      accessorFn: (row) => row.destination_warehouse?.name,
-      header: 'Gudang Tujuan',
-    },
-    {
-      accessorKey: 'transfer_reason',
-      header: 'Catatan',
-    },
-    {
-      accessorKey: 'transfer_date',
-      header: 'Tanggal',
-      cell: (props) =>
-        new Date(props.row.original.transfer_date).toLocaleDateString('id-ID'),
-    },
-    {
-      accessorFn: (row) => {
-        const totalCost = row.deliveries?.reduce(
-          (sum, d) => sum + (d.shipping_cost_total || 0),
-          0
-        );
-        return totalCost?.toLocaleString('id-ID');
+  const movementColumns: ColumnDef<Movement>[] = useMemo(
+    () => [
+      {
+        header: 'No',
+        cell: (props) =>
+          tableFilterState.pageSize * (tableFilterState.page - 1) +
+          props.row.index +
+          1,
       },
-      header: 'Biaya Pengiriman',
-    },
-    {
-      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;
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu type='dropdown' props={props} />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu type='collapse' props={props} />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
+      {
+        accessorFn: (row) => row.source_warehouse?.name,
+        header: 'Gudang Asal',
       },
-    },
-  ];
+      {
+        accessorFn: (row) => row.destination_warehouse?.name,
+        header: 'Gudang Tujuan',
+      },
+      {
+        accessorKey: 'transfer_reason',
+        header: 'Catatan',
+      },
+      {
+        accessorKey: 'transfer_date',
+        header: 'Tanggal',
+        cell: (props) =>
+          new Date(props.row.original.transfer_date).toLocaleDateString(
+            'id-ID'
+          ),
+      },
+      {
+        accessorFn: (row) => {
+          const totalCost = row.deliveries?.reduce(
+            (sum, d) => sum + (d.shipping_cost_total || 0),
+            0
+          );
+          return totalCost?.toLocaleString('id-ID');
+        },
+        header: 'Biaya Pengiriman',
+      },
+      {
+        header: 'Aksi',
+        cell: (props: CellContext<Movement, 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;
+
+          return (
+            <RowOptionsMenu
+              props={props}
+              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
+            />
+          );
+        },
+      },
+    ],
+    [tableFilterState.pageSize, tableFilterState.page]
+  );
 
   return (
-    <>
-      <div className='w-full p-0 sm:p-4'>
-        <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 gap-2'>
-              <RequirePermission permissions='lti.inventory.transfer.create'>
-                <Button
-                  href='/inventory/movement/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 Movement
-                </Button>
-              </RequirePermission>
-            </div>
-
-            <DebouncedTextInput
-              name='search'
-              placeholder='Cari Movement'
-              value={tableFilterState.search}
-              onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
-            />
-          </div>
-
-          <div className='flex justify-end gap-4'>
-            <SelectInput
-              label='Baris'
-              options={ROWS_OPTIONS}
-              value={{
-                label: String(tableFilterState.pageSize),
-                value: tableFilterState.pageSize,
-              }}
-              onChange={pageSizeChangeHandler}
-              className={{
-                wrapper:
-                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
-              }}
-            />
-          </div>
+    <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.inventory.transfer.create'>
+            <Button
+              href='/inventory/movement/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 Movement
+            </Button>
+          </RequirePermission>
         </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 Movement'
+            value={tableFilterState.search ?? ''}
+            onChange={searchChangeHandler}
+            startAdornment={
+              <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
+            }
+            className={{
+              wrapper: 'w-full min-w-24 max-w-3xs',
+              inputWrapper: 'rounded-xl! shadow-button-soft',
+              input:
+                'placeholder:font-semibold placeholder:text-base-content/50',
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Table Section */}
+      <div className='flex flex-col mb-4'>
         <Table<Movement>
           data={isResponseSuccess(movements) ? movements?.data : []}
           columns={movementColumns}
@@ -195,26 +207,20 @@ const MovementTable = () => {
             isResponseSuccess(movements) ? movements?.meta?.total_results : 0
           }
           onPageChange={setPage}
+          onPageSizeChange={setPageSize}
           isLoading={isLoading}
           sorting={sorting}
           setSorting={setSorting}
           className={{
-            containerClassName: cn({
-              'mb-20':
+            containerClassName: cn('p-3 mb-0', {
+              'w-full':
                 isResponseSuccess(movements) && movements?.data?.length === 0,
             }),
-            tableWrapperClassName: 'overflow-x-auto min-h-full!',
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
-            headerRowClassName: 'border-b border-b-gray-200',
-            headerColumnClassName:
-              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-            bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
-              'px-6 py-3 last:flex last:flex-row last:justify-end',
+            headerColumnClassName: 'text-nowrap',
           }}
         />
       </div>
-    </>
+    </div>
   );
 };