diff options
| -rw-r--r-- | src/app/(mobile-screen)/page.tsx | 8 | ||||
| -rw-r--r-- | src/common/styles/fonts.ts | 2 | ||||
| -rw-r--r-- | src/modules/profile-card/components/Dropdown.tsx | 5 | ||||
| -rw-r--r-- | src/modules/profile-card/index.tsx | 2 | ||||
| -rw-r--r-- | src/modules/profile-card/profile-card.module.css | 4 | ||||
| -rw-r--r-- | src/modules/result/components/Table.tsx | 32 | ||||
| -rw-r--r-- | 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", + ], }, }, }, |