diff --git a/packages/frontend/src/pages/org-slug/projects/create/NewProject.tsx b/packages/frontend/src/pages/org-slug/projects/create/NewProject.tsx
index 87b0817f..b2e93ae0 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/NewProject.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/NewProject.tsx
@@ -1,4 +1,10 @@
import templates from '@/assets/templates';
+import {
+ TabWrapper,
+ TabsContent,
+ TabsList,
+ TabsTrigger,
+} from '@/components/layout/screen-wrapper/TabWrapper';
import ConnectAccount from '@/components/projects/create/ConnectAccount';
import { RepositoryList } from '@/components/projects/create/RepositoryList';
import { TemplateCard } from '@/components/projects/create/TemplateCard';
@@ -9,28 +15,46 @@ const NewProject = () => {
const { octokit, updateAuth, isAuth } = useOctokit();
return isAuth ? (
- <>
-
-
- Start with a template
-
-
- {templates.map((template) => {
- return (
-
- );
- })}
+ //
+ //
+ // Create a new project
+ //
+
+
+
+ Start with a template
+ Import a repository
+
+
+
+
+
+ Start with a template
+
+
+
+ {templates.map((template) => {
+ return (
+
+ );
+ })}
+
-
- Import a repository
-
-
-
+
+
+
+
+
+ Import a repository
+
+
+
+
+
) : (
);
diff --git a/qwrk/docs/frontend/CURRENT_ROUTING.md b/qwrk/docs/frontend/CURRENT_ROUTING.md
new file mode 100644
index 00000000..23c495a6
--- /dev/null
+++ b/qwrk/docs/frontend/CURRENT_ROUTING.md
@@ -0,0 +1,225 @@
+# Current Routing Structure
+
+This document provides an overview of the current routing implementation in the frontend package.
+The routing is currently spread across multiple files, making it difficult to follow and maintain.
+
+## Main Router Configuration
+
+The main router is defined in `src/App.tsx` using `createBrowserRouter` from React Router v6:
+
+```tsx
+// src/App.tsx
+const router = createBrowserRouter([
+ {
+ path: ':orgSlug',
+ element:
,
+ children: [
+ {
+ element:
,
+ children: [
+ {
+ path: '',
+ element:
,
+ },
+ {
+ path: 'projects',
+ children: projectsRoutesWithSearch,
+ },
+ ],
+ },
+ {
+ path: 'settings',
+ element:
,
+ },
+ {
+ path: 'projects',
+ children: projectsRoutesWithoutSearch,
+ },
+ ],
+ },
+ {
+ path: '/',
+ element:
,
+ },
+ {
+ path: '/login',
+ element:
,
+ },
+ {
+ path: '/buy-prepaid-service',
+ element:
,
+ errorElement:
Something went wrong!
,
+ },
+]);
+```
+
+The router is then provided to the application using `RouterProvider`:
+
+```tsx
+// src/App.tsx
+return (
+
+ Loading...} />
+
+);
+```
+
+## Route Definitions in Other Files
+
+The main router imports route definitions from other files:
+
+### Project Routes
+
+Project routes are split into two arrays defined in
+`src/pages/org-slug/projects/project-routes.tsx`:
+
+```tsx
+// src/pages/org-slug/projects/project-routes.tsx
+export const projectsRoutesWithoutSearch = [
+ {
+ path: 'create',
+ element:
,
+ children: createProjectRoutes,
+ },
+ {
+ path: ':id/settings/domains/add',
+ element:
,
+ children: addDomainRoutes,
+ },
+];
+
+export const projectsRoutesWithSearch = [
+ {
+ path: ':id',
+ element:
,
+ children: projectTabRoutes,
+ },
+];
+```
+
+### Create Project Routes
+
+Create project routes are defined in `src/pages/org-slug/projects/create/create-project-routes.tsx`:
+
+```tsx
+// src/pages/org-slug/projects/create/create-project-routes.tsx
+export const createProjectRoutes = [
+ {
+ index: true,
+ element:
,
+ },
+ {
+ path: 'template',
+ element:
,
+ children: templateRoutes,
+ },
+ {
+ path: 'success/:id',
+ element:
,
+ },
+ {
+ path: 'configure',
+ element:
,
+ },
+ {
+ path: 'deploy',
+ element:
,
+ },
+];
+```
+
+### Project Tab Routes
+
+Project tab routes are defined in `src/pages/org-slug/projects/id/routes.tsx`:
+
+```tsx
+// src/pages/org-slug/projects/id/routes.tsx
+export const projectTabRoutes = [
+ {
+ index: true,
+ element:
,
+ },
+ {
+ path: 'deployments',
+ element:
,
+ },
+ {
+ path: 'integrations',
+ element:
,
+ },
+ {
+ path: 'settings',
+ element:
,
+ children: settingsTabRoutes,
+ },
+];
+```
+
+### Settings Tab Routes
+
+Settings tab routes are defined in the same file:
+
+```tsx
+// src/pages/org-slug/projects/id/routes.tsx
+export const settingsTabRoutes = [
+ {
+ index: true,
+ element:
,
+ },
+ {
+ path: 'domains',
+ element:
,
+ },
+ {
+ path: 'git',
+ element:
,
+ },
+ {
+ path: 'environment-variables',
+ element:
,
+ },
+ {
+ path: 'collaborators',
+ element:
,
+ },
+];
+```
+
+## Layout Components
+
+The application uses several layout components that render the `Outlet` component from React Router
+to display nested routes:
+
+### DashboardLayout
+
+```tsx
+// src/layouts/DashboardLayout.tsx
+export const DashboardLayout = ({ className, ...props }: DashboardLayoutProps) => {
+ return (
+
+
+
+ );
+};
+```
+
+## Current Issues
+
+1. **Scattered Route Definitions**: Routes are defined across multiple files, making it difficult to
+ understand the overall routing structure.
+2. **Inconsistent Error Handling**: Only some routes have error elements defined.
+3. **No Centralized Loading State**: Loading states are handled inconsistently or not at all.
+4. **No Lazy Loading**: Components are imported directly, without using code splitting.
+5. **No Standardized 404 Handling**: There's no catch-all route for handling 404 errors.
+6. **Limited Type Safety**: Route definitions lack comprehensive TypeScript typing.
+7. **No Reusable Error Boundaries**: Error handling is ad-hoc rather than using reusable components.
+
+These issues will be addressed in the new routing strategy.
diff --git a/qwrk/docs/frontend/ROUTING.md b/qwrk/docs/frontend/ROUTING.md
new file mode 100644
index 00000000..972e1548
--- /dev/null
+++ b/qwrk/docs/frontend/ROUTING.md
@@ -0,0 +1,82 @@
+# Routing Consolidation Strategy
+
+This document serves as the main entry point for the routing consolidation strategy for the frontend
+package. The goal is to consolidate the routing into a centralized configuration while maintaining
+all existing functionality.
+
+## Table of Contents
+
+1. [Current Routing Structure](./CURRENT_ROUTING.md)
+2. [New Routing Strategy](./ROUTING_STRATEGY.md)
+3. [Implementation Plan](./ROUTING_IMPLEMENTATION.md)
+
+## Overview
+
+The current routing implementation in the frontend package is spread across multiple files, making
+it difficult to follow and maintain. The new routing strategy aims to consolidate the routing into a
+centralized configuration, while also adding support for error boundaries, loading states, lazy
+loading, and 404 handling.
+
+## Key Benefits
+
+- **Single Source of Truth**: All routes defined in a centralized location
+- **Improved Error Handling**: Consistent error boundaries for all routes
+- **Better Loading States**: Standardized loading states using the LoadingOverlay component
+- **Code Splitting**: Lazy loading of components for improved performance
+- **Graceful 404 Handling**: Dedicated NotFound component for handling non-existent routes
+- **Type Safety**: Comprehensive TypeScript typing for route definitions
+
+## Architecture Diagram
+
+```mermaid
+graph TD
+ A[App.tsx] --> B[routes/index.tsx]
+ B --> C[Route Configuration]
+ C --> D[Public Routes]
+ C --> E[Protected Routes]
+ C --> F[Catch-all Route]
+ D --> G[Lazy-loaded Components]
+ E --> H[Lazy-loaded Components]
+ G --> I[Error Boundaries]
+ H --> I
+ I --> J[Loading States]
+ style A fill:#d4f1f9,stroke:#05a4c9
+ style B fill:#d4f1f9,stroke:#05a4c9
+ style C fill:#d4f1f9,stroke:#05a4c9
+ style F fill:#ffe6cc,stroke:#d79b00
+ style I fill:#f8cecc,stroke:#b85450
+ style J fill:#d5e8d4,stroke:#82b366
+```
+
+## Implementation Summary
+
+The implementation plan is divided into the following steps:
+
+1. Create directory structure
+2. Create error boundary component
+3. Create NotFound component
+4. Create route types
+5. Create centralized route configuration
+6. Update App.tsx
+7. Update nested route files
+8. Test the implementation
+9. Refactor to use the `lazy` property (optional)
+
+For detailed information about each step, see the
+[Implementation Plan](./ROUTING_IMPLEMENTATION.md).
+
+## Getting Started
+
+To get started with the implementation, follow these steps:
+
+1. Read the [Current Routing Structure](./CURRENT_ROUTING.md) to understand the existing routing
+ implementation.
+2. Review the [New Routing Strategy](./ROUTING_STRATEGY.md) to understand the proposed changes.
+3. Follow the [Implementation Plan](./ROUTING_IMPLEMENTATION.md) to implement the changes.
+
+## Conclusion
+
+The routing consolidation strategy provides a clear path to improving the routing implementation in
+the frontend package. By centralizing the route definitions and adding support for error boundaries,
+loading states, lazy loading, and 404 handling, the routing system will be more maintainable,
+performant, and user-friendly.
diff --git a/qwrk/docs/frontend/ROUTING_IMPLEMENTATION.md b/qwrk/docs/frontend/ROUTING_IMPLEMENTATION.md
new file mode 100644
index 00000000..3a605d85
--- /dev/null
+++ b/qwrk/docs/frontend/ROUTING_IMPLEMENTATION.md
@@ -0,0 +1,441 @@
+# Routing Implementation Plan
+
+This document outlines the step-by-step implementation plan for consolidating the routing in the
+frontend package. The goal is to implement the new routing strategy without changing any existing
+functionality.
+
+## Prerequisites
+
+Before starting the implementation, verify the following dependencies:
+
+```bash
+# Check React Router version (should be v6.4+)
+yarn list react-router-dom
+```
+
+If the React Router version is below v6.4, update it:
+
+```bash
+yarn add react-router-dom@latest
+```
+
+## Implementation Steps
+
+### 1. Create Directory Structure
+
+Create the necessary directories for the new routing structure:
+
+```bash
+mkdir -p packages/frontend/src/routes
+mkdir -p packages/frontend/src/components/error
+```
+
+### 2. Create Error Boundary Component
+
+Create a reusable error boundary component:
+
+```tsx
+// packages/frontend/src/components/error/ErrorBoundary.tsx
+import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+export function ErrorBoundary() {
+ const error = useRouteError();
+ const navigate = useNavigate();
+
+ // Handle different types of errors
+ let errorMessage = 'An unexpected error occurred';
+ let statusCode = 500;
+
+ if (isRouteErrorResponse(error)) {
+ statusCode = error.status;
+ errorMessage = error.statusText || errorMessage;
+ } else if (error instanceof Error) {
+ errorMessage = error.message;
+ }
+
+ return (
+
+
Something went wrong
+
{errorMessage}
+
+
+
+
+
+ );
+}
+```
+
+### 3. Create NotFound Component
+
+Create a component for handling 404 errors:
+
+```tsx
+// packages/frontend/src/components/error/NotFound.tsx
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+export function NotFound() {
+ return (
+
+
404 - Page Not Found
+
The page you are looking for does not exist.
+
+
+ );
+}
+```
+
+### 4. Create Route Types
+
+Define TypeScript types for route objects:
+
+```tsx
+// packages/frontend/src/types/route.ts
+import { RouteObject } from 'react-router-dom';
+
+export interface AppRouteObject extends RouteObject {
+ auth?: boolean; // Whether the route requires authentication
+ title?: string; // Page title
+ children?: AppRouteObject[]; // Nested routes
+}
+```
+
+### 5. Create Route Configuration
+
+Create the centralized route configuration:
+
+```tsx
+// packages/frontend/src/routes/index.tsx
+import { createBrowserRouter, RouteObject } from 'react-router-dom';
+import { lazy, Suspense } from 'react';
+import { ErrorBoundary } from '@/components/error/ErrorBoundary';
+import { NotFound } from '@/components/error/NotFound';
+import { LoadingOverlay } from '@/components/loading/loading-overlay';
+import { AppRouteObject } from '@/types/route';
+
+// Lazy load components
+const Index = lazy(() => import('@/pages/index'));
+const AuthPage = lazy(() => import('@/pages/AuthPage'));
+const BuyPrepaidService = lazy(() => import('@/pages/BuyPrepaidService'));
+const DashboardLayout = lazy(() => import('@/layouts/DashboardLayout'));
+const ProjectSearchLayout = lazy(() => import('@/layouts/ProjectSearch'));
+const ProjectsScreen = lazy(() => import('@/pages/org-slug/ProjectsScreen'));
+const Settings = lazy(() => import('@/pages/org-slug/Settings'));
+
+// Import route definitions from existing files
+import {
+ projectsRoutesWithoutSearch,
+ projectsRoutesWithSearch,
+} from '@/pages/org-slug/projects/project-routes';
+
+// Route definitions
+const routes: AppRouteObject[] = [
+ {
+ path: ':orgSlug',
+ element: (
+
}>
+
+
+ ),
+ errorElement:
,
+ children: [
+ {
+ element: (
+
}>
+
+
+ ),
+ children: [
+ {
+ path: '',
+ element: (
+
}>
+
+
+ ),
+ },
+ {
+ path: 'projects',
+ children: projectsRoutesWithSearch,
+ },
+ ],
+ },
+ {
+ path: 'settings',
+ element: (
+
}>
+
+
+ ),
+ },
+ {
+ path: 'projects',
+ children: projectsRoutesWithoutSearch,
+ },
+ ],
+ },
+ {
+ path: '/',
+ element: (
+
}>
+
+
+ ),
+ errorElement:
,
+ },
+ {
+ path: '/login',
+ element: (
+
}>
+
+
+ ),
+ errorElement:
,
+ },
+ {
+ path: '/buy-prepaid-service',
+ element: (
+
}>
+
+
+ ),
+ errorElement:
,
+ },
+ {
+ path: '*',
+ element:
,
+ },
+];
+
+// Create and export the router
+export const router = createBrowserRouter(routes);
+```
+
+### 6. Update App.tsx
+
+Update the App.tsx file to use the centralized router:
+
+```tsx
+// packages/frontend/src/App.tsx
+import { ThemeProvider } from 'next-themes';
+import { useEffect } from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes';
+import { BASE_URL } from './utils/constants';
+
+/**
+ * Main application component.
+ * Sets up routing, authentication, and theme provider.
+ * @returns {JSX.Element} The rendered application.
+ */
+function App() {
+ // Hacky way of checking session
+ // TODO: Handle redirect backs
+
+ useEffect(() => {
+ fetch(`${BASE_URL}/auth/session`, {
+ credentials: 'include',
+ }).then(res => {
+ const path = window.location.pathname;
+ console.log(res);
+ if (res.status !== 200) {
+ localStorage.clear();
+ if (path !== '/login') {
+ window.location.pathname = '/login';
+ }
+ } else {
+ if (path === '/login') {
+ window.location.pathname = '/';
+ }
+ }
+ });
+ }, []);
+
+ return (
+
+ } />
+
+ );
+}
+
+export default App;
+```
+
+### 7. Update Nested Route Files
+
+Update the nested route files to use the new error boundary and loading overlay components. For
+example:
+
+```tsx
+// packages/frontend/src/pages/org-slug/projects/project-routes.tsx
+import { lazy, Suspense } from 'react';
+import { LoadingOverlay } from '@/components/loading/loading-overlay';
+import { ErrorBoundary } from '@/components/error/ErrorBoundary';
+
+// Lazy load components
+const CreateProjectLayout = lazy(() => import('./create/CreateProjectLayout'));
+const Id = lazy(() => import('./Id'));
+const AddDomain = lazy(() => import('./id/settings/domains/add'));
+
+// Import route definitions
+import { createProjectRoutes } from './create/create-project-routes';
+import { projectTabRoutes } from './id/routes';
+import { addDomainRoutes } from './id/settings/domains/add/routes';
+
+export const projectsRoutesWithoutSearch = [
+ {
+ path: 'create',
+ element: (
+
}>
+
+
+ ),
+ errorElement:
,
+ children: createProjectRoutes,
+ },
+ {
+ path: ':id/settings/domains/add',
+ element: (
+
}>
+
+
+ ),
+ errorElement:
,
+ children: addDomainRoutes,
+ },
+];
+
+export const projectsRoutesWithSearch = [
+ {
+ path: ':id',
+ element: (
+
}>
+
+
+ ),
+ errorElement:
,
+ children: projectTabRoutes,
+ },
+];
+```
+
+### 8. Test the Implementation
+
+Test the implementation to ensure that all routes work as expected:
+
+```bash
+# Start the development server
+yarn dev
+```
+
+Test the following scenarios:
+
+- Navigate to all existing routes
+- Test error handling by intentionally causing errors
+- Test 404 handling by navigating to non-existent routes
+- Test loading states by throttling the network in the browser developer tools
+
+### 9. Refactor to Use the `lazy` Property (Optional)
+
+Once the initial implementation is working, refactor the route definitions to use the `lazy`
+property instead of manually wrapping components in Suspense:
+
+```tsx
+// packages/frontend/src/routes/index.tsx
+import { createBrowserRouter } from 'react-router-dom';
+import { ErrorBoundary } from '@/components/error/ErrorBoundary';
+import { NotFound } from '@/components/error/NotFound';
+import { AppRouteObject } from '@/types/route';
+
+// Route definitions
+const routes: AppRouteObject[] = [
+ {
+ path: ':orgSlug',
+ lazy: () => import('@/layouts/DashboardLayout'),
+ errorElement:
,
+ children: [
+ {
+ lazy: () => import('@/layouts/ProjectSearch'),
+ children: [
+ {
+ path: '',
+ lazy: () => import('@/pages/org-slug/ProjectsScreen'),
+ },
+ {
+ path: 'projects',
+ children: projectsRoutesWithSearch,
+ },
+ ],
+ },
+ {
+ path: 'settings',
+ lazy: () => import('@/pages/org-slug/Settings'),
+ },
+ {
+ path: 'projects',
+ children: projectsRoutesWithoutSearch,
+ },
+ ],
+ },
+ {
+ path: '/',
+ lazy: () => import('@/pages/index'),
+ errorElement:
,
+ },
+ {
+ path: '/login',
+ lazy: () => import('@/pages/AuthPage'),
+ errorElement:
,
+ },
+ {
+ path: '/buy-prepaid-service',
+ lazy: () => import('@/pages/BuyPrepaidService'),
+ errorElement:
,
+ },
+ {
+ path: '*',
+ element:
,
+ },
+];
+
+// Create and export the router
+export const router = createBrowserRouter(routes);
+```
+
+## Implementation Timeline
+
+| Step | Description | Estimated Time |
+| --------- | ---------------------------------------------- | -------------- |
+| 1 | Create directory structure | 5 minutes |
+| 2 | Create error boundary component | 15 minutes |
+| 3 | Create NotFound component | 15 minutes |
+| 4 | Create route types | 10 minutes |
+| 5 | Create route configuration | 30 minutes |
+| 6 | Update App.tsx | 10 minutes |
+| 7 | Update nested route files | 30 minutes |
+| 8 | Test the implementation | 30 minutes |
+| 9 | Refactor to use the `lazy` property (optional) | 30 minutes |
+| **Total** | | **2-3 hours** |
+
+## Rollback Plan
+
+In case of issues, the implementation can be rolled back by reverting to the original App.tsx file:
+
+```bash
+# Revert App.tsx
+git checkout -- packages/frontend/src/App.tsx
+```
+
+## Future Improvements
+
+After the initial implementation, consider the following improvements:
+
+1. **Route Guards**: Implement route guards for protected routes.
+2. **Route Metadata**: Add metadata to routes for SEO and analytics.
+3. **Route Transitions**: Add transitions between routes for a smoother user experience.
+4. **Route Code Generation**: Create a script to generate route files from a configuration file.
+5. **Route Testing**: Add tests for route components and configurations.
diff --git a/qwrk/docs/frontend/ROUTING_STRATEGY.md b/qwrk/docs/frontend/ROUTING_STRATEGY.md
new file mode 100644
index 00000000..6af482ed
--- /dev/null
+++ b/qwrk/docs/frontend/ROUTING_STRATEGY.md
@@ -0,0 +1,238 @@
+# Routing Strategy
+
+This document outlines the new routing strategy for the frontend package. The goal is to consolidate
+the routing into a centralized configuration while maintaining all existing functionality.
+
+## Core Principles
+
+1. **Single Source of Truth**: All routes will be defined in a centralized location.
+2. **Type Safety**: Comprehensive TypeScript typing for route definitions.
+3. **Error Handling**: Consistent error boundaries for all routes.
+4. **Loading States**: Standardized loading states using the LoadingOverlay component.
+5. **Code Splitting**: Lazy loading of components for improved performance.
+6. **404 Handling**: Graceful handling of not found routes.
+
+## Architecture Overview
+
+```mermaid
+graph TD
+ A[App.tsx] --> B[routes/index.tsx]
+ B --> C[Route Configuration]
+ C --> D[Public Routes]
+ C --> E[Protected Routes]
+ C --> F[Catch-all Route]
+ D --> G[Lazy-loaded Components]
+ E --> H[Lazy-loaded Components]
+ G --> I[Error Boundaries]
+ H --> I
+ I --> J[Loading States]
+ style A fill:#d4f1f9,stroke:#05a4c9
+ style B fill:#d4f1f9,stroke:#05a4c9
+ style C fill:#d4f1f9,stroke:#05a4c9
+ style F fill:#ffe6cc,stroke:#d79b00
+ style I fill:#f8cecc,stroke:#b85450
+ style J fill:#d5e8d4,stroke:#82b366
+```
+
+## Centralized Route Configuration
+
+All routes will be defined in a single file: `src/routes/index.tsx`. This file will export a router
+instance created using `createBrowserRouter` from React Router v6.
+
+```tsx
+// src/routes/index.tsx
+import { createBrowserRouter, RouteObject } from 'react-router-dom';
+import { ErrorBoundary } from '@/components/error/ErrorBoundary';
+import { NotFound } from '@/components/error/NotFound';
+
+// Type definitions for route objects
+export interface AppRouteObject extends RouteObject {
+ // Additional properties for our routes
+ auth?: boolean;
+ title?: string;
+}
+
+// Route definitions
+const routes: AppRouteObject[] = [
+ // Public routes
+ {
+ path: '/',
+ element:
,
+ errorElement:
,
+ children: [
+ // Home page
+ {
+ index: true,
+ lazy: () => import('@/pages/Index'),
+ },
+ // Login page
+ {
+ path: 'login',
+ lazy: () => import('@/pages/AuthPage'),
+ },
+ // Buy prepaid service
+ {
+ path: 'buy-prepaid-service',
+ lazy: () => import('@/pages/BuyPrepaidService'),
+ },
+ // Organization routes
+ {
+ path: ':orgSlug',
+ lazy: () => import('@/layouts/DashboardLayout'),
+ children: [
+ // Organization routes...
+ ],
+ },
+ // 404 page
+ {
+ path: '*',
+ element:
,
+ },
+ ],
+ },
+];
+
+// Create and export the router
+export const router = createBrowserRouter(routes);
+```
+
+## Error Boundaries
+
+A reusable error boundary component will be created to handle errors consistently across the
+application.
+
+```tsx
+// src/components/error/ErrorBoundary.tsx
+import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+export function ErrorBoundary() {
+ const error = useRouteError();
+ const navigate = useNavigate();
+
+ // Handle different types of errors
+ let errorMessage = 'An unexpected error occurred';
+ let statusCode = 500;
+
+ if (isRouteErrorResponse(error)) {
+ statusCode = error.status;
+ errorMessage = error.statusText || errorMessage;
+ } else if (error instanceof Error) {
+ errorMessage = error.message;
+ }
+
+ return (
+
+
Something went wrong
+
{errorMessage}
+
+
+
+
+
+ );
+}
+```
+
+## Loading States
+
+The existing LoadingOverlay component will be used for loading states when lazy loading components.
+
+```tsx
+// Example of lazy loading with LoadingOverlay
+const ProjectsPage = React.lazy(() => import('@/pages/org-slug/ProjectsScreen'));
+
+// In route definition
+{
+ path: 'projects',
+ element: (
+
}>
+
+
+ ),
+}
+```
+
+## Lazy Loading
+
+Components will be lazy loaded using React.lazy and dynamic imports. This will be implemented using
+the `lazy` property of route objects in React Router v6.4+.
+
+```tsx
+// Example of lazy loading with the lazy property
+{
+ path: 'settings',
+ lazy: () => import('@/pages/org-slug/Settings'),
+}
+```
+
+The `lazy` function should return an object with either an `element` property or a `Component`
+property. For example:
+
+```tsx
+// src/pages/org-slug/Settings.tsx
+export function Component() {
+ return
;
+}
+```
+
+Or:
+
+```tsx
+// src/pages/org-slug/Settings.tsx
+export default function Settings() {
+ return
;
+}
+```
+
+## 404 Handling
+
+A dedicated NotFound component will be created to handle 404 errors gracefully.
+
+```tsx
+// src/components/error/NotFound.tsx
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+export function NotFound() {
+ return (
+
+
404 - Page Not Found
+
The page you are looking for does not exist.
+
+
+ );
+}
+```
+
+## Type Safety
+
+TypeScript types will be defined for route objects to ensure type safety and provide better
+developer experience.
+
+```tsx
+// src/types/route.ts
+import { RouteObject } from 'react-router-dom';
+
+export interface AppRouteObject extends RouteObject {
+ auth?: boolean; // Whether the route requires authentication
+ title?: string; // Page title
+ children?: AppRouteObject[]; // Nested routes
+}
+```
+
+## Benefits of the New Strategy
+
+1. **Improved Maintainability**: All routes are defined in a single location, making it easier to
+ understand and maintain the routing structure.
+2. **Better Error Handling**: Consistent error boundaries for all routes.
+3. **Improved Performance**: Lazy loading of components reduces the initial bundle size and improves
+ load times.
+4. **Better User Experience**: Standardized loading states and 404 handling.
+5. **Type Safety**: Comprehensive TypeScript typing for route definitions.
+6. **Easier Navigation**: Centralized route configuration makes it easier to navigate between routes
+ programmatically.
+7. **Better Developer Experience**: Clear structure and documentation make it easier for developers
+ to work with the routing system.