refactor(FE-Storyless): add product and warehouse filters with select inputs

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

@@ -1,24 +1,56 @@
 'use client';
 
-import { useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import useSWR from 'swr';
-import { SortingState } from '@tanstack/react-table';
+import { SortingState, CellContext, ColumnDef } from '@tanstack/react-table';
 
 import Table from '@/components/Table';
-import { useModal } from '@/components/Modal';
+import { Icon } from '@iconify/react';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { Movement } from '@/types/api/inventory/movement';
 import { MovementApi } from '@/services/api/inventory';
 import { cn } from '@/lib/helper';
+import { Product } from '@/types/api/master-data/product';
+import { Warehouse } from '@/types/api/master-data/warehouse';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { TableToolbar } from '@/components/table/TableToolbar';
+import { OptionType, useSelect } from '@/components/input/SelectInput';
-import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
+import Button from '@/components/Button';
-import { OptionType } from '@/components/input/SelectInput';
+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 { TableRowOptions } from '@/components/table/TableRowOptions';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Movement, unknown>;
+}) => {
+  return (
+    <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>
+    </div>
+  );
+};
 
 const MovementTable = () => {
   const {
@@ -28,30 +60,47 @@ const MovementTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '' },
+    initial: {
-    paramMap: { page: 'page', pageSize: 'limit' },
+      search: '',
+      product: '',
+      warehouse: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      product: 'product_id',
+      warehouse: 'warehouse_id',
+    },
   });
 
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedMovement, setSelectedMovement] = useState<
-    Movement | undefined
-  >(undefined);
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const deleteModal = useModal();
 
   const {
-    data: movements,
+    setInputValue: setProductInputValue,
-    isLoading,
+    options: productOptions,
-    mutate: refreshMovements,
+    isLoadingOptions: isLoadingProductOptions,
-  } = useSWR(
+  } = useSelect<Product>('/products', 'id', 'name');
+
+  const {
+    setInputValue: setWarehouseInputValue,
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouseOptions,
+  } = useSelect<Warehouse>('/warehouses', 'id', 'name');
+
+  const [selectedProduct, setSelectedProduct] = useState<OptionType | null>(
+    null
+  );
+  const [selectedWarehouse, setSelectedWarehouse] = useState<OptionType | null>(
+    null
+  );
+
+  const { data: movements, isLoading } = useSWR(
     `${MovementApi.basePath}${getTableFilterQueryString()}`,
     MovementApi.getAllFetcher
   );
 
-  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
-    setPage(1);
   };
 
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -60,41 +109,17 @@ const MovementTable = () => {
     setPage(1);
   };
 
-  const confirmationModalDeleteClickHandler = async () => {
+  const productChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setIsDeleteLoading(true);
+    setSelectedProduct(val as OptionType);
-    try {
+    updateFilter('product', val ? ((val as OptionType).value as string) : '');
-      await MovementApi.delete(selectedMovement?.id as number);
-      refreshMovements();
-      deleteModal.closeModal();
-    } finally {
-      setIsDeleteLoading(false);
-    }
   };
 
-  return (
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
-    <div className='flex flex-col gap-4'>
+    setSelectedWarehouse(val as OptionType);
-      <div className='flex flex-col gap-2 mb-4'>
+    updateFilter('warehouse', val ? ((val as OptionType).value as string) : '');
-        <TableToolbar
+  };
-          addButton={{
-            href: '/inventory/movement/add',
-            label: 'Tambah Movement',
-          }}
-          search={{
-            value: tableFilterState.search,
-            onChange: searchChangeHandler,
-            placeholder: 'Cari Movement',
-          }}
-        />
-        <TableRowSizeSelector
-          value={tableFilterState.pageSize}
-          onChange={pageSizeChangeHandler}
-          options={ROWS_OPTIONS}
-        />
-      </div>
 
-      <Table<Movement>
+  const movementColumns: ColumnDef<Movement>[] = [
-        data={isResponseSuccess(movements) ? movements?.data : []}
-        columns={[
     {
       header: '#',
       cell: (props) =>
@@ -118,9 +143,7 @@ const MovementTable = () => {
       accessorKey: 'transfer_date',
       header: 'Tanggal',
       cell: (props) =>
-              new Date(props.row.original.transfer_date).toLocaleDateString(
+        new Date(props.row.original.transfer_date).toLocaleDateString('id-ID'),
-                'id-ID'
-              ),
     },
     {
       accessorFn: (row) => {
@@ -135,52 +158,103 @@ const MovementTable = () => {
     {
       header: 'Aksi',
       cell: (props) => {
-              const currentPageSize =
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
-                props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
-              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}>
-                      <TableRowOptions
+                <RowOptionsMenu type='dropdown' props={props} />
-                        type='dropdown'
-                        recordId={props.row.original.id}
-                        basePath='/inventory/movement'
-                        queryParam='movementId'
-                        showEdit={false}
-                        showDelete={false}
-                      />
               </RowDropdownOptions>
             )}
 
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
-                      <TableRowOptions
+                <RowOptionsMenu type='dropdown' props={props} />
-                        type='collapse'
-                        recordId={props.row.original.id}
-                        basePath='/inventory/movement'
-                        queryParam='movementId'
-                        showEdit={false}
-                        showDelete={false}
-                      />
               </RowCollapseOptions>
             )}
           </>
         );
       },
     },
-        ]}
+  ];
+
+  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 xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+              <Button
+                href='/inventory/movement/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Movement
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Movement'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 justify-end gap-4'>
+            <SelectInput
+              label='Produk'
+              options={productOptions}
+              isLoading={isLoadingProductOptions}
+              value={selectedProduct}
+              onChange={productChangeHandler}
+              onInputChange={setProductInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-4',
+              }}
+            />
+
+            <SelectInput
+              label='Gudang'
+              options={warehouseOptions}
+              isLoading={isLoadingWarehouseOptions}
+              value={selectedWarehouse}
+              onChange={warehouseChangeHandler}
+              onInputChange={setWarehouseInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-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>
+
+        <Table<Movement>
+          data={isResponseSuccess(movements) ? movements?.data : []}
+          columns={movementColumns}
           pageSize={tableFilterState.pageSize}
           page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
           totalItems={
@@ -205,22 +279,8 @@ const MovementTable = () => {
               '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?`}
-        secondaryButton={{
-          text: 'Tidak',
-        }}
-        primaryButton={{
-          text: 'Ya',
-          color: 'error',
-          isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
-        }}
-      />
       </div>
+    </>
   );
 };