微調整

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;
 };
 

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>

src/utils/string.ts

@@ -0,0 +1,3 @@
+export function numberFormat(source: number): string {
+  return new Intl.NumberFormat().format(source);
+}