system-pri/frontend/src/App.tsx

import React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { Navigate, Route, Routes } from 'react-router-dom'
import './App.css'
import 'react-big-calendar/lib/css/react-big-calendar.css'
import AddGroup from './views/coordinator/AddGroup'
import AddStudent from './views/coordinator/AddStudent'
import AddLeader from './views/coordinator/AddLeader'
import Coordinator from './views/coordinator/Coordinator'
import Groups from './views/coordinator/Groups'
import Leaders from './views/coordinator/Leaders'
import Students from './views/coordinator/Students'
import Login from './views/Login'
import Enrollment from './views/student/Enrollment'
import Student from './views/student/Student'
import Supervisor from './views/supervisor/Supervisor'
import Schedules from './views/coordinator/Schedules'
import Schedule from './views/coordinator/Schedule'
import SupervisorSchedules from './views/supervisor/SupervisorSchedules'
import StudentSchedules from './views/student/StudentSchedules'
import StudentSchedule from './views/student/StudentSchedule'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

function App() {
  return (
    <div>
      <QueryClientProvider client={queryClient}>
        <Routes>
          <Route index element={<Login />} />
          <Route path="coordinator" element={<Coordinator />}>
            <Route index element={<Navigate to="students" />} />
            <Route path="groups" element={<Groups />} />
            <Route path="students" element={<Students />} />
            <Route path="leaders" element={<Leaders />} />
            <Route path="add-student" element={<AddStudent />} />
            <Route path="add-group" element={<AddGroup />} />
            <Route path="add-leader" element={<AddLeader />} />
            <Route path="schedule" element={<Schedules />} />
            <Route path="schedule/:id" element={<Schedule />} />
          </Route>
          <Route path="student" element={<Student />}>
            <Route index element={<Navigate to="enrollment" />} />
            <Route path="enrollment" element={<Enrollment />} />
            <Route path="schedule" element={<StudentSchedules />} />
            <Route path="schedule/:id" element={<StudentSchedule />} />
          </Route>
          <Route path="supervisor" element={<Supervisor />}>
            <Route index element={<Navigate to="groups" />} />
            <Route path="groups" element={<Groups />} />
            <Route path="schedule" element={<SupervisorSchedules />} />
          </Route>
        </Routes>
      </QueryClientProvider>
    </div>
  )
}

export default App