Panel judging opt in

app/(api)/_actions/auth/verifyCode.ts

@@ -2,17 +2,24 @@
 
 import { updateUser } from '@actions/users/updateUser';
 
-export default async function verifyCode(id: string, code: string) {
+export default async function verifyCode(
+  id: string,
+  code: string,
+  optedIntoPanels?: boolean
+) {
   try {
     const validCode = code === (process.env.CHECK_IN_CODE as string);
     if (!validCode) {
       throw new Error('Invalid code.');
     }
 
+    const update: any = { has_checked_in: true };
+    if (typeof optedIntoPanels === 'boolean') {
+      update.opted_into_panels = optedIntoPanels;
+    }
+
     const res = await updateUser(id, {
-      $set: {
-        has_checked_in: true,
-      },
+      $set: update,
     });
 
     if (!res.ok) {

app/(api)/_actions/logic/assignJudgesToPanels.ts

@@ -35,7 +35,13 @@ export default async function assignJudgesToPanels(panelSize: number = 5) {
     };
   }
 
-  const judgesRes = await GetManyUsers({ role: 'judge', has_checked_in: true });
+  // only judges who have checked in and explicitly opted into panels
+  const judgesRes = await GetManyUsers({
+    role: 'judge',
+    has_checked_in: true,
+    opted_into_panels: true,
+  });
+
   if (!judgesRes.ok || judgesRes.body.length === 0) {
     return {
       ok: false,

app/(api)/_utils/matching/judgeToPanelAlgorithm.ts

@@ -11,8 +11,8 @@ export default async function judgeToPanelAlgorithm(
 
     judges = judges.sort(
       (a, b) =>
-        (a.specialties?.indexOf(panel.domain) ?? 0) -
-        (b.specialties?.indexOf(panel.domain) ?? 0)
+        (a.specialties?.indexOf(panel.domain ?? '') ?? 0) -
+        (b.specialties?.indexOf(panel.domain ?? '') ?? 0)
     );
 
     panel.user_ids = judges

app/(pages)/_components/AuthForm/AuthForm.tsx

@@ -11,10 +11,9 @@ import hackerStyles from './HackerAuthForm.module.scss';
 import judgeStyles from './JudgeAuthForm.module.scss';
 
 type Role = 'hacker' | 'judge';
-type FieldName = 'email' | 'password' | 'passwordDupe' | 'code';
 
 interface FormField {
-  name: FieldName;
+  name: string;
   type: string;
   label: string;
   placeholder?: string;
@@ -27,8 +26,8 @@ interface AuthFormProps {
   buttonText: string;
   linkText?: string;
   linkHref?: string;
-  initialValues: Record<string, string>;
-  onSubmit: (values: Record<string, string>) => Promise<any>;
+  initialValues: Record<string, any>;
+  onSubmit: (values: Record<string, any>) => Promise<any>;
   onSuccess: () => void;
 }
 
@@ -68,17 +67,27 @@ export default function AuthForm({
                 <p className={styles.error_msg}>{errors[field.name]}</p>
                 <div className={styles.input_container}>
                   <label htmlFor={field.name}>{field.label}</label>
-                  <input
-                    name={field.name}
-                    type={field.type}
-                    placeholder={field.placeholder}
-                    value={formValues[field.name] || ''}
-                    onInput={handleChange}
-                    readOnly={field.readOnly}
-                    style={{
-                      cursor: field.readOnly ? 'not-allowed' : 'auto',
-                    }}
-                  />
+                  {field.type === 'checkbox' ? (
+                    <input
+                      name={field.name}
+                      type="checkbox"
+                      checked={!!formValues[field.name]}
+                      onChange={handleChange}
+                      readOnly={field.readOnly}
+                    />
+                  ) : (
+                    <input
+                      name={field.name}
+                      type={field.type}
+                      placeholder={field.placeholder}
+                      value={formValues[field.name] || ''}
+                      onInput={handleChange}
+                      readOnly={field.readOnly}
+                      style={{
+                        cursor: field.readOnly ? 'not-allowed' : 'auto',
+                      }}
+                    />
+                  )}
                 </div>
               </div>
             ))}

app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss

@@ -14,6 +14,30 @@
     position: relative;
   }
 
+  .input_container:has(input[type='checkbox']) {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--small-spacer);
+
+    label {
+      position: static;
+      margin-top: 0;
+      font-size: 1rem;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+
+    input[type='checkbox'] {
+      min-width: 30px;
+      min-height: 30px;
+      width: auto;
+      padding: 0;
+      cursor: pointer;
+    }
+  }
+
   input {
     padding-top: var(--small-medium-spacer);
     padding-left: var(--small-spacer);

app/(pages)/_hooks/useAuthForm.ts

@@ -3,7 +3,7 @@
 import { useEffect, useState, ChangeEvent, FormEvent } from 'react';
 
 interface FieldValues {
-  [key: string]: string;
+  [key: string]: any;
 }
 
 interface FieldErrors {
@@ -77,8 +77,12 @@ export default function useAuthForm(
   };
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFieldValue(name, value);
+    const { name, value, type, checked } = e.target as any;
+    if (type === 'checkbox') {
+      setFieldValue(name, checked);
+    } else {
+      setFieldValue(name, value);
+    }
   };
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {

app/(pages)/admin/_components/Judges/JudgeCard.tsx

@@ -36,6 +36,9 @@ export default function JudgeCard({
             )}
           </span>
           <p className={styles.email}>{judge.email}</p>
+          <p className={styles.panel_status}>
+            Panel Opt-in: {judge.opted_into_panels ? 'Yes' : 'No'}
+          </p>
         </div>
         <div className={styles.header_details}>
           {editable && (

app/(pages)/admin/_components/Judges/JudgeForm.tsx

@@ -49,10 +49,16 @@ export default function JudgeForm({
     teams.body.map((team: any) => [team._id, team])
   );
 
-  if (data?._id) {
-    data.teams = data.teams.map((team: any) => {
-      return teamMap[team._id];
-    });
+  if (data?._id && data.teams) {
+    data.teams = data.teams
+      .map((team: any) => {
+        // Handle case where team might be just an ID string or already be a full team object
+        if (typeof team === 'string') {
+          return teamMap[team] || team;
+        }
+        return team._id ? teamMap[team._id] || team : team;
+      })
+      .filter(Boolean); // Remove any undefined teams
   }
 
   const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -91,6 +97,11 @@ export default function JudgeForm({
           validation: (has_checked_in: any) =>
             has_checked_in === true || has_checked_in === false,
         },
+        {
+          field: 'opted_into_panels',
+          validation: (opted_into_panels: any) =>
+            opted_into_panels === true || opted_into_panels === false,
+        },
       ];
 
       verificationList.forEach(({ field, validation }) => {
@@ -104,13 +115,23 @@ export default function JudgeForm({
       return;
     }
 
-    const { _id, name, email, role, specialties, teams, has_checked_in } = data;
+    const {
+      _id,
+      name,
+      email,
+      role,
+      specialties,
+      teams,
+      has_checked_in,
+      opted_into_panels,
+    } = data;
     const body = {
       name,
       email,
       role,
       specialties,
       has_checked_in,
+      opted_into_panels,
     };
 
     const res = await updateJudgeWithTeams(_id, { $set: body }, teams);
@@ -232,6 +253,16 @@ export default function JudgeForm({
           { option: 'false', value: false },
         ]}
       />
+      <DropdownInput
+        label="opted into panels"
+        value={data.opted_into_panels}
+        updateValue={(value: any) => updateField('opted_into_panels', value)}
+        width="400px"
+        options={[
+          { option: 'true', value: true },
+          { option: 'false', value: false },
+        ]}
+      />
       <div className={styles.action_buttons}>
         <button className={styles.submit_button} type="submit">
           Submit

app/(pages)/judges/_components/AuthForms/CheckInForm.tsx

@@ -8,9 +8,9 @@ import AuthForm from '@components/AuthForm/AuthForm';
 export default function CheckInForm({ id }: any) {
   const router = useRouter();
 
-  const onSubmit = async (fields: any) => {
-    return verifyCode(id, fields.code);
-  };
+  const onSubmit = async (fields: any) =>
+    // include opt-in boolean when verifying
+    verifyCode(id, fields.code, !!fields.opted_into_panels);
 
   const onSuccess = () => {
     router.push('/judges');
@@ -24,6 +24,12 @@ export default function CheckInForm({ id }: any) {
       placeholder: '',
       readOnly: false,
     },
+    {
+      name: 'opted_into_panels',
+      type: 'checkbox',
+      label: 'I would like to be on a judging panel',
+      readOnly: false,
+    },
   ];
 
   return (
@@ -33,6 +39,7 @@ export default function CheckInForm({ id }: any) {
       buttonText="Check in →"
       initialValues={{
         code: '',
+        opted_into_panels: false,
       }}
       onSubmit={onSubmit}
       onSuccess={onSuccess}

app/(pages)/judges/_components/AuthForms/DetailForm.module.scss

@@ -2,7 +2,7 @@
   width: 100%;
   height: 60vh;
   max-height: 100vh;
-  background-color: var(--background-light);
+  background-color: #F2F2F7;
   border-radius: var(--b-radius);
   display: flex;
   flex-direction: column;

app/_types/panel.ts

@@ -3,7 +3,7 @@ import User from './user';
 interface Panel {
   _id?: string;
   track: string;
-  domain: string;
+  domain?: string;
   user_ids: string[];
   users?: User[]; // populated by aggregation
 }

app/_types/user.ts

@@ -8,6 +8,7 @@ interface User {
   position?: string; // for hackers only
   is_beginner?: boolean; // for hackers only
   has_checked_in: boolean;
+  opted_into_panels?: boolean; // for judges only
 }
 
 export default User;