replace Sunday rows with weekly summary in student stats

Sundays are not meeting days. Instead of showing a row for each
Sunday, display a weekly aggregation (Mon-Sat): attendance as
on-time/late/missed, midday PR and EOD as days-with/6, and
total PRs summed for the week.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: dsshimel

attendabot/frontend/src/components/StudentStats.tsx

@@ -1,15 +1,21 @@
 /**
  * @fileoverview Displays daily stats for the student: attendance, PRs, EOD.
+ * Sundays are replaced with a weekly summary row aggregating Mon-Sat.
  */
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { getMyStats } from "../api/client";
 import type { DailyStats } from "../api/client";
 
 interface StudentStatsProps {
   studentDiscordId?: string;
 }
 
+/** A row in the stats table — either a single day or a weekly summary. */
+type StatsRow =
+  | { type: "day"; day: DailyStats }
+  | { type: "week"; sundayDate: string; weekDays: DailyStats[] };
+
 /** Renders a table of daily stats for the student over the last 30 days. */
 export function StudentStats({ studentDiscordId }: StudentStatsProps) {
   const [days, setDays] = useState<DailyStats[]>([]);
@@ -31,6 +37,35 @@ export function StudentStats({ studentDiscordId }: StudentStatsProps) {
     });
   }, [studentDiscordId]);
 
+  /** Build rows: normal days for Mon-Sat, weekly summary rows replacing Sundays. */
+  const rows: StatsRow[] = useMemo(() => {
+    // days is sorted DESC by date
+    const result: StatsRow[] = [];
+    // Group days by their week (Sunday = week boundary)
+    // For each Sunday, collect the preceding Mon-Sat
+    const daysByDate = new Map(days.map((d) => [d.date, d]));
+
+    for (const day of days) {
+      const date = new Date(day.date + "T12:00:00");
+      const dow = date.getDay(); // 0 = Sunday
+      if (dow === 0) {
+        // Collect Mon-Sat of this week (Mon = Sunday-6, Sat = Sunday-1)
+        const weekDays: DailyStats[] = [];
+        for (let offset = 6; offset >= 1; offset--) {
+          const d = new Date(date);
+          d.setDate(d.getDate() - offset);
+          const key = d.toISOString().split("T")[0];
+          const found = daysByDate.get(key);
+          if (found) weekDays.push(found);
+        }
+        result.push({ type: "week", sundayDate: day.date, weekDays });
+      } else {
+        result.push({ type: "day", day });
+      }
+    }
+    return result;
+  }, [days]);
+
   if (loading) {
     return (
       <div className="panel" style={{ gridColumn: "span 2" }}>
@@ -58,47 +93,93 @@ export function StudentStats({ studentDiscordId }: StudentStatsProps) {
               </tr>
             </thead>
             <tbody>
-              {days.map((day) => (
-                <tr key={day.date}>
-                  <td>
-                    {new Date(day.date + "T12:00:00").toLocaleDateString("en-US", {
-                      weekday: "short",
-                      month: "short",
-                      day: "numeric",
-                    })}
-                  </td>
-                  <td>
-                    {day.attendancePosted ? (
-                      <span style={{ color: day.attendanceOnTime ? "#2d6a2e" : "#8B6914" }}>
-                        {day.attendanceOnTime ? "On time" : "Late"}
-                      </span>
-                    ) : (
-                      <span style={{ color: "var(--color-error)" }}>Missed</span>
-                    )}
-                  </td>
-                  <td>
-                    {day.middayPrPosted ? (
-                      <span style={{ color: "#2d6a2e" }}>
-                        {day.middayPrCount} PR{day.middayPrCount !== 1 ? "s" : ""}
-                      </span>
-                    ) : (
-                      <span style={{ color: "var(--color-error)" }}>None</span>
-                    )}
-                  </td>
-                  <td>
-                    {day.eodPosted ? (
-                      <span style={{ color: "#2d6a2e" }}>Posted</span>
-                    ) : (
-                      <span style={{ color: "var(--color-error)" }}>Missing</span>
-                    )}
-                  </td>
-                  <td style={{ fontWeight: 700 }}>{day.totalPrCount}</td>
-                </tr>
-              ))}
+              {rows.map((row) =>
+                row.type === "day" ? (
+                  <DayRow key={row.day.date} day={row.day} />
+                ) : (
+                  <WeekRow key={row.sundayDate} sundayDate={row.sundayDate} weekDays={row.weekDays} />
+                ),
+              )}
             </tbody>
           </table>
         </div>
       )}
     </div>
   );
 }
+
+/** Renders a single day row. */
+function DayRow({ day }: { day: DailyStats }) {
+  return (
+    <tr>
+      <td>
+        {new Date(day.date + "T12:00:00").toLocaleDateString("en-US", {
+          weekday: "short",
+          month: "short",
+          day: "numeric",
+        })}
+      </td>
+      <td>
+        {day.attendancePosted ? (
+          <span style={{ color: day.attendanceOnTime ? "#2d6a2e" : "#8B6914" }}>
+            {day.attendanceOnTime ? "On time" : "Late"}
+          </span>
+        ) : (
+          <span style={{ color: "var(--color-error)" }}>Missed</span>
+        )}
+      </td>
+      <td>
+        {day.middayPrPosted ? (
+          <span style={{ color: "#2d6a2e" }}>
+            {day.middayPrCount} PR{day.middayPrCount !== 1 ? "s" : ""}
+          </span>
+        ) : (
+          <span style={{ color: "var(--color-error)" }}>None</span>
+        )}
+      </td>
+      <td>
+        {day.eodPosted ? (
+          <span style={{ color: "#2d6a2e" }}>Posted</span>
+        ) : (
+          <span style={{ color: "var(--color-error)" }}>Missing</span>
+        )}
+      </td>
+      <td style={{ fontWeight: 700 }}>{day.totalPrCount}</td>
+    </tr>
+  );
+}
+
+/** Renders a weekly summary row replacing a Sunday. */
+function WeekRow({ sundayDate, weekDays }: { sundayDate: string; weekDays: DailyStats[] }) {
+  const onTime = weekDays.filter((d) => d.attendancePosted && d.attendanceOnTime).length;
+  const late = weekDays.filter((d) => d.attendancePosted && !d.attendanceOnTime).length;
+  const missed = weekDays.filter((d) => !d.attendancePosted).length;
+  const middayDays = weekDays.filter((d) => d.middayPrPosted).length;
+  const eodDays = weekDays.filter((d) => d.eodPosted).length;
+  const totalPrs = weekDays.reduce((sum, d) => sum + d.totalPrCount, 0);
+
+  // Find Mon date for the label (Sunday - 6)
+  const sun = new Date(sundayDate + "T12:00:00");
+  const mon = new Date(sun);
+  mon.setDate(mon.getDate() - 6);
+  const fmt = (d: Date) =>
+    d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+
+  return (
+    <tr style={{ background: "var(--color-platinum)" }}>
+      <td style={{ fontWeight: 700 }}>
+        Week: {fmt(mon)} – {fmt(sun)}
+      </td>
+      <td>
+        <span style={{ color: "#2d6a2e" }}>{onTime}</span>
+        {" / "}
+        <span style={{ color: "#8B6914" }}>{late}</span>
+        {" / "}
+        <span style={{ color: "var(--color-error)" }}>{missed}</span>
+      </td>
+      <td>{middayDays}/6</td>
+      <td>{eodDays}/6</td>
+      <td style={{ fontWeight: 700 }}>{totalPrs}</td>
+    </tr>
+  );
+}