Presupuestador_web/client/src/Routes.tsx

import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
import { DealerLayout, DealersList, LoginPage, LogoutPage, SettingsPage, StartPage } from "./app";
import { CatalogLayout, CatalogList } from "./app/catalog";
import { DashboardPage } from "./app/dashboard";
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,
    },
  ];

  // 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>
          <QuotesList />
        </ProtectedRoute>
      ),
    },
    {
      path: "/settings",
      element: (
        <ProtectedRoute>
          <SettingsPage />
        </ProtectedRoute>
      ),
    },
    {
      path: "/logout",
      element: (
        <ProtectedRoute>
          <LogoutPage />
        </ProtectedRoute>
      ),
    },
  ];

  // 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,
  ]);

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