From 7a4f3128ef2fefa9fcb4c5ccefff93028e6a4127 Mon Sep 17 00:00:00 2001
From: adam-skowronek <adasko8@st.amu.edu.pl>
Date: Fri, 13 Jan 2023 03:59:54 +0100
Subject: [PATCH] Update GradeCard, improve styles

---
 frontend/src/components/TopBar.tsx            |    2 +-
 frontend/src/utils/gradeCard.ts               |  181 +++
 frontend/src/views/GradeCard.tsx              | 1175 +++++++++++++----
 .../views/coordinator/CoordinatorGroups.tsx   |   19 +-
 frontend/src/views/coordinator/Schedules.tsx  |   30 +-
 .../coordinator/SupervisorAvailabilities.tsx  |   22 +-
 .../src/views/supervisor/SupervisorGroups.tsx |   19 +-
 .../views/supervisor/SupervisorSchedules.tsx  |   22 +-
 8 files changed, 1187 insertions(+), 283 deletions(-)
 create mode 100644 frontend/src/utils/gradeCard.ts

diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
index 1592d4f..2853c18 100644
--- a/frontend/src/components/TopBar.tsx
+++ b/frontend/src/components/TopBar.tsx
@@ -19,7 +19,7 @@ const TopBar = ({
   color: string
 }) => {
   const linkClass = ({ isActive }: { isActive: boolean }) =>
-    isActive ? 'underline font-bold' : ''
+    isActive ? 'underline font-bold' : 'hover:text-gray-600 '
 
   const [yearGroupId, setYearGroupId] = useLocalStorageState('yearGroupId', {
     defaultValue: 0,
diff --git a/frontend/src/utils/gradeCard.ts b/frontend/src/utils/gradeCard.ts
new file mode 100644
index 0000000..4fd03b0
--- /dev/null
+++ b/frontend/src/utils/gradeCard.ts
@@ -0,0 +1,181 @@
+const options = [
+  [
+    'brak prezentacji; niezgłoszona nieobecność członków zespołu',
+    'brak demo systemu; brakuje jednej z wymaganych treści',
+    'jedna z treści niedostatecznie zaprezentowana',
+    'wszystkie treści zaprezentowane poprawnie',
+  ],
+  [
+    'brak prezentacji; prezentacja zakończona przez komisję (z powodu innego niż przekroczenie czasu)',
+    'zespół prezentował w sposób nieprofesjonalny, prezentacja była nieczytelna lub trwała powyżej 20 minut; język prezentacji był nieadekwatny/niezrozumiały; brak płynności prezentacji',
+    'prezentacja zgodna ze sztuką; 12-16 minut; demonstracja systemu stanowi istotną część prezentacji',
+    'prezentacja zgodna ze sztuką, angażująca i dostosowana do odbiorców, forma prezentacji dopasowana do prezentowanych treści',
+  ],
+  [
+    'brak demonstracji',
+    'demonstracja niespójna; prezentacja kodu niezbędna w celu wyjaśnienia jej działania; brak przygotowania odpowiednich danych do prezentacji',
+    'demonstracja poprawna; demonstracja ze środowiska deweloperskiego; brak elastyczności demonstracji (w tym brak możliwości szybkiego przejścia w aplikacji do określonego stanu)',
+    'demonstracja poprawna ze środowiska zbliżonego do docelowego; odpowiednio przygotowane dane do prezentacji; dobrze określony scenariusz prezentacji; brak zbędnych przestojów w demonstracji;',
+  ],
+  [
+    'zespół nie był w stanie udzielić żadnej wiarygodnej odpowiedzi na >1 pytanie',
+    'zespół nie był wstanie udzielić wiarygodnej odpowiedzi na 1 pytanie',
+    'odpowiedzi na niektóre pytania były niewyczerpujące, ale zdowalające',
+    'zespół udzielił wyczerpującej odpowiedzi na wszystkie pytania',
+  ],
+  [
+    'brak dokumentu; dokument niezgodny z szablonem',
+    'dokument nie zawiera niektórych wymaganych informacji; przedstawione informacje są błędne/nieprawdziwe; dokument nie pozwala ocenić czy projekt ma sens i jest realizowalny; zespół nie potrafi uzasadnić przydatności projektu',
+    'jeden aspekt dokumentu nie jest wystarczająco opisany (np. projekt nie definiuje grupy docelowej/klienta)',
+    'dokument poprawny',
+  ],
+  [
+    'brak dokumentu, dokument niezgodny z szablonem; brak wymagań funkcjonalnych; brak kryteriów akceptacji projektu na oba semestry',
+    'brak weryfikowalnych kryteriów akceptacji projektu na oba semestry; dokument nie zawiera wszystkich wymaganych informacji; przedstawione informacje są błędne/nieprawdziwe; dokument nie odzwierciedla aktualnego stanu projektu; zadeklarowany zakres projektu jest zbyt mały; kryteria akceptacji są nie weryfikowalne; wskażniki wdrożeniowe są niemierzalne',
+    'dokument zaakceptowany przez prowadzącego; jeden aspekt dokumentu nie jest wystarczająco opisany; jedno kryterium akceptacji nie jest weryfikowalne; dokument w większości odzwierciedla aktualny stan projektu; zakres prac przewidziany na poszczególne semestry jest adekwatny',
+    'dokument poprawny; odzwierciedla aktualny stan projektu',
+  ],
+  [
+    'brak dokumentacji',
+    'trywialna dokumentacja nie wnosząca dodatkowej wiedzy o systemie',
+    'brak dokumentacji, jeśli takie było wymaganie projektowe/dokumentacja tego typu jest zbędna (wymaga uzasadnienia); poprawna dokumentacja nieprzedstawiona klientowi/grupie docelowej',
+    'poprawnie zredagowana i użyteczna dokumentacja przekazana klientowi/grupie docelowej systemu; dokumentacja w postaci samouczka (np. w grach komputerowych)',
+  ],
+  [
+    'brak dokumentacji',
+    'trywialna dokumentacja nie wnosząca dodatkowej wiedzy o systemie',
+    'dokumentacja użyteczna, jednak niekompletna (wyjaśnia wszystkich zasobów niezbędnych do rozpoczęcia pracy z projektem)',
+    'kompletna dokumentacja deweloperska określająca wszystkie zasoby niezbędne do rozpoczęcia pracy nad projektem/jego kontynuacji',
+  ],
+  [
+    'brak określenia licencji lub udziału członków zespołu we własności projektu',
+    'prawa własności określone w sposób niewiążący lub nieadekwatny do projektu',
+    'poprawnie określone prawa własności i licencja na projekt',
+    'poprawnie i świadomie określone prawa własności; dołożono starań, aby zapewnić możliwie szeroki dostęp open source (jeśli dotyczy); licencja narzucona przez klienta nie jest krzywdząca dla zespołu',
+  ],
+  [
+    'projekt zrealizowano w krótkim czasie poprzedzającym obronę',
+    'projekt realizowano tylko przed kamieniami milowymi; projekt realizowany niezgodnie z harmonogramem',
+    'projekt realizowany był przez cały semestr z różną równomiernością; drobne odstępstwa od harmonogramu',
+    'projekt był realizowany równomiernie przez cały semestr; wszystkie etapy projektu zrealizowane w terminie',
+  ],
+  [
+    'tylko jedna osoba w zespole wypracowała liczbę godzin przewidzianą w siatce godzin; w zespole istnieją osoby nie prowadzące prac programistycznych (w II semestrze)',
+    'przynajmniej jedna osoba w zespole nie wypracowała liczby godzin przewidzianej w siatkach godzin',
+    'jedna osoba w zespole ma wyraźnie większy wkład w projekt, ale wszyscy spełniają minimalne kryteria; w zespole istnieją osoby nie prowadzące prac programistycznych (w I semestrze)',
+    'wkład wszystkich członków zespołu jest porównywalny',
+  ],
+  [
+    'brak klienta, brak określonej grupy docelowej',
+    'brak regularnego kontaktu z klientem/grupą docelową',
+    'projekt realizowany we współpracy z klientem/grupą docelową (minimum 1 spotkanie w miesiącu), klient zaangażowany w testy akceptacyjne/użyteczności',
+    'klient/grupa docelowa aktywnie zaangażowana w określenie wymagań oraz rozwój oprogramowania; ciągły kontakt z klientem',
+  ],
+  [
+    'brak śledzenia zmian w zakresie projektu',
+    'zakres projektu statyczny; dominują modyfikacje zakresu wynikające z błędów w harmonogramie lub możliwości technicznych; zespół nie aktualizuje dokumentów projektowych',
+    'zespół próbuje reagować z wyprzedzeniem na zmiany i nowe ryzyka, nawet w przypadku braku akceptacji ze strony klienta/grupy docelowej/prowadzącego',
+    'zespół elastycznie reaguje na zmiany i nowe ryzyka, w kontakcie z klientem oraz prowadzącym dokonuje istotnych zmian w zakresie projektu w celu dostarczenia optymalnego rozwiązania',
+  ],
+  [
+    'brak metodyki; realizacja metodyki zawieszana okresowo; nie wszystkie osoby w zespole podporządkowują się metodyce; brak narzędzi wspierających (np. Jira)',
+    'przyjęta metodyka nie została poprawnie zdefiniowana lub nie ma cech z manifestu Agile; zespół pracuje częściowo w wybranej metodyce; dobrane narzędzia wspierające są nieadekwatne',
+    'zespół pracuje zgodnie z metodyką, realizując jej najważniejsze założenia; wykorzystanie narzędzi wspierających jest tylko częściowe i nie pozwala na zarządzanie całością prac w projekcie',
+    'wybrana metodyka pracy wspierana przez narzędzia informatyczne pozwala na skuteczną kontrolę systematyczności i stanu wykonania zadań w projekcie, reagowanie na zmiany w projekcie, kontrolę czasu spędzonego nad wykonaniem zadań projektowych, planowanie i harmonogramowanie prac, kontrolę jakości tworzonego rozwiązania',
+  ],
+  [
+    'brak repozytorium kodu; wymiana kodu poza repozytorium (np. przez email)',
+    'część zespołu korzysta z repozytorium kodu; kod w repozytorium nie odzwierciedla aktualnego stanu projektu',
+    'regularność pracy i równomierne rozłożenie commitów pomiędzy członków zespołu oraz w czasie; zawsze istnieje działająca wersja systemu w repozytorium',
+    'regularność pracy i równomierne rozłożenie commitów pomiędzy członków zespołu oraz w czasie; korzystanie z code review; rozsądne zarządzanie branchami (lub pochodnymi)',
+  ],
+  [
+    'system wydany/wdrożony tylko na potrzeby prezentacji lub wcale',
+    'więcej niż jedno wydanie w semestrze, brak automatyzacji',
+    'regularne wydania/wdrożenia, tylko część procesów jest zautomatyzowana',
+    'projekt realizowany zgodnie z modelem DevOps: ciągła integracja, regularne wydania, automatyzacja wdrożenia',
+  ],
+  [
+    'projekt mało złożony zarówno technicznie, jak i funkcjonalnie; projekt mogłaby zrealizować jedna osoba w ciągu trwania przedmiotu; niska jakość produktu projektu pomimo jego małego rozmiaru',
+    'projekt mało złożony zarówno technicznie, jak i funkcjonalnie, ale akceptowalny dla zespołu mniejszego o jedną osobę; projekt zbyt rozbudowany jak na projekt inżynierski (niewykonalny); projekt za 3 punkty ale niskiej jakości',
+    'projekt mało złożony funkcjonalnie względem rozmiaru grupy, ale obejmuje kilka różnych platform/warstw (przynajmniej 1 na osobę); projekt za 1 punkt ale wysokiej jakości; projekt za 4 punty ale niskiej jakości',
+    'złożoność odpowiednia dla zespołu; projekt za 3 punkty ale wysokiej jakości',
+  ],
+  [
+    'brak dostępu/system nie działa u członków komisji',
+    'zapewniono dostęp do systemu; komisja wykryła istotne błędy w systemie',
+    'dostęp ograniczony do urządzeń zapewnionych przez zespół; brak istotnych błędów wykrytych przez komisję',
+    'dostęp na urządzeniach komisji (jeśli taka możliwość wynika z charakteru projektu); brak błędów wykrytych przez komisję',
+  ],
+  [
+    'brak dostępu do systemu dla komisji; istotne uchybienia w zakresie bezpieczeństwa (np. brak kontroli dostępu, niezgodne ze sztuką zabezpieczenie haseł, SQL Injection); błędy uniemożliwiające korzystanie z systemu (kluczowa funkcjonalność systemu nie działa)',
+    'brak walidacji danych; błędy istotnie utrudniające korzystanie z systemu (np. brak responsywności systemu); brak HTTPS (jeśli dotyczy)',
+    'system nie jest odporny na ataki złośliwego użytkownika; występuje okresowa nieresponsywność systemu',
+    'brak wykrytych błędów krytycznych',
+  ],
+  [
+    'brak dostępu/system nie działa u członków komisji',
+    'zapewniono dostęp do systemu; komisja wykryła istotne błędy w systemie',
+    'brak istotnych błędów wykrytych przez komisję; zapewnienie dostępu do systemu nie jest możliwe (np: projekt obejmuje urządzenie fizyczne; zgoda wymaga akceptacji komisji)',
+    'brak błędów wykrytych przez komisję; wysoka responsywność oraz dostępnosć systemu;',
+  ],
+  [
+    'niespełniono wymaganych kryteriów akceptacji',
+    'spełniono wymagane kryteria akceptacji, ale nie spełniono kryteriów oczekiwanych',
+    'spełniono oczekiwane kryteria akceptacji',
+    'spełniono wszystkie zadeklarowane kryteria akceptacji (w tym planowane)',
+  ],
+  [
+    'brakuje istotnych funkcjonalności; nie zrealizowano przynajmniej połowy założonych funkcjonalności',
+    'brakuje istotnych funkcjonalności',
+    'zrealizowano wszystkie kluczowe funkcjonalności, oraz przynajmniej 85% pozostałych',
+    'zrealizowano wszystkie założone funkcjonalności',
+  ],
+  [
+    'zespół nie potrafi uzasadnić przydatności projektu; zespół projektowy nie daje gwarancji realizacji kluczowych części projektu w czasie trwania przedmiotu; projekt nie daje możliwości zaliczenia PRI',
+    'istnieją uzasadnione obawy co do tego, czy projekt ma szanse zostać zrealizowany w czasie trwania przedmiotu; przedstawiony zakres projektu jest bardzo mały i wymaga rozszerzenia',
+    'kierunek rozwoju projektu nie odpowiada oczekiwaniom i wymaganiom przedmiotu, ale jest spójny',
+    'projekt rokuje na dalszy rozwój po zakończeniu przedmiotu; zespół jest gwarantem zakończenia projektu w czasie; rozmiar całości projektu jest adekwatny do wymagań',
+  ],
+  [
+    'projekt nie nadaje się do wdrożenia',
+    'projekt nie został wdrożony; nie spełniono przynajmniej jednego wskaźnika wdrożeniowego ',
+    'projekt wdrożony bez sukcesu (brak rzeczywistych użytkowników); spełnienie wszystkich wskaźników wdrożeniowych; wartości niektórych wskaźników nie są obiektywnie weryfikowalne',
+    'projekt wdrożony z sukcesem (rzeczywiści użytkownicy); spełnienie wszystkich wskaźników wdrożeniowych; wartości wszystkich wskaźników są obiektywnie weryfikowalne',
+  ],
+  [
+    'system nie przydatny dla grupy docelowej; brak użyteczności interfejsu oraz jej testów',
+    'niska przydatność dla grupy docelowej; brak użyteczności interfejsu stwierdzona na obronie mimo przeprowadzenia testów przez zespół; średnia użyteczność interfejsu i brak testów użyteczności',
+    'dobra użyteczność systemu przy braku testów; interfejs zgodny z przyjętymi standardami',
+    'dobra użyteczność lub wiarygodne testy użyteczności (w tym raporty z testów); projekt rozwiązuje rzeczywiste problemy grupy docelowej',
+  ],
+  [
+    'brak prototypu',
+    'prototyp nieprzydatny, niezgodny ze specyfiką projektu, nieodpowiadający zaprezentowanemu projektowi',
+    'prototyp stworzony na własne potrzeby; częściowo wykorzystany przy tworzeniu docelowego interfejsu systemu',
+    'prototyp adekwatny do projektu, skonsultowany pozytywnie z klientem/grupą docelową i wykorzystany przy tworzeniu docelowego interfejsu systemu',
+  ],
+  [
+    'nie przeprowadzono żadnych wiarygodnych testów; brak raportów z testów',
+    'przetestowano co najwyżej jeden obszar; przygotowane raporty z testów; przykładowo same testy jednostkowe lub same testy akceptacyjne',
+    'przetestowano trzy obszary; przygotowane raporty z testów; niektóre z przeprowadzonych testów nie były w pełni zautomatyzowane; przykładowo testy akceptacyjne, jednostowe oraz analiza statyczna jakości kodu',
+    'przetestowano różnorodne obszary z wykorzystaniem mechanizmów automartyzacji testów; przygotowana pełna dokumentacja potestowa; przykładowo testy jednostkowe, akceptacyjne i obciążeniowe',
+  ],
+  [
+    'brak widocznej organizacji kodu; brak przemyślanej architektury systemu',
+    'architektura nieadekwatna do problemu; niestosowny dobór technologii i narzędzi',
+    'architektura poprawna, lecz nieudokumentowana; popełniono pewne błędy w projektowaniu oprogramowania',
+    'architektura poprawna i udokumentowana; odpowiadająca docelowemu obciążeniu systemu',
+  ],
+]
+
+const grades = ['0', '1', '3', '4']
+
+export const gradeOptions = options.map((optionsArray) => {
+  return optionsArray.map((o, index) => {
+    return {
+      value: grades[index],
+      label: o,
+    }
+  })
+})
diff --git a/frontend/src/views/GradeCard.tsx b/frontend/src/views/GradeCard.tsx
index dedde77..52d2d17 100644
--- a/frontend/src/views/GradeCard.tsx
+++ b/frontend/src/views/GradeCard.tsx
@@ -1,16 +1,19 @@
-import { useForm } from 'react-hook-form'
+import { useEffect } from 'react'
+import { useForm, Controller } from 'react-hook-form'
 import { useMutation, useQuery } from 'react-query'
 import { useParams } from 'react-router-dom'
+import ReactSelect from 'react-select'
 import useLocalStorageState from 'use-local-storage-state'
 import {
   getGradesForSupervisor,
   updateGradesFirstTerm,
   updateGradesSecondTerm,
 } from '../api/grades'
-import styles from './GradeCard.module.css' // Import css modules stylesheet as styles
+import { gradeOptions } from '../utils/gradeCard'
+import styles from './GradeCard.module.css'
 
 const GradeCard = () => {
-  const { register, handleSubmit, setValue } = useForm()
+  const { register, handleSubmit, setValue, control, formState } = useForm()
   const { id } = useParams<{ id: string }>()
   const [supervisorId] = useLocalStorageState('userId')
 
@@ -61,6 +64,82 @@ const GradeCard = () => {
     mutateGradesFirstTerm(firstTermGrades)
     mutateGradesSecondTerm(secondTermGrades)
   }
+  // const data = useWatch(getValues())
+
+  useEffect(() => {
+    console.log(formState)
+  }, [formState])
+
+  const gradeColor: { [key: number]: string } = {
+    0: '#f8696b',
+    1: 'orange',
+    3: '#9cec9c',
+    4: '#63BE7B',
+  }
+
+  // const CustomSelect = ({
+  //   options,
+  //   onChange,
+  //   value,
+  // }: {
+  //   value: number
+  //   options: {
+  //     value: string
+  //     label: string
+  //   }[]
+  //   onChange: (...event: any[]) => void
+  // }) => {
+  //   return (
+  //     <ReactSelect
+  //       closeMenuOnSelect={true}
+  //       options={options}
+  //       placeholder={options.find((v) => Number(v.value) === value)?.label}
+  //       onChange={(val) => onChange(val?.value)}
+  //       styles={{
+  //         control: (styles) => ({
+  //           ...styles,
+  //           padding: '0.3rem',
+  //           borderRadius: '0.5rem',
+  //           width: '300px',
+  //           borderColor: gradeColor[value],
+  //           borderWidth: 3,
+  //         }),
+  //         singleValue: (styles) => ({
+  //           ...styles,
+  //           overflow: 'visible',
+  //           textOverflow: 'initial',
+  //           whiteSpace: 'initial',
+  //         }),
+  //         placeholder: (styles) => ({
+  //           ...styles,
+  //           color: 'black',
+  //         }),
+  //       }}
+  //     />
+  //   )
+  // }
+  const getStyles = (value: number) => {
+    return {
+      control: (styles: any) => ({
+        ...styles,
+        padding: '0.3rem',
+        borderRadius: '0.5rem',
+        width: '300px',
+        borderColor: gradeColor[value],
+        borderWidth: 3,
+      }),
+      singleValue: (styles: any) => ({
+        ...styles,
+        overflow: 'visible',
+        textOverflow: 'initial',
+        whiteSpace: 'initial',
+      }),
+      placeholder: (styles: any) => ({
+        ...styles,
+        color: 'black',
+      }),
+    }
+  }
 
   return (
     <div className={styles['grade-table']}>
@@ -74,10 +153,8 @@ const GradeCard = () => {
               <th>Kryterium</th>
               <th>Waga I semestr</th>
               <th>Waga II semestr</th>
-              <th>Punkty I semestr [0,1,3,4]</th>
-              <th>Punkty II semestr [0,1,3,4]</th>
-              <th>Udział I</th>
-              <th>Udział II</th>
+              <th>Punkty I semestr</th>
+              <th>Punkty II semestr</th>
             </tr>
           </thead>
           <tbody>
@@ -89,8 +166,6 @@ const GradeCard = () => {
               <td>1,5</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
             </tr>
             <tr>
               <td>
@@ -103,19 +178,41 @@ const GradeCard = () => {
               <td>3</td>
               <td>1</td>
               <td>
-                <input
-                  type="text"
-                  {...register('presentation_required_content_1', {})}
+                <Controller
+                  control={control}
+                  name="presentation_required_content_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[0]}
+                      placeholder={
+                        gradeOptions[0].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('presentation_required_content_2', {})}
+                <Controller
+                  control={control}
+                  name="presentation_required_content_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[0]}
+                      placeholder={
+                        gradeOptions[0].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>3,5%</td>
-              <td>1,2%</td>
             </tr>
             <tr>
               <td>
@@ -126,19 +223,41 @@ const GradeCard = () => {
               <td>4</td>
               <td>4</td>
               <td>
-                <input
-                  type="text"
-                  {...register('presentation_was_compatible_1', {})}
+                <Controller
+                  control={control}
+                  name="presentation_was_compatible_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[1]}
+                      placeholder={
+                        gradeOptions[1].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('presentation_was_compatible_2', {})}
+                <Controller
+                  control={control}
+                  name="presentation_was_compatible_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[1]}
+                      placeholder={
+                        gradeOptions[1].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>4,6%</td>
-              <td>4,6%</td>
             </tr>
             <tr>
               <td>
@@ -147,19 +266,41 @@ const GradeCard = () => {
               <td>4</td>
               <td>6</td>
               <td>
-                <input
-                  type="text"
-                  {...register('presentation_showing_1', {})}
+                <Controller
+                  control={control}
+                  name="presentation_showing_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[2]}
+                      placeholder={
+                        gradeOptions[2].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('presentation_showing_2', {})}
+                <Controller
+                  control={control}
+                  name="presentation_showing_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[2]}
+                      placeholder={
+                        gradeOptions[2].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>4,6%</td>
-              <td>6,9%</td>
             </tr>
             <tr>
               <td>
@@ -169,25 +310,41 @@ const GradeCard = () => {
               <td>2</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register(
-                    'presentation_answers_to_questions_from_committee_1',
-                    {},
+                <Controller
+                  control={control}
+                  name="presentation_answers_to_questions_from_committee_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[3]}
+                      placeholder={
+                        gradeOptions[3].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
                   )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register(
-                    'presentation_answers_to_questions_from_committee_2',
-                    {},
+                <Controller
+                  control={control}
+                  name="presentation_answers_to_questions_from_committee_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[3]}
+                      placeholder={
+                        gradeOptions[3].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
                   )}
                 />
               </td>
-              <td>2,3%</td>
-              <td>2,3%</td>
             </tr>
             {/*  */}
             <tr>
@@ -199,151 +356,304 @@ const GradeCard = () => {
               <td>1</td>
               <td></td>
               <td></td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
             </tr>
             <tr>
               <td>Dokument wizji projektu *</td>
               <td>3</td>
               <td>0</td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_project_vision_1', {})}
+                <Controller
+                  control={control}
+                  name="documentation_project_vision_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[4]}
+                      placeholder={
+                        gradeOptions[4].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_project_vision_2', {})}
+                <Controller
+                  control={control}
+                  name="documentation_project_vision_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[4]}
+                      placeholder={
+                        gradeOptions[4].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>7,5%</td>
-              <td>0,0%</td>
             </tr>
             <tr>
               <td>Dokument wymagań projektowych *</td>
               <td>3</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_requirements_1', {})}
+                <Controller
+                  control={control}
+                  name="documentation_requirements_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[5]}
+                      placeholder={
+                        gradeOptions[5].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_requirements_2', {})}
+                <Controller
+                  control={control}
+                  name="documentation_requirements_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[5]}
+                      placeholder={
+                        gradeOptions[5].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>7,5%</td>
-              <td>2,9%</td>
             </tr>
             <tr>
               <td>Dokumentacja dla klienta/grupy docelowej/użytkownika</td>
               <td>0</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_for_clients_1', {})}
+                <Controller
+                  control={control}
+                  name="documentation_for_clients_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[6]}
+                      placeholder={
+                        gradeOptions[6].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_for_clients_2', {})}
+                <Controller
+                  control={control}
+                  name="documentation_for_clients_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[6]}
+                      placeholder={
+                        gradeOptions[6].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>0,0%</td>
-              <td>2,9%</td>
             </tr>
             <tr>
               <td>Dokumentacja deweloperska</td>
               <td>1</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_for_developers_1', {})}
+                <Controller
+                  control={control}
+                  name="documentation_for_developers_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[7]}
+                      placeholder={
+                        gradeOptions[7].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_for_developers_2', {})}
+                <Controller
+                  control={control}
+                  name="documentation_for_developers_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[7]}
+                      placeholder={
+                        gradeOptions[7].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>2,5%</td>
-              <td>2,9%</td>
             </tr>
             <tr>
               <td>Licencja i podział praw własności</td>
               <td>1</td>
               <td>1</td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_license_1', {})}
+                <Controller
+                  control={control}
+                  name="documentation_license_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[8]}
+                      placeholder={
+                        gradeOptions[8].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('documentation_license_2', {})}
+                <Controller
+                  control={control}
+                  name="documentation_license_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[8]}
+                      placeholder={
+                        gradeOptions[8].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>2,5%</td>
-              <td>1,4%</td>
             </tr>
             {/*  */}
             <tr>
-              <td>Praca grupy w semestrze</td>
+              <td>
+                {' '}
+                <h3 className="text-xl font-bold">Praca grupy w semestrze</h3>
+              </td>
               <td>3</td>
               <td>3</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
             </tr>
             <tr>
               <td>Systematyczność pracy w semestrze *</td>
               <td>5</td>
               <td>5</td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_regularity_1', {})}
+                <Controller
+                  control={control}
+                  name="group_work_regularity_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[9]}
+                      placeholder={
+                        gradeOptions[9].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_regularity_2', {})}
+                <Controller
+                  control={control}
+                  name="group_work_regularity_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[9]}
+                      placeholder={
+                        gradeOptions[9].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>7,9%</td>
-              <td>6,5%</td>
             </tr>
             <tr>
               <td>Podział prac w semestrze * (obowiązkowe w II sem)</td>
               <td>3</td>
               <td>3</td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_division_of_work_1', {})}
+                <Controller
+                  control={control}
+                  name="group_work_division_of_work_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[10]}
+                      placeholder={
+                        gradeOptions[10].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_division_of_work_2', {})}
+                <Controller
+                  control={control}
+                  name="group_work_division_of_work_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[10]}
+                      placeholder={
+                        gradeOptions[10].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>4,7%</td>
-              <td>3,9%</td>
             </tr>
             <tr>
               <td>
@@ -352,99 +662,216 @@ const GradeCard = () => {
               <td>4</td>
               <td>4</td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_contact_with_client_1', {})}
+                <Controller
+                  control={control}
+                  name="group_work_contact_with_client_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[11]}
+                      placeholder={
+                        gradeOptions[11].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_contact_with_client_2', {})}
+                <Controller
+                  control={control}
+                  name="group_work_contact_with_client_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[11]}
+                      placeholder={
+                        gradeOptions[11].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>6,3%</td>
-              <td>5,2%</td>
             </tr>
             <tr>
               <td>Zarządzanie ryzykiem i zakresem projektu</td>
               <td>2</td>
               <td>3</td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_management_of_risk_1', {})}
+                <Controller
+                  control={control}
+                  name="group_work_management_of_risk_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[12]}
+                      placeholder={
+                        gradeOptions[12].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_management_of_risk_2', {})}
+                <Controller
+                  control={control}
+                  name="group_work_management_of_risk_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[12]}
+                      placeholder={
+                        gradeOptions[12].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>3,2%</td>
-              <td>3,9%</td>
             </tr>
             <tr>
               <td>Metodyka pracy i narzędzia ją wspierające *</td>
               <td>3</td>
               <td>3</td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_work_methodology_1', {})}
+                <Controller
+                  control={control}
+                  name="group_work_work_methodology_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[13]}
+                      placeholder={
+                        gradeOptions[13].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_work_methodology_2', {})}
+                <Controller
+                  control={control}
+                  name="group_work_work_methodology_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[13]}
+                      placeholder={
+                        gradeOptions[13].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>4,7%</td>
-              <td>3,9%</td>
             </tr>
             <tr>
               <td>Zarządzanie kodem źródłowym *</td>
               <td>2</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_management_of_source_code_1', {})}
+                <Controller
+                  control={control}
+                  name="group_work_management_of_source_code_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[14]}
+                      placeholder={
+                        gradeOptions[14].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('group_work_management_of_source_code_2', {})}
+                <Controller
+                  control={control}
+                  name="group_work_management_of_source_code_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[14]}
+                      placeholder={
+                        gradeOptions[14].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>3,2%</td>
-              <td>2,6%</td>
             </tr>
             <tr>
               <td>DevOps</td>
               <td>0</td>
               <td>3</td>
               <td>
-                <input type="text" {...register('group_work_devops_1', {})} />
+                <Controller
+                  control={control}
+                  name="group_work_devops_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[15]}
+                      placeholder={
+                        gradeOptions[15].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
+                />
               </td>
               <td>
-                <input type="text" {...register('group_work_devops_2', {})} />
+                <Controller
+                  control={control}
+                  name="group_work_devops_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[15]}
+                      placeholder={
+                        gradeOptions[15].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
+                />{' '}
               </td>
-              <td>0,0%</td>
-              <td>3,9%</td>
             </tr>
             {/*  */}
             <tr>
-              <td>Produkty projektu</td>
+              <td>
+                {' '}
+                <h3 className="text-xl font-bold">Produkty projektu</h3>
+              </td>
               <td>3,5</td>
               <td>4,5</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
             </tr>
             <tr>
               <td>
@@ -454,19 +881,41 @@ const GradeCard = () => {
               <td>3</td>
               <td>5</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_complexity_of_product_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_complexity_of_product_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[16]}
+                      placeholder={
+                        gradeOptions[16].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_complexity_of_product_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_complexity_of_product_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[16]}
+                      placeholder={
+                        gradeOptions[16].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>4,8%</td>
-              <td>6,6%</td>
             </tr>
             <tr>
               <td>
@@ -477,19 +926,41 @@ const GradeCard = () => {
               <td>1</td>
               <td>1</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_access_to_application_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_access_to_application_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[17]}
+                      placeholder={
+                        gradeOptions[17].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_access_to_application_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_access_to_application_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[17]}
+                      placeholder={
+                        gradeOptions[17].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>1,6%</td>
-              <td>1,3%</td>
             </tr>
             <tr>
               <td>
@@ -500,19 +971,41 @@ const GradeCard = () => {
               <td>0</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_security_issues_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_security_issues_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[18]}
+                      placeholder={
+                        gradeOptions[18].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_security_issues_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_security_issues_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[18]}
+                      placeholder={
+                        gradeOptions[18].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>0,0%</td>
-              <td>2,6%</td>
             </tr>
             <tr>
               <td>
@@ -522,44 +1015,82 @@ const GradeCard = () => {
               <td>0</td>
               <td>5</td>
               <td>
-                <input
-                  type="text"
-                  {...register(
-                    'products_project_access_to_test_application_1',
-                    {},
+                <Controller
+                  control={control}
+                  name="products_project_access_to_test_application_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[19]}
+                      placeholder={
+                        gradeOptions[19].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
                   )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register(
-                    'products_project_access_to_test_application_2',
-                    {},
+                <Controller
+                  control={control}
+                  name="products_project_access_to_test_application_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[19]}
+                      placeholder={
+                        gradeOptions[19].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
                   )}
                 />
               </td>
-              <td>0,0%</td>
-              <td>6,6%</td>
             </tr>
             <tr>
               <td>Spełnienie kryteriów akceptacji *</td>
               <td>5</td>
               <td>5</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_acceptance_criteria_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_acceptance_criteria_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[20]}
+                      placeholder={
+                        gradeOptions[20].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_acceptance_criteria_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_acceptance_criteria_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[20]}
+                      placeholder={
+                        gradeOptions[20].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>8,0%</td>
-              <td>6,6%</td>
             </tr>
             <tr>
               <td>
@@ -569,57 +1100,123 @@ const GradeCard = () => {
               <td>2</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_expected_functionality_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_expected_functionality_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[21]}
+                      placeholder={
+                        gradeOptions[21].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_expected_functionality_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_expected_functionality_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[21]}
+                      placeholder={
+                        gradeOptions[21].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>3,2%</td>
-              <td>2,6%</td>
             </tr>
             <tr>
               <td>Czy projekt dobrze rokuje?</td>
               <td>5</td>
               <td>0</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_promises_well_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_promises_well_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[22]}
+                      placeholder={
+                        gradeOptions[22].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_promises_well_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_promises_well_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[22]}
+                      placeholder={
+                        gradeOptions[22].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>8,0%</td>
-              <td>0,0%</td>
             </tr>
             <tr>
               <td>Czy projekt został wdrożony?</td>
               <td>0</td>
               <td>3</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_has_been_implemented_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_has_been_implemented_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[23]}
+                      placeholder={
+                        gradeOptions[23].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_has_been_implemented_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_has_been_implemented_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[23]}
+                      placeholder={
+                        gradeOptions[23].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>0,0%</td>
-              <td>4,0%</td>
             </tr>
             <tr>
               <td>
@@ -629,38 +1226,82 @@ const GradeCard = () => {
               <td>3</td>
               <td>5</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_is_useful_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_is_useful_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[24]}
+                      placeholder={
+                        gradeOptions[24].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_is_useful_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_is_useful_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[24]}
+                      placeholder={
+                        gradeOptions[24].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>4,8%</td>
-              <td>6,6%</td>
             </tr>
             <tr>
               <td>Czy przygotowano prototyp projektu zgodnie ze sztuką? *</td>
               <td>2</td>
               <td>0</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_prototype_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_prototype_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[25]}
+                      placeholder={
+                        gradeOptions[25].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_prototype_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_prototype_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[25]}
+                      placeholder={
+                        gradeOptions[25].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>3,2%</td>
-              <td>0,0%</td>
             </tr>
             <tr>
               <td>
@@ -672,19 +1313,41 @@ const GradeCard = () => {
               <td>0</td>
               <td>4</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_tests_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_tests_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[26]}
+                      placeholder={
+                        gradeOptions[26].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_tests_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_tests_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[26]}
+                      placeholder={
+                        gradeOptions[26].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>0,0%</td>
-              <td>5,3%</td>
             </tr>
             <tr>
               <td>
@@ -694,19 +1357,41 @@ const GradeCard = () => {
               <td>1</td>
               <td>2</td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_technology_1', {})}
+                <Controller
+                  control={control}
+                  name="products_project_technology_1"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[27]}
+                      placeholder={
+                        gradeOptions[27].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
               <td>
-                <input
-                  type="text"
-                  {...register('products_project_technology_2', {})}
+                <Controller
+                  control={control}
+                  name="products_project_technology_2"
+                  render={({ field: { onChange, value } }) => (
+                    <ReactSelect
+                      options={gradeOptions[27]}
+                      placeholder={
+                        gradeOptions[27].find((v) => Number(v.value) === value)
+                          ?.label
+                      }
+                      closeMenuOnSelect={true}
+                      onChange={(val) => onChange(val?.value)}
+                      styles={getStyles(value)}
+                    />
+                  )}
                 />
               </td>
-              <td>1,6%</td>
-              <td>2,6%</td>
             </tr>
           </tbody>
         </table>
diff --git a/frontend/src/views/coordinator/CoordinatorGroups.tsx b/frontend/src/views/coordinator/CoordinatorGroups.tsx
index b422461..802fe8c 100644
--- a/frontend/src/views/coordinator/CoordinatorGroups.tsx
+++ b/frontend/src/views/coordinator/CoordinatorGroups.tsx
@@ -123,9 +123,22 @@ const Groups = () => {
                   <td>{points_for_first_term}</td>
                   <td>{points_for_second_term}</td>
                   <td>
-                    <button onClick={() => mutateDelete(id)}>
-                      <IconRemove />
-                    </button>
+                    <div className="flex align-center gap-2">
+                      <Link
+                        to={`/${
+                          location.pathname.includes('coordinator')
+                            ? 'coordinator'
+                            : 'supervisor'
+                        }/groups/${id}/grade-card`}
+                      >
+                        <button className="btn btn-xs btn-success ">
+                          KARTA OCENY
+                        </button>
+                      </Link>
+                      <button onClick={() => mutateDelete(id)}>
+                        <IconRemove />
+                      </button>
+                    </div>
                   </td>
                 </tr>
               ),
diff --git a/frontend/src/views/coordinator/Schedules.tsx b/frontend/src/views/coordinator/Schedules.tsx
index 459f02c..89ed936 100644
--- a/frontend/src/views/coordinator/Schedules.tsx
+++ b/frontend/src/views/coordinator/Schedules.tsx
@@ -83,20 +83,24 @@ const Schedules = () => {
         <button className="btn btn-success mt-4">Stwórz zapisy</button>
       </form>
       <h2 className="text-2xl font-bold mb-2">Wybierz zapisy:</h2>
-      {schedules &&
-        schedules?.data?.examination_schedules.map((schedule) => (
-          <h3 className="text-xl " key={schedule.title}>
-            -{' '}
-            <Link
-              to={`/coordinator/schedule/${schedule.id}`}
-              onClick={() => {
-                setScheduleData(schedule)
-              }}
+      <ul className="list-disc list-inside">
+        {schedules &&
+          schedules?.data?.examination_schedules.map((schedule) => (
+            <li
+              className="text-xl underline underline-offset-2 decoration-success	"
+              key={schedule.title}
             >
-              {schedule.title}
-            </Link>
-          </h3>
-        ))}
+              <Link
+                to={`/coordinator/schedule/${schedule.id}`}
+                onClick={() => {
+                  setScheduleData(schedule)
+                }}
+              >
+                {schedule.title}
+              </Link>
+            </li>
+          ))}
+      </ul>
     </div>
   )
 }
diff --git a/frontend/src/views/coordinator/SupervisorAvailabilities.tsx b/frontend/src/views/coordinator/SupervisorAvailabilities.tsx
index f7fca07..031eb22 100644
--- a/frontend/src/views/coordinator/SupervisorAvailabilities.tsx
+++ b/frontend/src/views/coordinator/SupervisorAvailabilities.tsx
@@ -13,15 +13,19 @@ const SupervisorAvailabilities = () => {
   return (
     <div>
       <h2 className="text-2xl font-bold mb-2">Wybierz zapisy:</h2>
-      {schedules &&
-        schedules?.data?.examination_schedules.map((schedule) => (
-          <h3 className="text-xl" key={schedule.title}>
-            -{' '}
-            <Link to={`/coordinator/supervisors_availability/${schedule.id}`}>
-              {schedule.title}
-            </Link>
-          </h3>
-        ))}
+      <ul className="list-disc list-inside">
+        {schedules &&
+          schedules?.data?.examination_schedules.map((schedule) => (
+            <li
+              className="text-xl underline underline-offset-2 decoration-success	"
+              key={schedule.title}
+            >
+              <Link to={`/coordinator/supervisors_availability/${schedule.id}`}>
+                {schedule.title}
+              </Link>
+            </li>
+          ))}
+      </ul>
     </div>
   )
 }
diff --git a/frontend/src/views/supervisor/SupervisorGroups.tsx b/frontend/src/views/supervisor/SupervisorGroups.tsx
index 3dd969a..9cdd8fc 100644
--- a/frontend/src/views/supervisor/SupervisorGroups.tsx
+++ b/frontend/src/views/supervisor/SupervisorGroups.tsx
@@ -128,9 +128,22 @@ const SupervisorGroups = () => {
                     <td>{points_for_first_term}</td>
                     <td>{points_for_second_term}</td>
                     <td>
-                      <button onClick={() => mutateDelete(id)}>
-                        <IconRemove />
-                      </button>
+                      <div className="flex align-center gap-2">
+                        <Link
+                          to={`/${
+                            location.pathname.includes('coordinator')
+                              ? 'coordinator'
+                              : 'supervisor'
+                          }/groups/${id}/grade-card`}
+                        >
+                          <button className="btn btn-xs btn-success ">
+                            KARTA OCENY
+                          </button>
+                        </Link>
+                        <button onClick={() => mutateDelete(id)}>
+                          <IconRemove />
+                        </button>
+                      </div>
                     </td>
                   </tr>
                 ),
diff --git a/frontend/src/views/supervisor/SupervisorSchedules.tsx b/frontend/src/views/supervisor/SupervisorSchedules.tsx
index 589762d..8bf9680 100644
--- a/frontend/src/views/supervisor/SupervisorSchedules.tsx
+++ b/frontend/src/views/supervisor/SupervisorSchedules.tsx
@@ -13,15 +13,19 @@ const SupervisorSchedules = () => {
   return (
     <div>
       <h2 className="text-2xl font-bold mb-2">Wybierz zapisy:</h2>
-      {schedules &&
-        schedules?.data?.examination_schedules.map((schedule) => (
-          <h3 className="text-xl" key={schedule.title}>
-            -{' '}
-            <Link to={`/supervisor/schedule/${schedule.id}`}>
-              {schedule.title}
-            </Link>
-          </h3>
-        ))}
+      <ul className="list-disc list-inside">
+        {schedules &&
+          schedules?.data?.examination_schedules.map((schedule) => (
+            <li
+              className="text-xl underline underline-offset-2 decoration-success	"
+              key={schedule.title}
+            >
+              <Link to={`/supervisor/schedule/${schedule.id}`}>
+                {schedule.title}
+              </Link>
+            </li>
+          ))}
+      </ul>
     </div>
   )
 }