From ae3207e9778c3f2fb01d64714ff15fc073ec093d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 1 Dec 2023 10:16:12 +0700
Subject: Update compute different, result, and product list feature

---
 src/modules/result/components/Table.tsx | 52 ++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 17 deletions(-)

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

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