From fac68c37efa2645c50bb29f9d59ba73a8e65079b Mon Sep 17 00:00:00 2001
From: "sosuke.iwabuchi" <sosuke.iwabuchi@satellite-tech.co.jp>
Date: Wed, 20 Sep 2023 14:58:15 +0900
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/season-ticket-contract.ts       |  1 +
 src/pages/dashboard/contract/detail.tsx | 37 +++++++++++++++++++++++--
 src/utils/string.ts                     |  3 ++
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/string.ts

diff --git a/src/api/season-ticket-contract.ts b/src/api/season-ticket-contract.ts
index 935b372..2aa3be8 100644
--- a/src/api/season-ticket-contract.ts
+++ b/src/api/season-ticket-contract.ts
@@ -10,6 +10,7 @@ export type SeasonTicketContract = {
   vehicle_type: string | null;
   contract_start_date: string | null;
   contract_end_date: string | null;
+  contract_amount: number;
   revision: number;
 };
 
diff --git a/src/pages/dashboard/contract/detail.tsx b/src/pages/dashboard/contract/detail.tsx
index dc5fa2f..a038d7f 100644
--- a/src/pages/dashboard/contract/detail.tsx
+++ b/src/pages/dashboard/contract/detail.tsx
@@ -15,9 +15,10 @@ import useAPICall from "hooks/useAPICall";
 import useDashboard from "hooks/useDashBoard";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import { PageID, TabID } from "pages";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { getPath } from "routes/path";
+import { numberFormat } from "utils/string";
 
 export default function ContractDetail() {
   const { setHeaderTitle, setTabs } = useDashboard(
@@ -54,6 +55,27 @@ export default function ContractDetail() {
     navigateWhenChanged(getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST));
   };
 
+  const endDate = useMemo(() => {
+    if (seasonTicketContract) {
+      const { contract_end_date } = seasonTicketContract;
+      if (contract_end_date === "2121/12/31") {
+        return "";
+      }
+      return contract_end_date;
+    }
+    return "";
+  }, [seasonTicketContract]);
+  const vehcleNo = useMemo(() => {
+    if (seasonTicketContract) {
+      const { vehicle_no } = seasonTicketContract;
+      if (vehicle_no !== "") {
+        return "";
+      }
+      return "未登録";
+    }
+    return "";
+  }, [seasonTicketContract]);
+
   useEffect(() => {
     setHeaderTitle("契約詳細");
     setTabs(null);
@@ -99,11 +121,20 @@ export default function ContractDetail() {
                 <TableCell>区画</TableCell>
                 <TableCell>{seasonTicketContract.room_no}</TableCell>
               </TableRow>
+              <TableRow>
+                <TableCell>契約金額</TableCell>
+                <TableCell>
+                  {numberFormat(seasonTicketContract.contract_amount)}円
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>車両番号</TableCell>
+                <TableCell>{vehcleNo}</TableCell>
+              </TableRow>
               <TableRow>
                 <TableCell>契約期間</TableCell>
                 <TableCell>
-                  {seasonTicketContract.contract_start_date}-
-                  {seasonTicketContract.contract_end_date}
+                  {seasonTicketContract.contract_start_date}-{endDate}
                 </TableCell>
               </TableRow>
             </TableBody>
diff --git a/src/utils/string.ts b/src/utils/string.ts
new file mode 100644
index 0000000..d4fecb7
--- /dev/null
+++ b/src/utils/string.ts
@@ -0,0 +1,3 @@
+export function numberFormat(source: number): string {
+  return new Intl.NumberFormat().format(source);
+}