feat(FE-40): create NonstocksTable component

2026-05-20 21:41:57 +00:00 · 2025-10-02 12:01:14 +07:00
parent e6acfc1214
commit 35c809193b
1 changed files with 243 additions and 0 deletions
@@ -0,0 +1,243 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import TextInput from '@/components/input/TextInput';
+import Button from '@/components/Button';
+import Collapse from '@/components/Collapse';
+
+import { httpClientFetcher } from '@/services/http/client';
+import { Nonstock, NonstocksResponse } from '@/types/api/master-data/nonstock';
+import { cn } from '@/lib/helper';
+import { deleteNonstock } from '@/services/api/master-data/nonstock';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Nonstock, unknown>;
+  deleteClickHandler: () => Promise<void>;
+}) => {
+  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={`/master-data/nonstock/detail/?nonstockId=${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={`/master-data/nonstock/detail/edit/?nonstockId=${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 RowDropdownOptions = ({
+  props,
+  isLast2Rows,
+  deleteClickHandler,
+}: {
+  props: CellContext<Nonstock, unknown>;
+  isLast2Rows: boolean;
+  deleteClickHandler: () => Promise<void>;
+}) => {
+  return (
+    <div
+      className={cn('dropdown dropdown-left', {
+        'dropdown-start': !isLast2Rows,
+        'dropdown-end': isLast2Rows,
+      })}
+    >
+      <Button tabIndex={0}>
+        <Icon icon='material-symbols:more-vert' width={16} height={16} />
+      </Button>
+
+      <RowOptionsMenu
+        type='dropdown'
+        props={props}
+        deleteClickHandler={deleteClickHandler}
+      />
+    </div>
+  );
+};
+
+const RowCollapseOptions = ({
+  props,
+  deleteClickHandler,
+}: {
+  props: CellContext<Nonstock, unknown>;
+  deleteClickHandler: () => Promise<void>;
+}) => {
+  return (
+    <Collapse
+      title={
+        <Button>
+          <Icon icon='material-symbols:more-vert' width={16} height={16} />
+        </Button>
+      }
+      className='w-fit'
+      titleClassName='p-0! justify-self-end'
+    >
+      <RowOptionsMenu
+        type='collapse'
+        props={props}
+        deleteClickHandler={deleteClickHandler}
+      />
+    </Collapse>
+  );
+};
+
+const NonstocksTable = () => {
+  const {
+    data: nonstocks,
+    isLoading,
+    mutate: refreshNonstocks,
+  } = useSWR<NonstocksResponse>('/master-data/nonstocks', httpClientFetcher);
+
+  const [searchValue, setSearchValue] = useState('');
+
+  const nonstocksColumns: ColumnDef<Nonstock>[] = [
+    {
+      header: '#',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      header: 'Nama',
+      accessorKey: 'name',
+    },
+    {
+      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 = async () => {
+          const confirmation = confirm(
+            'Apakah anda yakin untuk menghapus non stock ini?'
+          );
+
+          if (confirmation) {
+            await deleteNonstock(props.row.original.id);
+            refreshNonstocks();
+            alert('Nonstock berhasil dihapus!');
+          }
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions
+                props={props}
+                isLast2Rows={isLast2Rows}
+                deleteClickHandler={deleteClickHandler}
+              />
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions
+                props={props}
+                deleteClickHandler={deleteClickHandler}
+              />
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
+  };
+
+  return (
+    <div className='w-full p-4'>
+      <div className='w-full mb-4 flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+        <div className='flex flex-row'>
+          <Button href='/master-data/nonstock/add' color='primary'>
+            <Icon icon='ic:round-plus' width={24} height={24} />
+            Tambah Nonstock
+          </Button>
+        </div>
+
+        <TextInput
+          name='search'
+          placeholder='Cari Non Stock'
+          value={searchValue}
+          onChange={searchChangeHandler}
+          className={{ wrapper: 'sm:max-w-3xs' }}
+        />
+      </div>
+
+      <Table<Nonstock>
+        data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
+        columns={nonstocksColumns}
+        pageSize={10}
+        fuzzySearchValue={searchValue}
+        onFuzzySearchValueChange={setSearchValue}
+        isLoading={isLoading}
+        className={{
+          containerClassName: cn({
+            'mb-20':
+              isResponseSuccess(nonstocks) && nonstocks?.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',
+        }}
+      />
+    </div>
+  );
+};
+
+export default NonstocksTable;