契約一覧 解約済みを後ろへ並び替え

src/api/season-ticket-contract.ts

@@ -26,6 +26,7 @@ export type SeasonTicketContract = {
   can_some_apply: boolean | null;
   can_change_plan_apply: boolean | null;
   can_parking_certificate_apply: boolean | null;
+  is_terminated: boolean | null;
   revision: number;
 };
 

src/pages/dashboard/contract/list.tsx

@@ -1,11 +1,12 @@
-import { Box, Grid, Paper, Typography } from "@mui/material";
+import { Box, Grid, Paper, SxProps, Typography } from "@mui/material";
 import { SeasonTicketContract } from "api/season-ticket-contract";
 import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
 import useDashboard from "hooks/useDashBoard";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import { PageID, TabID } from "pages";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { getPath } from "routes/path";
+import { dateParse } from "utils/datetime";
 
 function SeasonTicketContractCard({ data }: { data: SeasonTicketContract }) {
   const { navigateWhenChanged } = useNavigateCustom();
@@ -18,8 +19,20 @@ function SeasonTicketContractCard({ data }: { data: SeasonTicketContract }) {
       })
     );
   };
+
+  const sx: SxProps = useMemo(() => {
+    const sx: SxProps = {
+      p: 2,
+      cursor: "pointer",
+    };
+    if (data.is_terminated) {
+      sx.backgroundColor = "gray";
+    }
+    return sx;
+  }, [data]);
+
   return (
-    <Paper sx={{ p: 2, cursor: "pointer" }} onClick={handleClick}>
+    <Paper sx={sx} onClick={handleClick}>
       <Typography variant="h5">{data.parking_name}</Typography>
       <Typography variant="h6">区画:{data.room_no}</Typography>
     </Paper>
@@ -34,6 +47,27 @@ export default function ContractList() {
 
   const { seasonTicketContracts } = useSeasonTicketContractContext();
 
+  const listData = useMemo(() => {
+    return (
+      seasonTicketContracts
+        // 契約日付の昇順に並び替え
+        .sort((a, b) => {
+          if (!a.contract_start_date) return 0;
+          if (!b.contract_start_date) return 0;
+          const aDate = dateParse(a.contract_start_date);
+          const bDate = dateParse(b.contract_start_date);
+          if (!aDate || !bDate) return 0;
+          return aDate < bDate ? -1 : 1;
+        })
+        //　解約済みは後ろへ並び替え
+        .sort((a, b) => {
+          if (!a.is_terminated && b.is_terminated) return -1;
+          if (a.is_terminated && !b.is_terminated) return 1;
+          return 0;
+        })
+    );
+  }, [seasonTicketContracts]);
+
   const { navigateWhenChanged } = useNavigateCustom();
 
   const moveToDetail = () => {
@@ -53,7 +87,7 @@ export default function ContractList() {
   return (
     <Box sx={{ p: 1, m: 1 }}>
       <Grid container spacing={2}>
-        {seasonTicketContracts.map((item, index) => {
+        {listData.map((item, index) => {
           return (
             <Grid item xs={12} md={6} key={index}>
               <SeasonTicketContractCard data={item} />