diff options
Diffstat (limited to 'src/modules/result/components/Table.tsx')
| -rw-r--r-- | src/modules/result/components/Table.tsx | 52 |
1 files changed, 35 insertions, 17 deletions
diff --git a/src/modules/result/components/Table.tsx b/src/modules/result/components/Table.tsx index a6a9f30..7478e1b 100644 --- a/src/modules/result/components/Table.tsx +++ b/src/modules/result/components/Table.tsx @@ -1,7 +1,7 @@ "use client"; import { useResultStore } from "@/common/stores/useResultStore"; import { StockOpnameRes } from "@/common/types/stockOpname"; -import { Button, Pagination, Skeleton, Spacer, Spinner } from "@nextui-org/react" +import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Pagination, Skeleton, Spacer, Spinner } from "@nextui-org/react" import { keepPreviousData, useQuery } from "@tanstack/react-query"; import styles from "./table.module.css" import clsxm from "@/common/libs/clsxm"; @@ -11,6 +11,9 @@ import getClientCredential from "@/common/libs/getClientCredential"; import { SHOWING_SELECTIONS } from "@/common/constants/result"; import { useEffect, useState } from "react"; import moment from "moment"; +import { MoreVerticalIcon } from "lucide-react"; +import toast from "@/common/libs/toast"; +import { Product } from "prisma/generated/client"; const Table = () => { const credential = getClientCredential() @@ -37,7 +40,10 @@ const Table = () => { searchParams.set('page', page.toString()); return await fetch(`/api/stock-opname?${searchParams}`) - .then(res => res.json()) + .then(res => { + window.scrollTo({ top: 0, 'behavior': 'smooth' }) + return res.json() + }) }, placeholderData: keepPreviousData }) @@ -63,21 +69,17 @@ const Table = () => { setExportLoad(false) } - let debounceTimeout: NodeJS.Timeout | null = null; - - const paginationOnChange = (page: number) => { - updateFilter('page', page) - - if (debounceTimeout) clearTimeout(debounceTimeout) - - debounceTimeout = setTimeout(() => { - window.scrollTo({ top: 0, 'behavior': 'smooth' }); - debounceTimeout = null - }, 1000); + const toggleDifferent = async (id: number) => { + const response = await fetch(`/api/product/${id}/toggle-different`, { method: 'POST' }) + const product: Product = await response.json() + toast(`Berhasil mengubah status barang ${product.itemCode} ${product.name} menjadi ${product.isDifferent ? 'selisih' : 'aman'}`, { duration: 10000 }) + stockOpnames.refetch() } const isLoading = stockOpnames.isLoading || stockOpnames.isRefetching + const COL_LENGTH = 9 + return ( <> <div className="flex"> @@ -97,6 +99,7 @@ const Table = () => { <th className={styles.th}>TIM VERIFIKASI</th> <th className={styles.th}>ON-HAND QTY</th> <th className={styles.th}>GUDANG SELISIH</th> + <th className={styles.th}></th> </thead> <tbody className={styles.tbody}> {!isLoading && stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => ( @@ -137,6 +140,22 @@ const Table = () => { <td className={styles.td}> {credential?.team == 'VERIFICATION' ? stockOpname.differenceQty : '-'} </td> + <td> + {credential?.team == 'VERIFICATION' && ( + <Dropdown> + <DropdownTrigger> + <Button variant="light" className="p-1 min-w-fit"> + <MoreVerticalIcon size={16} /> + </Button> + </DropdownTrigger> + <DropdownMenu> + <DropdownItem key="toggleDifferent" onPress={() => toggleDifferent(stockOpname.id)}> + Tandai {stockOpname.isDifferent ? 'aman' : 'selisih'} + </DropdownItem> + </DropdownMenu> + </Dropdown> + )} + </td> </tr> <DetailRow productId={stockOpname.id} /> @@ -145,13 +164,13 @@ const Table = () => { {!isLoading && stockOpnames.data?.result.length === 0 && ( <tr> - <td colSpan={8} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td> + <td colSpan={COL_LENGTH} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td> </tr> )} {isLoading && ( <tr> - <td colSpan={8}> + <td colSpan={COL_LENGTH}> <div className="flex flex-col gap-y-2.5"> {Array.from({ length: 10 }, (_, i) => ( <Skeleton className="h-16" key={i} /> @@ -165,10 +184,9 @@ const Table = () => { <Spacer y={4} /> <Pagination - isCompact page={stockOpnames.data?.page || 1} total={stockOpnames.data?.totalPage || 1} - onChange={paginationOnChange} + onChange={(page) => updateFilter('page', page)} /> </div> </> |