Presupuestador_web/client/src/Routes.tsx

import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
import {
  DealerLayout,
  DealersList,
  ErrorPage,
  LoginPage,
  LogoutPage,
  QuoteCreate,
  QuoteEdit,
  SettingsEditor,
  SettingsLayout,
  StartPage,
} from "./app";
import { CatalogLayout, CatalogList } from "./app/catalog";
import { DashboardPage } from "./app/dashboard";
import { QuotesLayout } from "./app/quotes/layout";
import { QuotesList } from "./app/quotes/list";
import { ProtectedRoute } from "./components";

export const Routes = () => {
  // Define public routes accessible to all users
  const routesForPublic = [
    {
      path: "/",
      Component: StartPage,
    },
  ];

  const routesForErrors = [
    {
      path: "*",
      Component: ErrorPage,
    },
  ];

  // Define routes accessible only to authenticated users
  const routesForAuthenticatedOnly = [
    {
      path: "/home",
      element: (
        <ProtectedRoute>
          <DashboardPage />
        </ProtectedRoute>
      ),
    },
    {
      path: "/catalog",
      element: (
        <ProtectedRoute>
          <CatalogLayout>
            <Outlet />
          </CatalogLayout>
        </ProtectedRoute>
      ),
      children: [
        {
          index: true,
          element: <CatalogList />,
        },
      ],
    },
    {
      path: "/dealers",
      element: (
        <ProtectedRoute>
          <DealerLayout>
            <Outlet />
          </DealerLayout>
        </ProtectedRoute>
      ),
      children: [
        {
          index: true,
          element: <DealersList />,
        },
      ],
    },
    {
      path: "/quotes",
      element: (
        <ProtectedRoute>
          <QuotesLayout>
            <Outlet />
          </QuotesLayout>
        </ProtectedRoute>
      ),
      children: [
        {
          index: true,
          element: <QuotesList />,
        },
        {
          path: "add",
          element: <QuoteCreate />,
        },
        {
          path: "edit/:id",
          element: <QuoteEdit />,
        },
      ],
    },
    {
      path: "/settings",
      element: (
        <ProtectedRoute>
          <SettingsLayout>
            <Outlet />
          </SettingsLayout>
        </ProtectedRoute>
      ),
      children: [
        {
          index: true,
          element: <SettingsEditor />,
        },
      ],
    },
    {
      path: "/logout",
      element: <LogoutPage />,
    },
  ];

  // Define routes accessible only to non-authenticated users
  const routesForNotAuthenticatedOnly = [
    {
      path: "/login",
      Component: LoginPage,
    },
  ];

  // Combine and conditionally include routes based on authentication status
  const router = createBrowserRouter(
    [
      ...routesForPublic,
      ...routesForAuthenticatedOnly,
      ...routesForNotAuthenticatedOnly,
      ...routesForErrors,
    ],
    {
      //basename: "/app",
    }
  );

  // Provide the router configuration using RouterProvider
  return <RouterProvider router={router} />;
};