feat: filter the team by teamset

multi-git-dashboard/src/components/views/ClassReview.tsx

@@ -68,9 +68,8 @@ const ClassReview: React.FC<OverviewProps> = ({ courseId }) => {
 
   return (
     <ScrollArea
-      m="md"
       style={{
-        height: '97vh',
+        height: '100vh',
         paddingRight: '20px',
         overflowY: 'auto',
         scrollbarWidth: 'thin',

multi-git-dashboard/src/components/views/Overview.tsx

@@ -5,6 +5,7 @@ import {
   Container,
   Loader,
   ScrollArea,
+  Tabs,
 } from '@mantine/core';
 import { Profile } from '@shared/types/Profile';
 import { Team as SharedTeam } from '@shared/types/Team';
@@ -14,10 +15,12 @@ import { useEffect, useState } from 'react';
 import OverviewAccordionItem from '../overview/OverviewAccordionItem';
 import { useTutorialContext } from '../tutorial/TutorialContext';
 import TutorialPopover from '../tutorial/TutorialPopover';
+import { TeamSet } from '@shared/types/TeamSet';
 
 interface OverviewProps {
   courseId: string;
   dateUtils: DateUtils;
+  teamSets: TeamSet[];
 }
 
 export interface Team extends Omit<SharedTeam, 'teamData'> {
@@ -26,7 +29,7 @@ export interface Team extends Omit<SharedTeam, 'teamData'> {
 
 export type ProfileGetter = (gitHandle: string) => Promise<Profile>;
 
-const Overview: React.FC<OverviewProps> = ({ courseId, dateUtils }) => {
+const Overview: React.FC<OverviewProps> = ({ courseId, dateUtils, teamSets, }) => {
   const { curTutorialStage } = useTutorialContext();
 
   const [teams, setTeams] = useState<Team[]>([]);
@@ -94,10 +97,10 @@ const Overview: React.FC<OverviewProps> = ({ courseId, dateUtils }) => {
   if (!teams.length || !teamDatas.length)
     return <Center>No teams found.</Center>;
 
-  return (
-    <ScrollArea.Autosize mt={20}>
+  const renderOverviewAccordion = (teamSet: TeamSet) => {
+    return (
       <Accordion
-        defaultValue={[teamDatas[0]._id]}
+        defaultValue={teamDatas.length > 0 ? [teamDatas[0]._id] : []}
         multiple
         variant="separated"
         mx={20}
@@ -121,8 +124,20 @@ const Overview: React.FC<OverviewProps> = ({ courseId, dateUtils }) => {
           </TutorialPopover>
         ))}
       </Accordion>
+    );
+  };
+
+  return (
+    <ScrollArea.Autosize mt={20}>
+      {teamSets.map(teamSet => (
+        <Tabs.Panel key={teamSet._id} value={teamSet.name}>
+          {renderOverviewAccordion(teamSet)}
+        </Tabs.Panel>
+      ))}
     </ScrollArea.Autosize>
   );
+
+
 };
 
 export default Overview;

multi-git-dashboard/src/components/views/PeopleInfo.tsx

@@ -132,9 +132,8 @@ const PeopleInfo: React.FC<PeopleInfoProps> = ({
 
   return (
     <ScrollArea
-      m="md"
       style={{
-        height: '97vh',
+        height: '100vh',
         paddingRight: '20px',
         overflowY: 'auto',
         scrollbarWidth: 'thin',

multi-git-dashboard/src/components/views/ProjectManagementInfo.tsx

@@ -95,7 +95,7 @@ const ProjectManagementInfo: React.FC<ProjectManagementProps> = ({
   return (
     <Container
       style={{
-        height: 'calc(100dvh - 2 * 20px)',
+        height: '100vh',
         display: 'flex',
         flexDirection: 'column',
       }}

multi-git-dashboard/src/components/views/TeamsInfo.tsx

@@ -152,9 +152,8 @@ const TeamsInfo: React.FC<TeamsInfoProps> = ({
 
   return (
     <ScrollArea
-      m="md"
       style={{
-        height: '97vh',
+        height: '100vh',
         paddingRight: '20px',
         overflowY: 'auto',
         scrollbarWidth: 'thin',

multi-git-dashboard/src/pages/admin.tsx

@@ -232,10 +232,11 @@ const AdminPage: React.FC = () => {
   ));
 
   return (
-    <ScrollArea m="md" style={{ height: '100vh' }}>
+    <ScrollArea style={{ height: '100vh' }}>
       <TextInput
         placeholder="Search by any field"
         mb="md"
+        style = {{ margin: '20px' }}
         leftSection={
           <IconSearch
             style={{ width: rem(16), height: rem(16) }}
@@ -280,7 +281,7 @@ const AdminPage: React.FC = () => {
           )}
         </Table.Tbody>
       </Table>
-      <Group justify="flex-end">
+      <Group justify="flex-end" mb="md" mr='lg'>
         <Button
           onClick={() => handleApprove(selectedRows)}
           disabled={selectedRows.length === 0}

multi-git-dashboard/src/pages/courses/[id]/class-review/index.tsx

@@ -68,7 +68,7 @@ const CourseViewPage: React.FC = () => {
   return (
     <Container
       style={{
-        height: 'calc(100dvh - 20px)',
+        height: '100vh',
         display: 'flex',
         flexDirection: 'column',
       }}

multi-git-dashboard/src/pages/courses/index.tsx

@@ -3,7 +3,7 @@ import { useTutorialContext } from '@/components/tutorial/TutorialContext';
 import TutorialPopover from '@/components/tutorial/TutorialPopover';
 import WelcomeMessage from '@/components/views/WelcomeMessage';
 import { hasFacultyPermission } from '@/lib/auth/utils';
-import { Box, Button, Modal } from '@mantine/core';
+import { Box, Button, Modal, ScrollArea } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Course } from '@shared/types/Course';
 import { signOut } from 'next-auth/react';
@@ -66,7 +66,14 @@ const CourseListPage: React.FC = () => {
   };
 
   return (
-    <div>
+    <ScrollArea
+      style={{
+        height: '100vh',
+        paddingRight: '20px',
+        overflowY: 'auto',
+        scrollbarWidth: 'thin',
+      }}
+    >
       <Modal opened={opened} onClose={close} title="Course Creation">
         <CreateCourseForm />
       </Modal>
@@ -101,7 +108,7 @@ const CourseListPage: React.FC = () => {
         )}
         {hasFacultyPermission() && (
           <div>
-            <Button onClick={open} mt={16}>
+            <Button onClick={open} mt={16} mb={20}>
               Create Course
             </Button>
           </div>
@@ -110,7 +117,7 @@ const CourseListPage: React.FC = () => {
           <WelcomeMessage opened={curTutorialStage === 0} />
         )}
       </Box>
-    </div>
+    </ScrollArea>
   );
 };