diff --git a/src/layouts/dashbord/navigator.tsx b/src/layouts/dashbord/navigator.tsx
index a1afe79..442aa07 100644
--- a/src/layouts/dashbord/navigator.tsx
+++ b/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: ,
id: PageID.DASHBOARD_CONTRACT_LIST,
},
+ {
+ label: "新規利用申込",
+ icon: ,
+ id: PageID.DASHBOARD_CONTRACT_ENTRY,
+ },
+ {
+ label: "領収証ダウンロード",
+ icon: ,
+ id: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
+ },
+ {
+ label: "問い合わせ",
+ icon: ,
+ id: PageID.DASHBOARD_ASK,
+ },
],
},
{
label: "アカウント",
children: [
+ {
+ label: "利用者情報",
+ icon: ,
+ id: PageID.DASHBOARD_USER_DETAIL,
+ },
{ label: "ログアウト", icon: , id: PageID.LOGOUT },
],
},
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index ee8f31f..6d8f4e6 100644
--- a/src/pages/auth/login.tsx
+++ b/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() {
ログイン
+
diff --git a/src/pages/dashboard/contract/detail.tsx b/src/pages/dashboard/contract/detail.tsx
index 069e99e..6830119 100644
--- a/src/pages/dashboard/contract/detail.tsx
+++ b/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 (
@@ -79,13 +78,19 @@ export default function ContractDetail() {
各種申請
-
+
+
+
+
+
+
+
diff --git a/src/pages/dashboard/contract/entry.tsx b/src/pages/dashboard/contract/entry.tsx
new file mode 100644
index 0000000..4c5ebf0
--- /dev/null
+++ b/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 (
+
+ 新規の申込は、こちらよりお願いします。
+
+ 京都・滋賀駐車場なび
+
+
+ 大阪・神戸・奈良駐車場なび
+
+
+ );
+}
diff --git a/src/pages/dashboard/contract/list.tsx b/src/pages/dashboard/contract/list.tsx
index 75f665d..38b72a6 100644
--- a/src/pages/dashboard/contract/list.tsx
+++ b/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 (
- {items.map((item) => {
+ {items.map((item, index) => {
return (
-
+
{item.parkingName}
区画:{item.position}
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index bef9e94..62b3e27 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -12,6 +12,6 @@ export default function Overview() {
useEffect(() => {
setHeaderTitle("Dashboard");
setTabs(null);
- }, []);
+ }, [setHeaderTitle, setTabs]);
return ;
}
diff --git a/src/pages/dashboard/other/ask.tsx b/src/pages/dashboard/other/ask.tsx
new file mode 100644
index 0000000..e930bf9
--- /dev/null
+++ b/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 (
+
+ よくある質問
+
+
+ }>
+ 支払をしたか確認をしたい
+
+
+ 契約一覧より支払状況が確認できます。
+
+
+
+ }>
+ 解約をしたい
+
+
+ 契約一覧より解約申請をしてください
+
+
+
+ よくある質問で解決しない場合
+
+
+
+
+ );
+}
diff --git a/src/pages/dashboard/receipt/download.tsx b/src/pages/dashboard/receipt/download.tsx
new file mode 100644
index 0000000..c4ce4a7
--- /dev/null
+++ b/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({
+ defaultValues: {
+ term: "",
+ },
+ });
+
+ const term = form.watch("term");
+
+ const canDownload = useMemo(() => {
+ return term !== "";
+ }, [term]);
+
+ useEffect(() => {
+ setHeaderTitle("領収証ダウンロード");
+ setTabs(null);
+ }, [setHeaderTitle, setTabs]);
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/dashboard/user/detail.tsx b/src/pages/dashboard/user/detail.tsx
new file mode 100644
index 0000000..dadca53
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/index.ts b/src/pages/index.ts
index dddb00c..0a21e80 100644
--- a/src/pages/index.ts
+++ b/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;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index b154861..3e117ad 100644
--- a/src/routes/index.tsx
+++ b/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 (
}>
@@ -35,28 +35,6 @@ const AuthRoutes = (): RouteObject => ({
],
});
-const DashboardRoutes = (): RouteObject => {
- const children = [
- {
- path: getRoute(PageID.DASHBOARD_OVERVIEW),
- element: ,
- },
- {
- path: getRoute(PageID.DASHBOARD_CONTRACT_LIST),
- element: ,
- },
- {
- path: getRoute(PageID.DASHBOARD_CONTRACT_DETAIL),
- element: ,
- },
- ];
-
- return {
- element: ,
- 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")));
diff --git a/src/routes/path.ts b/src/routes/path.ts
index d39fbbc..2bdaa44 100644
--- a/src/routes/path.ts
+++ b/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 = {
diff --git a/src/routes/sub/dashboard.tsx b/src/routes/sub/dashboard.tsx
new file mode 100644
index 0000000..51b68c6
--- /dev/null
+++ b/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: ,
+ },
+ {
+ pageId: PageID.DASHBOARD_CONTRACT_ENTRY,
+ element: ,
+ },
+ {
+ pageId: PageID.DASHBOARD_CONTRACT_LIST,
+ element: ,
+ },
+ {
+ pageId: PageID.DASHBOARD_CONTRACT_DETAIL,
+ element: ,
+ },
+ {
+ pageId: PageID.DASHBOARD_RECEIPT_DOWNLOAD,
+ element: ,
+ },
+ {
+ pageId: PageID.DASHBOARD_USER_DETAIL,
+ element: ,
+ },
+ {
+ pageId: PageID.DASHBOARD_ASK,
+ element: ,
+ },
+ ];
+ return allChildren.map(({ pageId, ...others }) => ({
+ ...others,
+ path: getRoute(pageId),
+ }));
+ }, [authenticated]);
+
+ return {
+ element: ,
+ children: children,
+ };
+}