詳細画面 追加

src/components/LoadingScreen.tsx

@@ -1,5 +1,16 @@
 import { Box } from "@mui/material";
+import useBackDrop from "hooks/useBackDrop";
+import { useEffect } from "react";
 
 export default function LoadingScreen() {
+  const { setShowBackDrop } = useBackDrop();
+
+  useEffect(() => {
+    setShowBackDrop(true);
+    return () => {
+      setShowBackDrop(false);
+    };
+  }, []);
+
   return <Box>Loading...</Box>;
 }

src/hooks/useNavigateCustom.ts

@@ -2,6 +2,7 @@ import { useLocation, useNavigate } from "react-router";
 import { Dictionary } from "@types";
 import { PageID } from "pages";
 import { getPath } from "routes/path";
+import { scrollToTop } from "utils/page";
 
 export default function useNavigateCustom() {
   const navigate = useNavigate();
@@ -54,6 +55,8 @@ export default function useNavigateCustom() {
         navigate(newPath);
       }
     }
+
+    scrollToTop("auto");
   };
   return { navigate, navigateWhenChanged };
 }

src/layouts/dashbord/navigator.tsx

@@ -69,10 +69,22 @@ export default function Navigator(props: DrawerProps) {
 
   const { userId, name } = useAuth();
 
+  const { navigateWhenChanged } = useNavigateCustom();
+
+  const navigateToDashboardOverview = () => {
+    navigateWhenChanged(getPath(PageID.DASHBOARD_OVERVIEW));
+  };
+
   const categories: Group[] = [
     {
-      label: "管理",
-      children: [],
+      label: "App",
+      children: [
+        {
+          label: "契約",
+          icon: <ArticleIcon />,
+          id: PageID.DASHBOARD_CONTRACT_LIST,
+        },
+      ],
     },
     {
       label: "アカウント",
@@ -86,6 +98,7 @@ export default function Navigator(props: DrawerProps) {
     <Drawer variant="permanent" {...other}>
       <List disablePadding>
         <ListItem
+          onClick={navigateToDashboardOverview}
           sx={{ ...item, ...itemCategory, fontSize: 22, color: "#fff" }}
         >
           MyPage

src/pages/dashboard/contract/detail.tsx

@@ -0,0 +1,94 @@
+import {
+  Box,
+  Button,
+  Grid,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import { PageID, TabID } from "pages";
+import useDashboard from "hooks/useDashBoard";
+import { useEffect } from "react";
+import useNavigateCustom from "hooks/useNavigateCustom";
+
+export default function ContractDetail() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_CONTRACT_DETAIL,
+    TabID.NONE
+  );
+  const { navigate } = useNavigateCustom();
+
+  useEffect(() => {
+    setHeaderTitle("契約詳細");
+    setTabs(null);
+  }, []);
+  return (
+    <Box sx={{ p: 1, m: 1 }}>
+      <Stack spacing={2}>
+        <Box>
+          <Button
+            onClick={() => {
+              navigate(-1);
+            }}
+          >
+            戻る
+          </Button>
+        </Box>
+        <Paper sx={{ p: 2 }}>
+          <Typography variant="h5">契約情報</Typography>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell>駐車場名</TableCell>
+                <TableCell>A駐車場</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>区画</TableCell>
+                <TableCell>1-1</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>契約期間</TableCell>
+                <TableCell>2023/8/1-2024/7/31</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </Paper>
+        <Paper sx={{ p: 2 }}>
+          <Typography variant="h5">お支払い状況</Typography>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell>2023/09</TableCell>
+                <TableCell>未請求</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>2023/08</TableCell>
+                <TableCell>支払済み</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>2023/07</TableCell>
+                <TableCell>支払済み</TableCell>
+              </TableRow>
+            </TableBody>
+            <Button>更に表示</Button>
+          </Table>
+        </Paper>
+        <Paper sx={{ p: 2 }}>
+          <Typography variant="h5">各種申請</Typography>
+          <Stack direction="row" spacing={2}>
+            <Box>
+              <Button variant="contained">駐車証明証申請</Button>
+            </Box>
+            <Box>
+              <Button variant="contained">解約申請</Button>
+            </Box>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}

src/pages/dashboard/contract/list.tsx

@@ -0,0 +1,51 @@
+import { Box, Button, Grid, Paper, Typography } from "@mui/material";
+import { PageID, TabID } from "pages";
+import useDashboard from "hooks/useDashBoard";
+import { useEffect } from "react";
+import useNavigateCustom from "hooks/useNavigateCustom";
+import { getPath } from "routes/path";
+
+export default function ContractList() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_CONTRACT_LIST,
+    TabID.NONE
+  );
+
+  const { navigateWhenChanged } = useNavigateCustom();
+
+  const items = [
+    { parkingName: "A駐車場", position: "1" },
+    { parkingName: "B駐車場", position: "1-1" },
+  ];
+
+  const moveToDetail = () => {
+    navigateWhenChanged(
+      getPath(PageID.DASHBOARD_CONTRACT_DETAIL, {
+        query: {
+          id: "test-test",
+        },
+      })
+    );
+  };
+
+  useEffect(() => {
+    setHeaderTitle("契約一覧");
+    setTabs(null);
+  }, []);
+  return (
+    <Box sx={{ p: 1, m: 1 }}>
+      <Grid container spacing={2}>
+        {items.map((item) => {
+          return (
+            <Grid item xs={12} md={6}>
+              <Paper sx={{ p: 2, cursor: "pointer" }} onClick={moveToDetail}>
+                <Typography variant="h5">{item.parkingName}</Typography>
+                <Typography variant="h6">区画:{item.position}</Typography>
+              </Paper>
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Box>
+  );
+}

src/pages/index.ts

@@ -7,6 +7,9 @@ export const PageID = {
 
   DASHBOARD_OVERVIEW: id++,
 
+  DASHBOARD_CONTRACT_LIST: id++,
+  DASHBOARD_CONTRACT_DETAIL: id++,
+
   PAGE_403: id++,
   PAGE_404: id++,
 } as const;

src/routes/index.tsx

@@ -41,6 +41,14 @@ const DashboardRoutes = (): RouteObject => {
       path: getRoute(PageID.DASHBOARD_OVERVIEW),
       element: <Dashboard />,
     },
+    {
+      path: getRoute(PageID.DASHBOARD_CONTRACT_LIST),
+      element: <ContractList />,
+    },
+    {
+      path: getRoute(PageID.DASHBOARD_CONTRACT_DETAIL),
+      element: <ContractDetail />,
+    },
   ];
 
   return {
@@ -73,6 +81,12 @@ const Logout = Loadable(lazy(() => import("pages/auth/logout")));
 
 //ダッシュボード ----------------------------
 const Dashboard = Loadable(lazy(() => import("pages/dashboard")));
+const ContractList = Loadable(
+  lazy(() => import("pages/dashboard/contract/list"))
+);
+const ContractDetail = Loadable(
+  lazy(() => import("pages/dashboard/contract/detail"))
+);
 
 // その他 ---------------------------------
 

src/routes/path.ts

@@ -28,6 +28,15 @@ const getTabId = (key: PathKey): TabID => {
   }
 };
 
+const PATHS_DASHBOARD = {
+  [makePathKey(PageID.DASHBOARD_OVERVIEW)]: "/dashboard",
+  // --契約-----------------------
+  [makePathKey(PageID.DASHBOARD_CONTRACT_LIST)]:
+    "/dashboard/contract/list/:page",
+  [makePathKey(PageID.DASHBOARD_CONTRACT_DETAIL)]:
+    "/dashboard/contract/detail/:id",
+};
+
 const PATHS = {
   [makePathKey(PageID.NONE)]: "/",
 
@@ -35,7 +44,8 @@ const PATHS = {
   [makePathKey(PageID.LOGIN)]: "/login",
   [makePathKey(PageID.LOGOUT)]: "/logout",
 
-  [makePathKey(PageID.DASHBOARD_OVERVIEW)]: "/dashboard",
+  // ダッシュボード----------------
+  ...PATHS_DASHBOARD,
 
   // その他
   [makePathKey(PageID.PAGE_403)]: "403",

src/utils/page.ts

@@ -1,3 +1,5 @@
-export const scrollToTop = () => {
-  window.scroll({ top: 0, behavior: "smooth" });
+export const scrollToTop = (
+  behavior: ScrollBehavior | undefined = "smooth"
+) => {
+  window.scroll({ top: 0, behavior });
 };