Tracking New TEC Requirements (#845)

jujulcrane · web-flow · commit 2bbdf01fe2e1 · 2025-03-02T20:53:10.000-05:00
### Summary  This pull requests implements the new TEC requirements in IDOL's submit TEC page. It prevents members from submitting a TEC if they already submitted one in the current 5-week period, unless they missed the last period or they are a lead. ### Notion/Figma Link [https://www.notion.so/Track-new-TEC-requirements-1950ad723ce180e8b18df88a3d7f0388](https://www.notion.so/Track-new-TEC-requirements-1950ad723ce180e8b18df88a3d7f0388) ### Test Plan https://github.com/user-attachments/assets/de0f8025-5b54-4c30-a24b-89dc25313d18
diff --git a/frontend/src/components/Forms/TeamEventCreditsForm/TeamEventCreditsForm.tsx b/frontend/src/components/Forms/TeamEventCreditsForm/TeamEventCreditsForm.tsx
@@ -6,7 +6,7 @@ import { TeamEventsAPI } from '../../../API/TeamEventsAPI';
 import TeamEventCreditDashboard from './TeamEventsCreditDashboard';
 import styles from './TeamEventCreditsForm.module.css';
 import ImagesAPI from '../../../API/ImagesAPI';
-import { INITIATIVE_EVENTS } from '../../../consts';
+import { INITIATIVE_EVENTS, TEC_DEADLINES } from '../../../consts';
 
 const TeamEventCreditForm: React.FC = () => {
   // When the user is logged in, `useSelf` always return non-null data.
@@ -31,6 +31,53 @@ const TeamEventCreditForm: React.FC = () => {
     });
   }, []);
 
+  const approvedTECDates = approvedAttendance
+    .map((attendance) => {
+      const matchingEvent = teamEventInfoList.find((event) => event.uuid === attendance.eventUuid);
+      return matchingEvent
+        ? {
+            date: new Date(matchingEvent.date),
+            credits: parseFloat(matchingEvent.numCredits)
+          }
+        : null;
+    })
+    .filter((entry): entry is { date: Date; credits: number } => entry !== null);
+
+  const getTECPeriod = (submissionDate: Date) => {
+    const currentPeriodIndex = TEC_DEADLINES.findIndex((date) => submissionDate <= date);
+    if (currentPeriodIndex === -1) {
+      return TEC_DEADLINES.length;
+    }
+    return currentPeriodIndex;
+  };
+
+  const tecCounts: number[] = Array.from({ length: TEC_DEADLINES.length }, () => 0);
+  approvedTECDates.forEach(({ date, credits }) => {
+    const period = getTECPeriod(date);
+    if (period < tecCounts.length) tecCounts[period] += credits;
+  });
+
+  const calculateCredits = () => {
+    const currentPeriod = getTECPeriod(new Date());
+    const previousPeriod = currentPeriod > 0 ? currentPeriod - 1 : null;
+
+    const periodCredits = tecCounts[currentPeriod] || 0;
+    const previousPeriodCredits = previousPeriod !== null ? tecCounts[currentPeriod - 1] : 1;
+
+    if (currentPeriod === 0) {
+      return periodCredits < 1 ? 1 - periodCredits : 0;
+    }
+    if (previousPeriodCredits < 1) {
+      return periodCredits + previousPeriodCredits < 2
+        ? 2 - previousPeriodCredits - periodCredits
+        : 0;
+    }
+
+    return periodCredits < 1 ? 1 - periodCredits : 0;
+  };
+
+  const requiredCredits = calculateCredits();
+
   const handleAddIconClick = () => {
     setImages((images) => [...images, '']);
   };
@@ -142,12 +189,32 @@ const TeamEventCreditForm: React.FC = () => {
         <h1>Submit Team Event Credits</h1>
         <p>
           Earn team event credits for participating in DTI events! Fill out this form every time and
-          attach a picture of yourself at the event to receive credit.
+          attach a picture of yourself at the event to receive credit. The current 5-week TEC period
+          ends on{' '}
+          {getTECPeriod(new Date()) < TEC_DEADLINES.length
+            ? TEC_DEADLINES[getTECPeriod(new Date())].toDateString()
+            : 'No upcoming period'}
+          .
         </p>
         <div className={styles.inline}>
           <label className={styles.bold}>
             Select a Team Event: <span className={styles.red_color}>*</span>
           </label>
+          <div className={styles.bold}>
+            {requiredCredits > 1 && (
+              <span className={styles.red_color}>
+                You submitted {2 - requiredCredits} TEC last period so you must submit at least{' '}
+                {requiredCredits} TEC for this 5-week period.
+              </span>
+            )}
+          </div>
+          <div className={styles.bold}>
+            {requiredCredits === 0 && (
+              <span className={styles.red_color}>
+                You have already submitted a TEC for this 5-week period.
+              </span>
+            )}
+          </div>
           <div className={styles.center_and_flex}>
             {teamEventInfoList ? (
               <Dropdown
@@ -264,6 +331,8 @@ const TeamEventCreditForm: React.FC = () => {
           rejectedAttendance={rejectedAttendance}
           isAttendanceLoading={isAttendanceLoading}
           setPendingAttendance={setPendingAttendance}
+          requiredPeriodCredits={requiredCredits}
+          tecCounts={tecCounts}
         />
       </Form>
     </div>
diff --git a/frontend/src/components/Forms/TeamEventCreditsForm/TeamEventsCreditDashboard.tsx b/frontend/src/components/Forms/TeamEventCreditsForm/TeamEventsCreditDashboard.tsx
@@ -11,7 +11,9 @@ import {
   REQUIRED_INITIATIVE_CREDITS,
   REQUIRED_LEAD_TEC_CREDITS,
   REQUIRED_MEMBER_TEC_CREDITS,
-  INITIATIVE_EVENTS
+  INITIATIVE_EVENTS,
+  MAX_TEC_PER_5_WEEKS,
+  TEC_DEADLINES
 } from '../../../consts';
 
 const TeamEventCreditDashboard = (props: {
@@ -21,14 +23,18 @@ const TeamEventCreditDashboard = (props: {
   rejectedAttendance: TeamEventAttendance[];
   isAttendanceLoading: boolean;
   setPendingAttendance: Dispatch<SetStateAction<TeamEventAttendance[]>>;
+  requiredPeriodCredits: number;
+  tecCounts: number[];
 }): JSX.Element => {
   const {
     allTEC,
     approvedAttendance,
     pendingAttendance,
     rejectedAttendance,
     isAttendanceLoading,
-    setPendingAttendance
+    setPendingAttendance,
+    requiredPeriodCredits,
+    tecCounts
   } = props;
   const [image, setImage] = useState('');
   const [open, setOpen] = useState(false);
@@ -104,7 +110,7 @@ const TeamEventCreditDashboard = (props: {
         ? `, with ${REQUIRED_INITIATIVE_CREDITS} of them being initiative team event credits`
         : ''
     } 
-    to fulfill this requirement.`;
+    to fulfill this requirement, completing at least ${MAX_TEC_PER_5_WEEKS} team event credit every 5 weeks.`;
   else
     headerString = `Since you are a lead, you must complete ${REQUIRED_LEAD_TEC_CREDITS} total team event 
     credits${
@@ -219,10 +225,15 @@ const TeamEventCreditDashboard = (props: {
       ) : (
         <div>
           <div className={styles.inline}>
-            <label className={styles.bold}>
-              Your Approved Credits:{' '}
-              <span className={styles.dark_grey_color}>{approvedCredits}</span>
-            </label>
+            <label className={styles.bold}>Approved Credits per Period:</label>
+            <ul>
+              {TEC_DEADLINES.map((deadline, index) => (
+                <li key={index}>
+                  Period {index + 1} (Ends: {deadline.toDateString()}):
+                  <span className={styles.dark_grey_color}> {tecCounts[index]}</span>
+                </li>
+              ))}
+            </ul>
           </div>
 
           {INITIATIVE_EVENTS && (
@@ -236,11 +247,20 @@ const TeamEventCreditDashboard = (props: {
 
           <div className={styles.inline}>
             <label className={styles.bold}>
-              Remaining Credits Needed:{' '}
-              <span className={styles.dark_grey_color}>{remainingCredits}</span>
+              Remaining Credits Needed for Current 5-Week Period:{' '}
+              <span className={styles.dark_grey_color}>{requiredPeriodCredits}</span>
             </label>
           </div>
 
+          {LEAD_ROLES.includes(userRole) && (
+            <div className={styles.inline}>
+              <label className={styles.bold}>
+                Remaining Total Credits Needed:{' '}
+                <span className={styles.dark_grey_color}>{remainingCredits}</span>
+              </label>
+            </div>
+          )}
+
           {INITIATIVE_EVENTS && (
             <div className={styles.inline}>
               <label className={styles.bold}>
diff --git a/frontend/src/consts.ts b/frontend/src/consts.ts
@@ -1,6 +1,12 @@
 export const REQUIRED_INITIATIVE_CREDITS = 1;
 export const REQUIRED_MEMBER_TEC_CREDITS = 3;
 export const REQUIRED_LEAD_TEC_CREDITS = 6;
+export const TEC_DEADLINES = [
+  new Date('2025-02-23'),
+  new Date('2025-03-30'),
+  new Date('2025-05-11')
+];
+export const MAX_TEC_PER_5_WEEKS = 1;
 export const ALL_STATUS: Status[] = ['approved', 'pending', 'rejected'];
 export const INITIATIVE_EVENTS = false;
 export const ENABLE_COFFEE_CHAT = true;
