From 44ce9555fd661e2e69e60e33f4d298a7c3e53dd5 Mon Sep 17 00:00:00 2001
From: Alec Li <smartspot2@gmail.com>
Date: Thu, 25 Apr 2024 04:05:45 -0700
Subject: [PATCH] Add calendar to mentor attendance view

---
 .../section/MentorSectionAttendance.tsx       | 274 +++++++++++-------
 .../src/components/section/Section.tsx        |   2 +-
 .../section/month_calendar/MonthCalendar.tsx  | 210 ++++++++++++++
 csm_web/frontend/src/css/base/_variables.scss |   6 +
 csm_web/frontend/src/css/calendar-month.scss  | 135 +++++++++
 csm_web/frontend/src/css/section.scss         |  64 +++-
 csm_web/frontend/src/utils/types.tsx          |  10 +-
 .../static/frontend/img/angle-left-solid.svg  |   1 +
 .../static/frontend/img/angle-right-solid.svg |   1 +
 .../frontend/static/frontend/img/calendar.svg |   1 +
 cypress/e2e/section/mentor-section.cy.ts      |   9 +
 11 files changed, 593 insertions(+), 120 deletions(-)
 create mode 100644 csm_web/frontend/src/components/section/month_calendar/MonthCalendar.tsx
 create mode 100644 csm_web/frontend/src/css/calendar-month.scss
 create mode 100644 csm_web/frontend/static/frontend/img/angle-left-solid.svg
 create mode 100644 csm_web/frontend/static/frontend/img/angle-right-solid.svg
 create mode 100644 csm_web/frontend/static/frontend/img/calendar.svg

diff --git a/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx b/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx
index 3c91902c..a8cc24ef 100644
--- a/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx
+++ b/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx
@@ -1,3 +1,4 @@
+import { DateTime } from "luxon";
 import randomWords from "random-words";
 import React, { useState, useEffect } from "react";
 
@@ -7,11 +8,13 @@ import {
   useUpdateWordOfTheDayMutation,
   useWordOfTheDay
 } from "../../utils/queries/sections";
-import { Attendance } from "../../utils/types";
+import { Attendance, AttendancePresence } from "../../utils/types";
 import LoadingSpinner from "../LoadingSpinner";
 import { ATTENDANCE_LABELS } from "./Section";
+import { CalendarMonth } from "./month_calendar/MonthCalendar";
 import { dateSortISO, formatDateLocaleShort } from "./utils";
 
+import CalendarIcon from "../../../static/frontend/img/calendar.svg";
 import CheckCircle from "../../../static/frontend/img/check_circle.svg";
 
 import scssColors from "../../css/base/colors-export.module.scss";
@@ -79,12 +82,16 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
   const [responseStatus, setResponseStatus] = useState<ResponseStatus>(ResponseStatus.NONE);
   const [responseText, setResponseText] = useState<string | null>(null);
 
+  const [calendarVisible, setCalendarVisible] = useState<boolean>(true);
+  const [calendarTextMap, setCalendarTextMap] = useState<Map<string, string>>(new Map());
+
   /**
    * Update state based on new fetched attendances
    */
   useEffect(() => {
     if (jsonAttendancesLoaded) {
       const newOccurrenceMap = new Map<number, { date: string; attendances: Attendance[] }>();
+      const newCalendarTextMap = new Map<string, string>();
       for (const occurrence of jsonAttendances) {
         const attendances: Attendance[] = occurrence.attendances
           .map(({ id, presence, date, studentId, studentName, studentEmail, wordOfTheDayDeadline }) => ({
@@ -97,6 +104,10 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
           }))
           .sort((att1, att2) => att1.student.name.toLowerCase().localeCompare(att2.student.name.toLowerCase()));
         newOccurrenceMap.set(occurrence.id, { date: occurrence.date, attendances });
+
+        const numAttendances = attendances.length;
+        const numPresent = attendances.filter(att => att.presence == AttendancePresence.PR).length;
+        newCalendarTextMap.set(occurrence.date, `${numPresent}/${numAttendances}`);
       }
 
       const newSortedOccurrences = Array.from(newOccurrenceMap.entries())
@@ -106,12 +117,18 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
         .map(([occurrenceId, { date: occurrenceDate }]) => ({ id: occurrenceId, date: occurrenceDate }));
 
       setOccurrenceMap(newOccurrenceMap);
+      setCalendarTextMap(newCalendarTextMap);
       setSortedOccurrences(newSortedOccurrences);
 
       let newAttendances = null;
       if (selectedOccurrence === null) {
         // only update selected occurrence if it has not been set before
-        setSelectedOcurrence(newSortedOccurrences[0]);
+
+        // filter for future occurrences
+        const now = DateTime.now().startOf("day");
+        const futureOccurrences = newSortedOccurrences.filter(occurrence => DateTime.fromISO(occurrence.date) >= now);
+        // set to the most recent future occurrence
+        setSelectedOcurrence(futureOccurrences[futureOccurrences.length - 1]);
         newAttendances = newOccurrenceMap.get(newSortedOccurrences[0]?.id)?.attendances;
       } else {
         // otherwise use existing selectedOccurrence
@@ -139,6 +156,18 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
     }
   }, [selectedOccurrence, wotd]);
 
+  /**
+   * Whenever the user changes tab, make sure it is in view.
+   */
+  useEffect(() => {
+    if (selectedOccurrence != null) {
+      const tab = document.getElementById(`date-tab-${selectedOccurrence.id}`);
+      if (tab != null) {
+        tab.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    }
+  }, [selectedOccurrence]);
+
   /**
    * Select a new tab, updating the various states
    *
@@ -151,6 +180,10 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
     setResponseText(null);
   }
 
+  function handleToggleCalendar() {
+    setCalendarVisible(visible => !visible);
+  }
+
   /**
    * Change a student's attendance
    *
@@ -161,7 +194,7 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
     const newStagedAttendances = stagedAttendances || occurrenceMap!.get(sortedOccurrences[0].id);
     setStagedAttendances(
       newStagedAttendances?.map(attendance =>
-        attendance.id == Number(id) ? { ...attendance, presence: value } : attendance
+        attendance.id == Number(id) ? { ...attendance, presence: value as AttendancePresence } : attendance
       )
     );
   }
@@ -203,7 +236,7 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
       setSelectedOcurrence(newSelectedOccurrence);
       setStagedAttendances(newStagedAttendances);
     }
-    setStagedAttendances(stagedAttendances.map(attendance => ({ ...attendance, presence: "PR" })));
+    setStagedAttendances(stagedAttendances.map(attendance => ({ ...attendance, presence: AttendancePresence.PR })));
   }
 
   /**
@@ -253,112 +286,141 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
         {jsonAttendancesLoaded && occurrenceMap !== null ? (
           <React.Fragment>
             <div id="mentor-attendance">
-              <div id="attendance-date-tabs-container">
-                {sortedOccurrences.map(({ id, date }) => (
-                  <div
-                    key={id}
-                    className={id === selectedOccurrence!.id ? "active" : ""}
-                    onClick={() => handleSelectOccurrence({ id, date })}
-                  >
-                    {formatDateLocaleShort(date)}
-                  </div>
-                ))}
-              </div>
-              <table className="csm-table" id="mentor-attendance-table">
-                <tbody>
-                  {selectedOccurrence &&
-                    stagedAttendances.map(({ id, student, presence }) => {
-                      const cssSuffix = ATTENDANCE_LABELS[presence][1].toLowerCase();
-                      const attendanceColor = scssColors[`attendance-${cssSuffix}`];
-                      const attendanceFgColor = scssColors[`attendance-${cssSuffix}-fg`];
-                      return (
-                        <tr key={id} className="csm-table-row">
-                          <td className="csm-table-item">{student.name}</td>
-                          <td className="csm-table-item">
-                            <select
-                              value={presence}
-                              name={String(id)}
-                              className="form-select mentor-attendance-input"
-                              style={{ backgroundColor: attendanceColor, color: attendanceFgColor }}
-                              onChange={handleAttendanceChange}
-                            >
-                              {Object.entries(ATTENDANCE_LABELS).map(([value, [label]]) => (
-                                <option key={value} value={value} disabled={!value}>
-                                  {label}
-                                </option>
-                              ))}
-                            </select>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                </tbody>
-              </table>
-              <div id="mentor-attendance-controls">
-                {showSaveSpinner && <LoadingSpinner />}
-                {showAttendanceSaveSuccess && <CheckCircle height="2em" width="2em" />}
-                <button className="primary-link-btn" onClick={handleMarkAllPresent}>
-                  Mark All As Present
-                </button>
-                <button className="primary-btn" onClick={handleSaveAttendance}>
-                  Save
-                </button>
+              <div id="attendance-side-bar">
+                <div
+                  id="attendance-calendar-toggle"
+                  className={calendarVisible ? "active" : ""}
+                  onClick={handleToggleCalendar}
+                >
+                  <CalendarIcon className="icon" />
+                </div>
+                <div id="attendance-date-tabs-container">
+                  {sortedOccurrences.map(({ id, date }) => (
+                    <div
+                      key={id}
+                      id={`date-tab-${id}`}
+                      className={id === selectedOccurrence!.id ? "active" : ""}
+                      onClick={() => handleSelectOccurrence({ id, date })}
+                    >
+                      {formatDateLocaleShort(date)}
+                    </div>
+                  ))}
+                </div>
               </div>
-              <div id="word-of-the-day-container">
-                <h4 className="word-of-the-day-title">
-                  Word of the Day ({selectedOccurrence ? formatDateLocaleShort(selectedOccurrence.date) : "unselected"})
-                </h4>
-                {wotdLoaded ? (
-                  <React.Fragment>
-                    <p className="word-of-the-day-text">
-                      Status:{" "}
-                      {initialWordOfTheDay ? (
-                        <span className="word-of-the-day-status selected">Selected</span>
-                      ) : (
-                        <span className="word-of-the-day-status unselected">Unselected</span>
-                      )}
-                    </p>
-                    <div className="word-of-the-day-action-container">
-                      <div className="word-of-the-day-input-container">
-                        <input
-                          className="form-input"
-                          name="word-of-the-day"
-                          type="text"
-                          placeholder="Word of the Day"
-                          value={wordOfTheDay}
-                          onChange={e => {
-                            setWordOfTheDay(e.target.value);
-                          }}
-                        />
-                        <button className="primary-link-btn" onClick={handlePickRandomWord}>
-                          Random
-                        </button>
-                      </div>
-                      <div className="word-of-the-day-submit-container">
-                        {responseStatus === ResponseStatus.LOADING ? (
-                          <LoadingSpinner />
-                        ) : responseStatus === ResponseStatus.OK ? (
-                          <CheckCircle className="word-of-the-day-icon" />
-                        ) : null}
-                        <button
-                          className="primary-btn"
-                          onClick={handleSubmitWord}
-                          disabled={!wordOfTheDay || initialWordOfTheDay == wordOfTheDay}
-                        >
-                          {initialWordOfTheDay ? "Update" : "Submit"}
-                        </button>
+              <div id="mentor-attendance-content">
+                <table className="csm-table" id="mentor-attendance-table">
+                  <tbody>
+                    {selectedOccurrence &&
+                      stagedAttendances.map(({ id, student, presence }) => {
+                        const cssSuffix = ATTENDANCE_LABELS[presence][1].toLowerCase();
+                        const attendanceColor = scssColors[`attendance-${cssSuffix}`];
+                        const attendanceFgColor = scssColors[`attendance-${cssSuffix}-fg`];
+                        return (
+                          <tr key={id} className="csm-table-row">
+                            <td className="csm-table-item">{student.name}</td>
+                            <td className="csm-table-item">
+                              <select
+                                value={presence}
+                                name={String(id)}
+                                className="form-select mentor-attendance-input"
+                                style={{ backgroundColor: attendanceColor, color: attendanceFgColor }}
+                                onChange={handleAttendanceChange}
+                              >
+                                {Object.entries(ATTENDANCE_LABELS).map(([value, [label]]) => (
+                                  <option key={value} value={value} disabled={!value}>
+                                    {label}
+                                  </option>
+                                ))}
+                              </select>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                  </tbody>
+                </table>
+                <div id="mentor-attendance-controls">
+                  {showSaveSpinner && <LoadingSpinner />}
+                  {showAttendanceSaveSuccess && <CheckCircle height="2em" width="2em" />}
+                  <button className="primary-link-btn" onClick={handleMarkAllPresent}>
+                    Mark All As Present
+                  </button>
+                  <button className="primary-btn" onClick={handleSaveAttendance}>
+                    Save
+                  </button>
+                </div>
+                <div id="word-of-the-day-container">
+                  <h4 className="word-of-the-day-title">
+                    Word of the Day (
+                    {selectedOccurrence ? formatDateLocaleShort(selectedOccurrence.date) : "unselected"})
+                  </h4>
+                  {wotdLoaded ? (
+                    <React.Fragment>
+                      <p className="word-of-the-day-text">
+                        Status:{" "}
+                        {initialWordOfTheDay ? (
+                          <span className="word-of-the-day-status selected">Selected</span>
+                        ) : (
+                          <span className="word-of-the-day-status unselected">Unselected</span>
+                        )}
+                      </p>
+                      <div className="word-of-the-day-action-container">
+                        <div className="word-of-the-day-input-container">
+                          <input
+                            className="form-input"
+                            name="word-of-the-day"
+                            type="text"
+                            placeholder="Word of the Day"
+                            value={wordOfTheDay}
+                            onChange={e => {
+                              setWordOfTheDay(e.target.value);
+                            }}
+                          />
+                          <button className="primary-link-btn" onClick={handlePickRandomWord}>
+                            Random
+                          </button>
+                        </div>
+                        <div className="word-of-the-day-submit-container">
+                          {responseStatus === ResponseStatus.LOADING ? (
+                            <LoadingSpinner />
+                          ) : responseStatus === ResponseStatus.OK ? (
+                            <CheckCircle className="word-of-the-day-icon" />
+                          ) : null}
+                          <button
+                            className="primary-btn"
+                            onClick={handleSubmitWord}
+                            disabled={!wordOfTheDay || initialWordOfTheDay == wordOfTheDay}
+                          >
+                            {initialWordOfTheDay ? "Update" : "Submit"}
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                    <div className="word-of-the-day-status-bar">{responseText}</div>
-                  </React.Fragment>
-                ) : wotdError ? (
-                  <h3>Error loading word of the day</h3>
-                ) : (
-                  <LoadingSpinner />
-                )}
+                      <div className="word-of-the-day-status-bar">{responseText}</div>
+                    </React.Fragment>
+                  ) : wotdError ? (
+                    <h3>Error loading word of the day</h3>
+                  ) : (
+                    <LoadingSpinner />
+                  )}
+                </div>
+                {!jsonAttendancesLoaded && <LoadingSpinner />}
               </div>
-              {!jsonAttendancesLoaded && <LoadingSpinner />}
             </div>
+            {calendarVisible && (
+              <div id="mentor-attendance-calendar">
+                <CalendarMonth
+                  occurrenceDates={sortedOccurrences.map(occurrence => occurrence.date)}
+                  occurrenceTextMap={calendarTextMap}
+                  selectedOccurrence={selectedOccurrence?.date}
+                  onClickDate={date => {
+                    // find the section occurrence with the given date
+                    const clickedOccurrence = sortedOccurrences.find(occurrence => occurrence.date === date);
+                    if (clickedOccurrence) {
+                      handleSelectOccurrence(clickedOccurrence);
+                    }
+                  }}
+                />
+              </div>
+            )}
           </React.Fragment>
         ) : (
           <LoadingSpinner />
diff --git a/csm_web/frontend/src/components/section/Section.tsx b/csm_web/frontend/src/components/section/Section.tsx
index 769d7919..aff0d204 100644
--- a/csm_web/frontend/src/components/section/Section.tsx
+++ b/csm_web/frontend/src/components/section/Section.tsx
@@ -64,7 +64,7 @@ export function SectionSidebar({ links }: SectionSidebarProps) {
   return (
     <nav id="section-detail-sidebar">
       {links.map(([label, href]) => (
-        <NavLink end to={href} key={href}>
+        <NavLink end to={`${href}`} key={href}>
           {label}
         </NavLink>
       ))}
diff --git a/csm_web/frontend/src/components/section/month_calendar/MonthCalendar.tsx b/csm_web/frontend/src/components/section/month_calendar/MonthCalendar.tsx
new file mode 100644
index 00000000..62d48ffd
--- /dev/null
+++ b/csm_web/frontend/src/components/section/month_calendar/MonthCalendar.tsx
@@ -0,0 +1,210 @@
+import { DateTime, Info } from "luxon";
+import React, { useEffect, useState } from "react";
+
+import LeftArrow from "../../../../static/frontend/img/angle-left-solid.svg";
+import RightArrow from "../../../../static/frontend/img/angle-right-solid.svg";
+
+import "../../../css/calendar-month.scss";
+
+interface CalendarMonthProps {
+  // List of dates that have occurrences, in ISO format
+  occurrenceDates: string[];
+  // Mapping between occurrence dates and text to display for that occurrence.
+  // Keys should match items in `occurrenceDates` exactly; some elements can be omitted.
+  occurrenceTextMap: Map<string, string>;
+  selectedOccurrence?: string;
+  // click handler; the date in ISO format is passed in as an argument
+  onClickDate: (day: string) => void;
+}
+
+export const CalendarMonth = ({
+  occurrenceDates,
+  occurrenceTextMap,
+  selectedOccurrence,
+  onClickDate
+}: CalendarMonthProps) => {
+  /**
+   * Current ISO month number.
+   */
+  const [curMonth, setCurMonth] = useState<number>(DateTime.now().month);
+  /**
+   * Current year.
+   */
+  const [curYear, setCurYear] = useState<number>(DateTime.now().year);
+
+  useEffect(() => {
+    if (selectedOccurrence != null) {
+      // upon change of the selected occurence, make sure the calendar also matches
+      const selectedDateTime = DateTime.fromISO(selectedOccurrence);
+      if (curMonth !== selectedDateTime.month) {
+        setCurMonth(selectedDateTime.month);
+      }
+      if (curYear != selectedDateTime.year) {
+        setCurYear(selectedDateTime.year);
+      }
+    }
+  }, [selectedOccurrence]);
+
+  const modifyMonth = (diff: number) => {
+    const curDate = DateTime.fromObject({ year: curYear, month: curMonth });
+    const nextDate = curDate.plus({ months: diff });
+
+    setCurMonth(nextDate.month);
+    setCurYear(nextDate.year);
+  };
+
+  /**
+   * Navigate to the current month.
+   */
+  const handleToday = () => {
+    const today = DateTime.now();
+    setCurMonth(today.month);
+    setCurYear(today.year);
+  };
+
+  /**
+   * Compute the weekday index from an ISO weekday number (1-7).
+   * This accounts for any shifting that we need to perform to display days in the calendar.
+   */
+  const weekdayIndexFromISO = (weekday: number) => {
+    return weekday % 7;
+  };
+
+  const weekdayISOFromIndex = (idx: number) => {
+    return ((idx + 6) % 7) + 1;
+  };
+
+  const curMonthFirstDay = DateTime.fromObject({ year: curYear, month: curMonth, day: 1 });
+  const nextMonthFirstDay = curMonthFirstDay.plus({ months: 1 });
+
+  const monthGrid: React.ReactNode[][] = [];
+  // push empty days until the first day of the month
+  const firstWeekPadding = [...Array(weekdayIndexFromISO(curMonthFirstDay.weekday))].map((_, idx) => (
+    <CalendarMonthDay key={-idx} year={-1} month={-1} day={-1} isoDate="" hasOccurrence={false} selected={false} />
+  ));
+  monthGrid.push(firstWeekPadding);
+
+  for (let date = curMonthFirstDay; date < nextMonthFirstDay; date = date.plus({ days: 1 })) {
+    // get last week in month grid
+    const curWeek = monthGrid[monthGrid.length - 1];
+
+    const curDay = (
+      <CalendarMonthDay
+        key={date.day}
+        year={date.year}
+        month={date.month}
+        day={date.day}
+        isoDate={date.toISODate() ?? ""}
+        hasOccurrence={occurrenceDates.includes(date.toISODate()!)}
+        text={occurrenceTextMap.get(date.toISODate())}
+        selected={date.toISODate() === selectedOccurrence}
+        onClickDate={onClickDate}
+      />
+    );
+
+    if (curWeek.length < 7) {
+      curWeek.push(curDay);
+    } else {
+      monthGrid.push([curDay]);
+    }
+  }
+
+  return (
+    <div className="calendar-month-container">
+      <div className="calendar-month-header">
+        <div className="calendar-month-header-left">
+          <span className="calendar-month-title">
+            {Info.months()[curMonth - 1]} {curYear}
+          </span>
+        </div>
+        <div className="calendar-month-header-right">
+          <button className="calendar-month-today-btn" onClick={handleToday}>
+            Today
+          </button>
+          <LeftArrow className="icon calendar-month-nav-icon" onClick={() => modifyMonth(-1)} />
+          <RightArrow className="icon calendar-month-nav-icon" onClick={() => modifyMonth(1)} />
+        </div>
+      </div>
+      <div className="calendar-month-weekday-headers">
+        {[...Array(7)].map((_, idx) => (
+          <div key={idx} className="calendar-month-weekday-header">
+            {Info.weekdays("short")[weekdayISOFromIndex(idx) - 1]}
+          </div>
+        ))}
+      </div>
+      <div className="calendar-month-grid">
+        {monthGrid.map((monthGridWeek, idx) => (
+          <div key={idx} className="calendar-month-week">
+            {monthGridWeek}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface CalendarMonthDayProps {
+  year: number;
+  month: number;
+  day: number;
+  isoDate: string;
+  // Text to be displayed in the calendar day
+  text?: string;
+  hasOccurrence: boolean;
+  selected: boolean;
+  onClickDate?: (date: string) => void;
+}
+
+/**
+ * Calendar month day component.
+ *
+ * If `day` is -1, displays an empty box.
+ */
+export const CalendarMonthDay = ({
+  year,
+  month,
+  day,
+  isoDate,
+  text,
+  hasOccurrence,
+  selected,
+  onClickDate
+}: CalendarMonthDayProps) => {
+  const today = DateTime.now();
+  const curDate = DateTime.fromObject({ year, month, day });
+  const isTransparent = day === -1;
+  const classes = ["calendar-month-day"];
+  if (isTransparent) {
+    // transparent higher priority than disabled
+    classes.push("transparent");
+  } else if (selected) {
+    classes.push("selected");
+  } else if (hasOccurrence) {
+    classes.push("with-occurrence");
+  }
+
+  if (year === today.year && month === today.month && day == today.day) {
+    classes.push("today");
+  } else if (curDate < today) {
+    classes.push("past");
+  }
+
+  const handleClick = () => {
+    if (onClickDate != null && !selected && hasOccurrence) {
+      onClickDate(isoDate);
+    }
+  };
+
+  return (
+    <div className={classes.join(" ")} onClick={handleClick}>
+      {isTransparent ? (
+        <span></span>
+      ) : (
+        <>
+          <span className="calendar-month-day-number">{day}</span>
+          <span className="calendar-month-day-text">{text}</span>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/csm_web/frontend/src/css/base/_variables.scss b/csm_web/frontend/src/css/base/_variables.scss
index f422f3b7..88dc34b5 100644
--- a/csm_web/frontend/src/css/base/_variables.scss
+++ b/csm_web/frontend/src/css/base/_variables.scss
@@ -43,6 +43,12 @@ $calendar-hover-event: #d2ffd2;
 $calendar-hover-shadow: #ccc;
 $calendar-select-event: #90ee90;
 
+/// month calendar colors
+$calendar-day-occurrence: #d2ffd2;
+$calendar-day-occurrence-hover: #bce6bc;
+$calendar-day-selected: #9bdaff;
+$calendar-day-today: #444;
+
 /// Fonts
 $default-font: "Montserrat", sans-serif;
 
diff --git a/csm_web/frontend/src/css/calendar-month.scss b/csm_web/frontend/src/css/calendar-month.scss
new file mode 100644
index 00000000..7d6d5624
--- /dev/null
+++ b/csm_web/frontend/src/css/calendar-month.scss
@@ -0,0 +1,135 @@
+@use "base/variables" as *;
+
+.calendar-month-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.calendar-month-header-left {
+  display: flex;
+}
+
+.calendar-month-header-right {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.calendar-month-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.calendar-month-nav-icon {
+  width: 0.9rem;
+  height: fit-content;
+  margin: 0 8px;
+
+  color: #333;
+
+  cursor: pointer;
+  user-select: none;
+}
+
+.calendar-month-nav-icon:hover {
+  color: #888;
+}
+
+.calendar-month-today-btn {
+  width: fit-content;
+  padding: 4px 8px;
+  margin: 8px 16px 8px 0;
+
+  font-weight: bold;
+  color: #333;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+
+  border: 2px solid #555;
+  border-radius: 8px;
+}
+
+.calendar-month-today-btn:hover {
+  color: #888;
+  border-color: #aaa;
+}
+
+.calendar-month-weekday-headers {
+  display: grid;
+  grid-template-columns: repeat(7, 5.5em);
+  gap: 2px;
+
+  padding: 5px 0;
+
+  text-align: center;
+  user-select: none;
+  background-color: $calendar-header-bg;
+}
+
+.calendar-month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 5.5em);
+  gap: 2px;
+
+  background-color: $calendar-border;
+  border: 2px solid $calendar-border;
+}
+
+.calendar-month-week {
+  display: contents;
+}
+
+.calendar-month-day {
+  position: relative;
+  box-sizing: border-box;
+  height: 4em;
+
+  user-select: none;
+
+  border: 2px solid transparent;
+}
+
+.calendar-month-day:not(.transparent) {
+  background-color: $calendar-day-bg;
+}
+
+.calendar-month-day.with-occurrence {
+  background-color: $calendar-day-occurrence;
+}
+
+.calendar-month-day.with-occurrence:hover {
+  cursor: pointer;
+  background-color: $calendar-day-occurrence-hover;
+}
+
+.calendar-month-day.selected {
+  background-color: $calendar-day-selected;
+}
+
+.calendar-month-day.today {
+  border-color: $calendar-day-today;
+}
+
+.calendar-month-day.past {
+  filter: brightness(0.95);
+}
+
+.calendar-month-day-number {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+}
+
+.calendar-month-day-text {
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+
+  font-style: italic;
+  color: #555;
+}
diff --git a/csm_web/frontend/src/css/section.scss b/csm_web/frontend/src/css/section.scss
index 97b4e801..9bdacabf 100644
--- a/csm_web/frontend/src/css/section.scss
+++ b/csm_web/frontend/src/css/section.scss
@@ -3,6 +3,10 @@
 
 @use "base/variables" as *;
 
+/// local variables
+$attendance-outer-radius: 20px;
+$attendance-tab-radius: 10px;
+
 .override-label {
   width: fit-content;
   padding: 3px 5px;
@@ -16,19 +20,15 @@
 .section-detail-info-card-contents {
   position: relative;
   min-width: 12em;
-}
-
-.section-detail-info-card-contents,
-#mentor-attendance {
   border: 2px solid #e7e7e7;
-  border-radius: 20px;
+  border-radius: $attendance-outer-radius;
   box-shadow: 0 4px 4px rgb(198 198 198 / 25%);
 }
 
 /// only add padding if specified,
 /// or if it's the mentor attendance table
 .section-detail-info-card-contents.padded-card,
-#mentor-attendance {
+#mentor-attendance-content {
   padding: 40px;
 }
 
@@ -369,21 +369,62 @@
 .mentor-attendance-page {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  gap: 25px;
+  align-items: flex-start;
 }
 
 #mentor-attendance {
+  display: flex;
+  flex-direction: row;
+
+  border-radius: 0 $attendance-outer-radius $attendance-outer-radius $attendance-tab-radius;
+  box-shadow: 4px 4px 4px rgb(198 198 198 / 25%);
+}
+
+#mentor-attendance-content {
   max-width: 500px;
   padding-top: 0;
   padding-bottom: 30px;
   overflow: hidden;
-  border-top: none;
+  border: 2px solid #e7e7e7;
+  border-radius: 0 $attendance-outer-radius $attendance-outer-radius 0;
+}
+
+#attendance-side-bar {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: $attendance-tab-radius 0 0 $attendance-tab-radius;
+}
+
+#attendance-calendar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  color: #5e5e5e;
+  cursor: pointer;
+}
+
+#attendance-calendar-toggle:hover {
+  background-color: #fafafa;
+}
+
+#attendance-calendar-toggle.active {
+  background-color: #dedede;
+}
+
+#attendance-calendar-toggle.active:hover {
+  background-color: #e8e8e8;
 }
 
 #attendance-date-tabs-container {
   display: flex;
-  margin: 0 -40px;
-  overflow: scroll hidden;
+  flex-basis: 0;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0;
+  overflow: hidden scroll;
 }
 
 #attendance-date-tabs-container > div {
@@ -393,7 +434,8 @@
   cursor: pointer;
   background-color: #f0f0f0;
   border: 1px solid #e9e9e9;
-  border-radius: 10px 10px 0 0;
+  border-right: 0;
+  border-radius: $attendance-tab-radius 0 0 $attendance-tab-radius;
 }
 
 #attendance-date-tabs-container > div:hover {
diff --git a/csm_web/frontend/src/utils/types.tsx b/csm_web/frontend/src/utils/types.tsx
index 78e9f215..e7416e9b 100644
--- a/csm_web/frontend/src/utils/types.tsx
+++ b/csm_web/frontend/src/utils/types.tsx
@@ -82,11 +82,17 @@ export interface Student {
   email: string;
 }
 
+export enum AttendancePresence {
+  EX = "EX",
+  PR = "PR",
+  UN = "UN"
+}
+
 export interface Attendance {
   id: number;
   date: string;
   student: Student;
-  presence: string;
+  presence: AttendancePresence;
   occurrenceId: number;
   wordOfTheDayDeadline: string;
 }
@@ -98,7 +104,7 @@ export interface RawAttendance {
   attendances: Array<{
     id: number;
     date: string;
-    presence: string;
+    presence: AttendancePresence;
     studentName: string;
     studentId: number;
     studentEmail: string;
diff --git a/csm_web/frontend/static/frontend/img/angle-left-solid.svg b/csm_web/frontend/static/frontend/img/angle-left-solid.svg
new file mode 100644
index 00000000..a04e5812
--- /dev/null
+++ b/csm_web/frontend/static/frontend/img/angle-left-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
diff --git a/csm_web/frontend/static/frontend/img/angle-right-solid.svg b/csm_web/frontend/static/frontend/img/angle-right-solid.svg
new file mode 100644
index 00000000..3459dd3f
--- /dev/null
+++ b/csm_web/frontend/static/frontend/img/angle-right-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
diff --git a/csm_web/frontend/static/frontend/img/calendar.svg b/csm_web/frontend/static/frontend/img/calendar.svg
new file mode 100644
index 00000000..1d1927cc
--- /dev/null
+++ b/csm_web/frontend/static/frontend/img/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>
diff --git a/cypress/e2e/section/mentor-section.cy.ts b/cypress/e2e/section/mentor-section.cy.ts
index 9b8b84a8..3b6db8b8 100644
--- a/cypress/e2e/section/mentor-section.cy.ts
+++ b/cypress/e2e/section/mentor-section.cy.ts
@@ -98,6 +98,15 @@ describe("attendances", () => {
     cy.get("#attendance-date-tabs-container")
       .children()
       .should("have.length", 2)
+      // click first (inactive) tab (it's in the future)
+      .first()
+      .then($tab => {
+        cy.wrap($tab).should("not.have.class", "active").click();
+        cy.wrap($tab).should("have.class", "active");
+      });
+
+    cy.get("#attendance-date-tabs-container")
+      .children()
       // click second (inactive) tab
       .last()
       .then($tab => {