added empty pages

eventmesh-dashboard-view/src/assets/icons/index.ts

@@ -1,6 +1,6 @@
 import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
-
+import FoundationIcon from '@mui/icons-material/Foundation';
 
 import { ReactComponent as EventMeshLogoIcon } from './eventmesh-logo.svg';
 import { ReactComponent as HomeIcon } from './home.svg';
@@ -18,6 +18,7 @@ import { ReactComponent as LogsIcon } from './logs.svg';
 export const Icons = {
   HomeOutlined: HomeOutlinedIcon,
   AddCircleOutlineOutlined: AddCircleOutlineOutlinedIcon,
+  Foundation: FoundationIcon,
 
 
   EventMeshLogo: EventMeshLogoIcon,

eventmesh-dashboard-view/src/components/Construction.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps, Typography } from '@mui/material'
+import { Icons } from '../assets/icons'
+import { grey } from '@mui/material/colors'
+
+interface ConstructionProps extends BoxProps {}
+
+const Construction = forwardRef<typeof Box, ConstructionProps>(
+  ({ ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexDirection: 'column',
+          color: grey[500]
+        }}>
+        <Icons.Foundation fontSize="large" />
+        <Typography paragraph>Under constraction</Typography>
+      </Box>
+    )
+  }
+)
+
+Construction.displayName = 'Construction'
+export default Construction

eventmesh-dashboard-view/src/components/Page.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+
+interface PageProps extends BoxProps {}
+
+const Page = forwardRef<typeof Box, PageProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        sx={{
+          width: 1,
+          height: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+        {children}
+      </Box>
+    )
+  }
+)
+
+Page.displayName = 'Page'
+export default Page

eventmesh-dashboard-view/src/routes/Routes.tsx

@@ -1,26 +1,39 @@
-import React from "react";
-import { useRoutes, Navigate } from "react-router-dom";
-import RootLayout from "./RootLayout";
-import Home from "./home/Home";
-import Topic from "./topic/Topic";
+import React from 'react'
+import { useRoutes, Navigate } from 'react-router-dom'
+import RootLayout from './RootLayout'
+import Home from './home/Home'
+import Topic from './topic/Topic'
+import Runtime from './runtime/Runtime'
+import Connection from './connection/Connection'
+import Message from './message/Message'
+import Security from './security/Security'
+import Users from './users/Users'
+import Logs from './logs/Logs'
+import Settings from './settings/Settings'
 
 const AppRoutes = () => {
   return useRoutes([
     {
-      path: "/",
+      path: '/',
       element: <RootLayout />,
       children: [
         {
-          path: "*",
-          element: <Navigate to="/home" replace />,
+          path: '*',
+          element: <Navigate to="/home" replace />
         },
-        { path: "", element: <Navigate to="/home" /> },
-        { path: "home", element: <Home /> },
-        { path: "topic", element: <Topic /> },
-      ],
-    },
-  ]);
+        { path: '', element: <Navigate to="/home" /> },
+        { path: 'home', element: <Home /> },
+        { path: 'runtime', element: <Runtime /> },
+        { path: 'topic', element: <Topic /> },
+        { path: 'connection', element: <Connection /> },
+        { path: 'message', element: <Message /> },
+        { path: 'security', element: <Security /> },
+        { path: 'settings', element: <Settings /> },
+        { path: 'users', element: <Users /> },
+        { path: 'logs', element: <Logs /> }
+      ]
+    }
+  ])
+}
 
-};
-
-export default AppRoutes;
+export default AppRoutes

eventmesh-dashboard-view/src/routes/connection/Connection.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Page from '../../components/Page'
+import Construction from '../../components/Construction'
+
+interface ConnectionProps extends BoxProps {}
+
+const Connection = forwardRef<typeof Box, ConnectionProps>(
+  ({ ...props }, ref) => {
+    return (
+      <Page>
+        <Construction />
+      </Page>
+    )
+  }
+)
+
+Connection.displayName = 'Connection'
+export default Connection

eventmesh-dashboard-view/src/routes/home/Home.tsx

@@ -1,11 +1,17 @@
-import React, { forwardRef } from "react";
-import { Box, BoxProps } from "@mui/material";
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Construction from '../../components/Construction'
+import Page from '../../components/Page'
 
 interface HomeProps extends BoxProps {}
 
 const Home = forwardRef<typeof Box, HomeProps>(({ ...props }, ref) => {
-  return <Box ref={ref}>Home</Box>;
-});
+  return (
+    <Page>
+      <Construction />
+    </Page>
+  )
+})
 
-Home.displayName = "Home";
-export default Home;
+Home.displayName = 'Home'
+export default Home

eventmesh-dashboard-view/src/routes/message/Message.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Page from '../../components/Page'
+import Construction from '../../components/Construction'
+
+interface MessageProps extends BoxProps {}
+
+const Message = forwardRef<typeof Box, MessageProps>(({ ...props }, ref) => {
+  return (
+    <Page ref={ref}>
+      <Construction />
+    </Page>
+  )
+})
+
+Message.displayName = 'Message'
+export default Message

eventmesh-dashboard-view/src/routes/runtime/Runtime.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Page from '../../components/Page'
+import Construction from '../../components/Construction'
+
+interface RuntimeProps extends BoxProps {}
+
+const Runtime = forwardRef<typeof Box, RuntimeProps>(({ ...props }, ref) => {
+  return (
+    <Page>
+      <Construction />
+    </Page>
+  )
+})
+
+Runtime.displayName = 'Runtime'
+export default Runtime

eventmesh-dashboard-view/src/routes/security/Security.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Page from '../../components/Page'
+import Construction from '../../components/Construction'
+
+interface SecurityProps extends BoxProps {}
+
+const Security = forwardRef<typeof Box, SecurityProps>(({ ...props }, ref) => {
+  return (
+    <Page ref={ref}>
+      <Construction />
+    </Page>
+  )
+})
+
+Security.displayName = 'Security'
+export default Security

eventmesh-dashboard-view/src/routes/settings/Settings.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Page from '../../components/Page'
+import Construction from '../../components/Construction'
+
+interface SettingsProps extends BoxProps {}
+
+const Settings = forwardRef<typeof Box, SettingsProps>(({ ...props }, ref) => {
+  return (
+    <Page ref={ref}>
+      <Construction />
+    </Page>
+  )
+})
+
+Settings.displayName = 'Settings'
+export default Settings

eventmesh-dashboard-view/src/routes/users/Users.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Page from '../../components/Page'
+import Construction from '../../components/Construction'
+
+interface UsersProps extends BoxProps {}
+
+const Users = forwardRef<typeof Box, UsersProps>(({ ...props }, ref) => {
+  return (
+    <Page ref={ref}>
+      <Construction />
+    </Page>
+  )
+})
+
+Users.displayName = 'Users'
+export default Users