From 07819844d5ef7e323fd956eacfedecb2f4f4bb80 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Nov 2023 15:16:23 +0700
Subject: Update result feature

---
 src/modules/result/components/Table.tsx | 83 +++++++++++++++++++++++++++------
 1 file changed, 70 insertions(+), 13 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 d2e5af4..021dfef 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 { Badge, Pagination, Spacer } from "@nextui-org/react"
+import { Button, Pagination, Skeleton, Spacer, Spinner } from "@nextui-org/react"
 import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/navigation";
@@ -9,31 +9,68 @@ import styles from "./table.module.css"
 import clsxm from "@/common/libs/clsxm";
 import DetailRow from "./DetailRow";
 import { useDebounce } from "usehooks-ts";
+import getClientCredential from "@/common/libs/getClientCredential";
+import { SHOWING_SELECTIONS } from "@/common/constants/result";
+import Link from "next/link";
+import { useState } from "react";
 
 const Table = () => {
+  const credential = getClientCredential()
+
   const params = useSearchParams()
   const router = useRouter()
   const page = params.get('page') ?? '1'
 
-  const { filter: { company, search } } = useResultStore()
+  const { filter: { company, search, show } } = useResultStore()
   const debouncedSearch = useDebounce(search, 500)
 
   const stockOpnames = useQuery({
-    queryKey: ['stockOpnames', company, debouncedSearch, page],
+    queryKey: ['stockOpnames', company, debouncedSearch, page, show],
     queryFn: async () => {
       const searchParams = new URLSearchParams()
       if (!company) return null
       searchParams.set('companyId', company)
-      searchParams.set('page', page);
+
+      const showValue = SHOWING_SELECTIONS.find((item) => item.key === show)?.value || ''
+      searchParams.set('show', showValue);
+
       if (debouncedSearch) searchParams.set('search', debouncedSearch)
 
+      searchParams.set('page', page);
+
       return await fetch(`/api/stock-opname?${searchParams}`)
         .then(res => res.json())
     },
   })
 
+  const { filter } = useResultStore()
+
+  const [exportLoad, setExportLoad] = useState<boolean>(false)
+
+  const exportResult = async () => {
+    setExportLoad(true)
+    const response = await fetch(`/api/stock-opname/export?companyId=${filter.company}`)
+    const buffer = await response.arrayBuffer()
+
+    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'export.xlsx'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    setExportLoad(false)
+  }
+
   return (
     <>
+      <div className="flex">
+        <Button type="button" onPress={exportResult} disabled={exportLoad} variant="flat" className="ml-auto mb-4">
+          {exportLoad ? <><Spinner size="sm" />Exporting...</> : 'Export'}
+        </Button>
+      </div>
+
       <div className="w-full overflow-auto pb-4">
         <table className="w-full">
           <thead className={styles.thead}>
@@ -41,6 +78,7 @@ const Table = () => {
             <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 HITUNG 3</th>
             <th className={styles.th}>TIM VERIFIKASI</th>
             <th className={styles.th}>ON-HAND QTY</th>
             <th className={styles.th}>GUDANG SELISIH</th>
@@ -48,13 +86,17 @@ const Table = () => {
           <tbody className={styles.tbody}>
             {stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => (
               <>
-                <tr key={stockOpname.id} className="border-t border-neutral-200">
+                <tr key={stockOpname.id} className={clsxm("border-t border-neutral-200", {
+                  "text-danger-600": stockOpname.isDifferent,
+                  "text-success-600": !stockOpname.isDifferent
+                })}
+                >
                   <td className={styles.td}>
-                    <div className={clsxm("w-full rounded-lg mr-1 mt-1.5 p-1 text-xs text-white whitespace-nowrap", {
+                    <div className={clsxm("w-full rounded-lg mr-1 p-1 text-xs text-white whitespace-nowrap", {
                       "bg-danger-600": stockOpname.isDifferent,
                       "bg-success-600": !stockOpname.isDifferent,
                     })}>
-                      {stockOpname.isDifferent ? 'Tidak Sesuai' : 'Sesuai'}
+                      {stockOpname.isDifferent ? 'Selisih' : 'Aman'}
                     </div>
                   </td>
                   <td className={clsxm(styles.td, '!text-left flex min-w-[250px]')}>
@@ -63,19 +105,22 @@ const Table = () => {
                     {stockOpname.barcode ? ` [${stockOpname.barcode}]` : ''}
                   </td>
                   <td className={styles.td}>
-                    {stockOpname.quantity.COUNT1 || '-'}
+                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.COUNT1 === 'number' ? stockOpname.quantity.COUNT1 : '-'}
+                  </td>
+                  <td className={styles.td}>
+                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.COUNT2 === 'number' ? stockOpname.quantity.COUNT2 : '-'}
                   </td>
                   <td className={styles.td}>
-                    {stockOpname.quantity.COUNT2 || '-'}
+                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.COUNT3 === 'number' ? stockOpname.quantity.COUNT3 : '-'}
                   </td>
                   <td className={styles.td}>
-                    {stockOpname.quantity.VERIFICATION || '-'}
+                    {credential?.team == 'VERIFICATION' && typeof stockOpname.quantity.VERIFICATION === 'number' ? stockOpname.quantity.VERIFICATION : '-'}
                   </td>
                   <td className={styles.td}>
-                    {stockOpname.onhandQty}
+                    {credential?.team == 'VERIFICATION' ? stockOpname.onhandQty : '-'}
                   </td>
                   <td className={styles.td}>
-                    {stockOpname.differenceQty}
+                    {credential?.team == 'VERIFICATION' ? stockOpname.differenceQty : '-'}
                   </td>
                 </tr>
 
@@ -85,7 +130,19 @@ const Table = () => {
 
             {stockOpnames.data?.result.length === 0 && (
               <tr>
-                <td colSpan={7} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td>
+                <td colSpan={8} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td>
+              </tr>
+            )}
+
+            {stockOpnames.isLoading && (
+              <tr>
+                <td colSpan={8}>
+                  <div className="flex flex-col gap-y-2">
+                    {Array.from({ length: 6 }, (_, i) => (
+                      <Skeleton className="h-8" key={i} />
+                    ))}
+                  </div>
+                </td>
               </tr>
             )}
           </tbody>
-- 
cgit v1.2.3