[HH] リニューアル

apps/web/package.json

@@ -48,6 +48,7 @@
     "@urql/exchange-refocus": "^1.1.0",
     "@urql/next": "^1.1.1",
     "@v3/graphql": "workspace:^",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.10",
     "embla-carousel-react": "8.0.0-rc18",
     "encoding-japanese": "^2.1.0",
@@ -56,6 +57,7 @@
     "graphql": "^16.8.1",
     "immer": "^10.0.4",
     "js-cookie": "^3.0.5",
+    "mantine-datatable": "^7.11.1",
     "next": "^14.1.4",
     "next-intercept-stdout": "^1.0.1",
     "react": "18.2.0",

apps/web/src/app/_layout/NavbarSection.tsx

@@ -1,13 +1,9 @@
-/*
- * Copyright (c) 2024 Ryo-Kgym.
- */
-
 "use client";
 
+import Link from "next/link";
 import { Navi } from "@app/_layout/navi";
 import { AppShell, Burger, Group, ScrollArea } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import Link from "next/link";
 
 export const NavbarSection = ({
   header,
@@ -18,25 +14,25 @@ export const NavbarSection = ({
   naviArray: Navi[];
   children: React.ReactNode;
 }) => {
-  const [opened, { toggle }] = useDisclosure();
+  const [opened, { toggle }] = useDisclosure(true);
 
   return (
     <AppShell
       header={{ height: 60 }}
       navbar={{
-        width: 150,
+        width: 200,
         breakpoint: "sm",
         collapsed: { desktop: !opened, mobile: !opened },
       }}
     >
-      <AppShell.Header className={"bg-blue-500"}>
+      <AppShell.Header bg={"blue"}>
         <Group h="100%" px="md">
           <div className={"text-2xl font-bold text-white"}>{header}</div>
           <Burger opened={opened} onClick={toggle} size="sm" />
         </Group>
       </AppShell.Header>
 
-      <AppShell.Navbar className={"bg-yellow-300"}>
+      <AppShell.Navbar bg={"rgba(255,173,27,0.5)"}>
         <AppShell.Section component={ScrollArea}>
           {naviArray
             .filter(({ visible = true }) => visible)

apps/web/src/app/household/_layout/HouseholdLayout.tsx

@@ -1,6 +1,4 @@
-/*
- * Copyright (c) 2024 Ryo-Kgym.
- */
+"use client";
 
 import { NavbarSection } from "@app/_layout/NavbarSection";
 import { Navi } from "@app/_layout/navi";

apps/web/src/app/household/account/page.tsx

@@ -1,9 +1,21 @@
-/*
- * Copyright (c) 2023 Ryo-Kgym.
- */
+import { AccountListServer } from "@pageComponents/household/account/components/AccountListServer";
 
-import { AccountContainer } from "./_material/AccountContainer";
-
-const Page = () => <AccountContainer />;
+const Page = ({
+  searchParams,
+}: {
+  searchParams: {
+    fromDate: string | undefined;
+    toDate: string | undefined;
+    accountId: string | undefined;
+  };
+}) => (
+  <AccountListServer
+    fromDate={
+      searchParams.fromDate ? new Date(searchParams.fromDate) : undefined
+    }
+    toDate={searchParams.toDate ? new Date(searchParams.toDate) : undefined}
+    accountId={searchParams.accountId}
+  />
+);
 
 export default Page;

apps/web/src/app/layout.tsx

@@ -4,7 +4,9 @@
 
 import "@styles/globals.css";
 import "@mantine/core/styles.css";
+import "@mantine/core/styles.layer.css";
 import "@mantine/dates/styles.css";
+import "mantine-datatable/styles.layer.css";
 
 import { Metadata } from "next";
 import { ClerkProvider } from "@clerk/nextjs";

apps/web/src/components/atoms/Table/TablePresenter.tsx

@@ -2,10 +2,9 @@
  * Copyright (c) 2024 Ryo-Kgym.
  */
 
-import { ActionIcon, Button, ScrollArea, Table } from "@mantine/core";
-import { IconArrowBarToDown } from "@tabler/icons-react";
-
 import type { RefObject } from "react";
+import { ActionIcon, ScrollArea, Table } from "@mantine/core";
+import { IconArrowBarToDown } from "@tabler/icons-react";
 
 type TablePresenterProps = {
   headerTr: React.ReactNode;
@@ -69,19 +68,15 @@ const JumpToBottom = ({
   scrollToBottom,
 }: {
   scrollToBottom: (() => void) | undefined;
-}) =>
-  scrollToBottom ? (
-    <Button
-      className={
-        "max-sm:button-1 absolute bottom-10 right-10 z-10 border-0 max-sm:right-3"
-      }
-      onClick={scrollToBottom}
-      unstyled={true}
-    >
-      <ActionIcon variant="default" size={"3em"}>
-        <IconArrowBarToDown size="3em" className={"text-slate-400"} />
-      </ActionIcon>
-    </Button>
-  ) : (
-    <></>
-  );
+}) => (
+  <button
+    className={
+      "max-sm:button-1 absolute bottom-10 right-10 z-10 border-0 max-sm:right-3"
+    }
+    onClick={scrollToBottom}
+  >
+    <ActionIcon variant="default" size={"3em"}>
+      <IconArrowBarToDown size="3em" className={"text-slate-400"} />
+    </ActionIcon>
+  </button>
+);

apps/web/src/components/organisms/daily_table/DailyTable.tsx

@@ -2,11 +2,10 @@
  * Copyright (c) 2024 Ryo-Kgym.
  */
 
+import type { TableProps } from "@components/atoms/Table";
 import { Table } from "@components/atoms/Table";
 import { IocomeTotal } from "@components/molecules/Total";
 
-import type { TableProps } from "@components/atoms/Table";
-
 export const DailyTable = ({
   tablePropsList,
   incomeTotal,
@@ -17,43 +16,13 @@ export const DailyTable = ({
   outcomeTotal: number | undefined;
 }) => (
   <>
-    <div className={"max-sm:hidden"}>
-      <Table
-        header={["日付", "カテゴリ", "アカウント", "金額", "メモ"]}
-        tablePropsList={tablePropsList}
-        size={"xs"}
-        height={"75vh"}
-        toBottom
-      />
-    </div>
-    <div className={"sm:hidden"}>
-      <Table
-        header={[]}
-        tablePropsList={tablePropsList.map((t) => {
-          return {
-            keyPrefix: t.keyPrefix,
-            columns: [
-              {
-                value: (
-                  <div className={"grid grid-cols-2"}>
-                    <div>{t.columns[0]!.value}</div>
-                    <div>{t.columns[1]!.value}</div>
-                    <div>{t.columns[2]!.value}</div>
-                    <div className={"text-end"}>{t.columns[3]!.value}</div>
-                  </div>
-                ),
-                align: "left",
-                hidden: false,
-              },
-            ],
-            onClick: t.onClick,
-          };
-        })}
-        size={"xs"}
-        height={"63vh"}
-        toBottom
-      />
-    </div>
+    <Table
+      header={["日付", "カテゴリ", "アカウント", "金額", "メモ"]}
+      tablePropsList={tablePropsList}
+      size={"xs"}
+      height={"85vh"}
+      toBottom
+    />
     <IocomeTotal income={incomeTotal} outcome={outcomeTotal} />
   </>
 );