diff --git a/app/explore/page.tsx b/app/explore/page.tsx new file mode 100644 index 0000000..45a9f60 --- /dev/null +++ b/app/explore/page.tsx @@ -0,0 +1,8 @@ +'use client'; +import { SearchBox } from "./searchBox"; + +export default function ExplorePage() { + return
+ +
+} \ No newline at end of file diff --git a/app/explore/searchBox.tsx b/app/explore/searchBox.tsx new file mode 100644 index 0000000..aef456e --- /dev/null +++ b/app/explore/searchBox.tsx @@ -0,0 +1,53 @@ +import { Card, Input, Select } from "react-daisyui"; + +const rowsPerPageOptions = [10, 20, 50, 100]; + +export function SearchBox() { + return +
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+ +} \ No newline at end of file diff --git a/app/fonts/GeistMonoVF.woff b/app/fonts/GeistMonoVF.woff deleted file mode 100644 index f2ae185..0000000 Binary files a/app/fonts/GeistMonoVF.woff and /dev/null differ diff --git a/app/fonts/GeistVF.woff b/app/fonts/GeistVF.woff deleted file mode 100644 index 1b62daa..0000000 Binary files a/app/fonts/GeistVF.woff and /dev/null differ diff --git a/app/header.tsx b/app/header.tsx index 36d2102..86126d1 100644 --- a/app/header.tsx +++ b/app/header.tsx @@ -1,13 +1,11 @@ -'use client'; - import Link from "next/link"; export function AppHeader() { - return
-
Bão số 3 Yagi
+ return
+
Bão số 3 Yagi
- Trang chủ - Thống kê + Trang chủ + Thống kê
} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx deleted file mode 100644 index 50360e8..0000000 --- a/app/page.tsx +++ /dev/null @@ -1,118 +0,0 @@ -"use client"; - -import "./layout.css"; - -import { useEffect, useState } from "react"; - -import { Container, Typography } from "@material-ui/core"; -import { NextUIProvider } from "@nextui-org/react"; - -import type { Row } from "./row"; - -import { RowSchemaZod } from "./row"; -import TransactionTable from "./TransactionTable"; - -const packageManagers = { - bun: "bunx", - pnpm: "pnpx", - npm: "npx", - yarn: "yarn dlx", -}; - -const toCacheKey = (index: number) => - `mttq0011001932418VCB/${index.toString().padStart(2, "0")}.csv`; - -const parseCSV = (csv: string) => { - const lines = csv.split("\n"); - const headers = lines[0].split(","); - - const data = lines.slice(1).map((line) => { - const obj = {}; - const splittedLine = line.split(","); - const lineCells = splittedLine - .slice(0, 5) - .concat(splittedLine.slice(5).join(",")); - - lineCells.forEach((value, i) => { - obj[headers[i]] = value; - }); - return obj; - }); - return data; -}; - -export default function Home() { - const [allRows, setAllRows] = useState>([]); - - // load static csv files on page load and cache to local storage - useEffect(() => { - // load all 10 csv files in /mttq0011001932418VCB from 01092024.csv to 10092024.csv - // if some of them are already cached, skip them - if (typeof window === "undefined") return; - - console.log("Start loading data set"); - - const todos = Array.from({ length: 25 }, (_, i) => i).map((i) => { - const key = toCacheKey(i); - if (localStorage.getItem(key)) { - return Promise.resolve(parseCSV(localStorage.getItem(key))); - } else { - return fetch(`/${key}`) - .then((res) => res.text()) - .then((data) => { - if (i < 5) { - localStorage.setItem(key, data); - console.log(`Fetched and cached ${key}`, data); - } - - return parseCSV(data); - }); - // .catch((err) => console.error(`Failed to fetch ${key}: `, err)); - } - }); - - if (todos.length === 0) return; - Promise.all(todos).then((res) => { - const rows = res - .reduce((acc, val) => acc.concat(val), []) - .map((row, i) => ({ - id: i, - ...row, - })); - - console.log(rows.slice(0, 20)); - setAllRows( - rows - .map((row) => RowSchemaZod.safeParse(row)) - .filter((r) => r.success) - .map((r) => r.data), - ); - console.log("All csv files loaded"); - }); - }, []); - - return ( - -
- -
- - Tra cứu thông tin sao kê từ thiện - -
- - - {/*
*/} - - - - ); -} diff --git a/app/theme-provider.tsx b/app/theme-provider.tsx new file mode 100644 index 0000000..e37b8e7 --- /dev/null +++ b/app/theme-provider.tsx @@ -0,0 +1,10 @@ +'use client'; +import { Theme, useTheme } from "react-daisyui"; + +export function ThemeProvider({ children }: Readonly<{ children: React.ReactNode }>) { + const { theme } = useTheme('nord'); + + return + {children} + +} \ No newline at end of file diff --git a/next.config.mjs b/next.config.mjs index 4678774..a75691e 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,17 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + transpilePackages: ['react-daisyui'], + reactStrictMode: true, + async redirects() { + return [ + // Basic redirect + { + source: '/', + destination: '/explore', + permanent: true, + }, + ] + } +}; export default nextConfig; diff --git a/states/search.ts b/states/search.ts new file mode 100644 index 0000000..fb97e2d --- /dev/null +++ b/states/search.ts @@ -0,0 +1,38 @@ +import { create } from 'zustand' + +type SearchState = { + search?: string + from?: Date + to?: Date + rowsPerPage: number + sortedBy?: 'amount' | 'date' + sortOrder?: 'asc' | 'desc' + amountFrom?: number + amountTo?: number +} + +type SearchAction = { + setSearch: (search: string) => void + setFrom: (from: Date) => void + setTo: (to: Date) => void + setRowsPerPage: (rowsPerPage: number) => void + setSortedBy: (sortedBy: 'amount' | 'date') => void + setSortOrder: (sortOrder: 'asc' | 'desc') => void + setAmountFrom: (amountFrom: number) => void + setAmountTo: (amountTo: number) => void +} + +export const useSearchStore = create((set) => ({ + search: '', + rowsPerPage: 10, + sortedBy: 'date', + sortOrder: 'desc', + setRowsPerPage: (rowsPerPage) => set({ rowsPerPage }), + setSearch: (search) => set({ search }), + setFrom: (from) => set({ from }), + setTo: (to) => set({ to }), + setSortedBy: (sortedBy) => set({ sortedBy }), + setSortOrder: (sortOrder) => set({ sortOrder }), + setAmountFrom: (amountFrom) => set({ amountFrom }), + setAmountTo: (amountTo) => set({ amountTo }), +})) \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 2a0c074..7dc740d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,6 +2,7 @@ import { nextui } from "@nextui-org/react"; import { fontFamily } from "tailwindcss/defaultTheme"; import type { Config } from "tailwindcss"; +import daisyui from "daisyui"; const config = { content: [