wip: teams view/edit page

src/actions/user.ts

@@ -41,6 +41,15 @@ export const getParticipants = (): DispatchAction => ({
   status: RequestStatus.PENDING
 })
 
+export const getTeams = (): DispatchAction => ({
+  type: DispatchActionType.TEAMS_VIEW,
+  useAPI: true,
+  request: {
+    path: "/teams",
+    method: "GET"
+  },
+  status: RequestStatus.PENDING
+})
 export const admitUser = (id: string): DispatchAction => ({
   type: DispatchActionType.ADMIT_USER,
   useAPI: true,

src/components/admin/AdminDialog/index.tsx

@@ -5,19 +5,20 @@ import { useDispatch } from "react-redux"
 import actions from "src/actions"
 import FloatingDiv from "src/components/design/FloatingDiv"
 import AnalyticsTab from "../Analytics"
+import Teams from "../Teams"
 import ParticipantTable from "../ParticipantTable"
 import RecruiterCreationForm from "../RecruiterCreationForm"
 import SponsorCreationForm from "../SponsorCreationForm"
 import styles from "./index.module.scss"
+import axios from "axios"
 
 const AdminDialog = (): ReactElement => {
-  const dispatch = useDispatch()
   const [tabIndex, setTabIndex] = useState("0")
 
   useEffect(() => {
     const querySponsors = async () => {
       try {
-        await dispatch(actions.sponsors.list())
+        // await dispatch(actions.sponsors.list())
       } catch (err) {
         console.error(err)
       }
@@ -36,21 +37,25 @@ const AdminDialog = (): ReactElement => {
             variant="scrollable"
           >
             <Tab label="Participants" value="0" />
-            <Tab label="Recruiters" value="1" />
-            <Tab label="Sponsors" value="2" />
-            <Tab label="Analytics" value="3" />
+            <Tab label="Teams" value="1" />
+            <Tab label="Recruiters" value="2" />
+            <Tab label="Sponsors" value="3" />
+            <Tab label="Analytics" value="4" />
           </TabList>
         </Box>
         <TabPanel value="0" className={styles.tabPanel}>
           <ParticipantTable />
         </TabPanel>
         <TabPanel value="1" className={styles.tabPanel}>
-          <RecruiterCreationForm />
+          <Teams />
         </TabPanel>
         <TabPanel value="2" className={styles.tabPanel}>
-          <SponsorCreationForm />
+          <RecruiterCreationForm />
         </TabPanel>
         <TabPanel value="3" className={styles.tabPanel}>
+          <SponsorCreationForm />
+        </TabPanel>
+        <TabPanel value="4" className={styles.tabPanel}>
           <AnalyticsTab />
         </TabPanel>
       </TabContext>

src/components/admin/Teams/index.module.scss

@@ -0,0 +1,119 @@
+@import "~/styles/variables.scss";
+@import "~/styles/mixins.scss";
+
+.dialog {
+  display: flex;
+  align-items: center;
+  width: 75%;
+  border-radius: 25px;
+  padding: 2rem;
+  margin: 0 auto;
+  flex-direction: column;
+  background-image: $dialog-container-gradient;
+  box-shadow: $dialog-container-box-shadow;
+  backdrop-filter: blur(4px);
+
+  max-height: 70%;
+  overflow: scroll;
+
+  @include down($breakpoint-md) {
+    width: 80%;
+  }
+
+  @include down($breakpoint-sm) {
+    width: 70%;
+  }
+}
+
+.dialogContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.spinnerContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.buttonMargin {
+  margin-right: 1em;
+}
+
+.toolbar {
+  width: 100%;
+  justify-content: end;
+}
+
+.toolbarContent {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  padding-right: 1em;
+}
+
+.table {
+  width: 100%;
+}
+
+.chipMargin {
+  margin-right: 0.5em;
+}
+
+.chipUnverified {
+  &:global(.MuiChip-root) {
+    background-color: $status-color-unverified;
+  }
+}
+
+.chipVerified {
+  &:global(.MuiChip-root) {
+    background-color: $status-color-verified;
+  }
+}
+
+.chipApplied {
+  &:global(.MuiChip-root) {
+    background-color: $status-color-applied;
+  }
+}
+
+.chipAdmitted {
+  &:global(.MuiChip-root) {
+    background-color: $status-color-admitted;
+  }
+}
+
+.chipRejected {
+  &:global(.MuiChip-root) {
+    background-color: $status-color-rejected;
+  }
+}
+
+.chipDeclined {
+  &:global(.MuiChip-root) {
+    background-color: $status-color-declined;
+  }
+}
+
+.chipConfirmed {
+  &:global(.MuiChip-root) {
+    background-color: $status-color-confirmed;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  gap: 5px;
+}
+
+.withIcon {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.editIcon {
+  cursor: pointer;
+}