From 812e4ac0afc56ee3121a5673af35bf8be2f4432c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 24 Nov 2023 14:43:48 +0700
Subject: Update

---
 src/app/(mobile-screen)/page.tsx                 |  8 +++---
 src/common/styles/fonts.ts                       |  2 +-
 src/modules/profile-card/components/Dropdown.tsx |  5 +---
 src/modules/profile-card/index.tsx               |  2 +-
 src/modules/profile-card/profile-card.module.css |  4 +++
 src/modules/result/components/Table.tsx          | 32 ++++++++++++++++++------
 tailwind.config.ts                               |  5 +++-
 7 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/app/(mobile-screen)/page.tsx b/src/app/(mobile-screen)/page.tsx
index 08b9dc9..4dca647 100644
--- a/src/app/(mobile-screen)/page.tsx
+++ b/src/app/(mobile-screen)/page.tsx
@@ -6,10 +6,12 @@ import { Spacer } from "@nextui-org/react";
 export default function HomePage() {
   return (
     <Authenticated>
-      <main className="px-4 pt-10">
-        <StockOpname />
-        <Spacer y={6} />
+      <main>
         <ProfileCard />
+        <Spacer y={5} />
+        <div className="px-4">
+          <StockOpname />
+        </div>
       </main>
     </Authenticated>
   )
diff --git a/src/common/styles/fonts.ts b/src/common/styles/fonts.ts
index bf78bf7..a88a7d3 100644
--- a/src/common/styles/fonts.ts
+++ b/src/common/styles/fonts.ts
@@ -2,7 +2,7 @@ import { Inter } from "next/font/google";
 
 export const inter = Inter({
   subsets: ["latin"],
-  display: "fallback",
+  preload: true,
   weight: ["400", "500", "600", "700"],
   variable: "--font-inter",
 });
diff --git a/src/modules/profile-card/components/Dropdown.tsx b/src/modules/profile-card/components/Dropdown.tsx
index f6f58c9..6e86c59 100644
--- a/src/modules/profile-card/components/Dropdown.tsx
+++ b/src/modules/profile-card/components/Dropdown.tsx
@@ -2,14 +2,11 @@
 import { DropdownItem, DropdownMenu, DropdownTrigger, Dropdown as UIDropdown } from "@nextui-org/react"
 import { MoreVerticalIcon } from "lucide-react"
 import { deleteCookie } from "cookies-next"
-import { useRouter } from "next/navigation";
 
 const Dropdown = () => {
-  const router = useRouter()
-
   const logout = () => {
     deleteCookie('credential')
-    router.push('/login')
+    window.location.href = '/login'
   }
 
   return (
diff --git a/src/modules/profile-card/index.tsx b/src/modules/profile-card/index.tsx
index 881561d..f353f16 100644
--- a/src/modules/profile-card/index.tsx
+++ b/src/modules/profile-card/index.tsx
@@ -8,7 +8,7 @@ const ProfileCard = () => {
   const credential = getServerCredential()
 
   return credential && (
-    <Card shadow='sm'>
+    <Card shadow='none' radius='none' className={styles.card}>
       <CardBody className={styles.cardBody}>
         <Avatar icon={<AvatarIcon />} size='sm' isBordered color='primary' classNames={{ icon: 'text-white' }} />
         <div>
diff --git a/src/modules/profile-card/profile-card.module.css b/src/modules/profile-card/profile-card.module.css
index b0b05ef..b7d00fe 100644
--- a/src/modules/profile-card/profile-card.module.css
+++ b/src/modules/profile-card/profile-card.module.css
@@ -1,3 +1,7 @@
+.card {
+  @apply border-b border-neutral-300;
+}
+
 .cardBody {
   @apply flex flex-row items-center gap-x-4;
 }
diff --git a/src/modules/result/components/Table.tsx b/src/modules/result/components/Table.tsx
index a184ad7..a6a9f30 100644
--- a/src/modules/result/components/Table.tsx
+++ b/src/modules/result/components/Table.tsx
@@ -2,7 +2,7 @@
 import { useResultStore } from "@/common/stores/useResultStore";
 import { StockOpnameRes } from "@/common/types/stockOpname";
 import { Button, Pagination, Skeleton, Spacer, Spinner } from "@nextui-org/react"
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import styles from "./table.module.css"
 import clsxm from "@/common/libs/clsxm";
 import DetailRow from "./DetailRow";
@@ -39,6 +39,7 @@ const Table = () => {
       return await fetch(`/api/stock-opname?${searchParams}`)
         .then(res => res.json())
     },
+    placeholderData: keepPreviousData
   })
 
   const { filter } = useResultStore()
@@ -62,6 +63,21 @@ 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 isLoading = stockOpnames.isLoading || stockOpnames.isRefetching
+
   return (
     <>
       <div className="flex">
@@ -83,7 +99,7 @@ const Table = () => {
             <th className={styles.th}>GUDANG SELISIH</th>
           </thead>
           <tbody className={styles.tbody}>
-            {stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => (
+            {!isLoading && stockOpnames.data?.result.map((stockOpname: StockOpnameRes['result']) => (
               <>
                 <tr key={stockOpname.id} className={clsxm("border-t border-neutral-200", {
                   "text-danger-600": stockOpname.isDifferent,
@@ -127,18 +143,18 @@ const Table = () => {
               </>
             ))}
 
-            {stockOpnames.data?.result.length === 0 && (
+            {!isLoading && stockOpnames.data?.result.length === 0 && (
               <tr>
                 <td colSpan={8} className="text-center text-neutral-600 py-4">Belum ada data untuk ditampilkan</td>
               </tr>
             )}
 
-            {stockOpnames.isLoading && (
+            {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 className="flex flex-col gap-y-2.5">
+                    {Array.from({ length: 10 }, (_, i) => (
+                      <Skeleton className="h-16" key={i} />
                     ))}
                   </div>
                 </td>
@@ -152,7 +168,7 @@ const Table = () => {
           isCompact
           page={stockOpnames.data?.page || 1}
           total={stockOpnames.data?.totalPage || 1}
-          onChange={(page) => updateFilter('page', page)}
+          onChange={paginationOnChange}
         />
       </div>
     </>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 335d55f..806c6a0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,7 +11,10 @@ const config: Config = {
     container: { center: true },
     extend: {
       fontFamily: {
-        primary: ["var(--font-inter)"],
+        primary: [
+          "var(--font-inter)",
+          "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
+        ],
       },
     },
   },
-- 
cgit v1.2.3