erp-platform/ui/src/routes/dynamicRouter.tsx

import React, { useMemo } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { mapDynamicRoutes, loadComponent } from './dynamicRouteLoader'
import { useDynamicRoutes } from './dynamicRoutesContext'
import ProtectedRoute from '@/components/route/ProtectedRoute'
import PermissionGuard from '@/components/route/PermissionGuard'
import PageContainer from '@/components/template/PageContainer'
import { ROUTES_ENUM } from './route.constant'
import { hasSubdomain } from '@/utils/subdomain'

export const DynamicRouter: React.FC = () => {
  const { routes, loading, error } = useDynamicRoutes()

  const dynamicRoutes = useMemo(() => mapDynamicRoutes(routes), [routes])
  const NotFoundComponent = useMemo(() => loadComponent('views/NotFound'), [])

  if (loading) return <div>Loading...</div>
  if (error) return <div>Hata: {error}</div>

  return (
    <Routes>
      <Route path="/admin/*" element={<ProtectedRoute />}>
        {dynamicRoutes
          .filter((r) => r.routeType === 'protected')
          .map((route) => {
            const Component = route.getComponent()
            return (
              <Route
                key={route.key}
                path={route.path.replace(/^\/admin\/?/, '') || '.'} // Remove /admin prefix for nested routes
                element={
                  <PermissionGuard permissions={route.authority}>
                    <PageContainer>
                      <React.Suspense fallback={<div>Loading {route.path}...</div>}>
                        <Component />
                      </React.Suspense>
                    </PageContainer>
                  </PermissionGuard>
                }
              />
            )
          })}
        <Route index element={<Navigate to={ROUTES_ENUM.protected.dashboard} replace />} />
      </Route>

      {dynamicRoutes
        .filter((r) =>
          hasSubdomain() ? r.routeType === 'authenticated' : r.routeType !== 'protected',
        )
        .map((route) => {
          const Component = route.getComponent()
          return (
            <Route
              key={route.key}
              path={route.path}
              element={
                <React.Suspense fallback={<div>Loading {route.path}...</div>}>
                  <Component />
                </React.Suspense>
              }
            />
          )
        })}

      <Route
        path="/"
        element={
          <Navigate
            to={hasSubdomain() ? ROUTES_ENUM.authenticated.login : ROUTES_ENUM.public.home}
            replace
          />
        }
      />

      <Route
        path="*"
        element={
          hasSubdomain() ? (
            <Navigate to={ROUTES_ENUM.authenticated.login} replace />
          ) : (
            <React.Suspense fallback={<div>Loading...</div>}>
              <NotFoundComponent />
            </React.Suspense>
          )
        }
      />
    </Routes>
  )
}