モック作成

src/layouts/dashbord/navigator.tsx

@@ -1,11 +1,8 @@
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import HomeIcon from "@mui/icons-material/Home";
-import PeopleIcon from "@mui/icons-material/People";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import ArticleIcon from "@mui/icons-material/Article";
+import InfoIcon from "@mui/icons-material/Info";
 import SettingsIcon from "@mui/icons-material/Settings";
-import AccountBoxIcon from "@mui/icons-material/AccountBox";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import AccountBalanceIcon from "@mui/icons-material/AccountBalance";
 import { Collapse, Typography } from "@mui/material";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
@@ -15,13 +12,13 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import { PageID } from "pages";
 import useAuth from "hooks/useAuth";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import usePage from "hooks/usePage";
+import { PageID } from "pages";
 import * as React from "react";
 import { PathOption, getPath } from "routes/path";
-
+import PersonIcon from "@mui/icons-material/Person";
 type Group = {
   label: string;
   children: SubGroup[];
@@ -84,11 +81,31 @@ export default function Navigator(props: DrawerProps) {
           icon: <ArticleIcon />,
           id: PageID.DASHBOARD_CONTRACT_LIST,
         },
+        {
+          label: "新規利用申込",
+          icon: <ArticleIcon />,
+          id: PageID.DASHBOARD_CONTRACT_ENTRY,
+        },
+        {
+          label: "領収証ダウンロード",
+          icon: <ArticleIcon />,
+          id: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
+        },
+        {
+          label: "問い合わせ",
+          icon: <InfoIcon />,
+          id: PageID.DASHBOARD_ASK,
+        },
       ],
     },
     {
       label: "アカウント",
       children: [
+        {
+          label: "利用者情報",
+          icon: <PersonIcon />,
+          id: PageID.DASHBOARD_USER_DETAIL,
+        },
         { label: "ログアウト", icon: <SettingsIcon />, id: PageID.LOGOUT },
       ],
     },

src/pages/auth/login.tsx

@@ -1,16 +1,15 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { LoadingButton } from "@mui/lab";
-import { Box, Stack, Typography } from "@mui/material";
-import { PageID } from "pages";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import InputAlert from "components/form/InputAlert";
 import { FormProvider, RHFTextField } from "components/hook-form";
 import useAuth from "hooks/useAuth";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import useSnackbarCustom from "hooks/useSnackbarCustom";
-import { useEffect, useState } from "react";
+import { PageID } from "pages";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { getPath } from "routes/path";
-import { StoreId, setStore } from "storage/localstorage";
 import * as Yup from "yup";
 
 type FormProps = {
@@ -74,6 +73,7 @@ export default function Login() {
           <LoadingButton loading={sending} type="submit" variant="contained">
             ログイン
           </LoadingButton>
+          <Button variant="outlined">パスワードを忘れた</Button>
         </Stack>
       </Box>
     </FormProvider>

src/pages/dashboard/contract/detail.tsx

@@ -1,7 +1,6 @@
 import {
   Box,
   Button,
-  Grid,
   Paper,
   Stack,
   Table,
@@ -10,10 +9,10 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
-import { PageID, TabID } from "pages";
 import useDashboard from "hooks/useDashBoard";
-import { useEffect } from "react";
 import useNavigateCustom from "hooks/useNavigateCustom";
+import { PageID, TabID } from "pages";
+import { useEffect } from "react";
 
 export default function ContractDetail() {
   const { setHeaderTitle, setTabs } = useDashboard(
@@ -25,7 +24,7 @@ export default function ContractDetail() {
   useEffect(() => {
     setHeaderTitle("契約詳細");
     setTabs(null);
-  }, []);
+  }, [setHeaderTitle, setTabs]);
   return (
     <Box sx={{ p: 1, m: 1 }}>
       <Stack spacing={2}>
@@ -79,13 +78,19 @@ export default function ContractDetail() {
         </Paper>
         <Paper sx={{ p: 2 }}>
           <Typography variant="h5">各種申請</Typography>
-          <Stack direction="row" spacing={2}>
+          <Stack direction="row" spacing={2} mt={2}>
+            <Box>
+              <Button variant="contained">シール再発行申請</Button>
+            </Box>
             <Box>
               <Button variant="contained">駐車証明証申請</Button>
             </Box>
             <Box>
               <Button variant="contained">解約申請</Button>
             </Box>
+            <Box>
+              <Button variant="contained">車両情報変更申請</Button>
+            </Box>
           </Stack>
         </Paper>
       </Stack>

src/pages/dashboard/contract/entry.tsx

@@ -0,0 +1,28 @@
+import { Box, Link, Stack, Typography } from "@mui/material";
+import useDashboard from "hooks/useDashBoard";
+import { PageID, TabID } from "pages";
+import { useEffect } from "react";
+
+export default function ContractEntry() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_CONTRACT_ENTRY,
+    TabID.NONE
+  );
+
+  useEffect(() => {
+    setHeaderTitle("新規利用申込");
+    setTabs(null);
+  }, [setHeaderTitle, setTabs]);
+
+  return (
+    <Stack>
+      <Box>新規の申込は、こちらよりお願いします。</Box>
+      <Link href="https://www.kyotopublic.or.jp/" target="_blank">
+        京都・滋賀駐車場なび
+      </Link>
+      <Link href="https://osaka-parking.jp/" target="_blank">
+        大阪・神戸・奈良駐車場なび
+      </Link>
+    </Stack>
+  );
+}

src/pages/dashboard/contract/list.tsx

@@ -1,8 +1,8 @@
-import { Box, Button, Grid, Paper, Typography } from "@mui/material";
-import { PageID, TabID } from "pages";
+import { Box, Grid, Paper, Typography } from "@mui/material";
 import useDashboard from "hooks/useDashBoard";
-import { useEffect } from "react";
 import useNavigateCustom from "hooks/useNavigateCustom";
+import { PageID, TabID } from "pages";
+import { useEffect } from "react";
 import { getPath } from "routes/path";
 
 export default function ContractList() {
@@ -31,13 +31,13 @@ export default function ContractList() {
   useEffect(() => {
     setHeaderTitle("契約一覧");
     setTabs(null);
-  }, []);
+  }, [setHeaderTitle, setTabs]);
   return (
     <Box sx={{ p: 1, m: 1 }}>
       <Grid container spacing={2}>
-        {items.map((item) => {
+        {items.map((item, index) => {
           return (
-            <Grid item xs={12} md={6}>
+            <Grid item xs={12} md={6} key={index}>
               <Paper sx={{ p: 2, cursor: "pointer" }} onClick={moveToDetail}>
                 <Typography variant="h5">{item.parkingName}</Typography>
                 <Typography variant="h6">区画:{item.position}</Typography>

src/pages/dashboard/index.tsx

@@ -12,6 +12,6 @@ export default function Overview() {
   useEffect(() => {
     setHeaderTitle("Dashboard");
     setTabs(null);
-  }, []);
+  }, [setHeaderTitle, setTabs]);
   return <Box sx={{ p: 1, m: 1 }}></Box>;
 }

src/pages/dashboard/other/ask.tsx

@@ -0,0 +1,53 @@
+import { AccountBoxSharp } from "@mui/icons-material";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Stack,
+} from "@mui/material";
+import useDashboard from "hooks/useDashBoard";
+import { PageID, TabID } from "pages";
+import { useEffect } from "react";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+export default function Ask() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_ASK,
+    TabID.NONE
+  );
+
+  useEffect(() => {
+    setHeaderTitle("問い合わせ");
+    setTabs(null);
+  }, [setHeaderTitle, setTabs]);
+
+  return (
+    <Stack>
+      <Box>よくある質問</Box>
+      <Box>
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            支払をしたか確認をしたい
+          </AccordionSummary>
+          <AccordionDetails>
+            契約一覧より支払状況が確認できます。
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            解約をしたい
+          </AccordionSummary>
+          <AccordionDetails>
+            契約一覧より解約申請をしてください
+          </AccordionDetails>
+        </Accordion>
+      </Box>
+      <Box>よくある質問で解決しない場合</Box>
+      <Box>
+        <Button>問い合わせへ進む</Button>
+      </Box>
+    </Stack>
+  );
+}

src/pages/dashboard/receipt/download.tsx

@@ -0,0 +1,55 @@
+import { Button, Card, Stack } from "@mui/material";
+import { FormProvider } from "components/hook-form";
+import RHFSelect, { SelectOptionProps } from "components/hook-form/RHFSelect";
+import useDashboard from "hooks/useDashBoard";
+import { PageID, TabID } from "pages";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+
+type FormProps = {
+  term: string;
+};
+
+export default function ReceiptDownload() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_RECEIPT_DOWNLOAD,
+    TabID.NONE
+  );
+
+  const options: SelectOptionProps[] = useMemo(() => {
+    return [
+      { value: "2023/08 駐車場利用" },
+      { value: "2023/07 駐車場利用" },
+      { value: "2023/06 駐車場利用" },
+      { value: "車庫証明発行" },
+    ];
+  }, []);
+
+  const form = useForm<FormProps>({
+    defaultValues: {
+      term: "",
+    },
+  });
+
+  const term = form.watch("term");
+
+  const canDownload = useMemo(() => {
+    return term !== "";
+  }, [term]);
+
+  useEffect(() => {
+    setHeaderTitle("領収証ダウンロード");
+    setTabs(null);
+  }, [setHeaderTitle, setTabs]);
+
+  return (
+    <FormProvider methods={form}>
+      <Card sx={{ maxWidth: 500, m: 1, p: 1 }}>
+        <Stack>
+          <RHFSelect name="term" options={options} size="small" />
+          <Button disabled={!canDownload}>ダウンロード</Button>
+        </Stack>
+      </Card>
+    </FormProvider>
+  );
+}

src/pages/dashboard/user/detail.tsx

@@ -0,0 +1,26 @@
+import { Button, Stack } from "@mui/material";
+import StackRow from "components/stack/StackRow";
+import useDashboard from "hooks/useDashBoard";
+import { PageID, TabID } from "pages";
+import { useEffect } from "react";
+
+export default function UserDetail() {
+  const { setHeaderTitle, setTabs } = useDashboard(
+    PageID.DASHBOARD_CONTRACT_DETAIL,
+    TabID.NONE
+  );
+
+  useEffect(() => {
+    setHeaderTitle("利用者情報");
+    setTabs(null);
+  }, []);
+
+  return (
+    <Stack>
+      <Button>ユーザー情報変更</Button>
+      <Button>口座情報変更</Button>
+      <Button>学生証アップロード</Button>
+      <Button>障害者手帳アップロード</Button>
+    </Stack>
+  );
+}

src/pages/index.ts

@@ -7,9 +7,16 @@ export const PageID = {
 
   DASHBOARD_OVERVIEW: id++,
 
+  DASHBOARD_CONTRACT_ENTRY: id++,
   DASHBOARD_CONTRACT_LIST: id++,
   DASHBOARD_CONTRACT_DETAIL: id++,
 
+  DASHBOARD_RECEIPT_DOWNLOAD: id++,
+
+  DASHBOARD_USER_DETAIL: id++,
+
+  DASHBOARD_ASK: id++,
+
   PAGE_403: id++,
   PAGE_404: id++,
 } as const;

src/routes/index.tsx

@@ -1,13 +1,13 @@
 import { PageID } from "pages";
 import LoadingScreen from "components/LoadingScreen";
 import useAuth from "hooks/useAuth";
-import DashboardLayout from "layouts/dashbord";
 import SimpleLayout from "layouts/simple";
 import { ElementType, Suspense, lazy, useMemo } from "react";
 import { RouteObject, useRoutes } from "react-router-dom";
 import { getRoute } from "./path";
+import DashboardRoutes from "./sub/dashboard";
 
-const Loadable = (Component: ElementType) => (props: any) => {
+export const Loadable = (Component: ElementType) => (props: any) => {
   return (
     <Suspense fallback={<LoadingScreen />}>
       <Component {...props} />
@@ -35,28 +35,6 @@ const AuthRoutes = (): RouteObject => ({
   ],
 });
 
-const DashboardRoutes = (): RouteObject => {
-  const children = [
-    {
-      path: getRoute(PageID.DASHBOARD_OVERVIEW),
-      element: <Dashboard />,
-    },
-    {
-      path: getRoute(PageID.DASHBOARD_CONTRACT_LIST),
-      element: <ContractList />,
-    },
-    {
-      path: getRoute(PageID.DASHBOARD_CONTRACT_DETAIL),
-      element: <ContractDetail />,
-    },
-  ];
-
-  return {
-    element: <DashboardLayout />,
-    children,
-  };
-};
-
 export function Routes() {
   const { initialized } = useAuth();
 
@@ -79,15 +57,6 @@ export function Routes() {
 const Login = Loadable(lazy(() => import("pages/auth/login")));
 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"))
-);
-
 // その他 ---------------------------------
 
 const Page403 = Loadable(lazy(() => import("pages/common/Page403")));

src/routes/path.ts

@@ -31,10 +31,15 @@ const getTabId = (key: PathKey): TabID => {
 const PATHS_DASHBOARD = {
   [makePathKey(PageID.DASHBOARD_OVERVIEW)]: "/dashboard",
   // --契約-----------------------
+  [makePathKey(PageID.DASHBOARD_CONTRACT_ENTRY)]: "/dashboard/contract/entry",
   [makePathKey(PageID.DASHBOARD_CONTRACT_LIST)]:
     "/dashboard/contract/list/:page",
   [makePathKey(PageID.DASHBOARD_CONTRACT_DETAIL)]:
     "/dashboard/contract/detail/:id",
+  [makePathKey(PageID.DASHBOARD_RECEIPT_DOWNLOAD)]:
+    "/dashboard/receipt/download",
+  [makePathKey(PageID.DASHBOARD_USER_DETAIL)]: "/dashboard/user/detail",
+  [makePathKey(PageID.DASHBOARD_ASK)]: "/dashboard/ask",
 };
 
 const PATHS = {

src/routes/sub/dashboard.tsx

@@ -0,0 +1,73 @@
+import useAuth from "hooks/useAuth";
+import DashboardLayout from "layouts/dashbord";
+import { PageID } from "pages";
+import { lazy, useMemo } from "react";
+import { RouteObject } from "react-router-dom";
+import { Loadable } from "routes";
+import { getRoute } from "routes/path";
+
+export default function DashboardRoutes(): RouteObject {
+  const { authenticated } = useAuth();
+
+  const children: RouteObject[] = useMemo(() => {
+    if (!authenticated) return [];
+
+    const Dashboard = Loadable(lazy(() => import("pages/dashboard")));
+    const ContractEntry = Loadable(
+      lazy(() => import("pages/dashboard/contract/entry"))
+    );
+    const ContractList = Loadable(
+      lazy(() => import("pages/dashboard/contract/list"))
+    );
+    const ContractDetail = Loadable(
+      lazy(() => import("pages/dashboard/contract/detail"))
+    );
+    const ReceiptDownload = Loadable(
+      lazy(() => import("pages/dashboard/receipt/download"))
+    );
+    const UserDetail = Loadable(
+      lazy(() => import("pages/dashboard/user/detail"))
+    );
+    const Ask = Loadable(lazy(() => import("pages/dashboard/other/ask")));
+
+    const allChildren = [
+      {
+        pageId: PageID.DASHBOARD_OVERVIEW,
+        element: <Dashboard />,
+      },
+      {
+        pageId: PageID.DASHBOARD_CONTRACT_ENTRY,
+        element: <ContractEntry />,
+      },
+      {
+        pageId: PageID.DASHBOARD_CONTRACT_LIST,
+        element: <ContractList />,
+      },
+      {
+        pageId: PageID.DASHBOARD_CONTRACT_DETAIL,
+        element: <ContractDetail />,
+      },
+      {
+        pageId: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
+        element: <ReceiptDownload />,
+      },
+      {
+        pageId: PageID.DASHBOARD_USER_DETAIL,
+        element: <UserDetail />,
+      },
+      {
+        pageId: PageID.DASHBOARD_ASK,
+        element: <Ask />,
+      },
+    ];
+    return allChildren.map(({ pageId, ...others }) => ({
+      ...others,
+      path: getRoute(pageId),
+    }));
+  }, [authenticated]);
+
+  return {
+    element: <DashboardLayout />,
+    children: children,
+  };
+}