1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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
|
