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

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

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

  const dynamicRoutes = useMemo(() => mapDynamicRoutes(routes), [routes])

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

  return (
    <Routes>
      {/* Protected Routes */}
      <Route path="/" element={<ProtectedRoute />}>
        {dynamicRoutes
          .filter((r) => r.routeType === 'protected')
          .map((route) => {
            const Component = route.getComponent()
            return (
              <Route
                key={route.key}
                path={route.path}
                element={
                  <PermissionGuard permissions={route.authority}>
                    <PageContainer>
                      <React.Suspense fallback={<div>Loading {route.path}...</div>}>
                        <Component />
                      </React.Suspense>
                    </PageContainer>
                  </PermissionGuard>
                }
              />
            )
          })}

        <Route path={ROUTES_ENUM.protected.home} element={<Navigate to={ROUTES_ENUM.protected.home} replace />} />
      </Route>

      {/* Public Routes */}
      {dynamicRoutes
        .filter((r) => r.routeType === 'public')
        .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>
              }
            />
          )
        })}

      {/* Not Found */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}