feat(FE-64): refactor MovementTable with new TableToolbar and TableRowSizeSelector components

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

@@ -1,23 +1,22 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import { SortingState } from '@tanstack/react-table';
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
-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 { cn } from '@/lib/helper';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Movement } from '@/types/api/inventory/movement';
-import { BaseMetadata } from '@/types/api/api-general';
+import { TableToolbar } from '@/components/table/TableToolbar';
+import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import { TableRowOptions } from '@/components/table/TableRowOptions';
+import { OptionType } from '@/components/input/SelectInput';
+import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
 
 // Dummy data
-const baseMetadata: BaseMetadata = {
+const baseMetadata = {
   created_user: {
     id: 1,
     id_user: 1,
@@ -339,159 +338,17 @@ const dummyMovements: Movement[] = [
   },
 ];
 
-
-const RowOptionsMenu = ({
-  type = 'dropdown',
-  props,
-  deleteClickHandler,
-}: {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<Movement, unknown>;
-  deleteClickHandler: () => void;
-}) => (
-  <div
-    tabIndex={type === 'dropdown' ? 0 : undefined}
-    className={cn(
-      {
-        'dropdown-content': type === 'dropdown',
-        'mt-2': type === 'collapse',
-      },
-      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-    )}
-  >
-    <Button
-      href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
-      variant='ghost'
-      color='primary'
-      className='justify-start text-sm'
-    >
-      <Icon icon='mdi:eye-outline' width={16} height={16} />
-      Detail
-    </Button>
-    <Button
-      href={`/inventory/movement/detail/edit/?movementId=${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
-    </Button>
-  </div>
-);
-
 const MovementTable = () => {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedMovement, setSelectedMovement] = useState<
+  const [, setSelectedMovement] = useState<Movement | undefined>(undefined);
-    Movement | undefined
-  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const paginatedData = useMemo(() => {
-    const start = (page - 1) * pageSize;
-    return dummyMovements.slice(start, start + pageSize);
-  }, [page, pageSize]);
-
-  const movementsColumns: ColumnDef<Movement>[] = [
-    {
-      header: '#',
-      cell: (props) => pageSize * (page - 1) + props.row.index + 1,
-    },
-    {
-      accessorKey: 'warehouse_asal',
-      header: 'Gudang Asal',
-      cell: (props) => props.row.original.warehouse_asal.name,
-    },
-    {
-      accessorKey: 'warehouse_tujuan',
-      header: 'Gudang Tujuan',
-      cell: (props) => props.row.original.warehouse_tujuan.name,
-    },
-    {
-      accessorKey: 'product',
-      header: 'Nama Produk',
-      cell: (props) => props.row.original.product.map((p) => p.product.name),
-    },
-    {
-      accessorKey: 'alasan_transfer',
-      header: 'Catatan',
-    },
-    {
-      accessorKey: 'biaya_ekspedisi',
-      header: 'Biaya Ekspedisi',
-      cell: (props) =>
-        props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
-    },
-    {
-      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 = () => {
-          setSelectedMovement(props.row.original);
-          deleteModal.openModal();
-        };
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
   const deleteModal = useModal();
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
-      deleteModal.closeModal();
-    }, 1000);
-  };
 
-  const searchChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e
-  ) => {
     setSearch(e.target.value);
     setPage(1);
   };
@@ -502,67 +359,119 @@ const MovementTable = () => {
     setPage(1);
   };
 
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    setTimeout(() => {
+      setIsDeleteLoading(false);
+      deleteModal.closeModal();
+    }, 1000);
+  };
+
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return dummyMovements.slice(start, start + pageSize);
+  }, [page, pageSize]);
+
   return (
-    <>
+    <div className='flex flex-col gap-4'>
-      <div className='w-full p-0 sm:p-4'>
+      <div className='flex flex-col gap-2 mb-4'>
-        <div className='flex flex-col gap-2 mb-4'>
+        <TableToolbar
-          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+          addButton={{
-            <div className='flex flex-row'>
+            href: '/inventory/movement/add',
-              <Button href='/inventory/movement/add' color='primary'>
+            label: 'Tambah Movement',
-                <Icon icon='ic:round-plus' width={24} height={24} />
+          }}
-                Tambah Movement
+          search={{
-              </Button>
+            value: search,
-            </div>
+            onChange: searchChangeHandler,
-            <DebouncedTextInput
+            placeholder: 'Cari Movement',
-              name='search'
-              placeholder='Cari Movement'
-              value={search}
-              onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
-            />
-          </div>
-          <div className='flex flex-row justify-end'>
-            <SelectInput
-              label='Baris'
-              options={ROWS_OPTIONS}
-              value={{
-                label: String(pageSize),
-                value: pageSize,
-              }}
-              onChange={pageSizeChangeHandler}
-              className={{ wrapper: 'max-w-28' }}
-            />
-          </div>
-        </div>
-        <Table<Movement>
-          data={paginatedData}
-          columns={movementsColumns}
-          pageSize={pageSize}
-          page={page}
-          totalItems={dummyMovements.length}
-          onPageChange={setPage}
-          isLoading={false}
-          sorting={sorting}
-          setSorting={setSorting}
-          className={{
-            containerClassName: cn({
-              'mb-20': paginatedData.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',
           }}
         />
+        <TableRowSizeSelector
+          value={pageSize}
+          onChange={pageSizeChangeHandler}
+          options={ROWS_OPTIONS}
+        />
       </div>
+
+      <Table
+        data={paginatedData}
+        columns={[
+          {
+            header: '#',
+            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+          },
+          {
+            accessorKey: 'warehouse_asal',
+            header: 'Gudang Asal',
+            cell: (props) => props.row.original.warehouse_asal.name,
+          },
+          {
+            accessorKey: 'warehouse_tujuan',
+            header: 'Gudang Tujuan',
+            cell: (props) => props.row.original.warehouse_tujuan.name,
+          },
+          {
+            accessorKey: 'product',
+            header: 'Nama Produk',
+            cell: (props) =>
+              props.row.original.product.map((p) => p.product.name),
+          },
+          {
+            accessorKey: 'alasan_transfer',
+            header: 'Catatan',
+          },
+          {
+            accessorKey: 'biaya_ekspedisi',
+            header: 'Biaya Ekspedisi',
+            cell: (props) =>
+              props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
+          },
+          {
+            id: 'actions',
+            cell: (props) => (
+              <div className='dropdown dropdown-end'>
+                <Button tabIndex={0} variant='ghost' className='px-2'>
+                  <Icon icon='carbon:overflow-menu-vertical' />
+                </Button>
+                <TableRowOptions
+                  type='dropdown'
+                  recordId={props.row.original.id}
+                  basePath='/inventory/movement'
+                  onDelete={() => {
+                    setSelectedMovement(props.row.original);
+                    deleteModal.openModal();
+                  }}
+                />
+              </div>
+            ),
+          },
+        ]}
+        pageSize={pageSize}
+        page={page}
+        totalItems={dummyMovements.length}
+        onPageChange={setPage}
+        isLoading={false}
+        sorting={sorting}
+        setSorting={setSorting}
+        className={{
+          containerClassName: cn({
+            'mb-20': paginatedData.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',
+        }}
+      />
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Movement ini (ID: ${selectedMovement?.id})?`}
+        text={`Apakah anda yakin ingin menghapus data Movement ini?`}
         secondaryButton={{
           text: 'Tidak',
         }}
@@ -573,7 +482,7 @@ const MovementTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-    </>
+    </div>
   );
 };
 

src/components/table/TableRowOptions.tsx

@@ -0,0 +1,62 @@
+import { Icon } from '@iconify/react';
+import Button from '../Button';
+import { cn } from '@/lib/helper';
+
+interface TableRowOptionsProps {
+  type?: 'dropdown' | 'collapse';
+  recordId: string | number;
+  basePath: string;
+  onDelete?: () => void;
+}
+
+export const TableRowOptions = ({
+  type = 'dropdown',
+  recordId,
+  basePath,
+  onDelete,
+}: TableRowOptionsProps) => (
+  <div
+    tabIndex={type === 'dropdown' ? 0 : undefined}
+    className={cn(
+      {
+        'dropdown-content': type === 'dropdown',
+        'mt-2': type === 'collapse',
+      },
+      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+    )}
+  >
+    <Button
+      href={`${basePath}/detail/?id=${recordId}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
+    >
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+    <Button
+      href={`${basePath}/detail/edit/?id=${recordId}`}
+      variant='ghost'
+      color='warning'
+      className='justify-start text-sm'
+    >
+      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+      Edit
+    </Button>
+    {onDelete && (
+      <Button
+        onClick={onDelete}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit justify-start text-sm'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+        />
+        Delete
+      </Button>
+    )}
+  </div>
+);

src/components/table/TableRowSizeSelector.tsx

@@ -0,0 +1,33 @@
+import SelectInput from '../input/SelectInput';
+
+export interface OptionType {
+  label: string;
+  value: string | number;
+}
+
+interface TableRowSizeSelectorProps {
+  value: number;
+  onChange: (val: OptionType | OptionType[] | null) => void;
+  options: OptionType[];
+}
+
+export const TableRowSizeSelector = ({
+  value,
+  onChange,
+  options,
+}: TableRowSizeSelectorProps) => {
+  return (
+    <div className='flex flex-row justify-end'>
+      <SelectInput
+        label='Baris'
+        options={options}
+        value={{
+          label: String(value),
+          value: value,
+        }}
+        onChange={onChange}
+        className={{ wrapper: 'max-w-28' }}
+      />
+    </div>
+  );
+};

src/components/table/TableToolbar.tsx

@@ -0,0 +1,37 @@
+import { Icon } from '@iconify/react';
+import Button from '../Button';
+import DebouncedTextInput from '../input/DebouncedTextInput';
+
+interface TableToolbarProps {
+  addButton?: {
+    href: string;
+    label: string;
+  };
+  search: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+  };
+}
+
+export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
+  return (
+    <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+      {addButton && (
+        <div className='flex flex-row'>
+          <Button href={addButton.href} color='primary'>
+            <Icon icon='ic:round-plus' width={24} height={24} />
+            {addButton.label}
+          </Button>
+        </div>
+      )}
+      <DebouncedTextInput
+        name='search'
+        placeholder={search.placeholder || 'Cari...'}
+        value={search.value}
+        onChange={search.onChange}
+        className={{ wrapper: 'sm:max-w-3xs' }}
+      />
+    </div>
+  );
+};