One-for-All-174 I replaced the detail table.

Ryo-Kgym · Jul 12, 2024 · eda0772 · eda0772
1 parent 8b398b5
commit eda0772
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 143 deletions.
diff --git 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
diff --git a/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountPresenter.tsx b/apps/web/src/components/organisms/daily_table/account/DailyTableByAccountPresenter.tsx
diff --git a/apps/web/src/components/organisms/daily_table/account/index.ts b/apps/web/src/components/organisms/daily_table/account/index.ts
diff --git 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
@@ -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
@@ -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
@@ -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 ?? ""}