Css fixes, logging for notifications, removal of accept list, update …

…of consent text.

Co-authored-by: TijnvdK <[email protected]>

IguideME.Web/Frontend/src/components/atoms/alt-entries/alt-entries.tsx

@@ -63,7 +63,11 @@ const AltDiscussions: FC<Props> = ({ tile }): ReactElement => {
       </QueryLoading>
     );
   } else if (entryError || topicError || !discussionEntries || !discussionTopics) {
-    return <QueryError className='grid place-content-center' title='No submission found' />;
+    return (
+      <div className='relative h-3/4'>
+      <QueryError className='grid place-content-center' title='No submission found' />
+      </div>
+    );
   }
 
   return (

IguideME.Web/Frontend/src/components/atoms/entry-details/entry-details.tsx

@@ -38,7 +38,11 @@ export const AssignmentDetail: FC<Props> = ({ entry }): ReactElement => {
       </QueryLoading>
     );
   } else if (isError || !submission) {
-    return <QueryError className='grid place-content-center' title='No submission found' />;
+    return (
+      <div className='relative h-3/4'>
+        <QueryError className='grid place-content-center' title='No submission found' />
+        </div>
+    );
   }
 
   switch (viewType) {
@@ -84,7 +88,11 @@ export const DiscussionDetail: FC<Props> = ({ entry }): ReactElement => {
       </QueryLoading>
     );
   } else if (isError || !discussion || !discussion.grades) {
-    return <QueryError className='grid place-content-center' title='No submission found' />;
+    return (
+      <div className='relative h-3/4'>
+      <QueryError className='grid place-content-center' title='No submission found' />
+      </div>
+    );
   }
 
   switch (viewType) {
@@ -138,7 +146,11 @@ export const LearningGoalDetail: FC<Props> = ({ entry }): ReactElement => {
       </QueryLoading>
     );
   } else if (isError || !learningGoal || assIsError || !assignments) {
-    return <QueryError className='grid place-content-center' title='No submission found' />;
+    return (
+      <div className='relative h-3/4'>
+        <QueryError className='grid place-content-center' title='No submission found' />
+        </div>
+    );
   }
 
   return (

IguideME.Web/Frontend/src/components/crystals/ThemeSwitcher/ThemeSwitcher.tsx

@@ -16,11 +16,11 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(({ className, isSidebarClosed
 
   return (
     <div className={cn(`flex min-h-11 items-center justify-between gap-4 rounded-md`, className)} {...props}>
-      <p>Toggle theme</p>
+      {!isSidebarClosed && <p>Toggle theme</p>}
       <Tooltip title='Toggle Theme' open={isSidebarClosed ? undefined : false} placement='right'>
         <Switch
-          className='[&_span]:!bg-surface2'
-          checkedChildren={<MoonOutlined className='text-text' />}
+          className={`[&_span]:!bg-surface2 ${isSidebarClosed ? '!rotate-90' : ''}`}
+          checkedChildren={<MoonOutlined className={`text-text ${isSidebarClosed ? '!-rotate-90' : ''}`} />}
           unCheckedChildren={<SunOutlined className='text-text' />}
           checked={theme === 'dark'}
           onChange={() => {

IguideME.Web/Frontend/src/components/crystals/layout/RootLayout.tsx

@@ -239,7 +239,7 @@ interface SideNavigationDropdownProps extends SideNavigationLinkProps {
 }
 
 const SideNavigationDropdown: FC<SideNavigationDropdownProps> = memo(({ items, ...props }): ReactElement => {
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(true);
 
   const { isSidebarClosed } = useLayoutStore(useShallow((state) => ({ isSidebarClosed: state.isSidebarClosed })));
   const height =

IguideME.Web/Frontend/src/components/crystals/permission-validator/permission-validator.tsx

@@ -1,9 +1,9 @@
-import { getStudentAcceptStatus, postConsentSettings } from '@/api/student_settings';
+import { postConsentSettings } from '@/api/student_settings';
 import { getSelf } from '@/api/users';
 import { ConsentText, GoalGrade } from '@/components/pages/student-settings/student-settings';
 import { ConsentEnum, UserRoles } from '@/types/user';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Button } from 'antd';
+import { Button, Collapse } from 'antd';
 import { useEffect, type FC, type ReactElement } from 'react';
 import { Loading as LoadingDots } from 'react-loading-dot';
 import { Outlet } from 'react-router-dom';
@@ -30,14 +30,14 @@ const PermissionValidator: FC = (): ReactElement => {
     queryFn: getSelf,
   });
 
-  const {
-    data: accepted,
-    isError: acceptedError,
-    isLoading: acceptedLoading,
-  } = useQuery({
-    queryKey: ['accepted', self?.userID],
-    queryFn: async () => await getStudentAcceptStatus(self ? self.userID : ''),
-  });
+  // const {
+  //   data: accepted,
+  //   isError: acceptedError,
+  //   isLoading: acceptedLoading,
+  // } = useQuery({
+  //   queryKey: ['accepted', self?.userID],
+  //   queryFn: async () => await getStudentAcceptStatus(self ? self.userID : ''),
+  // });
 
   const queryClient = useQueryClient();
   const { mutate: saveConsent, status } = useMutation({
@@ -65,13 +65,33 @@ const PermissionValidator: FC = (): ReactElement => {
     return (
       <div className='mx-auto max-w-3xl space-y-5 p-5'>
         <h1 className='text-xl font-bold tracking-tight'>Informed Consent</h1>
+        <p className='text-xs text-text'></p>
+        <Collapse
+        bordered={false}
+        className='[&_svg]:!text-text [&>div>div]:!p-0'
+        ghost
+        items={[
+          {
+            key: 1,
+            label: (
+              <>
+                <p className='text-text text-justify'>
+                Here you will be asked to sign the Informed consent. Click <u>here</u> to show the content of the Informed consent.
+                </p>
+              </>
+            ),
+            children: <ConsentText />,
+            showArrow: true,
+          },
+        ]}
+      />
+        <ul className='list-disc list-inside'>
+          <li>By choosing "Yes" in this form, I declare that I have read the document entitled “informed consent IguideME”,
+          understood it, and consent to my personal data being processed for the purposes stated above.</li>
+          <li>By choosing "No" in the form, I declare that I have read the document entitled “informed consent IguideME”,
+          understood it, and do not consent to my personal data being processed for the purposes stated above.</li>
+        </ul>
         <ConsentText />
-        <p className='text-text text-justify'>
-          &quot;Ik verklaar dat ik de informatie heb gelezen en begrepen. Ik geef toestemming voor deelname aan dit
-          onderwijsonderzoek en het gebruik van mijn gegevens daarin. Ik behoud mijn recht om deze toestemming stop te
-          zetten zonder een expliciete reden op te geven en om mijn deelname aan dit experiment op elk moment stop te
-          zetten.&quot;
-        </p>
 
         <div className='flex w-full items-center justify-center gap-4'>
           <Button
@@ -80,35 +100,35 @@ const PermissionValidator: FC = (): ReactElement => {
               saveConsent(2);
             }}
           >
-            Deny
+            No
           </Button>
           <Button
             className='custom-default-button'
             onClick={() => {
               saveConsent(1);
             }}
           >
-            Accept
+            Yes
           </Button>
         </div>
       </div>
     );
   }
 
-  if (acceptedLoading) {
-    return <IguideMELoading />;
-  } else if (acceptedError || accepted === undefined) {
-    return <h1 className='text-lg'>Your account has not yet been processed, try again tomorrow!</h1>;
-  }
+  // if (acceptedLoading) {
+  //   return <IguideMELoading />;
+  // } else if (acceptedError || accepted === undefined) {
+  //   return <h1 className='text-lg'>Your account has not yet been processed, try again tomorrow!</h1>;
+  // }
 
-  if (!accepted) {
-    return (
-      <div className='mx-auto max-w-3xl p-5'>
-        <h1 className='text-xl font-bold tracking-tight'>No access</h1>
-        <p>You do not have access to this application. If you think this is an error, please contact the teacher.</p>
-      </div>
-    );
-  }
+  // if (!accepted) {
+  //   return (
+  //     <div className='mx-auto max-w-3xl p-5'>
+  //       <h1 className='text-xl font-bold tracking-tight'>No access</h1>
+  //       <p>You do not have access to this application. If you think this is an error, please contact the teacher.</p>
+  //     </div>
+  //   );
+  // }
 
   if (self.settings.goal_grade <= 0) {
     return (

IguideME.Web/Frontend/src/components/crystals/tile-view/tile-view.tsx

@@ -56,7 +56,6 @@ const ViewTile: FC<Props> = memo(({ tile, textStyle }): ReactElement => {
 
   function renderViewType(): ReactElement {
     if (isError) return <QueryError className='grid place-content-center' title='Failed to load grades' />;
-    else if (!grades) return <></>;
 
     if (tile.type === TileType.assignments && tile.gradingType === GradingType.NotGraded) {
       return (
@@ -69,19 +68,19 @@ const ViewTile: FC<Props> = memo(({ tile, textStyle }): ReactElement => {
       case 'graph':
         return (
           <Row className='h-4/5 content-center justify-center'>
-            <GraphTile type={tile.type} grades={grades} />
+            <GraphTile type={tile.type} grades={grades ?? {grade: 0, peerAvg: 0, peerMax: 0, peerMin: 0, max: 0, type: GradingType.NotGraded}} />
           </Row>
         );
       case 'grid':
         return (
           <>
             <Row className='h-1/2 content-center justify-center'>
-              <GridTile type={tile.type} grades={grades} />
+              <GridTile type={tile.type} grades={grades ??{grade: 0, peerAvg: 0, peerMax: 0, peerMin: 0, max: 0, type: GradingType.NotGraded}} />
             </Row>
             <Row className='h-[30%] w-full content-start justify-center'>
               <Col className='h-full w-full'>
                 <Divider className='border-text m-0 p-0' />
-                <PeerComparison grades={grades} />
+                <PeerComparison grades={grades ?? {grade: 0, peerAvg: 0, peerMax: 0, peerMin: 0, max: 0, type: GradingType.NotGraded}} />
               </Col>{' '}
             </Row>
           </>

IguideME.Web/Frontend/src/components/pages/admin/analytics/components/AnalyticsChips.tsx

@@ -68,7 +68,7 @@ const AnalyticsChips: FC<AnalyticsChipProps> = memo(({ analytics, consentInfo, s
     return allWeeks;
   }, [analytics]);
 
-  const { conversionRateData, sessionLengthData } = useMemo(() => {
+  const { conversionRateData } = useMemo(() => {
     const visitData = new Map<string, { bounceCount: number; sessionCount: number; sessionLengths: number[] }>();
     if (sessions.size === 0) return { conversionRateData: [], sessionLengthData: [] };
 
@@ -123,11 +123,11 @@ const AnalyticsChips: FC<AnalyticsChipProps> = memo(({ analytics, consentInfo, s
           };
         }
 
-        const sortedSessionLengths = data.sessionLengths.sort((a, b) => a - b);
+        const totalSessionLength = data.sessionLengths.reduce((acc, curr) => acc + curr, 0);
 
         return {
           name: weekKey,
-          value: sortedSessionLengths.reduce((acc, curr) => acc + curr, 0) / sortedSessionLengths.length,
+          value: totalSessionLength / data.sessionLengths.length,
         };
       })
       .sort((a, b) => new Date(a.name).getTime() - new Date(b.name).getTime());
@@ -185,7 +185,7 @@ const AnalyticsChips: FC<AnalyticsChipProps> = memo(({ analytics, consentInfo, s
         <ChipAreaGraph graphData={conversionRateData} />
       </AnalyticsChip>
 
-      <AnalyticsChip
+      {/* <AnalyticsChip
         change={
           sessionLengthData.length > 1 ?
             Math.round(
@@ -204,7 +204,7 @@ const AnalyticsChips: FC<AnalyticsChipProps> = memo(({ analytics, consentInfo, s
         unit='number'
       >
         <ChipAreaGraph graphData={sessionLengthData} />
-      </AnalyticsChip>
+      </AnalyticsChip> */}
     </div>
   );
 });

IguideME.Web/Frontend/src/components/pages/admin/settings/settings.tsx

@@ -1,6 +1,6 @@
 import AdminBlock from '@/components/atoms/admin-block/admin-block';
 import AdminTitle from '@/components/atoms/admin-titles/admin-titles';
-import AcceptListSettings from '@/components/crystals/accept-list-settings/accept-list-settings';
+// import AcceptListSettings from '@/components/crystals/accept-list-settings/accept-list-settings';
 import NotificationSettings from '@/components/crystals/notification-settings/notification-settings';
 import PeerSettings from '@/components/crystals/peer-settings/peer-settings';
 import { type FC, type ReactElement } from 'react';
@@ -12,9 +12,9 @@ const AdminSettings: FC = (): ReactElement => {
       <AdminBlock title='Peer groups'>
         <PeerSettings />
       </AdminBlock>
-      <AdminBlock title='Accept list'>
+      {/* <AdminBlock title='Accept list'>
         <AcceptListSettings />
-      </AdminBlock>
+      </AdminBlock> */}
       <AdminBlock title='Notifications'>
         <NotificationSettings />
       </AdminBlock>

IguideME.Web/Frontend/src/components/pages/admin/studentoverview/common-table.tsx

@@ -44,6 +44,8 @@ const CommonTable: FC<Props> = ({ type }): ReactElement => {
     enabled: type === GradeTableType.notifications,
   });
 
+  console.log("notifications", notifications);
+
   const {
     data: tiles,
     isError: isTileError,

IguideME.Web/Frontend/src/components/pages/courses-selection/CourseSelection.tsx

@@ -5,7 +5,7 @@ import { UserRoles } from '@/types/user';
 import { AppstoreOutlined, CheckOutlined, EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
 import { Card, Skeleton, Tabs } from 'antd';
-import { type FC, memo, type ReactElement } from 'react';
+import { type FC, memo, type ReactElement, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/react/shallow';
 
@@ -31,6 +31,15 @@ const CourseSelection: FC = (): ReactElement => {
 
   if (isError) return <QueryError title='Failed to load courses' />;
 
+  const navigate = useNavigate();
+  useEffect(() => {
+    const firstVisit = sessionStorage.getItem('firstVisit');
+    if (!firstVisit && self.course_id) {
+      sessionStorage.setItem('firstVisit', 'true');
+      navigate(`/${self.course_id}`);
+    }
+  }, [self.course_id]);
+
   return (
     <Tabs
       className='course-selection-tabs w-full px-8'