diff options
Diffstat (limited to 'src/modules/result/components/Table.tsx')
| -rw-r--r-- | src/modules/result/components/Table.tsx | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/src/modules/result/components/Table.tsx b/src/modules/result/components/Table.tsx new file mode 100644 index 0000000..d2e5af4 --- /dev/null +++ b/src/modules/result/components/Table.tsx @@ -0,0 +1,106 @@ +"use client"; +import { useResultStore } from "@/common/stores/useResultStore"; +import { StockOpnameRes } from "@/common/types/stockOpname"; +import { Badge, Pagination, Spacer } from "@nextui-org/react" +import { useQuery } from "@tanstack/react-query"; +import { useSearchParams } from "next/navigation"; +import { useRouter } from "next/navigation"; +import styles from "./table.module.css" +import clsxm from "@/common/libs/clsxm"; +import DetailRow from "./DetailRow"; +import { useDebounce } from "usehooks-ts"; + +const Table = () => { + const params = useSearchParams() + const router = useRouter() + const page = params.get('page') ?? '1' + + const { filter: { company, search } } = useResultStore() + const debouncedSearch = useDebounce(search, 500) + + const stockOpnames = useQuery({ + queryKey: ['stockOpnames', company, debouncedSearch, page], + queryFn: async () => { + const searchParams = new URLSearchParams() + if (!company) return null + searchParams.set('companyId', company) + searchParams.set('page', page); + if (debouncedSearch) searchParams.set('search', debouncedSearch) + + return await fetch(`/api/stock-opname?${searchParams}`) + .then(res => res.json()) + }, + }) + + return ( + <> + <div className="w-full overflow-auto pb-4"> + <table className="w-full"> + <thead className={styles.thead}> + <th className={styles.th}>STATUS</th> + <th className={clsxm(styles.th, '!text-left')}>NAMA PRODUK</th> + <th className={styles.th}>TIM HITUNG 1</th> + <th className={styles.th}>TIM HITUNG 2</th> + <th className={styles.th}>TIM VERIFIKASI</th> + <th className={styles.th}>ON-HAND QTY</th> + <th className={styles.th}>GUDANG SELISIH</th> + </thead> + <tbody className={styles.tbody}> + {stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => ( + <> + <tr key={stockOpname.id} className="border-t border-neutral-200"> + <td className={styles.td}> + <div className={clsxm("w-full rounded-lg mr-1 mt-1.5 p-1 text-xs text-white whitespace-nowrap", { + "bg-danger-600": stockOpname.isDifferent, + "bg-success-600": !stockOpname.isDifferent, + })}> + {stockOpname.isDifferent ? 'Tidak Sesuai' : 'Sesuai'} + </div> + </td> + <td className={clsxm(styles.td, '!text-left flex min-w-[250px]')}> + {stockOpname.itemCode ? `[${stockOpname.itemCode}] ` : ''} + {stockOpname.name} + {stockOpname.barcode ? ` [${stockOpname.barcode}]` : ''} + </td> + <td className={styles.td}> + {stockOpname.quantity.COUNT1 || '-'} + </td> + <td className={styles.td}> + {stockOpname.quantity.COUNT2 || '-'} + </td> + <td className={styles.td}> + {stockOpname.quantity.VERIFICATION || '-'} + </td> + <td className={styles.td}> + {stockOpname.onhandQty} + </td> + <td className={styles.td}> + {stockOpname.differenceQty} + </td> + </tr> + + <DetailRow productId={stockOpname.id} /> + </> + ))} + + {stockOpnames.data?.result.length === 0 && ( + <tr> + <td colSpan={7} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td> + </tr> + )} + </tbody> + </table> + + <Spacer y={4} /> + <Pagination + isCompact + page={stockOpnames.data?.page || 1} + total={stockOpnames.data?.totalPage || 1} + onChange={(page) => router.push(`?page=${page}`)} + /> + </div> + </> + ) +} + +export default Table
\ No newline at end of file |