Add registrations view

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 import './App.css'
 import AddGroup from './views/coordinator/AddGroup'
 import AddStudent from './views/coordinator/AddStudent'
@@ -10,6 +10,8 @@ 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'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -26,7 +28,7 @@ function App() {
         <Routes>
           <Route index element={<Login />} />
           <Route path="coordinator" element={<Coordinator />}>
-            <Route index element={<Students />} />
+            <Route index element={<Navigate to="students" />} />
             <Route path="groups" element={<Groups />} />
             <Route path="students" element={<Students />} />
             <Route path="leaders" element={<Leaders />} />
@@ -34,6 +36,10 @@ function App() {
             <Route path="add-group" element={<AddGroup />} />
             <Route path="add-leader" element={<AddLeader />} />
           </Route>
+          <Route path="student" element={<Student />}>
+            <Route index element={<Navigate to="enrollment" />} />
+            <Route path="enrollment" element={<Enrollment />} />
+          </Route>
         </Routes>
       </QueryClientProvider>
     </div>

frontend/src/api/enrollment.ts

@@ -0,0 +1,21 @@
+import axiosInstance from './axiosInstance'
+
+export const getEnrollmentList = (
+  params: Partial<{
+    page: number
+    per_page: number
+    name: string
+  }>,
+) =>
+  axiosInstance.get<{
+    max_pages: number
+    project_supervisors: {
+      available_groups: number
+      first_name: string
+      last_name: string
+      email: string
+      mode: boolean
+    }[]
+  }>('http://127.0.0.1:5000/api/students/registrations/', {
+    params,
+  })

frontend/src/views/student/Enrollment.tsx

@@ -0,0 +1,45 @@
+import { useQuery } from 'react-query'
+import { getEnrollmentList } from '../../api/enrollment'
+
+const Enrollment = () => {
+  const { isLoading, data: enrollmentData } = useQuery(['enrollment'], () =>
+    getEnrollmentList({ per_page: 1000 }),
+  )
+  if (isLoading) {
+    return <div>Ładowanie</div>
+  }
+  return (
+    <div>
+      <div className="flex items-center"></div>
+      <h2>Opiekunowie</h2>
+      <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
+        <table className="min-w-full table table-compact">
+          <thead>
+            <tr className="bg-gray-50">
+              <th>Imię</th>
+              <th>Nazwisko</th>
+              <th>Email</th>
+              <th>Tryb</th>
+              <th>Wolne miejsca</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {enrollmentData?.data?.project_supervisors?.map(
+              ({ first_name, last_name, email, mode, available_groups }) => (
+                <tr key={email}>
+                  <td>{first_name}</td>
+                  <td>{last_name}</td>
+                  <td>{email}</td>
+                  <td>{mode ? 'stacjonarny' : 'niestacjonarny'}</td>
+                  <td>{available_groups}</td>
+                </tr>
+              ),
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default Enrollment

frontend/src/views/student/Student.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom'
+import TopBar from '../../components/TopBar'
+
+const Student = () => {
+  return (
+    <>
+      <TopBar routes={[{ name: 'Zapisy', path: '/student/enrollment' }]} />
+      <div className="m-10">
+        <Outlet />
+      </div>
+    </>
+  )
+}
+
+export default Student