feat: add default not found page and dashboard redirect

src/client/App.tsx

@@ -19,16 +19,17 @@ import { ConfigProvider, theme } from 'antd';
 import { useColorSchema } from './store/settings';
 import { StatusPage } from './pages/Status';
 import { TelemetryPage } from './pages/Telemetry';
-import { LayoutV2 } from './pages/LayoutV2';
 import { isDev } from './utils/env';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import { routeTree } from './routeTree.gen';
+import { DefaultNotFound } from './components/DefaultNotFound';
 
 const router = createRouter({
   routeTree,
   context: {
     userInfo: undefined,
   },
+  defaultNotFoundComponent: DefaultNotFound,
 });
 
 // Register the router instance for type safety
@@ -47,7 +48,7 @@ export const AppRoutes: React.FC = React.memo(() => {
   return (
     <Routes>
       {userInfo ? (
-        <Route element={isDev ? <LayoutV2 /> : <Layout />}>
+        <Route element={<Layout />}>
           <Route path="/dashboard" element={<DashboardPage />} />
           <Route path="/monitor/*" element={<MonitorPage />} />
           <Route path="/website/*" element={<WebsitePage />} />

src/client/components/Code.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Code: React.FC<React.PropsWithChildren> = React.memo((props) => {
+  return (
+    <span className="rounded-sm border border-zinc-800 bg-zinc-900 px-1 py-0.5">
+      {props.children}
+    </span>
+  );
+});
+Code.displayName = 'Code';

src/client/components/DefaultNotFound.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from './ui/button';
+import { Link, useRouterState } from '@tanstack/react-router';
+import { useTranslation } from '@i18next-toolkit/react';
+import { Card, CardContent, CardFooter, CardHeader } from './ui/card';
+import { Code } from './Code';
+
+export const DefaultNotFound: React.FC = React.memo(() => {
+  const { t } = useTranslation();
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  });
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="min-w-[320px] bg-zinc-900">
+        <CardHeader>
+          <div className="text-center">
+            <img className="m-auto h-24 w-24" src="/icon.svg" />
+          </div>
+        </CardHeader>
+        <CardContent className="text-center">
+          <div>{t('Sorry, but this page is not found')}</div>
+          <div>
+            <b>{t('Path')}</b>: <Code>{pathname}</Code>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Link className="ml-auto" to="/">
+            <Button>{t('Back to Homepage')}</Button>
+          </Link>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+});
+DefaultNotFound.displayName = 'DefaultNotFound';

src/client/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as WebsiteImport } from './routes/website'
 import { Route as RegisterImport } from './routes/register'
 import { Route as MonitorImport } from './routes/monitor'
 import { Route as LoginImport } from './routes/login'
+import { Route as DashboardImport } from './routes/dashboard'
 import { Route as IndexImport } from './routes/index'
 import { Route as WebsiteAddImport } from './routes/website/add'
 import { Route as WebsiteWebsiteIdImport } from './routes/website/$websiteId'
@@ -43,6 +44,11 @@ const LoginRoute = LoginImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const DashboardRoute = DashboardImport.update({
+  path: '/dashboard',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
@@ -76,6 +82,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/dashboard': {
+      preLoaderRoute: typeof DashboardImport
+      parentRoute: typeof rootRoute
+    }
     '/login': {
       preLoaderRoute: typeof LoginImport
       parentRoute: typeof rootRoute
@@ -115,6 +125,7 @@ declare module '@tanstack/react-router' {
 
 export const routeTree = rootRoute.addChildren([
   IndexRoute,
+  DashboardRoute,
   LoginRoute,
   MonitorRoute.addChildren([MonitorMonitorIdRoute, MonitorAddRoute]),
   RegisterRoute,

src/client/routes/dashboard.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/dashboard')({
+  beforeLoad: () => {
+    redirect({
+      to: '/',
+    });
+  },
+});

src/client/tailwind.config.ts

@@ -9,6 +9,7 @@ module.exports = {
     relative: true,
     files: [
       './index.html',
+      './App.tsx',
       './components/**/*.{js,jsx,ts,tsx}',
       './pages/**/*.{js,jsx,ts,tsx}',
       './routes/**/*.{js,jsx,ts,tsx}',