Feat: Uni Cooperations (#966)

## What was done?

- Updated funnel to ask students about Uni-Cooperations
- Updated funnel steps to include new uni-students logic
- Added new page "Kooperationen" in Screening-Tool
- Added new components used in new screen

Author: JeangelLF

package-lock.json

@@ -239,6 +239,7 @@
         "resetMocks": true
     },
     "dependencies": {
+        "@tanstack/react-table": "^8.21.3",
         "compression": "^1.7.4",
         "express": "^4.18.2",
         "react-share": "^5.1.0"

package.json

@@ -0,0 +1,58 @@
+import { ColumnDef, flexRender, getCoreRowModel, getSortedRowModel, SortingState, useReactTable } from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/Table';
+import { useState } from 'react';
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    initialSorting?: SortingState;
+}
+
+export const DataTable = <TData, TValue>({ columns, data, initialSorting }: DataTableProps<TData, TValue>) => {
+    const [sorting, setSorting] = useState<SortingState>(initialSorting ?? []);
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            sorting,
+        },
+    });
+
+    return (
+        <Table>
+            <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => {
+                            return (
+                                <TableHead key={header.id}>
+                                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                                </TableHead>
+                            );
+                        })}
+                    </TableRow>
+                ))}
+            </TableHeader>
+            <TableBody>
+                {table.getRowModel().rows?.length ? (
+                    table.getRowModel().rows.map((row) => (
+                        <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                            {row.getVisibleCells().map((cell) => (
+                                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                            ))}
+                        </TableRow>
+                    ))
+                ) : (
+                    <TableRow>
+                        <TableCell colSpan={columns.length} className="h-24 text-center">
+                            No results.
+                        </TableCell>
+                    </TableRow>
+                )}
+            </TableBody>
+        </Table>
+    );
+};

src/components/DataTable.tsx

@@ -8,7 +8,7 @@ import AppFeedbackModal from '../modals/AppFeedbackModal';
 import { Button } from './Button';
 import { Typography } from './Typography';
 import { Badge } from './Badge';
-import { IconStarHalfFilled } from '@tabler/icons-react';
+import { IconStarHalfFilled, IconListCheck } from '@tabler/icons-react';
 
 type Props = {
     navItems: NavigationItems;
@@ -39,16 +39,23 @@ const SideBarMenu: React.FC<Props> = ({ navItems, unreadMessagesCount }) => {
         return false;
     }, [userRoles, userType]);
 
-    const hideForStudents = useMemo(() => {
+    const hideStudentsKnowledgeCenter = useMemo(() => {
         if (['screener', 'pupil'].includes(userType)) return true;
         return false;
     }, [userType]);
 
-    const hideForPupils = useMemo(() => {
+    const hidePupilsKnowledgeCenter = useMemo(() => {
         if (['screener', 'student'].includes(userType)) return true;
         return false;
     }, [userType]);
 
+    const hideNavItemForUserType = (route: string) => {
+        if (userType === 'screener') {
+            return ['matching', 'chat', 'referral', 'appointments'].includes(route);
+        }
+        return false;
+    };
+
     return (
         <div className="hidden md:block min-w-60">
             <nav className="flex min-w-60 flex-col h-[calc(100dvh-56px)] fixed pt-9 pb-6 justify-between shadow-lg">
@@ -57,9 +64,10 @@ const SideBarMenu: React.FC<Props> = ({ navItems, unreadMessagesCount }) => {
                         const disabled =
                             _disabled || (key === 'matching' && disableMatching) || (key === 'group' && disableGroup) || (key === 'chat' && disableChat);
                         const isHidden =
-                            (key === 'knowledge-helper' && hideForStudents) ||
-                            (key === 'knowledge-pupil' && hideForPupils) ||
-                            (key === 'lesson' && userType === 'pupil');
+                            (key === 'knowledge-helper' && hideStudentsKnowledgeCenter) ||
+                            (key === 'knowledge-pupil' && hidePupilsKnowledgeCenter) ||
+                            (key === 'lesson' && userType === 'pupil') ||
+                            hideNavItemForUserType(key);
                         if (isHidden) return null;
                         return (
                             <NavLink
@@ -82,6 +90,19 @@ const SideBarMenu: React.FC<Props> = ({ navItems, unreadMessagesCount }) => {
                             </NavLink>
                         );
                     })}
+                    {userType === 'screener' && (
+                        <NavLink
+                            className={({ isActive }) =>
+                                `flex items-center px-2 py-2 rounded-md hover:outline-accent hover:outline
+                                            ${isActive || rootPath === 'cooperation-helpers' ? 'bg-accent' : ''}`
+                            }
+                            onClick={() => setRootPath && setRootPath('cooperation-helpers')}
+                            to={`/cooperation-helpers`}
+                        >
+                            <IconListCheck />
+                            <Typography className="pl-3 mr-auto font-medium">Kooperationen</Typography>
+                        </NavLink>
+                    )}
                 </div>
                 <Button variant="outline" className="w-4/5 self-center" leftIcon={<IconStarHalfFilled size={16} />} onClick={() => setIsOpen(true)}>
                     {t('appFeedback.giveFeedbackButton')}

src/components/SideBarMenu.tsx

@@ -641,6 +641,16 @@
             },
             "specialTeachingExperience": {
                 "title": "Hast du Kentnisse zu speziellen Förderbedarfen?"
+            },
+            "isFromUniCooperation": {
+                "title": "هل أتيت من تعاون مع جامعة؟"
+            },
+            "uniCooperation": {
+                "title": "ما اسم الجامعة؟"
+            },
+            "uniCooperationConfirmation": {
+                "title": "شكرًا لك!",
+                "description": "سنراجع معلوماتك ونتواصل معك عبر البريد الإلكتروني بالخطوات التالية. إذا كان لديك أي استفسار، يمكنك التواصل في أي وقت عبر <supportEmail>support@lern-fair.de</supportEmail>."
             }
         },
         "pupil": {

src/lang/ar.json

@@ -638,6 +638,16 @@
                 "resendConfirmation": "Bestätigung nochmal senden",
                 "doYouHaveProblems": "Du hast Probleme mit der Anmeldung?"
             },
+            "isFromUniCooperation": {
+                "title": "Kommst du von einer Uni-Kooperation?"
+            },
+            "uniCooperation": {
+                "title": "Wie heißt die Universität?"
+            },
+            "uniCooperationConfirmation": {
+                "title": "Vielen Dank!",
+                "description": "Wir prüfen deine Angaben und melden uns per E-Mail mit den nächsten Schritten. Bei Rückfragen kannst du dich jederzeit an <supportEmail>support@lern-fair.de</supportEmail> wenden."
+            },
             "appointmentDetails": {
                 "title": "Termin erstellt!",
                 "description": "Es gibt noch ein paar letzte Schritte. Dann können wir richtig gut starten.",

src/lang/de.json

@@ -641,6 +641,16 @@
             },
             "specialTeachingExperience": {
                 "title": "Hast du Kentnisse zu speziellen Förderbedarfen?"
+            },
+            "isFromUniCooperation": {
+                "title": "Are you from a university cooperation?"
+            },
+            "uniCooperation": {
+                "title": "What is the name of the university?"
+            },
+            "uniCooperationConfirmation": {
+                "title": "Thank you!",
+                "description": "We will review your information and contact you by email with the next steps. If you have any questions, you can contact <supportEmail>support@lern-fair.de</supportEmail> at any time."
             }
         },
         "pupil": {

src/lang/en.json

@@ -641,6 +641,16 @@
             },
             "specialTeachingExperience": {
                 "title": "Hast du Kentnisse zu speziellen Förderbedarfen?"
+            },
+            "isFromUniCooperation": {
+                "title": "Вы пришли через сотрудничество с университетом?"
+            },
+            "uniCooperation": {
+                "title": "Как называется университет?"
+            },
+            "uniCooperationConfirmation": {
+                "title": "Спасибо!",
+                "description": "Мы проверим ваши данные и свяжемся с вами по электронной почте с дальнейшими шагами. Если у вас возникнут вопросы, вы можете в любое время написать на <supportEmail>support@lern-fair.de</supportEmail>."
             }
         },
         "pupil": {

src/lang/ru.json

@@ -641,6 +641,16 @@
             },
             "specialTeachingExperience": {
                 "title": "Hast du Kentnisse zu speziellen Förderbedarfen?"
+            },
+            "isFromUniCooperation": {
+                "title": "Bir üniversite iş birliğinden mi geliyorsun?"
+            },
+            "uniCooperation": {
+                "title": "Üniversitenin adı nedir?"
+            },
+            "uniCooperationConfirmation": {
+                "title": "Teşekkür ederiz!",
+                "description": "Bilgilerini kontrol edeceğiz ve sonraki adımlarla ilgili sana e-posta yoluyla geri dönüş yapacağız. Soruların olursa her zaman <supportEmail>support@lern-fair.de</supportEmail> adresine ulaşabilirsin."
             }
         },
         "pupil": {

src/lang/tr.json

@@ -641,6 +641,16 @@
             },
             "specialTeachingExperience": {
                 "title": "Hast du Kentnisse zu speziellen Förderbedarfen?"
+            },
+            "isFromUniCooperation": {
+                "title": "Ви прийшли через співпрацю з університетом?"
+            },
+            "uniCooperation": {
+                "title": "Як називається університет?"
+            },
+            "uniCooperationConfirmation": {
+                "title": "Дякуємо!",
+                "description": "Ми перевіримо ваші дані та надішлемо вам електронний лист із наступними кроками. Якщо у вас є запитання, ви завжди можете звернутися за адресою <supportEmail>support@lern-fair.de</supportEmail>."
             }
         },
         "pupil": {