Kairo-Jinkendo/frontend/src/App.jsx

import { Navigate, Route, Routes, useParams } from 'react-router-dom'
import { SessionProvider, useSession } from './context/SessionContext.jsx'
import { AppLayout } from './layout/AppLayout.jsx'
import { InitiativeLayout } from './layout/InitiativeLayout.jsx'
import { AuthPanel } from './pages/AuthPanel.jsx'
import { ActionDetailPage } from './pages/ActionDetailPage.jsx'
import { InitiativeOverviewPage } from './pages/initiative/InitiativeOverviewPage.jsx'
import { InitiativePlanPage } from './pages/initiative/InitiativePlanPage.jsx'
import { InitiativeExecutionPage } from './pages/initiative/InitiativeExecutionPage.jsx'
import { ProjectDetailPage } from './pages/initiative/ProjectDetailPage.jsx'
import { InitiativeInboxPage } from './pages/initiative/InitiativeInboxPage.jsx'
import { InitiativeJourneyPage } from './pages/initiative/InitiativeJourneyPage.jsx'
import { RoadmapItemDetailPage } from './pages/initiative/RoadmapItemDetailPage.jsx'
import { VIEWS } from './registry/viewRegistry.js'
import './app.css'

function InitiativeLegacyDetailRedirect() {
  const { id } = useParams()
  return <Navigate to={`/initiatives/${id}`} replace />
}

function AppRoutes() {
  const { isAuthenticated, loading } = useSession()

  if (loading) {
    return null
  }

  if (!isAuthenticated) {
    return <AuthPanel />
  }

  const topLevelViews = VIEWS.filter((v) => v.key !== 'kairo.initiative_detail')

  return (
    <Routes>
      <Route element={<AppLayout />}>
        {topLevelViews.map((view) => (
          <Route key={view.key} path={view.path} element={<view.component />} />
        ))}
        <Route path="/initiatives/:id" element={<InitiativeLayout />}>
          <Route index element={<InitiativeOverviewPage />} />
          <Route path="plan" element={<InitiativePlanPage />} />
          <Route path="plan/items/:itemId" element={<RoadmapItemDetailPage />} />
          <Route path="execution" element={<InitiativeExecutionPage />} />
          <Route path="execution/projects/:projectId" element={<ProjectDetailPage />} />
          <Route path="inbox" element={<InitiativeInboxPage />} />
          <Route path="journey" element={<InitiativeJourneyPage />} />
          <Route path="actions/:actionId" element={<ActionDetailPage nested />} />
        </Route>
        <Route path="/initiatives/:id/detail" element={<InitiativeLegacyDetailRedirect />} />
        <Route path="/actions/:actionId" element={<ActionDetailPage />} />
        <Route path="/" element={<Navigate to="/workspace" replace />} />
        <Route path="*" element={<Navigate to="/workspace" replace />} />
      </Route>
    </Routes>
  )
}

export default function App() {
  return (
    <SessionProvider>
      <AppRoutes />
    </SessionProvider>
  )
}