One-for-All-174 I enabled to fetch the account data on the server side.

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";
 
-const Page = () => <AccountListServer />;
+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/features/household/accountList/components/AccountContainer.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { AccountTableRow } from "@features/household/accountList/components/type";
 
+import { Account } from "../../../../../../../packages/domain/household/account";
 import { AccountPresenter } from "./AccountPresenter";
 
 const FIRST_DATE = new Date("2019-01-01");
@@ -12,7 +12,7 @@ export const AccountContainer = ({
   accountRecords,
   total = 0,
 }: {
-  accountRecords: AccountTableRow[];
+  accountRecords: Account[];
   total: number | undefined;
 }) => {
   const [fromDate, setFromDate] = useState<Date | null>(FIRST_DATE);

apps/web/src/features/household/accountList/components/AccountPresenter.tsx

@@ -6,7 +6,7 @@ import { Total } from "@components/molecules/Total";
 import { RangeDatePicker } from "@components/ui/date";
 import { DataTable } from "@components/ui/v4/table";
 
-import { AccountTableRow } from "./type";
+import { Account } from "../../../../../../../packages/domain/household/account";
 
 export const AccountPresenter = ({
   fromDate,
@@ -22,8 +22,8 @@ export const AccountPresenter = ({
   toDate: Date | null;
   changeToDate: (_: Date | null) => void;
   total: number | undefined;
-  records: AccountTableRow[];
-  onRowClick: (record: AccountTableRow) => void;
+  records: Account[];
+  onRowClick: (record: Account) => void;
 }) => (
   <div>
     <RangeDatePicker

apps/web/src/pageComponents/household/account/components/AccountListClient.tsx

@@ -3,30 +3,25 @@
 import { ResponsiveSwitcher } from "@app/household/_layout/ResponsiveSwitcher";
 import { DailyTableByAccount } from "@components/organisms/daily_table/account";
 import { AccountContainer } from "@features/household/accountList/components/AccountContainer";
-import { AccountTableRow } from "@features/household/accountList/components/type";
-import { useGetAccountBalanceList } from "@hooks/household/account/useGetAccountBalanceList";
+
+import { Account } from "../../../../../../../packages/domain/household/account";
 
 export const AccountListClient = ({
+  accountRecords,
+  total,
   fromDate,
   toDate,
   accountId,
 }: {
+  accountRecords: Account[];
+  total: number | undefined;
   fromDate: Date;
   toDate: Date;
   accountId: string | undefined;
 }) => {
-  const { data, total } = useGetAccountBalanceList(fromDate, toDate);
-
-  const records: AccountTableRow[] =
-    data?.account.map((a) => ({
-      id: a.id,
-      accountName: a.accountName,
-      balance: a.allDetailViewsAggregate.aggregate?.sum?.signedAmount,
-    })) ?? [];
-
   return (
     <ResponsiveSwitcher
-      first={<AccountContainer accountRecords={records} total={total} />}
+      first={<AccountContainer accountRecords={accountRecords} total={total} />}
       second={
         <DailyTableByAccount
           fromDate={fromDate}

apps/web/src/pageComponents/household/account/components/AccountListServer.tsx

@@ -1,11 +1,27 @@
-import { AccountListClient } from "@pageComponents/household/account/components/AccountListClient";
+import { fetchBalanceList } from "../server/fetchBalanceList";
+import { AccountListClient } from "./AccountListClient";
+
+export const AccountListServer = async ({
+  fromDate = new Date("2019-01-01"),
+  toDate = new Date(),
+  accountId,
+}: {
+  fromDate: Date | undefined;
+  toDate: Date | undefined;
+  accountId: string | undefined;
+}) => {
+  const { records, total } = await fetchBalanceList({
+    fromDate,
+    toDate,
+  });
 
-export const AccountListServer = () => {
   return (
     <AccountListClient
-      fromDate={new Date("2019-01-01")}
-      toDate={new Date()}
-      accountId={undefined}
+      accountRecords={records}
+      total={total}
+      fromDate={fromDate}
+      toDate={toDate}
+      accountId={accountId}
     />
   );
 };

apps/web/src/pageComponents/household/account/server/fetchBalanceList.ts

@@ -0,0 +1,31 @@
+import { findUser } from "@persistence/browser/server/find-user";
+import { fetchQuery } from "@persistence/database/server/fetchQuery";
+import {
+  convertToAccounts,
+  totalBalance,
+} from "@v3/graphql/household/convert/parseToAccounts";
+import { GetAccountBalanceListDocument } from "@v3/graphql/household/type";
+
+export const fetchBalanceList = async ({
+  fromDate,
+  toDate,
+}: {
+  fromDate: Date;
+  toDate: Date;
+}) => {
+  const { group } = await findUser();
+
+  const { data } = await fetchQuery(GetAccountBalanceListDocument, {
+    fromDate: fromDate,
+    toDate: toDate,
+    groupId: group.id,
+  });
+
+  const records = convertToAccounts(data);
+  const total = totalBalance(data);
+
+  return {
+    records,
+    total,
+  };
+};

apps/web/src/features/household/accountList/components/type.ts → packages/domain/household/account.ts

@@ -1,3 +1,3 @@
-export type AccountTableRow = {
+export type Account = {
   id: string;
 } & Record<"accountName" | "balance", string | number>;

packages/graphql/household/convert/parseToAccounts.test.ts

@@ -0,0 +1,90 @@
+import { convertToAccounts, totalBalance } from "./parseToAccounts";
+
+describe("convertToAccounts", () => {
+  it("should convert data to accounts", () => {
+    const data: Parameters<typeof convertToAccounts>[0] = {
+      account: [
+        {
+          __typename: "HouseholdAccount",
+          id: "1",
+          accountName: "account1",
+          allDetailViewsAggregate: {
+            aggregate: {
+              sum: {
+                __typename: "HouseholdAllDetailViewSumFields",
+                signedAmount: 100,
+              },
+            },
+          },
+        },
+        {
+          __typename: "HouseholdAccount",
+          id: "2",
+          accountName: "account2",
+          allDetailViewsAggregate: {
+            aggregate: {
+              sum: {
+                __typename: "HouseholdAllDetailViewSumFields",
+                signedAmount: 200,
+              },
+            },
+          },
+        },
+      ],
+    };
+
+    const actual = convertToAccounts(data);
+
+    expect(actual).toEqual([
+      {
+        id: "1",
+        accountName: "account1",
+        balance: 100,
+      },
+      {
+        id: "2",
+        accountName: "account2",
+        balance: 200,
+      },
+    ]);
+  });
+});
+
+describe("totalBalance", () => {
+  it("should calculate total balance", () => {
+    const data: Parameters<typeof convertToAccounts>[0] = {
+      account: [
+        {
+          __typename: "HouseholdAccount",
+          id: "1",
+          accountName: "account1",
+          allDetailViewsAggregate: {
+            aggregate: {
+              sum: {
+                __typename: "HouseholdAllDetailViewSumFields",
+                signedAmount: 100,
+              },
+            },
+          },
+        },
+        {
+          __typename: "HouseholdAccount",
+          id: "2",
+          accountName: "account2",
+          allDetailViewsAggregate: {
+            aggregate: {
+              sum: {
+                __typename: "HouseholdAllDetailViewSumFields",
+                signedAmount: 200,
+              },
+            },
+          },
+        },
+      ],
+    };
+
+    const actual = totalBalance(data);
+
+    expect(actual).toBe(300);
+  });
+});

packages/graphql/household/convert/parseToAccounts.ts

@@ -0,0 +1,21 @@
+import { Account } from "@oneforall/domain/household/account";
+
+import { GetAccountBalanceListQuery } from "../type";
+
+export const convertToAccounts = (
+  data: GetAccountBalanceListQuery,
+): Account[] => {
+  return data.account.map((a) => ({
+    id: a.id,
+    accountName: a.accountName,
+    balance: a.allDetailViewsAggregate.aggregate?.sum?.signedAmount,
+  }));
+};
+
+export const totalBalance = (data: GetAccountBalanceListQuery): number => {
+  return data.account.reduce(
+    (acc, cur) =>
+      Number(cur.allDetailViewsAggregate.aggregate?.sum?.signedAmount) + acc,
+    0,
+  );
+};