From 3bf40bf8c715db9614c1f64ed98c9625979797a4 Mon Sep 17 00:00:00 2001
From: Ryo-Kgym <mraytoh@icloud.com>
Date: Fri, 12 Jul 2024 00:47:38 +0900
Subject: [PATCH] One-for-All-174 I replaced the detail table.

---
 .../organisms/daily_table/DailyTable.tsx      | 47 ++-------
 .../account/DailyTableByAccountContainer.tsx  | 62 ------------
 .../account/DailyTableByAccountPresenter.tsx  | 37 -------
 .../organisms/daily_table/account/index.ts    |  1 -
 .../ui/v4/table/MantineDataTable.tsx          |  4 +-
 .../components/AccountDailyTable.tsx          | 97 +++++++++++++++++++
 .../components/BalanceListTable.tsx           |  2 +-
 .../account/components/AccountListClient.tsx  |  4 +-
 8 files changed, 111 insertions(+), 143 deletions(-)
 delete mode 100644 apps/web/src/components/organisms/daily_table/account/DailyTableByAccountContainer.tsx
 delete mode 100644 apps/web/src/components/organisms/daily_table/account/DailyTableByAccountPresenter.tsx
 delete mode 100644 apps/web/src/components/organisms/daily_table/account/index.ts
 create mode 100644 apps/web/src/features/household/accountList/components/AccountDailyTable.tsx

diff --git a/apps/web/src/components/organisms/daily_table/DailyTable.tsx b/apps/web/src/components/organisms/daily_table/DailyTable.tsx
index f9098943..137cb421 100644
--- a/apps/web/src/components/organisms/daily_table/DailyTable.tsx
+++ b/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} />
   </>
 );
diff --git a/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountContainer.tsx b/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountContainer.tsx
deleted file mode 100644
index 162978dd..00000000
--- a/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountContainer.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Copyright (c) 2023 Ryo-Kgym.
- */
-
-import { tablePropsDateSorter } from "@components/atoms/Table";
-import { creditCardSummaryConverter } from "@components/organisms/daily_table/creditCardSummaryConverter";
-import { dailyDetailConverter } from "@components/organisms/daily_table/dailyDetailConverter";
-import { useGetCreditCardSummaryByAccountIdBetweenDate } from "@hooks/household/credit_card/useGetCreditCardSummaryByAccountIdBetweenDate";
-import { useGetDailyDetailByDateAccountId } from "@hooks/household/daily_detail/useGetDailyDetailByDateAccountId";
-import { useState } from "react";
-
-import { DailyTableByAccountPresenter } from "./DailyTableByAccountPresenter";
-
-import type { TableProps } from "@components/atoms/Table";
-import type { DailyDetail } from "@domain/model/household/DailyDetail";
-
-export const DailyTableByAccountContainer = ({
-  fromDate,
-  toDate,
-  accountId,
-}: {
-  fromDate: Date;
-  toDate: Date;
-  accountId: string;
-}) => {
-  const [modifyModalOpen, setModifyModalOpen] = useState<boolean>(false);
-  const [dailyDetail, setDailyDetail] = useState<DailyDetail | null>(null);
-
-  const { data, incomeTotal, outcomeTotal, getDetail } =
-    useGetDailyDetailByDateAccountId(accountId, fromDate, toDate);
-
-  const {
-    data: creditCardSummaryData,
-    incomeTotal: creditCardIncomeTotal,
-    outcomeTotal: creditCardOutcomeTotal,
-  } = useGetCreditCardSummaryByAccountIdBetweenDate(
-    accountId,
-    fromDate,
-    toDate,
-  );
-
-  const tableProps: TableProps[] = dailyDetailConverter({
-    data,
-    onClickHandler: (id) => {
-      setDailyDetail(getDetail(id));
-      setModifyModalOpen(true);
-    },
-  })
-    .concat(creditCardSummaryConverter({ data: creditCardSummaryData }))
-    .sort(tablePropsDateSorter);
-
-  return (
-    <DailyTableByAccountPresenter
-      tableProps={tableProps}
-      incomeTotal={(incomeTotal ?? 0) + creditCardIncomeTotal}
-      outcomeTotal={(outcomeTotal ?? 0) + (creditCardOutcomeTotal ?? 0)}
-      modifyModalOpen={modifyModalOpen}
-      modifyOnClose={() => setModifyModalOpen(false)}
-      detailForUpdate={dailyDetail}
-    />
-  );
-};
diff --git a/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountPresenter.tsx b/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountPresenter.tsx
deleted file mode 100644
index 338608b7..00000000
--- a/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountPresenter.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2023 Ryo-Kgym.
- */
-
-import { DailyTable, UpdateDetail } from "@components/organisms";
-
-import type { TableProps } from "@components/ui";
-import type { DailyDetail } from "@domain/model/household/DailyDetail";
-
-export const DailyTableByAccountPresenter = ({
-  tableProps,
-  incomeTotal,
-  outcomeTotal,
-  modifyModalOpen,
-  modifyOnClose,
-  detailForUpdate,
-}: {
-  tableProps: TableProps[];
-  incomeTotal: number | undefined;
-  outcomeTotal: number | undefined;
-  modifyModalOpen: boolean;
-  modifyOnClose: () => void;
-  detailForUpdate: DailyDetail | null;
-}) => (
-  <div>
-    <DailyTable
-      tablePropsList={tableProps}
-      incomeTotal={incomeTotal}
-      outcomeTotal={outcomeTotal}
-    />
-    <UpdateDetail
-      initData={detailForUpdate}
-      isOpen={modifyModalOpen}
-      onCloseHandler={modifyOnClose}
-    />
-  </div>
-);
diff --git a/apps/web/src/components/organisms/daily_table/account/index.ts b/apps/web/src/components/organisms/daily_table/account/index.ts
deleted file mode 100644
index 18d74768..00000000
--- a/apps/web/src/components/organisms/daily_table/account/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DailyTableByAccountContainer as DailyTableByAccount } from "./DailyTableByAccountContainer";
diff --git a/apps/web/src/components/ui/v4/table/MantineDataTable.tsx b/apps/web/src/components/ui/v4/table/MantineDataTable.tsx
index 97bb5bb9..c23e9aef 100644
--- a/apps/web/src/components/ui/v4/table/MantineDataTable.tsx
+++ b/apps/web/src/components/ui/v4/table/MantineDataTable.tsx
@@ -40,8 +40,10 @@ export const MantineDataTable = <H extends string>({
 
   return (
     <DataTable
-      height={"70%"}
+      height={"85vh"}
       withTableBorder
+      withColumnBorders
+      striped
       records={records}
       columns={columns}
       totalRecords={defaultRecords.length}
diff --git a/apps/web/src/features/household/accountList/components/AccountDailyTable.tsx b/apps/web/src/features/household/accountList/components/AccountDailyTable.tsx
new file mode 100644
index 00000000..439e903f
--- /dev/null
+++ b/apps/web/src/features/household/accountList/components/AccountDailyTable.tsx
@@ -0,0 +1,97 @@
+import type { DailyDetail } from "@domain/model/household/DailyDetail";
+import { useState } from "react";
+import { IocomeTotal } from "@components/molecules/Total";
+import { UpdateDetail } from "@components/organisms";
+import { DataTable } from "@components/ui/v4/table";
+import { useGetCreditCardSummaryByAccountIdBetweenDate } from "@hooks/household/credit_card/useGetCreditCardSummaryByAccountIdBetweenDate";
+import { useGetDailyDetailByDateAccountId } from "@hooks/household/daily_detail/useGetDailyDetailByDateAccountId";
+
+export const AccountDailyTable = ({
+  fromDate,
+  toDate,
+  accountId,
+}: {
+  fromDate: Date;
+  toDate: Date;
+  accountId: string;
+}) => {
+  const [modifyModalOpen, setModifyModalOpen] = useState<boolean>(false);
+  const [dailyDetail, setDailyDetail] = useState<DailyDetail | null>(null);
+
+  const { data, incomeTotal, outcomeTotal, getDetail } =
+    useGetDailyDetailByDateAccountId(accountId, fromDate, toDate);
+
+  const {
+    data: creditCardSummaryData,
+    incomeTotal: creditCardIncomeTotal,
+    outcomeTotal: creditCardOutcomeTotal,
+  } = useGetCreditCardSummaryByAccountIdBetweenDate(
+    accountId,
+    fromDate,
+    toDate,
+  );
+
+  return (
+    <>
+      <DataTable
+        columns={[
+          { accessor: "date", title: "決済日", width: "10%" },
+          { accessor: "genre", title: "ジャンル", width: "20%" },
+          { accessor: "category", title: "カテゴリ", width: "10%" },
+          {
+            accessor: "amount",
+            title: "金額",
+            width: "10%",
+            textAlign: "right",
+            render: ({ amount }) => amount.toLocaleString(),
+          },
+          { accessor: "memo", title: "メモ", width: "50%" },
+        ]}
+        records={(
+          data?.dailies.map((d) => ({
+            id: d.id,
+            date: d.date,
+            genre: d.genre.name,
+            category: d.category.name,
+            amount: d.amount,
+            memo: d.memo ?? "",
+          })) ?? []
+        )
+          .concat(
+            creditCardSummaryData?.creditCardSummaries.map((s) => ({
+              id: s.id,
+              date: s.withdrawalDate,
+              genre: "クレジットカード",
+              category: s.creditCard,
+              amount: s.totalAmount,
+              memo: "",
+            })) ?? [],
+          )
+          .sort((a, b) => {
+            if (a.date < b.date) {
+              return 1;
+            }
+            if (a.date > b.date) {
+              return -1;
+            }
+            return 0;
+          })}
+        onRowClick={({ id, genre }) => {
+          if (genre === "クレジットカード") return;
+
+          setDailyDetail(getDetail(id));
+          setModifyModalOpen(true);
+        }}
+      />
+      <IocomeTotal
+        income={(incomeTotal ?? 0) + creditCardIncomeTotal}
+        outcome={(outcomeTotal ?? 0) + (creditCardOutcomeTotal ?? 0)}
+      />
+      <UpdateDetail
+        initData={dailyDetail}
+        isOpen={modifyModalOpen}
+        onCloseHandler={() => setModifyModalOpen(false)}
+      />
+    </>
+  );
+};
diff --git a/apps/web/src/features/household/accountList/components/BalanceListTable.tsx b/apps/web/src/features/household/accountList/components/BalanceListTable.tsx
index 56d50f47..f37db704 100644
--- a/apps/web/src/features/household/accountList/components/BalanceListTable.tsx
+++ b/apps/web/src/features/household/accountList/components/BalanceListTable.tsx
@@ -39,7 +39,7 @@ export const BalanceListTable = ({
             title: "残高",
             width: "50%",
             textAlign: "right",
-            render: ({ balance }) => balance.toLocaleString(),
+            render: ({ balance }) => balance?.toLocaleString() ?? 0,
           },
         ]}
         records={balanceRecords}
diff --git a/apps/web/src/pageComponents/household/account/components/AccountListClient.tsx b/apps/web/src/pageComponents/household/account/components/AccountListClient.tsx
index 806019c7..4eaddb21 100644
--- a/apps/web/src/pageComponents/household/account/components/AccountListClient.tsx
+++ b/apps/web/src/pageComponents/household/account/components/AccountListClient.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ResponsiveSwitcher } from "@app/household/_layout/ResponsiveSwitcher";
-import { DailyTableByAccount } from "@components/organisms/daily_table/account";
+import { AccountDailyTable } from "@features/household/accountList/components/AccountDailyTable";
 import { BalanceListTable } from "@features/household/accountList/components/BalanceListTable";
 import { AccountBalance } from "@oneforall/domain/household/accountBalance";
 
@@ -29,7 +29,7 @@ export const AccountListClient = ({
         />
       }
       second={
-        <DailyTableByAccount
+        <AccountDailyTable
           fromDate={fromDate}
           toDate={toDate}
           accountId={accountId ?? ""}