refactor(routing): isolate public and protected routes

src/App.tsx

@@ -5,6 +5,7 @@ import { LanguageProvider } from "./components/LanguageProvider"
 import { Toaster } from "./components/ui/toaster"
 import { Navbar } from "./components/Navbar"
 import { Sidebar } from './components/Sidebar';
+import { AppProvider } from "./context/AppContext"
 import { NotificationsProvider } from "./context/NotificationsContext"
 import { WorkspaceProvider } from "./context/WorkspaceContext"
 import Auth from "./pages/Auth"
@@ -17,8 +18,6 @@ import WorkspaceDetail from "./pages/WorkspaceDetail"
 import EditWorkspace from "./pages/WorkspaceEdit"
 import Clients from "./pages/Clients"
 import { Projects } from "./pages/Projects"
-import ProjectCreate from "./pages/ProjectCreate"
-import ProjectEdit from "./pages/ProjectEdit"
 import Tags from "./pages/Tags"
 import Reports from "./pages/Reports"
 import Timesheet from "./pages/Timesheet"
@@ -26,7 +25,10 @@ import Logs from "./pages/Logs"
 import NotificationsPage from "./pages/Notifications"
 import RateLimitPage from "./pages/RateLimit"
 import Landing from "./pages/Landing"
+import About from "./pages/About"
+import NotFound from "./pages/NotFound"
 import { isRateLimitActive } from "./lib/rateLimit"
+import { getAccessToken } from "./lib/session"
 import { AuthFlowProvider } from "./context/AuthFlowContext"
 import { LoginMobilePage } from "./pages/auth/LoginMobilePage"
 import { LoginOtpPage } from "./pages/auth/LoginOtpPage"
@@ -64,10 +66,18 @@ const AppRedirect = () => {
     return <Navigate to="/rate-limit" replace />
   }
 
-  const isAuthenticated = !!localStorage.getItem("accessToken")  
+  const isAuthenticated = !!getAccessToken()
   return isAuthenticated ? <Navigate to="/timesheet" replace /> : <Navigate to="/auth" replace />
 }
 
+const AuthenticatedRedirectGuard = () => {
+  return getAccessToken() ? <Navigate to="/timesheet" replace /> : <Outlet />
+}
+
+const AuthRequiredGuard = () => {
+  return getAccessToken() ? <Outlet /> : <Navigate to="/auth" replace />
+}
+
 const RateLimitGuard = () => {
   const location = useLocation()
 
@@ -78,27 +88,38 @@ const RateLimitGuard = () => {
   return <Outlet />
 }
 
+const AuthLayout = () => (
+  <AuthFlowProvider>
+    <Auth />
+  </AuthFlowProvider>
+)
+
+const ProtectedAppLayout = () => (
+  <AppProvider>
+    <WorkspaceProvider>
+      <NotificationsProvider>
+        <MainLayout />
+      </NotificationsProvider>
+    </WorkspaceProvider>
+  </AppProvider>
+)
+
 const router = createBrowserRouter([
+  { path: "/", element: <Landing /> },
+  { path: "/about", element: <About /> },
+  { path: "/terms", element: <Terms /> },
+  { path: "/rate-limit", element: <RateLimitPage /> },
   {
     element: <RateLimitGuard />,
     children: [
+      { path: "/app", element: <AppRedirect /> },
+      { path: "/auth/google/callback", element: <GoogleAuthCallback /> },
       {
-        element: (
+        path: "/auth",
-          <WorkspaceProvider>
+        element: <AuthenticatedRedirectGuard />,
-            <Outlet />
-          </WorkspaceProvider>
-        ),
         children: [
-          { path: "/", element: <Landing /> },
-          { path: "/app", element: <AppRedirect /> },
-          { path: "/auth/google/callback", element: <GoogleAuthCallback /> },
           {
-            path: "/auth",
+            element: <AuthLayout />,
-            element: (
-              <AuthFlowProvider>
-                <Auth />
-              </AuthFlowProvider>
-            ),
             children: [
               { index: true, element: <Navigate to="/auth/login" replace /> },
               { path: "login", element: <LoginMobilePage /> },
@@ -112,10 +133,13 @@ const router = createBrowserRouter([
               { path: "forgot-password/password", element: <ForgotPasswordPasswordPage /> },
             ],
           },
-          { path: "/terms", element: <Terms /> },
+        ],
-          { path: "/rate-limit", element: <RateLimitPage /> },
+      },
+      {
+        element: <AuthRequiredGuard />,
+        children: [
           {
-            element: <MainLayout />,
+            element: <ProtectedAppLayout />,
             children: [
               { path: "/profile", element: <Profile /> },
               { path: "/timesheet", element: <Timesheet /> },
@@ -129,23 +153,20 @@ const router = createBrowserRouter([
               { path: "/workspaces/:id/edit", element: <EditWorkspace /> },
               { path: "/clients", element: <Clients /> },
               { path: "/projects", element: <Projects /> },
-              { path: "/projects/create", element: <ProjectCreate /> },
-              { path: "/projects/:id/edit", element: <ProjectEdit /> },
             ],
           },
         ],
       },
     ],
   },
+  { path: "*", element: <NotFound /> },
 ]);
 
 function App() {
   return (
     <ThemeProvider>
       <LanguageProvider>
-        <NotificationsProvider>
+        <RouterProvider router={router} />
-          <RouterProvider router={router} />
-        </NotificationsProvider>
         <Toaster />
       </LanguageProvider>
     </ThemeProvider>

src/main.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import { AppProvider } from './context/AppContext';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <AppProvider>
+    <App />
-      <App />
-    </AppProvider>
   </React.StrictMode>
 );

src/pages/NotFound.tsx

@@ -0,0 +1,70 @@
+import { Link, useLocation } from "react-router-dom"
+import { ArrowLeft, ArrowRight, Command, Compass, Home } from "lucide-react"
+
+import { Button } from "../components/ui/button"
+import { useTranslation } from "../hooks/useTranslation"
+import { cn } from "../lib/utils"
+
+export default function NotFound() {
+  const location = useLocation()
+  const { lang, t } = useTranslation()
+  const isFa = lang === "fa"
+
+  return (
+    <div className="min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,#e0f2fe_0%,#f8fafc_36%,#eef2ff_100%)] text-slate-950 dark:bg-[radial-gradient(circle_at_top,#082f49_0%,#020617_40%,#020617_100%)] dark:text-slate-50">
+      <div className="landing-aurora pointer-events-none fixed inset-0 opacity-80" />
+      <div className="landing-hero-grid pointer-events-none fixed inset-0 opacity-70 dark:opacity-40" />
+
+      <main className="relative mx-auto flex min-h-screen max-w-5xl items-center px-4 py-12 sm:px-6 lg:px-8">
+        <div className="animate-landing-rise w-full overflow-hidden rounded-[2.5rem] border border-white/70 bg-white/80 p-6 shadow-[0_45px_110px_-48px_rgba(15,23,42,0.6)] backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/70 sm:p-10">
+          <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
+            <div className="max-w-3xl">
+              <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-cyan-200/70 bg-cyan-50/80 px-4 py-2 text-sm font-semibold text-cyan-900 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-100">
+                <Compass className="h-4 w-4" />
+                {isFa ? "مسیر پیدا نشد" : "Route not found"}
+              </div>
+              <h1 className="text-5xl font-semibold tracking-[-0.06em] text-slate-950 sm:text-7xl dark:text-white">
+                404
+              </h1>
+              <p className="mt-5 text-xl leading-9 text-slate-600 dark:text-slate-300">
+                {isFa
+                  ? "این آدرس در رابط کاربری Qlockify تعریف نشده است."
+                  : "This endpoint is not defined in the Qlockify interface."}
+              </p>
+              <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 font-mono text-sm text-slate-700 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200">
+                {location.pathname}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
+              <Button
+                asChild
+                className="h-14 rounded-full bg-slate-950 px-7 text-base text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
+              >
+                <Link to="/">
+                  <Home className="me-2 h-4 w-4" />
+                  {isFa ? "بازگشت به خانه" : "Back home"}
+                </Link>
+              </Button>
+              <Button
+                asChild
+                variant="outline"
+                className="h-14 rounded-full border-slate-200 bg-white/85 px-7 text-base text-slate-800 shadow-sm backdrop-blur hover:bg-white dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
+              >
+                <Link to="/about">
+                  <Command className="me-2 h-4 w-4" />
+                  {isFa ? "درباره Qlockify" : "About Qlockify"}
+                  {isFa ? (
+                    <ArrowLeft className="ms-2 h-4 w-4" />
+                  ) : (
+                    <ArrowRight className={cn("ms-2 h-4 w-4")} />
+                  )}
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}