From be0f537dc4fe384eef09436833c6407e6482c16d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 9 Nov 2023 15:40:16 +0700
Subject: Initial commit

---
 src/modules/result/components/Table.tsx | 106 ++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src/modules/result/components/Table.tsx

(limited to 'src/modules/result/components/Table.tsx')

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
-- 
cgit v1.2.3