LabelingSystem/web/apps/lq_label/src/app/app.tsx

import { Route, Routes } from 'react-router-dom';
import { Layout } from '../components/layout';
import {
  HomeView,
  NotFoundView,
  ProjectsView,
  ProjectDetailView,
  ProjectEditView,
  TasksView,
  AnnotationsView,
} from '../views';

/**
 * Annotation Platform Application
 * 
 * This is the main application component for the annotation platform.
 * It provides routing and integrates with Layout component for
 * backend management UI style.
 * 
 * Requirements: 4.1, 4.2, 4.8, 7.3, 7.6
 */
export function App() {
  return (
    <Layout>
      <Routes>
        {/* Home Route */}
        <Route path="/" element={<HomeView />} />

        {/* Projects Routes */}
        <Route path="/projects" element={<ProjectsView />} />
        <Route path="/projects/:id" element={<ProjectDetailView />} />
        <Route path="/projects/:id/edit" element={<ProjectEditView />} />

        {/* Tasks Routes */}
        <Route path="/tasks" element={<TasksView />} />
        {/* TODO: Add task annotation route */}
        {/* <Route path="/tasks/:id/annotate" element={<AnnotationView />} /> */}

        {/* Annotations Routes */}
        <Route path="/annotations" element={<AnnotationsView />} />

        {/* 404 Not Found */}
        <Route path="*" element={<NotFoundView />} />
      </Routes>
    </Layout>
  );
}

export default App;