From 058b684f9b47c96c1f85087ddeff491d6ed268be Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sat, 18 Oct 2025 19:12:56 -0400
Subject: [PATCH 01/54] added category attribute to requirements, seeded mock
 data

---
 packages/server/convex/_generated/api.d.ts |   4 +
 packages/server/convex/http.ts             |   6 +
 packages/server/convex/mockData.ts         | 189 +++++++++++++++++++++
 packages/server/convex/requirements.ts     |   2 +
 packages/server/convex/schemas/programs.ts |   3 +
 packages/server/convex/seed.ts             | 100 +++++++++++
 6 files changed, 304 insertions(+)
 create mode 100644 packages/server/convex/mockData.ts
 create mode 100644 packages/server/convex/seed.ts

diff --git a/packages/server/convex/_generated/api.d.ts b/packages/server/convex/_generated/api.d.ts
index 22832dc4..36e57d45 100644
--- a/packages/server/convex/_generated/api.d.ts
+++ b/packages/server/convex/_generated/api.d.ts
@@ -13,6 +13,7 @@ import type * as courseOfferings from "../courseOfferings.js";
 import type * as courses from "../courses.js";
 import type * as helpers_auth from "../helpers/auth.js";
 import type * as http from "../http.js";
+import type * as mockData from "../mockData.js";
 import type * as prerequisites from "../prerequisites.js";
 import type * as programs from "../programs.js";
 import type * as requirements from "../requirements.js";
@@ -21,6 +22,7 @@ import type * as schemas_courseOfferings from "../schemas/courseOfferings.js";
 import type * as schemas_courses from "../schemas/courses.js";
 import type * as schemas_programs from "../schemas/programs.js";
 import type * as schemas_students from "../schemas/students.js";
+import type * as seed from "../seed.js";
 import type * as students from "../students.js";
 import type * as userCourseOfferings from "../userCourseOfferings.js";
 import type * as userCourses from "../userCourses.js";
@@ -45,6 +47,7 @@ declare const fullApi: ApiFromModules<{
   courses: typeof courses;
   "helpers/auth": typeof helpers_auth;
   http: typeof http;
+  mockData: typeof mockData;
   prerequisites: typeof prerequisites;
   programs: typeof programs;
   requirements: typeof requirements;
@@ -53,6 +56,7 @@ declare const fullApi: ApiFromModules<{
   "schemas/courses": typeof schemas_courses;
   "schemas/programs": typeof schemas_programs;
   "schemas/students": typeof schemas_students;
+  seed: typeof seed;
   students: typeof students;
   userCourseOfferings: typeof userCourseOfferings;
   userCourses: typeof userCourses;
diff --git a/packages/server/convex/http.ts b/packages/server/convex/http.ts
index 2c0b731f..dbd20764 100644
--- a/packages/server/convex/http.ts
+++ b/packages/server/convex/http.ts
@@ -57,16 +57,19 @@ export const ZUpsertProgramWithRequirements = z.object({
       z.object({
         isMajor: z.boolean(),
         type: z.literal("required"),
+        category: z.string(),
         courses: z.array(z.string()),
       }),
       z.object({
         isMajor: z.boolean(),
         type: z.literal("alternative"),
+        category: z.string(),
         courses: z.array(z.string()),
       }),
       z.object({
         isMajor: z.boolean(),
         type: z.literal("options"),
+        category: z.string(),
         courses: z.array(z.string()),
         courseLevels: z.array(
           z.object({
@@ -89,6 +92,7 @@ export const ZUpsertRequirements = z.array(
       ),
       isMajor: z.boolean(),
       type: z.literal("required"),
+      category: z.string(),
       courses: z.array(z.string()),
     }),
     z.object({
@@ -98,6 +102,7 @@ export const ZUpsertRequirements = z.array(
       ),
       isMajor: z.boolean(),
       type: z.literal("alternative"),
+      category: z.string(),
       courses: z.array(z.string()),
     }),
     z.object({
@@ -107,6 +112,7 @@ export const ZUpsertRequirements = z.array(
       ),
       isMajor: z.boolean(),
       type: z.literal("options"),
+      category: z.string(),
       courses: z.array(z.string()),
       courseLevels: z.array(
         z.object({
diff --git a/packages/server/convex/mockData.ts b/packages/server/convex/mockData.ts
new file mode 100644
index 00000000..d3784d13
--- /dev/null
+++ b/packages/server/convex/mockData.ts
@@ -0,0 +1,189 @@
+/**
+ * Mock data for NYU CS curriculum
+ * This file contains sample program requirements categorized similar to cs.nyu.edu
+ */
+
+export const mockProgramsData = {
+  program: {
+    name: "Computer Science (BA)",
+    level: "undergraduate" as const,
+    programUrl: "https://cs.nyu.edu/home/undergrad/major_programs.html",
+  },
+};
+
+/**
+ * Categories for course requirements (similar to NYU CS curriculum):
+ * - Computer Science: All CS courses including core, theory, systems, and electives
+ * - Mathematics: Pure math courses
+ * - Natural Science: Physics, Chemistry, Biology
+ * - General Education: Non-CS/Math/Science requirements
+ */
+
+export const mockRequirementsData = [
+  // Computer Science Requirements
+  {
+    type: "required" as const,
+    isMajor: true,
+    category: "Computer Science",
+    courses: [
+      "CSCI-UA 101", // Intro to Computer Science
+      "CSCI-UA 102", // Data Structures
+      "CSCI-UA 201", // Computer Systems Organization
+      "CSCI-UA 310", // Basic Algorithms
+      "CSCI-UA 202", // Operating Systems
+      "CSCI-UA 480", // Parallel Computing (Special Topics)
+    ],
+  },
+
+  // Mathematics Requirements
+  {
+    type: "required" as const,
+    isMajor: true,
+    category: "Mathematics",
+    courses: [
+      "MATH-UA 120", // Discrete Mathematics
+      "MATH-UA 121", // Calculus I
+      "MATH-UA 122", // Calculus II
+    ],
+  },
+
+  // Math Alternative (students can choose one)
+  {
+    type: "alternative" as const,
+    isMajor: true,
+    category: "Mathematics",
+    courses: [
+      "MATH-UA 140", // Linear Algebra
+      "MATH-UA 325", // Analysis
+    ],
+  },
+
+  // Advanced CS Electives (options - choose courses to fulfill credit requirements)
+  {
+    type: "options" as const,
+    isMajor: true,
+    category: "Computer Science",
+    courses: [
+      "CSCI-UA 467", // Intro to Machine Learning
+      "CSCI-UA 473", // Fundamentals of AI
+      "CSCI-UA 479", // Data Management & Analysis
+      "CSCI-UA 421", // Computer Graphics
+      "CSCI-UA 453", // Theory of Computation
+      "CSCI-UA 480-009", // Computer Security
+      "CSCI-UA 480-010", // Agile Software Development
+    ],
+    courseLevels: [
+      {
+        program: "CSCI-UA",
+        level: 300,
+      },
+      {
+        program: "CSCI-UA",
+        level: 400,
+      },
+    ],
+    creditsRequired: 12, // 12 credits of electives
+  },
+
+  // Science Requirements
+  {
+    type: "required" as const,
+    isMajor: false,
+    category: "Natural Science",
+    courses: [
+      "PHYS-UA 11", // General Physics I
+      "CHEM-UA 125", // General Chemistry I
+    ],
+  },
+
+  // Science Lab Alternative
+  {
+    type: "alternative" as const,
+    isMajor: false,
+    category: "Natural Science",
+    courses: [
+      "PHYS-UA 91", // Physics Lab
+      "CHEM-UA 127", // Chemistry Lab
+      "BIOL-UA 11", // Biology Lab
+    ],
+  },
+
+  // General Education - Writing Requirements
+  {
+    type: "required" as const,
+    isMajor: false,
+    category: "General Education",
+    courses: [
+      "EXPOS-UA 1", // Writing the Essay
+    ],
+  },
+
+  // General Education - Humanities Electives
+  {
+    type: "options" as const,
+    isMajor: false,
+    category: "General Education",
+    courses: [
+      "PHIL-UA 101", // Introduction to Philosophy
+      "HIST-UA 101", // World History
+      "ENGL-UA 201", // Literature Survey
+    ],
+    courseLevels: [
+      {
+        program: "PHIL-UA",
+        level: 100,
+      },
+      {
+        program: "HIST-UA",
+        level: 100,
+      },
+      {
+        program: "ENGL-UA",
+        level: 100,
+      },
+    ],
+    creditsRequired: 6, // 6 credits of humanities
+  },
+];
+
+/**
+ * Additional sample programs for testing charts
+ */
+export const additionalMockPrograms = [
+  {
+    name: "Computer Science (BS)",
+    level: "undergraduate" as const,
+    programUrl: "https://cs.nyu.edu/home/undergrad/major_programs.html",
+  },
+  {
+    name: "Mathematics (BA)",
+    level: "undergraduate" as const,
+    programUrl: "https://math.nyu.edu/undergraduate/major.html",
+  },
+  {
+    name: "Data Science (MS)",
+    level: "graduate" as const,
+    programUrl: "https://cds.nyu.edu/academics/ms-in-data-science/",
+  },
+  {
+    name: "Economics Minor",
+    level: "undergraduate" as const,
+    programUrl: "https://as.nyu.edu/economics/undergrad/minors.html",
+  },
+  {
+    name: "Business Studies Minor",
+    level: "undergraduate" as const,
+    programUrl: "https://www.stern.nyu.edu/programs-admissions/undergraduate/academics/minors",
+  },
+];
+
+/**
+ * Course categories breakdown for charts:
+ * This can be used to visualize distribution of requirements
+ */
+export const categoryStats = {
+  "Computer Science": 10, // 6 required + 4 electives (average)
+  "Mathematics": 4, // 3 required + 1 alternative
+  "Natural Science": 3,
+  "General Education": 3,
+};
diff --git a/packages/server/convex/requirements.ts b/packages/server/convex/requirements.ts
index e79c1cf2..2b305d1c 100644
--- a/packages/server/convex/requirements.ts
+++ b/packages/server/convex/requirements.ts
@@ -14,6 +14,7 @@ export const createRequirementsInternal = internalMutation({
             programId: newReq.programId,
             isMajor: newReq.isMajor,
             type: newReq.type,
+            category: newReq.category,
             courses: newReq.courses,
             courseLevels: newReq.courseLevels,
             creditsRequired: newReq.creditsRequired,
@@ -23,6 +24,7 @@ export const createRequirementsInternal = internalMutation({
           programId: newReq.programId,
           isMajor: newReq.isMajor,
           type: newReq.type,
+          category: newReq.category,
           courses: newReq.courses,
         });
       }),
diff --git a/packages/server/convex/schemas/programs.ts b/packages/server/convex/schemas/programs.ts
index f2c56cd2..f9ba4fa9 100644
--- a/packages/server/convex/schemas/programs.ts
+++ b/packages/server/convex/schemas/programs.ts
@@ -11,18 +11,21 @@ const requirements = v.union(
     programId: v.id("programs"),
     isMajor: v.boolean(),
     type: v.literal("required"),
+    category: v.string(), // e.g., "Computer Science", "Mathematics", "Natural Science", "General Education"
     courses: v.array(v.string()), // course code
   }),
   v.object({
     programId: v.id("programs"),
     isMajor: v.boolean(),
     type: v.literal("alternative"),
+    category: v.string(), // e.g., "Computer Science", "Mathematics", "Natural Science", "General Education"
     courses: v.array(v.string()), // course code
   }),
   v.object({
     programId: v.id("programs"),
     isMajor: v.boolean(),
     type: v.literal("options"),
+    category: v.string(), // e.g., "Computer Science", "Mathematics", "Natural Science", "General Education"
     courses: v.array(v.string()), // course code
     courseLevels: v.array(
       v.object({
diff --git a/packages/server/convex/seed.ts b/packages/server/convex/seed.ts
new file mode 100644
index 00000000..e3477eab
--- /dev/null
+++ b/packages/server/convex/seed.ts
@@ -0,0 +1,100 @@
+import { internalMutation } from "./_generated/server";
+import { internal } from "./_generated/api";
+import {
+  mockProgramsData,
+  mockRequirementsData,
+  additionalMockPrograms,
+} from "./mockData";
+
+/**
+ * Seed the database with mock NYU CS curriculum data
+ * Call this mutation from the Convex dashboard to populate your database
+ */
+export const seedMockData = internalMutation({
+  args: {},
+  handler: async (ctx) => {
+    console.log("Starting to seed mock data...");
+
+    // Insert the main Computer Science (BA) program
+    const programId = await ctx.runMutation(
+      internal.programs.upsertProgramInternal,
+      mockProgramsData.program,
+    );
+
+    console.log("Created program:", programId);
+
+    // Insert requirements for the CS program
+    if (mockRequirementsData.length > 0) {
+      // First delete any existing requirements
+      await ctx.runMutation(
+        internal.requirements.deleteRequirementsByProgramInternal,
+        { programId },
+      );
+
+      // Then create new requirements
+      await ctx.runMutation(internal.requirements.createRequirementsInternal, {
+        requirements: mockRequirementsData.map((req) => ({
+          ...req,
+          programId,
+        })),
+      });
+
+      console.log(`Created ${mockRequirementsData.length} requirements`);
+    }
+
+    // Insert additional programs
+    const additionalProgramIds = [];
+    for (const program of additionalMockPrograms) {
+      const id = await ctx.runMutation(
+        internal.programs.upsertProgramInternal,
+        program,
+      );
+      additionalProgramIds.push(id);
+    }
+
+    console.log(
+      `Created ${additionalMockPrograms.length} additional programs:`,
+      additionalProgramIds,
+    );
+
+    return {
+      success: true,
+      programId,
+      additionalProgramIds,
+      requirementsCount: mockRequirementsData.length,
+    };
+  },
+});
+
+/**
+ * Clear all programs and requirements from the database
+ * Use this to reset your database before re-seeding
+ */
+export const clearAllData = internalMutation({
+  args: {},
+  handler: async (ctx) => {
+    console.log("Clearing all programs and requirements...");
+
+    // Delete all requirements first (due to foreign key relationship)
+    const allRequirements = await ctx.db.query("requirements").collect();
+    for (const req of allRequirements) {
+      await ctx.db.delete(req._id);
+    }
+
+    // Delete all programs
+    const allPrograms = await ctx.db.query("programs").collect();
+    for (const program of allPrograms) {
+      await ctx.db.delete(program._id);
+    }
+
+    console.log(
+      `Deleted ${allRequirements.length} requirements and ${allPrograms.length} programs`,
+    );
+
+    return {
+      success: true,
+      deletedRequirements: allRequirements.length,
+      deletedPrograms: allPrograms.length,
+    };
+  },
+});

From edef155293b13ea069f25173fb5705e332b956a1 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sat, 18 Oct 2025 19:31:51 -0400
Subject: [PATCH 02/54] imported shadcn chart skeleton

---
 apps/web/package.json                         |   3 +-
 .../components/charts/degree-charts.tsx       | 103 +++++
 apps/web/src/app/dashboard/page.tsx           |   8 +-
 apps/web/src/components/ui/chart.tsx          | 357 ++++++++++++++++++
 4 files changed, 469 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/app/dashboard/components/charts/degree-charts.tsx
 create mode 100644 apps/web/src/components/ui/chart.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index e394b890..8be24c32 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -28,11 +28,12 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "convex": "^1.28.0",
-    "lucide-react": "^0.545.0",
+    "lucide-react": "^0.546.0",
     "next": "^15.5.5",
     "pdfjs-dist": "^5.4.296",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "recharts": "2.15.4",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.12"
   },
diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
new file mode 100644
index 00000000..3b519f1b
--- /dev/null
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import { Bar, BarChart, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+export const description = "A mixed bar chart";
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 90, fill: "var(--color-other)" },
+];
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig;
+
+export function ChartBarMixed() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Bar Chart - Mixed</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            layout="vertical"
+            margin={{
+              left: 0,
+            }}
+          >
+            <YAxis
+              dataKey="browser"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig]?.label
+              }
+            />
+            <XAxis dataKey="visitors" type="number" hide />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Bar dataKey="visitors" layout="vertical" radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 53474f16..54868e98 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -1,7 +1,13 @@
 import FileUploadButton from "@/modules/report-parsing/components/file-upload-button";
+import { ChartBarMixed } from "./components/charts/degree-charts";
 
 const HomePage = () => {
-  return <FileUploadButton />;
+  return (
+    <div className="space-y-6 p-6">
+      <FileUploadButton />
+      <ChartBarMixed />
+    </div>
+  );
 };
 
 export default HomePage;
diff --git a/apps/web/src/components/ui/chart.tsx b/apps/web/src/components/ui/chart.tsx
new file mode 100644
index 00000000..8b42f210
--- /dev/null
+++ b/apps/web/src/components/ui/chart.tsx
@@ -0,0 +1,357 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

From db12ee9d63639cc75f781650cf6e6e231ca77ce9 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 09:33:31 -0400
Subject: [PATCH 03/54] added query to get requirements grouped by category

---
 apps/web/src/app/dashboard/components/charts/degree-charts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 3b519f1b..10a014cd 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -12,7 +12,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import {
-  ChartConfig,
+  type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,

From daac2b6ab6052cdda003da3918cd80fbd9ec981c Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 09:34:02 -0400
Subject: [PATCH 04/54] added query to get requirements grouped by category

---
 bun.lock                           |  81 ++++++++++++++++++++-
 packages/server/convex/mockData.ts | 112 ++++++++++++++++++++++++++++-
 packages/server/convex/programs.ts |  65 ++++++++++++++++-
 packages/server/convex/schema.ts   |   5 +-
 packages/server/convex/seed.ts     |  74 ++++++++++++++++---
 5 files changed, 324 insertions(+), 13 deletions(-)

diff --git a/bun.lock b/bun.lock
index 1eaca9f0..7eeb8139 100644
--- a/bun.lock
+++ b/bun.lock
@@ -79,11 +79,12 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "convex": "^1.28.0",
-        "lucide-react": "^0.545.0",
+        "lucide-react": "^0.546.0",
         "next": "^15.5.5",
         "pdfjs-dist": "^5.4.296",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "recharts": "2.15.4",
         "tailwind-merge": "^3.3.1",
         "zod": "^4.1.12",
       },
@@ -154,6 +155,8 @@
 
     "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw=="],
 
+    "@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
+
     "@babel/template": ["@babel/template@7.27.2", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", "@babel/types": "^7.27.1" } }, "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw=="],
 
     "@babel/traverse": ["@babel/traverse@7.28.4", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.4", "@babel/template": "^7.27.2", "@babel/types": "^7.28.4", "debug": "^4.3.1" } }, "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ=="],
@@ -598,6 +601,24 @@
 
     "@types/chrome": ["@types/chrome@0.1.24", "", { "dependencies": { "@types/filesystem": "*", "@types/har-format": "*" } }, "sha512-9iO9HL2bMeGS4C8m6gNFWUyuPE5HEUFk+rGh+7oriUjg+ata4Fc9PoVlu8xvGm7yoo3AmS3J6fAjoFj61NL2rw=="],
 
+    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
+
+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
+
+    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
+
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
+
+    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
+
+    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
+
+    "@types/d3-shape": ["@types/d3-shape@3.1.7", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg=="],
+
+    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
+
+    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
+
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/filesystem": ["@types/filesystem@0.0.36", "", { "dependencies": { "@types/filewriter": "*" } }, "sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA=="],
@@ -680,10 +701,34 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
+
+    "d3-format": ["d3-format@3.1.0", "", {}, "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
+
+    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
+
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
+
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
+
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decode-formdata": ["decode-formdata@0.9.0", "", {}, "sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw=="],
 
     "defu": ["defu@6.1.4", "", {}, "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="],
@@ -696,6 +741,8 @@
 
     "devalue": ["devalue@5.3.2", "", {}, "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw=="],
 
+    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
+
     "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
 
     "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
@@ -730,10 +777,14 @@
 
     "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
+    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
     "exit-hook": ["exit-hook@2.2.1", "", {}, "sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw=="],
 
     "exsolve": ["exsolve@1.0.7", "", {}, "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw=="],
 
+    "fast-equals": ["fast-equals@5.3.2", "", {}, "sha512-6rxyATwPCkaFIL3JLqw8qXqMpIZ942pTX/tbQFkRsDGblS8tNGtlUauA/+mt6RUfqn/4MoEr+WDkYoIQbibWuQ=="],
+
     "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
 
     "fast-sha256": ["fast-sha256@1.3.0", "", {}, "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ=="],
@@ -774,6 +825,8 @@
 
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
+
     "is-arrayish": ["is-arrayish@0.3.4", "", {}, "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
@@ -828,6 +881,10 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.1", "", { "os": "win32", "cpu": "x64" }, "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg=="],
 
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
+    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
+
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lucide-react": ["lucide-react@0.545.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw=="],
@@ -860,6 +917,8 @@
 
     "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
 
+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
+
     "ohash": ["ohash@2.0.11", "", {}, "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="],
 
     "pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
@@ -888,22 +947,34 @@
 
     "promise-limit": ["promise-limit@2.7.0", "", {}, "sha512-7nJ6v5lnJsXwGprnGXga4wx6d1POjvi5Qmf1ivTRxTjH4Z/9Czja/UCMLVmB9N93GeWOU93XaFaEt6jbuoagNw=="],
 
+    "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
+
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
     "react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
 
     "react-dom": ["react-dom@19.2.0", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.0" } }, "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ=="],
 
+    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
+
     "react-refresh": ["react-refresh@0.13.0", "", {}, "sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.1", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA=="],
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
+    "react-smooth": ["react-smooth@4.0.4", "", { "dependencies": { "fast-equals": "^5.0.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q=="],
+
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
+    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
+
     "readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],
 
+    "recharts": ["recharts@2.15.4", "", { "dependencies": { "clsx": "^2.0.0", "eventemitter3": "^4.0.1", "lodash": "^4.17.21", "react-is": "^18.3.1", "react-smooth": "^4.0.4", "recharts-scale": "^0.4.4", "tiny-invariant": "^1.3.1", "victory-vendor": "^36.6.8" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw=="],
+
+    "recharts-scale": ["recharts-scale@0.4.5", "", { "dependencies": { "decimal.js-light": "^2.4.1" } }, "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w=="],
+
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
 
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
@@ -960,6 +1031,8 @@
 
     "tar": ["tar@7.5.1", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g=="],
 
+    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
+
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
 
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
@@ -1004,6 +1077,8 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
+    "victory-vendor": ["victory-vendor@36.9.2", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ=="],
+
     "vite": ["vite@7.1.10", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA=="],
 
     "vite-plugin-zip-pack": ["vite-plugin-zip-pack@1.2.4", "", { "dependencies": { "jszip": "^3.10.1" }, "peerDependencies": { "vite": ">=2.x" } }, "sha512-QgZEeiWayE2ZvMbkvcqWf94p/Z5YeNHZlkwXWIkkoISjePiWVXKRX2xCGmsURe9acGVdkobZ31dFJuCp3j1hMg=="],
@@ -1076,12 +1151,16 @@
 
     "postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
     "sharp/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
     "vite/rollup": ["rollup@4.52.3", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.52.3", "@rollup/rollup-android-arm64": "4.52.3", "@rollup/rollup-darwin-arm64": "4.52.3", "@rollup/rollup-darwin-x64": "4.52.3", "@rollup/rollup-freebsd-arm64": "4.52.3", "@rollup/rollup-freebsd-x64": "4.52.3", "@rollup/rollup-linux-arm-gnueabihf": "4.52.3", "@rollup/rollup-linux-arm-musleabihf": "4.52.3", "@rollup/rollup-linux-arm64-gnu": "4.52.3", "@rollup/rollup-linux-arm64-musl": "4.52.3", "@rollup/rollup-linux-loong64-gnu": "4.52.3", "@rollup/rollup-linux-ppc64-gnu": "4.52.3", "@rollup/rollup-linux-riscv64-gnu": "4.52.3", "@rollup/rollup-linux-riscv64-musl": "4.52.3", "@rollup/rollup-linux-s390x-gnu": "4.52.3", "@rollup/rollup-linux-x64-gnu": "4.52.3", "@rollup/rollup-linux-x64-musl": "4.52.3", "@rollup/rollup-openharmony-arm64": "4.52.3", "@rollup/rollup-win32-arm64-msvc": "4.52.3", "@rollup/rollup-win32-ia32-msvc": "4.52.3", "@rollup/rollup-win32-x64-gnu": "4.52.3", "@rollup/rollup-win32-x64-msvc": "4.52.3", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A=="],
 
     "web/@types/node": ["@types/node@20.19.19", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-pb1Uqj5WJP7wrcbLU7Ru4QtA0+3kAXrkutGiD26wUKzSMgNNaPARTUDQmElUXp64kh3cWdou3Q0C7qwwxqSFmg=="],
 
+    "web/lucide-react": ["lucide-react@0.546.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z94u6fKT43lKeYHiVyvyR8fT7pwCzDu7RyMPpTvh054+xahSgj4HFQ+NmflvzdXsoAjYGdCguGaFKYuvq0ThCQ=="],
+
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.18.20", "", { "os": "android", "cpu": "arm" }, "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw=="],
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm64": ["@esbuild/android-arm64@0.18.20", "", { "os": "android", "cpu": "arm64" }, "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ=="],
diff --git a/packages/server/convex/mockData.ts b/packages/server/convex/mockData.ts
index d3784d13..cbe7a49f 100644
--- a/packages/server/convex/mockData.ts
+++ b/packages/server/convex/mockData.ts
@@ -173,7 +173,8 @@ export const additionalMockPrograms = [
   {
     name: "Business Studies Minor",
     level: "undergraduate" as const,
-    programUrl: "https://www.stern.nyu.edu/programs-admissions/undergraduate/academics/minors",
+    programUrl:
+      "https://www.stern.nyu.edu/programs-admissions/undergraduate/academics/minors",
   },
 ];
 
@@ -183,7 +184,114 @@ export const additionalMockPrograms = [
  */
 export const categoryStats = {
   "Computer Science": 10, // 6 required + 4 electives (average)
-  "Mathematics": 4, // 3 required + 1 alternative
+  Mathematics: 4, // 3 required + 1 alternative
   "Natural Science": 3,
   "General Education": 3,
 };
+
+/**
+ * Mock courses data
+ */
+export const mockCoursesData = [
+  {
+    code: "CSCI-UA 101",
+    program: "CSCI-UA",
+    level: 100,
+    title: "Intro to Computer Science",
+    credits: 4,
+    description: "Introduction to computer science and programming",
+    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0101-001/",
+  },
+  {
+    code: "CSCI-UA 102",
+    program: "CSCI-UA",
+    level: 100,
+    title: "Data Structures",
+    credits: 4,
+    description: "Fundamental data structures and algorithms",
+    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0102-001/",
+  },
+  {
+    code: "CSCI-UA 201",
+    program: "CSCI-UA",
+    level: 200,
+    title: "Computer Systems Organization",
+    credits: 4,
+    description: "Computer architecture and systems programming",
+    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0201-001/",
+  },
+  {
+    code: "CSCI-UA 310",
+    program: "CSCI-UA",
+    level: 300,
+    title: "Basic Algorithms",
+    credits: 4,
+    description: "Algorithm design and analysis",
+    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0310-001/",
+  },
+  {
+    code: "MATH-UA 120",
+    program: "MATH-UA",
+    level: 100,
+    title: "Discrete Mathematics",
+    credits: 4,
+    description: "Mathematical foundations for computer science",
+    courseUrl: "https://math.nyu.edu/courses/spring25/MATH-UA.0120-001/",
+  },
+  {
+    code: "MATH-UA 121",
+    program: "MATH-UA",
+    level: 100,
+    title: "Calculus I",
+    credits: 4,
+    description: "Differential calculus",
+    courseUrl: "https://math.nyu.edu/courses/spring25/MATH-UA.0121-001/",
+  },
+];
+
+/**
+ * Mock user courses data
+ * Note: Pass in a userId when calling the seed function
+ */
+export const mockUserCoursesData = [
+  {
+    courseCode: "CSCI-UA 101",
+    title: "Intro to Computer Science",
+    year: 2024,
+    term: "fall" as const,
+    grade: "a" as const,
+  },
+  {
+    courseCode: "MATH-UA 120",
+    title: "Discrete Mathematics",
+    year: 2024,
+    term: "fall" as const,
+    grade: "a-" as const,
+  },
+  {
+    courseCode: "CSCI-UA 102",
+    title: "Data Structures",
+    year: 2025,
+    term: "spring" as const,
+    grade: "b+" as const,
+  },
+  {
+    courseCode: "MATH-UA 121",
+    title: "Calculus I",
+    year: 2025,
+    term: "spring" as const,
+    grade: "a" as const,
+  },
+  {
+    courseCode: "CSCI-UA 201",
+    title: "Computer Systems Organization",
+    year: 2025,
+    term: "fall" as const,
+  },
+  {
+    courseCode: "CSCI-UA 310",
+    title: "Basic Algorithms",
+    year: 2025,
+    term: "fall" as const,
+  },
+];
diff --git a/packages/server/convex/programs.ts b/packages/server/convex/programs.ts
index 13b94951..371069ae 100644
--- a/packages/server/convex/programs.ts
+++ b/packages/server/convex/programs.ts
@@ -1,6 +1,6 @@
 import { paginationOptsValidator } from "convex/server";
 import { v } from "convex/values";
-import { getManyFrom } from "convex-helpers/server/relationships";
+import { getManyFrom, getOneFrom } from "convex-helpers/server/relationships";
 import { internalMutation } from "./_generated/server";
 import { protectedQuery } from "./helpers/auth";
 import { programs } from "./schemas/programs";
@@ -59,6 +59,69 @@ export const getProgramByName = protectedQuery({
   },
 });
 
+export const getProgramWithGroupedRequirements = protectedQuery({
+  args: { name: v.string() },
+  handler: async (ctx, args) => {
+    const program = await ctx.db
+      .query("programs")
+      .withIndex("by_program_name", (q) => q.eq("name", args.name))
+      .unique();
+
+    if (!program) return null;
+
+    const requirements = await getManyFrom(
+      ctx.db,
+      "requirements",
+      "by_program",
+      program._id,
+      "programId",
+    );
+
+    // Calculate total credits for each category
+    const groupedRequirements: Record<string, { credits: number; courses: string[] }> = {};
+
+    for (const req of requirements) {
+      const { programId, category, courses, ...rest } = req;
+      let totalCredits = 0;
+
+      // Check if this is an "options" type with creditsRequired
+      if ("creditsRequired" in req && req.creditsRequired) {
+        totalCredits = req.creditsRequired;
+      } else {
+        // Calculate credits from actual courses
+        for (const courseCode of courses) {
+          const course = await getOneFrom(
+            ctx.db,
+            "courses",
+            "by_course_code",
+            courseCode,
+            "code",
+          );
+          if (course) {
+            totalCredits += course.credits;
+          }
+          // TODO: better error handling if course doesn't exist
+          else {
+            totalCredits += 4;
+          }
+        }
+      }
+
+      // Add to grouped requirements
+      if (!groupedRequirements[category]) {
+        groupedRequirements[category] = { credits: 0, courses: [] };
+      }
+      groupedRequirements[category].credits += totalCredits;
+      groupedRequirements[category].courses.push(...courses);
+    }
+
+    return {
+      ...program,
+      requirementsByCategory: groupedRequirements,
+    };
+  },
+});
+
 export const getPrograms = protectedQuery({
   args: {
     query: v.optional(v.string()),
diff --git a/packages/server/convex/schema.ts b/packages/server/convex/schema.ts
index ba3ab167..3c0d9179 100644
--- a/packages/server/convex/schema.ts
+++ b/packages/server/convex/schema.ts
@@ -15,7 +15,10 @@ export default defineSchema({
     .searchIndex("search_name", {
       searchField: "name",
     }),
-  requirements: defineTable(requirements).index("by_program", ["programId"]),
+  requirements: defineTable(requirements)
+    .index("by_program", ["programId"])
+    .index("by_category", ["category"])
+    .index("by_program_and_category", ["programId", "category"]),
   courses: defineTable(courses)
     .index("by_course_code", ["code"])
     .index("by_level", ["level"])
diff --git a/packages/server/convex/seed.ts b/packages/server/convex/seed.ts
index e3477eab..ffb7765f 100644
--- a/packages/server/convex/seed.ts
+++ b/packages/server/convex/seed.ts
@@ -1,20 +1,38 @@
-import { internalMutation } from "./_generated/server";
+import { v } from "convex/values";
 import { internal } from "./_generated/api";
+import { internalMutation } from "./_generated/server";
 import {
+  additionalMockPrograms,
+  mockCoursesData,
   mockProgramsData,
   mockRequirementsData,
-  additionalMockPrograms,
+  mockUserCoursesData,
 } from "./mockData";
 
 /**
  * Seed the database with mock NYU CS curriculum data
  * Call this mutation from the Convex dashboard to populate your database
+ *
+ * @param userId - Optional user ID to associate with user courses. If not provided, uses a default mock user ID.
  */
 export const seedMockData = internalMutation({
-  args: {},
-  handler: async (ctx) => {
+  args: {
+    userId: v.optional(v.string()),
+  },
+  handler: async (ctx, args) => {
     console.log("Starting to seed mock data...");
 
+    // Insert courses
+    const courseIds = [];
+    for (const course of mockCoursesData) {
+      const courseId = await ctx.runMutation(
+        internal.courses.upsertCourseInternal,
+        course,
+      );
+      courseIds.push(courseId);
+    }
+    console.log(`Created ${mockCoursesData.length} courses`);
+
     // Insert the main Computer Science (BA) program
     const programId = await ctx.runMutation(
       internal.programs.upsertProgramInternal,
@@ -57,44 +75,84 @@ export const seedMockData = internalMutation({
       additionalProgramIds,
     );
 
+    // Insert user courses (if userId is provided)
+    const userCourseIds = [];
+    if (args.userId) {
+      for (const userCourse of mockUserCoursesData) {
+        const userCourseId = await ctx.db.insert("userCourses", {
+          ...userCourse,
+          userId: args.userId,
+        });
+        userCourseIds.push(userCourseId);
+      }
+      console.log(
+        `Created ${mockUserCoursesData.length} user courses for user: ${args.userId}`,
+      );
+    } else {
+      console.log("Skipped user courses (no userId provided)");
+    }
+
     return {
       success: true,
+      courseIds,
       programId,
       additionalProgramIds,
       requirementsCount: mockRequirementsData.length,
+      userCourseIds,
     };
   },
 });
 
 /**
- * Clear all programs and requirements from the database
+ * Clear all data from the database
  * Use this to reset your database before re-seeding
  */
 export const clearAllData = internalMutation({
   args: {},
   handler: async (ctx) => {
-    console.log("Clearing all programs and requirements...");
+    console.log("Clearing all data...");
+
+    // Delete all user courses first (no foreign keys)
+    const allUserCourses = await ctx.db.query("userCourses").collect();
+    for (const userCourse of allUserCourses) {
+      await ctx.db.delete(userCourse._id);
+    }
 
-    // Delete all requirements first (due to foreign key relationship)
+    // Delete all requirements (references programs)
     const allRequirements = await ctx.db.query("requirements").collect();
     for (const req of allRequirements) {
       await ctx.db.delete(req._id);
     }
 
+    // Delete all prerequisites (references courses)
+    const allPrerequisites = await ctx.db.query("prerequisites").collect();
+    for (const prereq of allPrerequisites) {
+      await ctx.db.delete(prereq._id);
+    }
+
     // Delete all programs
     const allPrograms = await ctx.db.query("programs").collect();
     for (const program of allPrograms) {
       await ctx.db.delete(program._id);
     }
 
+    // Delete all courses
+    const allCourses = await ctx.db.query("courses").collect();
+    for (const course of allCourses) {
+      await ctx.db.delete(course._id);
+    }
+
     console.log(
-      `Deleted ${allRequirements.length} requirements and ${allPrograms.length} programs`,
+      `Deleted ${allUserCourses.length} user courses, ${allRequirements.length} requirements, ${allPrerequisites.length} prerequisites, ${allPrograms.length} programs, and ${allCourses.length} courses`,
     );
 
     return {
       success: true,
+      deletedUserCourses: allUserCourses.length,
       deletedRequirements: allRequirements.length,
+      deletedPrerequisites: allPrerequisites.length,
       deletedPrograms: allPrograms.length,
+      deletedCourses: allCourses.length,
     };
   },
 });

From 7282d0f8e26102f4ecc5507a2643f1c1bad8f9f2 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 11:09:03 -0400
Subject: [PATCH 05/54] basic bar chart implementation

---
 .../components/charts/degree-charts.tsx       | 106 +++++++++++-------
 packages/server/convex/helpers/auth.ts        |   1 +
 2 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 10a014cd..94ee4ad4 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { TrendingUp } from "lucide-react";
+import { api } from "@dev-team-fall-25/server/convex/_generated/api";
+import { useQuery } from "convex/react";
 import { Bar, BarChart, XAxis, YAxis } from "recharts";
 
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
@@ -18,48 +18,76 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 
-export const description = "A mixed bar chart";
-
-const chartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 90, fill: "var(--color-other)" },
-];
-
 const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "var(--chart-1)",
+  credits: {
+    label: "Credits",
   },
-  safari: {
-    label: "Safari",
-    color: "var(--chart-2)",
+  "Computer Science": {
+    label: "Computer Science",
+    color: "hsl(var(--chart-1))",
   },
-  firefox: {
-    label: "Firefox",
-    color: "var(--chart-3)",
+  Mathematics: {
+    label: "Mathematics",
+    color: "hsl(var(--chart-2))",
   },
-  edge: {
-    label: "Edge",
-    color: "var(--chart-4)",
+  "Natural Science": {
+    label: "Natural Science",
+    color: "hsl(var(--chart-3))",
   },
-  other: {
-    label: "Other",
-    color: "var(--chart-5)",
+  "General Education": {
+    label: "General Education",
+    color: "hsl(var(--chart-4))",
   },
 } satisfies ChartConfig;
 
 export function ChartBarMixed() {
+  const program = useQuery(api.programs.getProgramWithGroupedRequirements, {
+    name: "Computer Science (BA)",
+  });
+
+  if (program === undefined) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Program Requirements</CardTitle>
+          <CardDescription>Loading...</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (program === null) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Program Requirements</CardTitle>
+          <CardDescription>Program not found</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  // Transform the data for the chart
+  const chartData = Object.entries(program.requirementsByCategory).map(
+    ([category, data]) => ({
+      category,
+      credits: data.credits,
+      fill: `var(--color-${category.replace(/\s+/g, "-").toLowerCase()})`,
+    })
+  );
+
+  const totalCredits = Object.values(program.requirementsByCategory).reduce(
+    (sum, data) => sum + data.credits,
+    0
+  );
+
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Bar Chart - Mixed</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
+        <CardTitle>Program Requirements by Category</CardTitle>
+        <CardDescription>
+          {program.name} - Total: {totalCredits} credits
+        </CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig}>
@@ -72,7 +100,7 @@ export function ChartBarMixed() {
             }}
           >
             <YAxis
-              dataKey="browser"
+              dataKey="category"
               type="category"
               tickLine={false}
               tickMargin={10}
@@ -81,23 +109,15 @@ export function ChartBarMixed() {
                 chartConfig[value as keyof typeof chartConfig]?.label
               }
             />
-            <XAxis dataKey="visitors" type="number" hide />
+            <XAxis dataKey="credits" type="number" hide />
             <ChartTooltip
               cursor={false}
               content={<ChartTooltipContent hideLabel />}
             />
-            <Bar dataKey="visitors" layout="vertical" radius={5} />
+            <Bar dataKey="credits" layout="vertical" radius={5} />
           </BarChart>
         </ChartContainer>
       </CardContent>
-      <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="text-muted-foreground leading-none">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
     </Card>
   );
 }
diff --git a/packages/server/convex/helpers/auth.ts b/packages/server/convex/helpers/auth.ts
index 851a8d90..577e8d35 100644
--- a/packages/server/convex/helpers/auth.ts
+++ b/packages/server/convex/helpers/auth.ts
@@ -21,6 +21,7 @@ export async function auth({
   ctx: QueryCtx | MutationCtx | ActionCtx;
 }) {
   const identity = await ctx.auth.getUserIdentity();
+  console.log("Auth identity:", identity);
   if (identity === null) {
     throw new Error("Not authenticated");
   }

From 7fbe6e3096623d3ef83cade9c9f9713022a451aa Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 11:51:17 -0400
Subject: [PATCH 06/54] degree selector functionality

---
 .../components/charts/degree-charts.tsx       |  8 +-
 .../components/charts/program-selector.tsx    | 89 +++++++++++++++++++
 apps/web/src/app/dashboard/page.tsx           | 12 ++-
 .../src/components/ConvexClientProvider.tsx   | 21 +++++
 packages/server/convex/helpers/auth.ts        |  2 +-
 5 files changed, 128 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/app/dashboard/components/charts/program-selector.tsx

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 94ee4ad4..fbade377 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -40,9 +40,13 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-export function ChartBarMixed() {
+interface ChartBarMixedProps {
+  programName: string;
+}
+
+export function ChartBarMixed({ programName }: ChartBarMixedProps) {
   const program = useQuery(api.programs.getProgramWithGroupedRequirements, {
-    name: "Computer Science (BA)",
+    name: programName,
   });
 
   if (program === undefined) {
diff --git a/apps/web/src/app/dashboard/components/charts/program-selector.tsx b/apps/web/src/app/dashboard/components/charts/program-selector.tsx
new file mode 100644
index 00000000..9fbd8185
--- /dev/null
+++ b/apps/web/src/app/dashboard/components/charts/program-selector.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { api } from "@dev-team-fall-25/server/convex/_generated/api";
+import { useQuery } from "convex/react";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+interface ProgramSelectorProps {
+  onSelectProgram: (programName: string) => void;
+  selectedProgram: string;
+}
+
+export function ProgramSelector({
+  onSelectProgram,
+  selectedProgram,
+}: ProgramSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const programs = useQuery(api.programs.getPrograms, {
+    query: searchQuery || undefined,
+    paginationOpts: { numItems: 10, cursor: null },
+  });
+
+  const handleProgramClick = (programName: string) => {
+    onSelectProgram(programName);
+    setSearchQuery("");
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Select Program</CardTitle>
+        <CardDescription>
+          Search for a program to view its requirements
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <Input
+            type="text"
+            placeholder="Search programs (e.g., Computer Science)..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full"
+          />
+
+          {selectedProgram && (
+            <div className="p-3 bg-blue-50 border border-blue-200 rounded">
+              <p className="text-sm font-medium text-blue-900">
+                Currently viewing: {selectedProgram}
+              </p>
+            </div>
+          )}
+
+          {searchQuery && programs && (
+            <div className="space-y-2 max-h-60 overflow-y-auto">
+              {programs.page.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  No programs found
+                </p>
+              ) : (
+                programs.page.map((program) => (
+                  <button
+                    key={program._id}
+                    type="submit"
+                    onClick={() => handleProgramClick(program.name)}
+                    className="w-full text-left p-3 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors"
+                  >
+                    <p className="font-medium">{program.name}</p>
+                    <p className="text-xs text-muted-foreground capitalize">
+                      {program.level}
+                    </p>
+                  </button>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 54868e98..e550ce24 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -1,11 +1,21 @@
+"use client";
+
+import { useState } from "react";
 import FileUploadButton from "@/modules/report-parsing/components/file-upload-button";
 import { ChartBarMixed } from "./components/charts/degree-charts";
+import { ProgramSelector } from "./components/charts/program-selector";
 
 const HomePage = () => {
+  const [selectedProgram, setSelectedProgram] = useState("Computer Science (BA)");
+
   return (
     <div className="space-y-6 p-6">
       <FileUploadButton />
-      <ChartBarMixed />
+      <ProgramSelector
+        selectedProgram={selectedProgram}
+        onSelectProgram={setSelectedProgram}
+      />
+      <ChartBarMixed programName={selectedProgram} />
     </div>
   );
 };
diff --git a/apps/web/src/components/ConvexClientProvider.tsx b/apps/web/src/components/ConvexClientProvider.tsx
index 6c5e1346..385f2541 100644
--- a/apps/web/src/components/ConvexClientProvider.tsx
+++ b/apps/web/src/components/ConvexClientProvider.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useAuth } from "@clerk/nextjs";
+import { useState, useEffect } from 'react';
 import { ConvexReactClient } from "convex/react";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
 import type { ReactNode } from "react";
@@ -13,7 +14,27 @@ export default function ConvexClientProvider({
 }: {
   children: ReactNode;
 }) {
+  const { isLoaded } = useAuth();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Don't render until both client-side mounted and Clerk is loaded
+  if (!mounted || !isLoaded) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto mb-4"></div>
+          <p className="text-sm text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
+    
     <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
       {children}
     </ConvexProviderWithClerk>
diff --git a/packages/server/convex/helpers/auth.ts b/packages/server/convex/helpers/auth.ts
index 577e8d35..5cc55e6d 100644
--- a/packages/server/convex/helpers/auth.ts
+++ b/packages/server/convex/helpers/auth.ts
@@ -21,8 +21,8 @@ export async function auth({
   ctx: QueryCtx | MutationCtx | ActionCtx;
 }) {
   const identity = await ctx.auth.getUserIdentity();
-  console.log("Auth identity:", identity);
   if (identity === null) {
+    console.error("Authentication failed - no identity found");
     throw new Error("Not authenticated");
   }
   return identity;

From 287326e3dcf4b270b9843f3bfdce54d35ec8a98d Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 14:48:29 -0400
Subject: [PATCH 07/54] integrated overlay toggle

---
 apps/web/package.json                         |  1 +
 .../components/charts/degree-charts.tsx       | 78 +++++++++++++------
 .../app/dashboard/components/charts/label.tsx | 22 ++++++
 .../components/charts/program-selector.tsx    |  2 +-
 apps/web/src/app/dashboard/page.tsx           |  8 +-
 .../src/components/ConvexClientProvider.tsx   |  3 +-
 apps/web/src/components/ui/checkbox.tsx       | 32 ++++++++
 7 files changed, 118 insertions(+), 28 deletions(-)
 create mode 100644 apps/web/src/app/dashboard/components/charts/label.tsx
 create mode 100644 apps/web/src/components/ui/checkbox.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index 8be24c32..12e0ff33 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,6 +15,7 @@
     "@clerk/nextjs": "^6.33.4",
     "@dev-team-fall-25/server": "workspace:*",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index fbade377..5684f0c6 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -2,7 +2,15 @@
 
 import { api } from "@dev-team-fall-25/server/convex/_generated/api";
 import { useQuery } from "convex/react";
-import { Bar, BarChart, XAxis, YAxis } from "recharts";
+import { useState } from "react";
+import { ChartOverlayToggle } from "./label";
+import {
+  Bar,
+  BarChart,
+  LabelList,
+  XAxis,
+  YAxis,
+} from "recharts";
 
 import {
   Card,
@@ -14,8 +22,6 @@ import {
 import {
   type ChartConfig,
   ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
 } from "@/components/ui/chart";
 
 const chartConfig = {
@@ -40,15 +46,19 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-interface ChartBarMixedProps {
+interface ProgramRequirementsChartProps {
   programName: string;
+  userID: string;
 }
 
-export function ChartBarMixed({ programName }: ChartBarMixedProps) {
+export function ProgramRequirementsChart({ programName, userID }: ProgramRequirementsChartProps) {
   const program = useQuery(api.programs.getProgramWithGroupedRequirements, {
     name: programName,
   });
 
+  const userCourses = useQuery(api.userCourses.getUserCourses, {});
+  const [showProgress, setShowProgress] = useState(false);
+
   if (program === undefined) {
     return (
       <Card>
@@ -77,30 +87,39 @@ export function ChartBarMixed({ programName }: ChartBarMixedProps) {
       category,
       credits: data.credits,
       fill: `var(--color-${category.replace(/\s+/g, "-").toLowerCase()})`,
-    })
+    }),
   );
 
   const totalCredits = Object.values(program.requirementsByCategory).reduce(
     (sum, data) => sum + data.credits,
-    0
+    0,
   );
 
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Program Requirements by Category</CardTitle>
-        <CardDescription>
-          {program.name} - Total: {totalCredits} credits
-        </CardDescription>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle>Program Requirements by Category</CardTitle>
+            <CardDescription>
+              {program.name} - Total: {totalCredits} credits
+            </CardDescription>
+          </div>
+          <ChartOverlayToggle
+            showProgress={showProgress}
+            onToggle={setShowProgress}
+          />
+        </div>
       </CardHeader>
       <CardContent>
-        <ChartContainer config={chartConfig}>
+        <ChartContainer config={chartConfig} className="h-[400px] w-full">
           <BarChart
             accessibilityLayer
             data={chartData}
             layout="vertical"
             margin={{
-              left: 0,
+              left: 20,
+              right: 16,
             }}
           >
             <YAxis
@@ -109,16 +128,31 @@ export function ChartBarMixed({ programName }: ChartBarMixedProps) {
               tickLine={false}
               tickMargin={10}
               axisLine={false}
-              tickFormatter={(value) =>
-                chartConfig[value as keyof typeof chartConfig]?.label
-              }
-            />
-            <XAxis dataKey="credits" type="number" hide />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
+              width={150}
+              hide
             />
-            <Bar dataKey="credits" layout="vertical" radius={5} />
+            <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+            <Bar
+              dataKey="credits"
+              layout="vertical"
+              radius={4}
+              barSize={100}
+            >
+              <LabelList
+                dataKey="category"
+                position="insideLeft"
+                offset={8}
+                className="fill-white"
+                fontSize={12}
+              />
+              <LabelList
+                dataKey="credits"
+                position="right"
+                offset={8}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
           </BarChart>
         </ChartContainer>
       </CardContent>
diff --git a/apps/web/src/app/dashboard/components/charts/label.tsx b/apps/web/src/app/dashboard/components/charts/label.tsx
new file mode 100644
index 00000000..a058266c
--- /dev/null
+++ b/apps/web/src/app/dashboard/components/charts/label.tsx
@@ -0,0 +1,22 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+
+interface ChartOverlayToggleProps {
+  showProgress: boolean;
+  onToggle: (checked: boolean) => void;
+}
+
+export function ChartOverlayToggle({ showProgress, onToggle }: ChartOverlayToggleProps) {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox
+        id="overlay"
+        checked={showProgress}
+        onCheckedChange={onToggle}
+      />
+      <Label htmlFor="overlay" className="cursor-pointer">
+        Overlay Taken Courses
+      </Label>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/app/dashboard/components/charts/program-selector.tsx b/apps/web/src/app/dashboard/components/charts/program-selector.tsx
index 9fbd8185..83973a6a 100644
--- a/apps/web/src/app/dashboard/components/charts/program-selector.tsx
+++ b/apps/web/src/app/dashboard/components/charts/program-selector.tsx
@@ -3,7 +3,6 @@
 import { api } from "@dev-team-fall-25/server/convex/_generated/api";
 import { useQuery } from "convex/react";
 import { useState } from "react";
-import { Input } from "@/components/ui/input";
 import {
   Card,
   CardContent,
@@ -11,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
 
 interface ProgramSelectorProps {
   onSelectProgram: (programName: string) => void;
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index e550ce24..103bc86d 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -2,11 +2,13 @@
 
 import { useState } from "react";
 import FileUploadButton from "@/modules/report-parsing/components/file-upload-button";
-import { ChartBarMixed } from "./components/charts/degree-charts";
+import { ProgramRequirementsChart } from "./components/charts/degree-charts";
 import { ProgramSelector } from "./components/charts/program-selector";
 
 const HomePage = () => {
-  const [selectedProgram, setSelectedProgram] = useState("Computer Science (BA)");
+  const [selectedProgram, setSelectedProgram] = useState(
+    "Computer Science (BA)",
+  );
 
   return (
     <div className="space-y-6 p-6">
@@ -15,7 +17,7 @@ const HomePage = () => {
         selectedProgram={selectedProgram}
         onSelectProgram={setSelectedProgram}
       />
-      <ChartBarMixed programName={selectedProgram} />
+      <ProgramRequirementsChart programName={selectedProgram} />
     </div>
   );
 };
diff --git a/apps/web/src/components/ConvexClientProvider.tsx b/apps/web/src/components/ConvexClientProvider.tsx
index 385f2541..bf3974c3 100644
--- a/apps/web/src/components/ConvexClientProvider.tsx
+++ b/apps/web/src/components/ConvexClientProvider.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useAuth } from "@clerk/nextjs";
-import { useState, useEffect } from 'react';
 import { ConvexReactClient } from "convex/react";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
 import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
 import { env } from "@/lib/env";
 
 const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL);
@@ -34,7 +34,6 @@ export default function ConvexClientProvider({
   }
 
   return (
-    
     <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
       {children}
     </ConvexProviderWithClerk>
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..cb0b07b4
--- /dev/null
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

From 0cea88aa3e0cab0a1847394b43534f2d8e65ceac Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 15:01:15 -0400
Subject: [PATCH 08/54] overlay v1

---
 .../components/charts/degree-charts.tsx       | 32 +++++++++++++++++++
 bun.lock                                      |  5 +++
 packages/server/convex/programs.ts            |  5 ++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 5684f0c6..9e36a000 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -81,11 +81,25 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
     );
   }
 
+  const completedCreditsByCategory: Record<string, number> = {};
+  if (userCourses) {
+    for (const userCourse of userCourses) {
+      for (const [category, data] of Object.entries(program.requirementsByCategory)) {
+        if (data.courses.includes(userCourse.courseCode)) {
+          completedCreditsByCategory[category] =
+            (completedCreditsByCategory[category] || 0) + (userCourse.course?.credits || 0);
+          break;
+        }
+      }
+    }
+  }
+
   // Transform the data for the chart
   const chartData = Object.entries(program.requirementsByCategory).map(
     ([category, data]) => ({
       category,
       credits: data.credits,
+      completedCredits: completedCreditsByCategory || 0,
       fill: `var(--color-${category.replace(/\s+/g, "-").toLowerCase()})`,
     }),
   );
@@ -137,6 +151,8 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
               layout="vertical"
               radius={4}
               barSize={100}
+              fill="hsl(var(--muted))"
+              fillOpacity={showProgress ? 0.3 : 1}
             >
               <LabelList
                 dataKey="category"
@@ -153,6 +169,22 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
                 fontSize={12}
               />
             </Bar>
+            {showProgress && (
+              <Bar
+                dataKey="completedCredits"
+                layout="vertical"
+                radius={4}
+                barSize={100}
+                fill="hsl(var(--primary))"
+              >
+                <LabelList
+                  dataKey="completedCredits"
+                  position="center"
+                  className="fill-white"
+                  fontSize={12}
+                />
+              </Bar>
+            )}
           </BarChart>
         </ChartContainer>
       </CardContent>
diff --git a/bun.lock b/bun.lock
index 7eeb8139..09f681f2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -66,6 +66,7 @@
         "@clerk/nextjs": "^6.33.4",
         "@dev-team-fall-25/server": "workspace:*",
         "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
@@ -423,6 +424,8 @@
 
     "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.10", "", { "dependencies": { "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog=="],
 
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
+
     "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
 
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
@@ -475,6 +478,8 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
+
     "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
 
     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
diff --git a/packages/server/convex/programs.ts b/packages/server/convex/programs.ts
index 371069ae..c22598d0 100644
--- a/packages/server/convex/programs.ts
+++ b/packages/server/convex/programs.ts
@@ -78,7 +78,10 @@ export const getProgramWithGroupedRequirements = protectedQuery({
     );
 
     // Calculate total credits for each category
-    const groupedRequirements: Record<string, { credits: number; courses: string[] }> = {};
+    const groupedRequirements: Record<
+      string,
+      { credits: number; courses: string[] }
+    > = {};
 
     for (const req of requirements) {
       const { programId, category, courses, ...rest } = req;

From f428ee154949c889d3104493d49c5212d34d0700 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 15:25:27 -0400
Subject: [PATCH 09/54] chart overlay v2

---
 .../components/charts/degree-charts.tsx       | 197 +++++++++++++-----
 1 file changed, 146 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 9e36a000..b703a723 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -96,12 +96,15 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
 
   // Transform the data for the chart
   const chartData = Object.entries(program.requirementsByCategory).map(
-    ([category, data]) => ({
-      category,
-      credits: data.credits,
-      completedCredits: completedCreditsByCategory || 0,
-      fill: `var(--color-${category.replace(/\s+/g, "-").toLowerCase()})`,
-    }),
+    ([category, data]) => {
+      const completed = completedCreditsByCategory[category] || 0;
+      return {
+        category,
+        credits: data.credits,
+        completedCredits: completed,
+        remainingCredits: data.credits - completed,
+      };
+    },
   );
 
   const totalCredits = Object.values(program.requirementsByCategory).reduce(
@@ -126,67 +129,159 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
         </div>
       </CardHeader>
       <CardContent>
-        <ChartContainer config={chartConfig} className="h-[400px] w-full">
-          <BarChart
-            accessibilityLayer
-            data={chartData}
-            layout="vertical"
-            margin={{
-              left: 20,
-              right: 16,
-            }}
-          >
-            <YAxis
-              dataKey="category"
-              type="category"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              width={150}
-              hide
-            />
-            <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
-            <Bar
-              dataKey="credits"
+        {!showProgress && (
+          <ChartContainer config={chartConfig} className="h-[400px] w-full">
+            <BarChart
+              accessibilityLayer
+              data={chartData}
               layout="vertical"
-              radius={4}
-              barSize={100}
-              fill="hsl(var(--muted))"
-              fillOpacity={showProgress ? 0.3 : 1}
+              margin={{
+                left: 20,
+                right: 16,
+              }}
             >
-              <LabelList
+              <YAxis
                 dataKey="category"
-                position="insideLeft"
-                offset={8}
-                className="fill-white"
-                fontSize={12}
+                type="category"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                width={150}
+                hide
               />
-              <LabelList
+              <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+              <Bar
                 dataKey="credits"
-                position="right"
-                offset={8}
-                className="fill-foreground"
-                fontSize={12}
+                radius={4}
+                barSize={100}
+                fill="hsl(var(--muted))"
+              >
+                <LabelList
+                  dataKey="category"
+                  position="insideLeft"
+                  offset={8}
+                  className="fill-white"
+                  fontSize={12}
+                />
+                <LabelList
+                  dataKey="credits"
+                  position="right"
+                  offset={8}
+                  className="fill-foreground"
+                  fontSize={12}
+                />
+              </Bar>
+            </BarChart>
+          </ChartContainer>
+        )}
+
+        {showProgress && (
+          <ChartContainer config={chartConfig} className="h-[400px] w-full">
+            <BarChart
+              accessibilityLayer
+              data={chartData}
+              layout="vertical"
+              margin={{
+                left: 20,
+                right: 16,
+              }}
+            >
+              <YAxis
+                dataKey="category"
+                type="category"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                width={150}
+                hide
               />
-            </Bar>
-            {showProgress && (
+              <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
               <Bar
                 dataKey="completedCredits"
-                layout="vertical"
-                radius={4}
+                stackId="stack"
                 barSize={100}
-                fill="hsl(var(--primary))"
+                fill="#3b82f6"
+                radius={[4, 0, 0, 4]}
               >
+                <LabelList
+                  dataKey="category"
+                  position="insideLeft"
+                  offset={8}
+                  className="fill-white"
+                  fontSize={12}
+                  content={(props) => {
+                    const { x, y, width, value, index } = props;
+                    // Only show if there are completed credits (width > 0)
+                    if (!chartData[index]?.completedCredits || chartData[index].completedCredits === 0) {
+                      return null;
+                    }
+                    return (
+                      <text
+                        x={Number(x) + 8}
+                        y={Number(y) + Number(props.height || 0) / 2}
+                        fill="white"
+                        fontSize={12}
+                        textAnchor="start"
+                        dominantBaseline="middle"
+                      >
+                        {value}
+                      </text>
+                    );
+                  }}
+                />
                 <LabelList
                   dataKey="completedCredits"
-                  position="center"
+                  position="right"
+                  offset={8}
+                  className="fill-white"
+                  fontSize={12}
+                />
+              </Bar>
+
+              <Bar
+                dataKey="remainingCredits"
+                stackId="stack"
+                barSize={100}
+                fill="hsl(var(--muted))"
+                radius={[0, 4, 4, 0]}
+              >
+                <LabelList
+                  dataKey="category"
+                  position="insideLeft"
+                  offset={8}
                   className="fill-white"
                   fontSize={12}
+                  content={(props) => {
+                    const { x, y, value, index } = props;
+                    // Only show if there are NO completed credits
+                    if (chartData[index]?.completedCredits && chartData[index].completedCredits > 0) {
+                      return null;
+                    }
+                    return (
+                      <text
+                        x={Number(x) + 8}
+                        y={Number(y) + Number(props.height || 0) / 2}
+                        fill="white"
+                        fontSize={12}
+                        textAnchor="start"
+                        dominantBaseline="middle"
+                      >
+                        {value}
+                      </text>
+                    );
+                  }}
+                />
+                <LabelList
+                  dataKey="credits"
+                  position="right"
+                  offset={8}
+                  className="fill-foreground"
+                  fontSize={12}
                 />
               </Bar>
-            )}
-          </BarChart>
-        </ChartContainer>
+            </BarChart>
+          </ChartContainer>
+        )}
       </CardContent>
     </Card>
   );

From d9e29bf2669b49c2c857f9fb7e2a2f1a8bde5c5c Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 19 Oct 2025 15:30:57 -0400
Subject: [PATCH 10/54] added tooltip to overlay

---
 .../components/charts/degree-charts.tsx       | 60 +++++++++++++++----
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index b703a723..e0bf241a 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -8,6 +8,7 @@ import {
   Bar,
   BarChart,
   LabelList,
+  Tooltip,
   XAxis,
   YAxis,
 } from "recharts";
@@ -98,11 +99,13 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
   const chartData = Object.entries(program.requirementsByCategory).map(
     ([category, data]) => {
       const completed = completedCreditsByCategory[category] || 0;
+      const percentage = data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
       return {
         category,
         credits: data.credits,
         completedCredits: completed,
         remainingCredits: data.credits - completed,
+        percentage,
       };
     },
   );
@@ -196,6 +199,44 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
                 hide
               />
               <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    const data = payload[0].payload;
+                    return (
+                      <div className="rounded-lg border bg-background p-2 shadow-sm">
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Category
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {data.category}
+                            </span>
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Completed
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {data.completedCredits} / {data.credits} credits
+                            </span>
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Progress
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {data.percentage}%
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return null;
+                }}
+              />
               <Bar
                 dataKey="completedCredits"
                 stackId="stack"
@@ -209,10 +250,10 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
                   offset={8}
                   className="fill-white"
                   fontSize={12}
-                  content={(props) => {
-                    const { x, y, width, value, index } = props;
+                  content={(props: any) => {
+                    const { x, y, value, width } = props;
                     // Only show if there are completed credits (width > 0)
-                    if (!chartData[index]?.completedCredits || chartData[index].completedCredits === 0) {
+                    if (!width || width <= 0) {
                       return null;
                     }
                     return (
@@ -229,13 +270,6 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
                     );
                   }}
                 />
-                <LabelList
-                  dataKey="completedCredits"
-                  position="right"
-                  offset={8}
-                  className="fill-white"
-                  fontSize={12}
-                />
               </Bar>
 
               <Bar
@@ -251,10 +285,10 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
                   offset={8}
                   className="fill-white"
                   fontSize={12}
-                  content={(props) => {
-                    const { x, y, value, index } = props;
+                  content={(props: any) => {
+                    const { x, y, value, payload } = props;
                     // Only show if there are NO completed credits
-                    if (chartData[index]?.completedCredits && chartData[index].completedCredits > 0) {
+                    if (payload?.completedCredits && payload.completedCredits > 0) {
                       return null;
                     }
                     return (

From 236431e6f5890d79cabcad3496420591dd55c464 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 26 Oct 2025 14:30:21 -0400
Subject: [PATCH 11/54] redid chart to categorize by subject

---
 .../components/charts/degree-charts.tsx       | 75 ++++++++++---------
 .../app/dashboard/components/charts/label.tsx |  8 +-
 apps/web/src/app/dashboard/page.tsx           | 32 +++++++-
 bun.lock                                      | 56 ++++----------
 packages/server/convex/http.ts                |  6 --
 packages/server/convex/mockData.ts            | 27 -------
 packages/server/convex/programs.ts            | 56 +++++++-------
 packages/server/convex/requirements.ts        |  2 -
 packages/server/convex/schema.ts              |  4 +-
 packages/server/convex/schemas/programs.ts    |  3 -
 packages/server/convex/seed.ts                |  9 ++-
 11 files changed, 126 insertions(+), 152 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index e0bf241a..3d638a36 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -3,16 +3,7 @@
 import { api } from "@dev-team-fall-25/server/convex/_generated/api";
 import { useQuery } from "convex/react";
 import { useState } from "react";
-import { ChartOverlayToggle } from "./label";
-import {
-  Bar,
-  BarChart,
-  LabelList,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-
+import { Bar, BarChart, LabelList, Tooltip, XAxis, YAxis } from "recharts";
 import {
   Card,
   CardContent,
@@ -20,39 +11,46 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import {
-  type ChartConfig,
-  ChartContainer,
-} from "@/components/ui/chart";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { ChartOverlayToggle } from "./label";
 
 const chartConfig = {
   credits: {
     label: "Credits",
   },
-  "Computer Science": {
+  "CSCI-UA": {
     label: "Computer Science",
     color: "hsl(var(--chart-1))",
   },
-  Mathematics: {
+  "MATH-UA": {
     label: "Mathematics",
     color: "hsl(var(--chart-2))",
   },
-  "Natural Science": {
-    label: "Natural Science",
+  "PHYS-UA": {
+    label: "Physics",
     color: "hsl(var(--chart-3))",
   },
-  "General Education": {
-    label: "General Education",
+  "CHEM-UA": {
+    label: "Chemistry",
     color: "hsl(var(--chart-4))",
   },
+  "EXPOS-UA": {
+    label: "Writing",
+    color: "hsl(var(--chart-5))",
+  },
+  Other: {
+    label: "Other Requirements",
+    color: "hsl(var(--muted))",
+  },
 } satisfies ChartConfig;
 
 interface ProgramRequirementsChartProps {
   programName: string;
-  userID: string;
 }
 
-export function ProgramRequirementsChart({ programName, userID }: ProgramRequirementsChartProps) {
+export function ProgramRequirementsChart({
+  programName,
+}: ProgramRequirementsChartProps) {
   const program = useQuery(api.programs.getProgramWithGroupedRequirements, {
     name: programName,
   });
@@ -85,10 +83,18 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
   const completedCreditsByCategory: Record<string, number> = {};
   if (userCourses) {
     for (const userCourse of userCourses) {
-      for (const [category, data] of Object.entries(program.requirementsByCategory)) {
-        if (data.courses.includes(userCourse.courseCode)) {
-          completedCreditsByCategory[category] =
-            (completedCreditsByCategory[category] || 0) + (userCourse.course?.credits || 0);
+      for (const [prefix, data] of Object.entries(
+        program.requirementsByCategory,
+      )) {
+        // Check if the course code is in any of the nested course arrays
+        const isInRequirement = data.courses.some((courseGroup) =>
+          courseGroup.includes(userCourse.courseCode)
+        );
+
+        if (isInRequirement) {
+          completedCreditsByCategory[prefix] =
+            (completedCreditsByCategory[prefix] || 0) +
+            (userCourse.course?.credits || 0);
           break;
         }
       }
@@ -97,11 +103,12 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
 
   // Transform the data for the chart
   const chartData = Object.entries(program.requirementsByCategory).map(
-    ([category, data]) => {
-      const completed = completedCreditsByCategory[category] || 0;
-      const percentage = data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
+    ([prefix, data]) => {
+      const completed = completedCreditsByCategory[prefix] || 0;
+      const percentage =
+        data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
       return {
-        category,
+        category: prefix,
         credits: data.credits,
         completedCredits: completed,
         remainingCredits: data.credits - completed,
@@ -120,7 +127,7 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
       <CardHeader>
         <div className="flex items-start justify-between">
           <div>
-            <CardTitle>Program Requirements by Category</CardTitle>
+            <CardTitle>Program Requirements by Subject</CardTitle>
             <CardDescription>
               {program.name} - Total: {totalCredits} credits
             </CardDescription>
@@ -252,7 +259,7 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
                   fontSize={12}
                   content={(props: any) => {
                     const { x, y, value, width } = props;
-                    // Only show if there are completed credits (width > 0)
+                    // Only show if this bar has width
                     if (!width || width <= 0) {
                       return null;
                     }
@@ -287,8 +294,8 @@ export function ProgramRequirementsChart({ programName, userID }: ProgramRequire
                   fontSize={12}
                   content={(props: any) => {
                     const { x, y, value, payload } = props;
-                    // Only show if there are NO completed credits
-                    if (payload?.completedCredits && payload.completedCredits > 0) {
+                    // Only show if completed credits is 0 (blue bar has no width)
+                    if (payload?.completedCredits > 0) {
                       return null;
                     }
                     return (
diff --git a/apps/web/src/app/dashboard/components/charts/label.tsx b/apps/web/src/app/dashboard/components/charts/label.tsx
index a058266c..cb45629b 100644
--- a/apps/web/src/app/dashboard/components/charts/label.tsx
+++ b/apps/web/src/app/dashboard/components/charts/label.tsx
@@ -6,11 +6,13 @@ interface ChartOverlayToggleProps {
   onToggle: (checked: boolean) => void;
 }
 
-export function ChartOverlayToggle({ showProgress, onToggle }: ChartOverlayToggleProps) {
+export function ChartOverlayToggle({
+  showProgress,
+  onToggle,
+}: ChartOverlayToggleProps) {
   return (
     <div className="flex items-center space-x-2">
       <Checkbox
-        id="overlay"
         checked={showProgress}
         onCheckedChange={onToggle}
       />
@@ -19,4 +21,4 @@ export function ChartOverlayToggle({ showProgress, onToggle }: ChartOverlayToggl
       </Label>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index a0bbfcad..4f4bcc67 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -1,7 +1,37 @@
+"use client";
+
+import { useState } from "react";
 import DegreeProgreeUpload from "@/modules/report-parsing/components/degree-progress-upload";
+import { ProgramRequirementsChart } from "./components/charts/degree-charts";
+import { ProgramSelector } from "./components/charts/program-selector";
 
 const HomePage = () => {
-  return <DegreeProgreeUpload />;
+  const [selectedProgram, setSelectedProgram] = useState<string>("");
+
+  return (
+    <div className="container mx-auto space-y-6 p-6">
+      <h1 className="text-3xl font-bold">Dashboard</h1>
+
+      <DegreeProgreeUpload />
+
+      <ProgramSelector
+        selectedProgram={selectedProgram}
+        onSelectProgram={setSelectedProgram}
+      />
+
+      {selectedProgram && (
+        <ProgramRequirementsChart programName={selectedProgram} />
+      )}
+
+      {!selectedProgram && (
+        <div className="flex items-center justify-center rounded-lg border border-dashed p-12">
+          <p className="text-muted-foreground">
+            Select a program above to view its requirements
+          </p>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default HomePage;
diff --git a/bun.lock b/bun.lock
index a4c1db30..56896f60 100644
--- a/bun.lock
+++ b/bun.lock
@@ -453,27 +453,27 @@
 
     "@msgpackr-extract/msgpackr-extract-win32-x64": ["@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ=="],
 
-    "@napi-rs/canvas": ["@napi-rs/canvas@0.1.80", "", { "optionalDependencies": { "@napi-rs/canvas-android-arm64": "0.1.80", "@napi-rs/canvas-darwin-arm64": "0.1.80", "@napi-rs/canvas-darwin-x64": "0.1.80", "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.80", "@napi-rs/canvas-linux-arm64-gnu": "0.1.80", "@napi-rs/canvas-linux-arm64-musl": "0.1.80", "@napi-rs/canvas-linux-riscv64-gnu": "0.1.80", "@napi-rs/canvas-linux-x64-gnu": "0.1.80", "@napi-rs/canvas-linux-x64-musl": "0.1.80", "@napi-rs/canvas-win32-x64-msvc": "0.1.80" } }, "sha512-DxuT1ClnIPts1kQx8FBmkk4BQDTfI5kIzywAaMjQSXfNnra5UFU9PwurXrl+Je3bJ6BGsp/zmshVVFbCmyI+ww=="],
+    "@napi-rs/canvas": ["@napi-rs/canvas@0.1.81", "", { "optionalDependencies": { "@napi-rs/canvas-android-arm64": "0.1.81", "@napi-rs/canvas-darwin-arm64": "0.1.81", "@napi-rs/canvas-darwin-x64": "0.1.81", "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.81", "@napi-rs/canvas-linux-arm64-gnu": "0.1.81", "@napi-rs/canvas-linux-arm64-musl": "0.1.81", "@napi-rs/canvas-linux-riscv64-gnu": "0.1.81", "@napi-rs/canvas-linux-x64-gnu": "0.1.81", "@napi-rs/canvas-linux-x64-musl": "0.1.81", "@napi-rs/canvas-win32-x64-msvc": "0.1.81" } }, "sha512-ReCjd5SYI/UKx/olaQLC4GtN6wUQGjlgHXs1lvUvWGXfBMR3Fxnik3cL+OxKN5ithNdoU0/GlCrdKcQDFh2XKQ=="],
 
-    "@napi-rs/canvas-android-arm64": ["@napi-rs/canvas-android-arm64@0.1.80", "", { "os": "android", "cpu": "arm64" }, "sha512-sk7xhN/MoXeuExlggf91pNziBxLPVUqF2CAVnB57KLG/pz7+U5TKG8eXdc3pm0d7Od0WreB6ZKLj37sX9muGOQ=="],
+    "@napi-rs/canvas-android-arm64": ["@napi-rs/canvas-android-arm64@0.1.81", "", { "os": "android", "cpu": "arm64" }, "sha512-78Lz+AUi+MsWupyZjXwpwQrp1QCwncPvRZrdvrROcZ9Gq9grP7LfQZiGdR8LKyHIq3OR18mDP+JESGT15V1nXw=="],
 
-    "@napi-rs/canvas-darwin-arm64": ["@napi-rs/canvas-darwin-arm64@0.1.80", "", { "os": "darwin", "cpu": "arm64" }, "sha512-O64APRTXRUiAz0P8gErkfEr3lipLJgM6pjATwavZ22ebhjYl/SUbpgM0xcWPQBNMP1n29afAC/Us5PX1vg+JNQ=="],
+    "@napi-rs/canvas-darwin-arm64": ["@napi-rs/canvas-darwin-arm64@0.1.81", "", { "os": "darwin", "cpu": "arm64" }, "sha512-omejuKgHWKDGoh8rsgsyhm/whwxMaryTQjJTd9zD7hiB9/rzcEEJLHnzXWR5ysy4/tTjHaQotE6k2t8eodTLnA=="],
 
-    "@napi-rs/canvas-darwin-x64": ["@napi-rs/canvas-darwin-x64@0.1.80", "", { "os": "darwin", "cpu": "x64" }, "sha512-FqqSU7qFce0Cp3pwnTjVkKjjOtxMqRe6lmINxpIZYaZNnVI0H5FtsaraZJ36SiTHNjZlUB69/HhxNDT1Aaa9vA=="],
+    "@napi-rs/canvas-darwin-x64": ["@napi-rs/canvas-darwin-x64@0.1.81", "", { "os": "darwin", "cpu": "x64" }, "sha512-EYfk+co6BElq5DXNH9PBLYDYwc4QsvIVbyrsVHsxVpn4p6Y3/s8MChgC69AGqj3vzZBQ1qx2CRCMtg5cub+XuQ=="],
 
-    "@napi-rs/canvas-linux-arm-gnueabihf": ["@napi-rs/canvas-linux-arm-gnueabihf@0.1.80", "", { "os": "linux", "cpu": "arm" }, "sha512-eyWz0ddBDQc7/JbAtY4OtZ5SpK8tR4JsCYEZjCE3dI8pqoWUC8oMwYSBGCYfsx2w47cQgQCgMVRVTFiiO38hHQ=="],
+    "@napi-rs/canvas-linux-arm-gnueabihf": ["@napi-rs/canvas-linux-arm-gnueabihf@0.1.81", "", { "os": "linux", "cpu": "arm" }, "sha512-teh6Q74CyAcH31yLNQGR9MtXSFxlZa5CI6vvNUISI14gWIJWrhOwUAOly+KRe1aztWR0FWTVSPxM4p5y+06aow=="],
 
-    "@napi-rs/canvas-linux-arm64-gnu": ["@napi-rs/canvas-linux-arm64-gnu@0.1.80", "", { "os": "linux", "cpu": "arm64" }, "sha512-qwA63t8A86bnxhuA/GwOkK3jvb+XTQaTiVML0vAWoHyoZYTjNs7BzoOONDgTnNtr8/yHrq64XXzUoLqDzU+Uuw=="],
+    "@napi-rs/canvas-linux-arm64-gnu": ["@napi-rs/canvas-linux-arm64-gnu@0.1.81", "", { "os": "linux", "cpu": "arm64" }, "sha512-AGEopHFYRzJOjxY+2G1RmHPRnuWvO3Qdhq7sIazlSjxb3Z6dZHg7OB/4ZimXaimPjDACm9qWa6t5bn9bhXvkcw=="],
 
-    "@napi-rs/canvas-linux-arm64-musl": ["@napi-rs/canvas-linux-arm64-musl@0.1.80", "", { "os": "linux", "cpu": "arm64" }, "sha512-1XbCOz/ymhj24lFaIXtWnwv/6eFHXDrjP0jYkc6iHQ9q8oXKzUX1Lc6bu+wuGiLhGh2GS/2JlfORC5ZcXimRcg=="],
+    "@napi-rs/canvas-linux-arm64-musl": ["@napi-rs/canvas-linux-arm64-musl@0.1.81", "", { "os": "linux", "cpu": "arm64" }, "sha512-Bj3m1cl4GIhsigkdwOxii4g4Ump3/QhNpx85IgAlCCYXpaly6mcsWpuDYEabfIGWOWhDUNBOndaQUPfWK1czOQ=="],
 
-    "@napi-rs/canvas-linux-riscv64-gnu": ["@napi-rs/canvas-linux-riscv64-gnu@0.1.80", "", { "os": "linux", "cpu": "none" }, "sha512-XTzR125w5ZMs0lJcxRlS1K3P5RaZ9RmUsPtd1uGt+EfDyYMu4c6SEROYsxyatbbu/2+lPe7MPHOO/0a0x7L/gw=="],
+    "@napi-rs/canvas-linux-riscv64-gnu": ["@napi-rs/canvas-linux-riscv64-gnu@0.1.81", "", { "os": "linux", "cpu": "none" }, "sha512-yg/5NkHykVdwPlD3XObwCa/EswkOwLHswJcI9rHrac+znHsmCSj5AMX/RTU9Z9F6lZTwL60JM2Esit33XhAMiw=="],
 
-    "@napi-rs/canvas-linux-x64-gnu": ["@napi-rs/canvas-linux-x64-gnu@0.1.80", "", { "os": "linux", "cpu": "x64" }, "sha512-BeXAmhKg1kX3UCrJsYbdQd3hIMDH/K6HnP/pG2LuITaXhXBiNdh//TVVVVCBbJzVQaV5gK/4ZOCMrQW9mvuTqA=="],
+    "@napi-rs/canvas-linux-x64-gnu": ["@napi-rs/canvas-linux-x64-gnu@0.1.81", "", { "os": "linux", "cpu": "x64" }, "sha512-tPfMpSEBuV5dJSKexO/UZxpOqnYTaNbG8aKa1ek8QsWu+4SJ/foWkaxscra/RUv85vepx6WWDjzBNbNJsTnO0w=="],
 
-    "@napi-rs/canvas-linux-x64-musl": ["@napi-rs/canvas-linux-x64-musl@0.1.80", "", { "os": "linux", "cpu": "x64" }, "sha512-x0XvZWdHbkgdgucJsRxprX/4o4sEed7qo9rCQA9ugiS9qE2QvP0RIiEugtZhfLH3cyI+jIRFJHV4Fuz+1BHHMg=="],
+    "@napi-rs/canvas-linux-x64-musl": ["@napi-rs/canvas-linux-x64-musl@0.1.81", "", { "os": "linux", "cpu": "x64" }, "sha512-1L0xnYgzqn8Baef+inPvY4dKqdmw3KCBoe0NEDgezuBZN7MA5xElwifoG8609uNdrMtJ9J6QZarsslLRVqri7g=="],
 
-    "@napi-rs/canvas-win32-x64-msvc": ["@napi-rs/canvas-win32-x64-msvc@0.1.80", "", { "os": "win32", "cpu": "x64" }, "sha512-Z8jPsM6df5V8B1HrCHB05+bDiCxjE9QA//3YrkKIdVDEwn5RKaqOxCJDRJkl48cJbylcrJbW4HxZbTte8juuPg=="],
+    "@napi-rs/canvas-win32-x64-msvc": ["@napi-rs/canvas-win32-x64-msvc@0.1.81", "", { "os": "win32", "cpu": "x64" }, "sha512-57ryVbhm/z7RE9/UVcS7mrLPdlayLesy+9U0Uf6epCoeSGrs99tfieCcgZWFbIgmByQ1AZnNtFI2N6huqDLlWQ=="],
 
     "@neon-rs/load": ["@neon-rs/load@0.0.4", "", {}, "sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw=="],
 
@@ -1151,34 +1151,10 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
-    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
-
-    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
-
-    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
-
-    "d3-format": ["d3-format@3.1.0", "", {}, "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="],
-
-    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
-
-    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
-
-    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
-
-    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
-
-    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
-
-    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
-
-    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
-
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
-    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
-
     "decode-formdata": ["decode-formdata@0.9.0", "", {}, "sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw=="],
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
@@ -1259,8 +1235,6 @@
 
     "exsolve": ["exsolve@1.0.7", "", {}, "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw=="],
 
-    "fast-equals": ["fast-equals@5.3.2", "", {}, "sha512-6rxyATwPCkaFIL3JLqw8qXqMpIZ942pTX/tbQFkRsDGblS8tNGtlUauA/+mt6RUfqn/4MoEr+WDkYoIQbibWuQ=="],
-
     "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
 
     "fast-sha256": ["fast-sha256@1.3.0", "", {}, "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ=="],
@@ -1641,12 +1615,8 @@
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
-    "react-smooth": ["react-smooth@4.0.4", "", { "dependencies": { "fast-equals": "^5.0.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q=="],
-
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
-    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
-
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
@@ -1921,6 +1891,8 @@
 
     "@parcel/optimizer-data-url/mime": ["mime@2.6.0", "", { "bin": { "mime": "cli.js" } }, "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg=="],
 
+    "@parcel/package-manager/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
+
     "@parcel/runtime-js/@parcel/plugin": ["@parcel/plugin@2.8.3", "", { "dependencies": { "@parcel/types": "2.8.3" } }, "sha512-jZ6mnsS4D9X9GaNnvrixDQwlUQJCohDX2hGyM0U0bY2NWU8Km97SjtoCpWjq+XBCx/gpC4g58+fk9VQeZq2vlw=="],
 
     "@parcel/runtime-js/@parcel/utils": ["@parcel/utils@2.8.3", "", { "dependencies": { "@parcel/codeframe": "2.8.3", "@parcel/diagnostic": "2.8.3", "@parcel/hash": "2.8.3", "@parcel/logger": "2.8.3", "@parcel/markdown-ansi": "2.8.3", "@parcel/source-map": "^2.1.1", "chalk": "^4.1.0" } }, "sha512-IhVrmNiJ+LOKHcCivG5dnuLGjhPYxQ/IzbnF2DKNQXWBTsYlHkJZpmz7THoeLtLliGmSOZ3ZCsbR8/tJJKmxjA=="],
@@ -1929,8 +1901,6 @@
 
     "@parcel/transformer-html/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
-    "@parcel/transformer-js/@swc/helpers": ["@swc/helpers@0.5.17", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A=="],
-
     "@parcel/transformer-js/regenerator-runtime": ["regenerator-runtime@0.13.11", "", {}, "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="],
 
     "@parcel/transformer-js/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
diff --git a/packages/server/convex/http.ts b/packages/server/convex/http.ts
index dbd20764..2c0b731f 100644
--- a/packages/server/convex/http.ts
+++ b/packages/server/convex/http.ts
@@ -57,19 +57,16 @@ export const ZUpsertProgramWithRequirements = z.object({
       z.object({
         isMajor: z.boolean(),
         type: z.literal("required"),
-        category: z.string(),
         courses: z.array(z.string()),
       }),
       z.object({
         isMajor: z.boolean(),
         type: z.literal("alternative"),
-        category: z.string(),
         courses: z.array(z.string()),
       }),
       z.object({
         isMajor: z.boolean(),
         type: z.literal("options"),
-        category: z.string(),
         courses: z.array(z.string()),
         courseLevels: z.array(
           z.object({
@@ -92,7 +89,6 @@ export const ZUpsertRequirements = z.array(
       ),
       isMajor: z.boolean(),
       type: z.literal("required"),
-      category: z.string(),
       courses: z.array(z.string()),
     }),
     z.object({
@@ -102,7 +98,6 @@ export const ZUpsertRequirements = z.array(
       ),
       isMajor: z.boolean(),
       type: z.literal("alternative"),
-      category: z.string(),
       courses: z.array(z.string()),
     }),
     z.object({
@@ -112,7 +107,6 @@ export const ZUpsertRequirements = z.array(
       ),
       isMajor: z.boolean(),
       type: z.literal("options"),
-      category: z.string(),
       courses: z.array(z.string()),
       courseLevels: z.array(
         z.object({
diff --git a/packages/server/convex/mockData.ts b/packages/server/convex/mockData.ts
index cbe7a49f..6aeffc31 100644
--- a/packages/server/convex/mockData.ts
+++ b/packages/server/convex/mockData.ts
@@ -11,20 +11,11 @@ export const mockProgramsData = {
   },
 };
 
-/**
- * Categories for course requirements (similar to NYU CS curriculum):
- * - Computer Science: All CS courses including core, theory, systems, and electives
- * - Mathematics: Pure math courses
- * - Natural Science: Physics, Chemistry, Biology
- * - General Education: Non-CS/Math/Science requirements
- */
-
 export const mockRequirementsData = [
   // Computer Science Requirements
   {
     type: "required" as const,
     isMajor: true,
-    category: "Computer Science",
     courses: [
       "CSCI-UA 101", // Intro to Computer Science
       "CSCI-UA 102", // Data Structures
@@ -39,7 +30,6 @@ export const mockRequirementsData = [
   {
     type: "required" as const,
     isMajor: true,
-    category: "Mathematics",
     courses: [
       "MATH-UA 120", // Discrete Mathematics
       "MATH-UA 121", // Calculus I
@@ -51,7 +41,6 @@ export const mockRequirementsData = [
   {
     type: "alternative" as const,
     isMajor: true,
-    category: "Mathematics",
     courses: [
       "MATH-UA 140", // Linear Algebra
       "MATH-UA 325", // Analysis
@@ -62,7 +51,6 @@ export const mockRequirementsData = [
   {
     type: "options" as const,
     isMajor: true,
-    category: "Computer Science",
     courses: [
       "CSCI-UA 467", // Intro to Machine Learning
       "CSCI-UA 473", // Fundamentals of AI
@@ -89,7 +77,6 @@ export const mockRequirementsData = [
   {
     type: "required" as const,
     isMajor: false,
-    category: "Natural Science",
     courses: [
       "PHYS-UA 11", // General Physics I
       "CHEM-UA 125", // General Chemistry I
@@ -100,7 +87,6 @@ export const mockRequirementsData = [
   {
     type: "alternative" as const,
     isMajor: false,
-    category: "Natural Science",
     courses: [
       "PHYS-UA 91", // Physics Lab
       "CHEM-UA 127", // Chemistry Lab
@@ -112,7 +98,6 @@ export const mockRequirementsData = [
   {
     type: "required" as const,
     isMajor: false,
-    category: "General Education",
     courses: [
       "EXPOS-UA 1", // Writing the Essay
     ],
@@ -122,7 +107,6 @@ export const mockRequirementsData = [
   {
     type: "options" as const,
     isMajor: false,
-    category: "General Education",
     courses: [
       "PHIL-UA 101", // Introduction to Philosophy
       "HIST-UA 101", // World History
@@ -178,17 +162,6 @@ export const additionalMockPrograms = [
   },
 ];
 
-/**
- * Course categories breakdown for charts:
- * This can be used to visualize distribution of requirements
- */
-export const categoryStats = {
-  "Computer Science": 10, // 6 required + 4 electives (average)
-  Mathematics: 4, // 3 required + 1 alternative
-  "Natural Science": 3,
-  "General Education": 3,
-};
-
 /**
  * Mock courses data
  */
diff --git a/packages/server/convex/programs.ts b/packages/server/convex/programs.ts
index c22598d0..f3d47712 100644
--- a/packages/server/convex/programs.ts
+++ b/packages/server/convex/programs.ts
@@ -80,42 +80,46 @@ export const getProgramWithGroupedRequirements = protectedQuery({
     // Calculate total credits for each category
     const groupedRequirements: Record<
       string,
-      { credits: number; courses: string[] }
+      { credits: number; courses: string[][] }
     > = {};
 
     for (const req of requirements) {
-      const { programId, category, courses, ...rest } = req;
-      let totalCredits = 0;
+      const { courses } = req;
 
-      // Check if this is an "options" type with creditsRequired
       if ("creditsRequired" in req && req.creditsRequired) {
-        totalCredits = req.creditsRequired;
-      } else {
-        // Calculate credits from actual courses
-        for (const courseCode of courses) {
-          const course = await getOneFrom(
-            ctx.db,
-            "courses",
-            "by_course_code",
-            courseCode,
-            "code",
-          );
-          if (course) {
-            totalCredits += course.credits;
+        // CASE: Options type with creditsRequired
+        const uniquePrefixes = [...new Set(courses.map(c => c.split(" ")[0]))];
+
+        if (uniquePrefixes.length === 1) {
+          // All same prefix - assign all credits to that one prefix
+          const prefix = uniquePrefixes[0];
+          if (!groupedRequirements[prefix]) {
+            groupedRequirements[prefix] = { credits: 0, courses: [] };
           }
-          // TODO: better error handling if course doesn't exist
-          else {
-            totalCredits += 4;
+          groupedRequirements[prefix].credits += req.creditsRequired;
+          groupedRequirements[prefix].courses.push(courses); 
+        } else {
+          // Mixed prefixes - assign to "Other" category
+          if (!groupedRequirements.Other) {
+            groupedRequirements.Other = { credits: 0, courses: [] };
           }
+          groupedRequirements.Other.credits += req.creditsRequired;
+          groupedRequirements.Other.courses.push(courses);
         }
-      }
+      } else {
+        // CASE: Required/Alternative type - calculate actual credits per course
+        for (const courseCode of courses) {
+          const prefix = courseCode.split(" ")[0];
+          const course = await getOneFrom(ctx.db, "courses", "by_course_code", courseCode, "code");
+          const credits = course ? course.credits : 4;
 
-      // Add to grouped requirements
-      if (!groupedRequirements[category]) {
-        groupedRequirements[category] = { credits: 0, courses: [] };
+          if (!groupedRequirements[prefix]) {
+            groupedRequirements[prefix] = { credits: 0, courses: [] };
+          }
+          groupedRequirements[prefix].credits += credits;
+          groupedRequirements[prefix].courses.push([courseCode]);
+        }
       }
-      groupedRequirements[category].credits += totalCredits;
-      groupedRequirements[category].courses.push(...courses);
     }
 
     return {
diff --git a/packages/server/convex/requirements.ts b/packages/server/convex/requirements.ts
index 2b305d1c..e79c1cf2 100644
--- a/packages/server/convex/requirements.ts
+++ b/packages/server/convex/requirements.ts
@@ -14,7 +14,6 @@ export const createRequirementsInternal = internalMutation({
             programId: newReq.programId,
             isMajor: newReq.isMajor,
             type: newReq.type,
-            category: newReq.category,
             courses: newReq.courses,
             courseLevels: newReq.courseLevels,
             creditsRequired: newReq.creditsRequired,
@@ -24,7 +23,6 @@ export const createRequirementsInternal = internalMutation({
           programId: newReq.programId,
           isMajor: newReq.isMajor,
           type: newReq.type,
-          category: newReq.category,
           courses: newReq.courses,
         });
       }),
diff --git a/packages/server/convex/schema.ts b/packages/server/convex/schema.ts
index 4baea0b9..f7c311c7 100644
--- a/packages/server/convex/schema.ts
+++ b/packages/server/convex/schema.ts
@@ -16,9 +16,7 @@ export default defineSchema({
       searchField: "name",
     }),
   requirements: defineTable(requirements)
-    .index("by_program", ["programId"])
-    .index("by_category", ["category"])
-    .index("by_program_and_category", ["programId", "category"]),
+    .index("by_program", ["programId"]),
   courses: defineTable(courses)
     .index("by_course_code", ["code"])
     .index("by_level", ["level"])
diff --git a/packages/server/convex/schemas/programs.ts b/packages/server/convex/schemas/programs.ts
index f9ba4fa9..f2c56cd2 100644
--- a/packages/server/convex/schemas/programs.ts
+++ b/packages/server/convex/schemas/programs.ts
@@ -11,21 +11,18 @@ const requirements = v.union(
     programId: v.id("programs"),
     isMajor: v.boolean(),
     type: v.literal("required"),
-    category: v.string(), // e.g., "Computer Science", "Mathematics", "Natural Science", "General Education"
     courses: v.array(v.string()), // course code
   }),
   v.object({
     programId: v.id("programs"),
     isMajor: v.boolean(),
     type: v.literal("alternative"),
-    category: v.string(), // e.g., "Computer Science", "Mathematics", "Natural Science", "General Education"
     courses: v.array(v.string()), // course code
   }),
   v.object({
     programId: v.id("programs"),
     isMajor: v.boolean(),
     type: v.literal("options"),
-    category: v.string(), // e.g., "Computer Science", "Mathematics", "Natural Science", "General Education"
     courses: v.array(v.string()), // course code
     courseLevels: v.array(
       v.object({
diff --git a/packages/server/convex/seed.ts b/packages/server/convex/seed.ts
index ffb7765f..b4b3c596 100644
--- a/packages/server/convex/seed.ts
+++ b/packages/server/convex/seed.ts
@@ -1,5 +1,6 @@
 import { v } from "convex/values";
 import { internal } from "./_generated/api";
+import type { Id } from "./_generated/dataModel";
 import { internalMutation } from "./_generated/server";
 import {
   additionalMockPrograms,
@@ -23,7 +24,7 @@ export const seedMockData = internalMutation({
     console.log("Starting to seed mock data...");
 
     // Insert courses
-    const courseIds = [];
+    const courseIds: Id<"courses">[] = [];
     for (const course of mockCoursesData) {
       const courseId = await ctx.runMutation(
         internal.courses.upsertCourseInternal,
@@ -34,7 +35,7 @@ export const seedMockData = internalMutation({
     console.log(`Created ${mockCoursesData.length} courses`);
 
     // Insert the main Computer Science (BA) program
-    const programId = await ctx.runMutation(
+    const programId: Id<"programs"> = await ctx.runMutation(
       internal.programs.upsertProgramInternal,
       mockProgramsData.program,
     );
@@ -61,7 +62,7 @@ export const seedMockData = internalMutation({
     }
 
     // Insert additional programs
-    const additionalProgramIds = [];
+    const additionalProgramIds: Id<"programs">[] = [];
     for (const program of additionalMockPrograms) {
       const id = await ctx.runMutation(
         internal.programs.upsertProgramInternal,
@@ -76,7 +77,7 @@ export const seedMockData = internalMutation({
     );
 
     // Insert user courses (if userId is provided)
-    const userCourseIds = [];
+    const userCourseIds: Id<"userCourses">[] = [];
     if (args.userId) {
       for (const userCourse of mockUserCoursesData) {
         const userCourseId = await ctx.db.insert("userCourses", {

From aa485a31f31fb20dbe4c9f165e4cadb8b3a482e8 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 26 Oct 2025 14:43:25 -0400
Subject: [PATCH 12/54] fixed sizing and moved labels outside

---
 .../components/charts/degree-charts.tsx       | 276 +++++++-----------
 1 file changed, 109 insertions(+), 167 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 3d638a36..68240dc3 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -140,188 +140,130 @@ export function ProgramRequirementsChart({
       </CardHeader>
       <CardContent>
         {!showProgress && (
-          <ChartContainer config={chartConfig} className="h-[400px] w-full">
-            <BarChart
-              accessibilityLayer
-              data={chartData}
-              layout="vertical"
-              margin={{
-                left: 20,
-                right: 16,
-              }}
-            >
-              <YAxis
-                dataKey="category"
-                type="category"
-                tickLine={false}
-                tickMargin={10}
-                axisLine={false}
-                width={150}
-                hide
-              />
-              <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
-              <Bar
-                dataKey="credits"
-                radius={4}
-                barSize={100}
-                fill="hsl(var(--muted))"
+          <div className="w-full">
+            <ChartContainer config={chartConfig} className="h-[400px] w-full">
+              <BarChart
+                accessibilityLayer
+                data={chartData}
+                layout="vertical"
+                margin={{
+                  left: 0,
+                  right: 16,
+                }}
               >
-                <LabelList
+                <YAxis
                   dataKey="category"
-                  position="insideLeft"
-                  offset={8}
-                  className="fill-white"
-                  fontSize={12}
+                  type="category"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  width={140}
                 />
-                <LabelList
+                <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+                <Bar
                   dataKey="credits"
-                  position="right"
-                  offset={8}
-                  className="fill-foreground"
-                  fontSize={12}
-                />
-              </Bar>
-            </BarChart>
-          </ChartContainer>
+                  radius={4}
+                  barSize={100}
+                  fill="hsl(var(--muted))"
+                >
+                  <LabelList
+                    dataKey="credits"
+                    position="right"
+                    offset={8}
+                    className="fill-foreground"
+                    fontSize={12}
+                  />
+                </Bar>
+              </BarChart>
+            </ChartContainer>
+          </div>
         )}
 
         {showProgress && (
-          <ChartContainer config={chartConfig} className="h-[400px] w-full">
-            <BarChart
-              accessibilityLayer
-              data={chartData}
-              layout="vertical"
-              margin={{
-                left: 20,
-                right: 16,
-              }}
-            >
-              <YAxis
-                dataKey="category"
-                type="category"
-                tickLine={false}
-                tickMargin={10}
-                axisLine={false}
-                width={150}
-                hide
-              />
-              <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
-              <Tooltip
-                content={({ active, payload }) => {
-                  if (active && payload && payload.length) {
-                    const data = payload[0].payload;
-                    return (
-                      <div className="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Category
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {data.category}
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Completed
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {data.completedCredits} / {data.credits} credits
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Progress
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {data.percentage}%
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  }
-                  return null;
+          <div className="w-full">
+            <ChartContainer config={chartConfig} className="h-[400px] w-full">
+              <BarChart
+                accessibilityLayer
+                data={chartData}
+                layout="vertical"
+                margin={{
+                  left: 0,
+                  right: 16,
                 }}
-              />
-              <Bar
-                dataKey="completedCredits"
-                stackId="stack"
-                barSize={100}
-                fill="#3b82f6"
-                radius={[4, 0, 0, 4]}
               >
-                <LabelList
+                <YAxis
                   dataKey="category"
-                  position="insideLeft"
-                  offset={8}
-                  className="fill-white"
-                  fontSize={12}
-                  content={(props: any) => {
-                    const { x, y, value, width } = props;
-                    // Only show if this bar has width
-                    if (!width || width <= 0) {
-                      return null;
-                    }
-                    return (
-                      <text
-                        x={Number(x) + 8}
-                        y={Number(y) + Number(props.height || 0) / 2}
-                        fill="white"
-                        fontSize={12}
-                        textAnchor="start"
-                        dominantBaseline="middle"
-                      >
-                        {value}
-                      </text>
-                    );
-                  }}
+                  type="category"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  width={140}
                 />
-              </Bar>
-
-              <Bar
-                dataKey="remainingCredits"
-                stackId="stack"
-                barSize={100}
-                fill="hsl(var(--muted))"
-                radius={[0, 4, 4, 0]}
-              >
-                <LabelList
-                  dataKey="category"
-                  position="insideLeft"
-                  offset={8}
-                  className="fill-white"
-                  fontSize={12}
-                  content={(props: any) => {
-                    const { x, y, value, payload } = props;
-                    // Only show if completed credits is 0 (blue bar has no width)
-                    if (payload?.completedCredits > 0) {
-                      return null;
+                <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (active && payload && payload.length) {
+                      const data = payload[0].payload;
+                      return (
+                        <div className="rounded-lg border bg-background p-2 shadow-sm">
+                          <div className="grid grid-cols-2 gap-2">
+                            <div className="flex flex-col">
+                              <span className="text-[0.70rem] uppercase text-muted-foreground">
+                                Category
+                              </span>
+                              <span className="font-bold text-muted-foreground">
+                                {data.category}
+                              </span>
+                            </div>
+                            <div className="flex flex-col">
+                              <span className="text-[0.70rem] uppercase text-muted-foreground">
+                                Completed
+                              </span>
+                              <span className="font-bold text-muted-foreground">
+                                {data.completedCredits} / {data.credits} credits
+                              </span>
+                            </div>
+                            <div className="flex flex-col">
+                              <span className="text-[0.70rem] uppercase text-muted-foreground">
+                                Progress
+                              </span>
+                              <span className="font-bold text-muted-foreground">
+                                {data.percentage}%
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      );
                     }
-                    return (
-                      <text
-                        x={Number(x) + 8}
-                        y={Number(y) + Number(props.height || 0) / 2}
-                        fill="white"
-                        fontSize={12}
-                        textAnchor="start"
-                        dominantBaseline="middle"
-                      >
-                        {value}
-                      </text>
-                    );
+                    return null;
                   }}
                 />
-                <LabelList
-                  dataKey="credits"
-                  position="right"
-                  offset={8}
-                  className="fill-foreground"
-                  fontSize={12}
+                <Bar
+                  dataKey="completedCredits"
+                  stackId="stack"
+                  barSize={100}
+                  fill="#3b82f6"
+                  radius={[4, 0, 0, 4]}
                 />
-              </Bar>
-            </BarChart>
-          </ChartContainer>
+
+                <Bar
+                  dataKey="remainingCredits"
+                  stackId="stack"
+                  barSize={100}
+                  fill="hsl(var(--muted))"
+                  radius={[0, 4, 4, 0]}
+                >
+                  <LabelList
+                    dataKey="credits"
+                    position="right"
+                    offset={8}
+                    className="fill-foreground"
+                    fontSize={12}
+                  />
+                </Bar>
+              </BarChart>
+            </ChartContainer>
+          </div>
         )}
       </CardContent>
     </Card>

From 6fe4a2fd72f6b810a251ff3192b1ebca0715f84e Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 26 Oct 2025 14:45:42 -0400
Subject: [PATCH 13/54] put other at the bottom of the chart

---
 .../dashboard/components/charts/degree-charts.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 68240dc3..9c26bf21 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -102,8 +102,8 @@ export function ProgramRequirementsChart({
   }
 
   // Transform the data for the chart
-  const chartData = Object.entries(program.requirementsByCategory).map(
-    ([prefix, data]) => {
+  const chartData = Object.entries(program.requirementsByCategory)
+    .map(([prefix, data]) => {
       const completed = completedCreditsByCategory[prefix] || 0;
       const percentage =
         data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
@@ -114,8 +114,14 @@ export function ProgramRequirementsChart({
         remainingCredits: data.credits - completed,
         percentage,
       };
-    },
-  );
+    })
+    .sort((a, b) => {
+      // "Other" should always be at the bottom
+      if (a.category === "Other") return 1;
+      if (b.category === "Other") return -1;
+      // Otherwise, maintain alphabetical order
+      return a.category.localeCompare(b.category);
+    });
 
   const totalCredits = Object.values(program.requirementsByCategory).reduce(
     (sum, data) => sum + data.credits,

From f0f620809cca0dea29d0249824da496a19faf085 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 26 Oct 2025 15:08:08 -0400
Subject: [PATCH 14/54] removed chart config

---
 .../components/charts/degree-charts.tsx       | 124 +++++++-----------
 1 file changed, 46 insertions(+), 78 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 9c26bf21..a9f6ac49 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -11,39 +11,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
 import { ChartOverlayToggle } from "./label";
 
-const chartConfig = {
-  credits: {
-    label: "Credits",
-  },
-  "CSCI-UA": {
-    label: "Computer Science",
-    color: "hsl(var(--chart-1))",
-  },
-  "MATH-UA": {
-    label: "Mathematics",
-    color: "hsl(var(--chart-2))",
-  },
-  "PHYS-UA": {
-    label: "Physics",
-    color: "hsl(var(--chart-3))",
-  },
-  "CHEM-UA": {
-    label: "Chemistry",
-    color: "hsl(var(--chart-4))",
-  },
-  "EXPOS-UA": {
-    label: "Writing",
-    color: "hsl(var(--chart-5))",
-  },
-  Other: {
-    label: "Other Requirements",
-    color: "hsl(var(--muted))",
-  },
-} satisfies ChartConfig;
-
 interface ProgramRequirementsChartProps {
   programName: string;
 }
@@ -146,57 +115,57 @@ export function ProgramRequirementsChart({
       </CardHeader>
       <CardContent>
         {!showProgress && (
-          <div className="w-full">
-            <ChartContainer config={chartConfig} className="h-[400px] w-full">
-              <BarChart
-                accessibilityLayer
-                data={chartData}
-                layout="vertical"
-                margin={{
-                  left: 0,
-                  right: 16,
-                }}
+          <div className="w-full h-[400px]">
+            <BarChart
+              data={chartData}
+              layout="vertical"
+              width={800}
+              height={400}
+              margin={{
+                left: 0,
+                right: 16,
+              }}
+            >
+              <YAxis
+                dataKey="category"
+                type="category"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                width={140}
+                tick={{ fontSize: 12 }}
+              />
+              <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+              <Bar
+                dataKey="credits"
+                radius={[0, 4, 4, 0]}
+                barSize={100}
+                fill="hsl(var(--muted))"
               >
-                <YAxis
-                  dataKey="category"
-                  type="category"
-                  tickLine={false}
-                  tickMargin={10}
-                  axisLine={false}
-                  width={140}
-                />
-                <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
-                <Bar
+                <LabelList
                   dataKey="credits"
-                  radius={4}
-                  barSize={100}
-                  fill="hsl(var(--muted))"
-                >
-                  <LabelList
-                    dataKey="credits"
-                    position="right"
-                    offset={8}
-                    className="fill-foreground"
-                    fontSize={12}
-                  />
-                </Bar>
-              </BarChart>
-            </ChartContainer>
+                  position="right"
+                  offset={8}
+                  className="fill-foreground"
+                  fontSize={12}
+                />
+              </Bar>
+            </BarChart>
           </div>
         )}
 
         {showProgress && (
-          <div className="w-full">
-            <ChartContainer config={chartConfig} className="h-[400px] w-full">
-              <BarChart
-                accessibilityLayer
-                data={chartData}
-                layout="vertical"
-                margin={{
-                  left: 0,
-                  right: 16,
-                }}
-              >
+          <div className="w-full h-[400px]">
+            <BarChart
+              data={chartData}
+              layout="vertical"
+              width={800}
+              height={400}
+              margin={{
+                left: 0,
+                right: 16,
+              }}
+            >
                 <YAxis
                   dataKey="category"
                   type="category"
@@ -204,6 +173,7 @@ export function ProgramRequirementsChart({
                   tickMargin={10}
                   axisLine={false}
                   width={140}
+                  tick={{ fontSize: 12 }}
                 />
                 <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
                 <Tooltip
@@ -249,7 +219,6 @@ export function ProgramRequirementsChart({
                   stackId="stack"
                   barSize={100}
                   fill="#3b82f6"
-                  radius={[4, 0, 0, 4]}
                 />
 
                 <Bar
@@ -268,7 +237,6 @@ export function ProgramRequirementsChart({
                   />
                 </Bar>
               </BarChart>
-            </ChartContainer>
           </div>
         )}
       </CardContent>

From dbdc86f247973cf814b8f3f07e4de7765c842e4a Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 26 Oct 2025 15:12:54 -0400
Subject: [PATCH 15/54] fixed styling + added overall degree completion
 percentage

---
 .../components/charts/degree-charts.tsx       | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index a9f6ac49..30b10da2 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -97,6 +97,14 @@ export function ProgramRequirementsChart({
     0,
   );
 
+  const totalCompletedCredits = Object.values(completedCreditsByCategory).reduce(
+    (sum, credits) => sum + credits,
+    0,
+  );
+
+  const overallPercentage =
+    totalCredits > 0 ? Math.round((totalCompletedCredits / totalCredits) * 100) : 0;
+
   return (
     <Card>
       <CardHeader>
@@ -105,6 +113,11 @@ export function ProgramRequirementsChart({
             <CardTitle>Program Requirements by Subject</CardTitle>
             <CardDescription>
               {program.name} - Total: {totalCredits} credits
+              {showProgress && (
+                <span className="ml-2 font-semibold text-foreground">
+                  • {overallPercentage}% Complete ({totalCompletedCredits}/{totalCredits} credits)
+                </span>
+              )}
             </CardDescription>
           </div>
           <ChartOverlayToggle
@@ -123,7 +136,8 @@ export function ProgramRequirementsChart({
               height={400}
               margin={{
                 left: 0,
-                right: 16,
+                right: 40,
+                bottom: 20,
               }}
             >
               <YAxis
@@ -135,11 +149,10 @@ export function ProgramRequirementsChart({
                 width={140}
                 tick={{ fontSize: 12 }}
               />
-              <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+              <XAxis dataKey="credits" type="number" hide />
               <Bar
                 dataKey="credits"
                 radius={[0, 4, 4, 0]}
-                barSize={100}
                 fill="hsl(var(--muted))"
               >
                 <LabelList
@@ -163,7 +176,8 @@ export function ProgramRequirementsChart({
               height={400}
               margin={{
                 left: 0,
-                right: 16,
+                right: 40,
+                bottom: 20,
               }}
             >
                 <YAxis
@@ -175,7 +189,7 @@ export function ProgramRequirementsChart({
                   width={140}
                   tick={{ fontSize: 12 }}
                 />
-                <XAxis dataKey="credits" type="number" hide domain={[0, 75]} />
+                <XAxis dataKey="credits" type="number" hide />
                 <Tooltip
                   content={({ active, payload }) => {
                     if (active && payload && payload.length) {
@@ -217,14 +231,12 @@ export function ProgramRequirementsChart({
                 <Bar
                   dataKey="completedCredits"
                   stackId="stack"
-                  barSize={100}
                   fill="#3b82f6"
                 />
 
                 <Bar
                   dataKey="remainingCredits"
                   stackId="stack"
-                  barSize={100}
                   fill="hsl(var(--muted))"
                   radius={[0, 4, 4, 0]}
                 >

From 82d7420bbd324130d520ae422163ce3329fbbd28 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 26 Oct 2025 15:22:12 -0400
Subject: [PATCH 16/54] biome linting fixes

---
 .../components/charts/degree-charts.tsx       | 144 +++++++++---------
 .../app/dashboard/components/charts/label.tsx |   5 +-
 packages/server/convex/programs.ts            |  14 +-
 packages/server/convex/schema.ts              |   3 +-
 4 files changed, 84 insertions(+), 82 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index 30b10da2..be3b7a01 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -57,7 +57,7 @@ export function ProgramRequirementsChart({
       )) {
         // Check if the course code is in any of the nested course arrays
         const isInRequirement = data.courses.some((courseGroup) =>
-          courseGroup.includes(userCourse.courseCode)
+          courseGroup.includes(userCourse.courseCode),
         );
 
         if (isInRequirement) {
@@ -97,13 +97,14 @@ export function ProgramRequirementsChart({
     0,
   );
 
-  const totalCompletedCredits = Object.values(completedCreditsByCategory).reduce(
-    (sum, credits) => sum + credits,
-    0,
-  );
+  const totalCompletedCredits = Object.values(
+    completedCreditsByCategory,
+  ).reduce((sum, credits) => sum + credits, 0);
 
   const overallPercentage =
-    totalCredits > 0 ? Math.round((totalCompletedCredits / totalCredits) * 100) : 0;
+    totalCredits > 0
+      ? Math.round((totalCompletedCredits / totalCredits) * 100)
+      : 0;
 
   return (
     <Card>
@@ -115,7 +116,8 @@ export function ProgramRequirementsChart({
               {program.name} - Total: {totalCredits} credits
               {showProgress && (
                 <span className="ml-2 font-semibold text-foreground">
-                  • {overallPercentage}% Complete ({totalCompletedCredits}/{totalCredits} credits)
+                  • {overallPercentage}% Complete ({totalCompletedCredits}/
+                  {totalCredits} credits)
                 </span>
               )}
             </CardDescription>
@@ -180,75 +182,71 @@ export function ProgramRequirementsChart({
                 bottom: 20,
               }}
             >
-                <YAxis
-                  dataKey="category"
-                  type="category"
-                  tickLine={false}
-                  tickMargin={10}
-                  axisLine={false}
-                  width={140}
-                  tick={{ fontSize: 12 }}
-                />
-                <XAxis dataKey="credits" type="number" hide />
-                <Tooltip
-                  content={({ active, payload }) => {
-                    if (active && payload && payload.length) {
-                      const data = payload[0].payload;
-                      return (
-                        <div className="rounded-lg border bg-background p-2 shadow-sm">
-                          <div className="grid grid-cols-2 gap-2">
-                            <div className="flex flex-col">
-                              <span className="text-[0.70rem] uppercase text-muted-foreground">
-                                Category
-                              </span>
-                              <span className="font-bold text-muted-foreground">
-                                {data.category}
-                              </span>
-                            </div>
-                            <div className="flex flex-col">
-                              <span className="text-[0.70rem] uppercase text-muted-foreground">
-                                Completed
-                              </span>
-                              <span className="font-bold text-muted-foreground">
-                                {data.completedCredits} / {data.credits} credits
-                              </span>
-                            </div>
-                            <div className="flex flex-col">
-                              <span className="text-[0.70rem] uppercase text-muted-foreground">
-                                Progress
-                              </span>
-                              <span className="font-bold text-muted-foreground">
-                                {data.percentage}%
-                              </span>
-                            </div>
+              <YAxis
+                dataKey="category"
+                type="category"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                width={140}
+                tick={{ fontSize: 12 }}
+              />
+              <XAxis dataKey="credits" type="number" hide />
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    const data = payload[0].payload;
+                    return (
+                      <div className="rounded-lg border bg-background p-2 shadow-sm">
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Category
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {data.category}
+                            </span>
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Completed
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {data.completedCredits} / {data.credits} credits
+                            </span>
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Progress
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {data.percentage}%
+                            </span>
                           </div>
                         </div>
-                      );
-                    }
-                    return null;
-                  }}
-                />
-                <Bar
-                  dataKey="completedCredits"
-                  stackId="stack"
-                  fill="#3b82f6"
-                />
+                      </div>
+                    );
+                  }
+                  return null;
+                }}
+              />
+              <Bar dataKey="completedCredits" stackId="stack" fill="#3b82f6" />
 
-                <Bar
-                  dataKey="remainingCredits"
-                  stackId="stack"
-                  fill="hsl(var(--muted))"
-                  radius={[0, 4, 4, 0]}
-                >
-                  <LabelList
-                    dataKey="credits"
-                    position="right"
-                    offset={8}
-                    className="fill-foreground"
-                    fontSize={12}
-                  />
-                </Bar>
-              </BarChart>
+              <Bar
+                dataKey="remainingCredits"
+                stackId="stack"
+                fill="hsl(var(--muted))"
+                radius={[0, 4, 4, 0]}
+              >
+                <LabelList
+                  dataKey="credits"
+                  position="right"
+                  offset={8}
+                  className="fill-foreground"
+                  fontSize={12}
+                />
+              </Bar>
+            </BarChart>
           </div>
         )}
       </CardContent>
diff --git a/apps/web/src/app/dashboard/components/charts/label.tsx b/apps/web/src/app/dashboard/components/charts/label.tsx
index cb45629b..a6a2daab 100644
--- a/apps/web/src/app/dashboard/components/charts/label.tsx
+++ b/apps/web/src/app/dashboard/components/charts/label.tsx
@@ -12,10 +12,7 @@ export function ChartOverlayToggle({
 }: ChartOverlayToggleProps) {
   return (
     <div className="flex items-center space-x-2">
-      <Checkbox
-        checked={showProgress}
-        onCheckedChange={onToggle}
-      />
+      <Checkbox checked={showProgress} onCheckedChange={onToggle} />
       <Label htmlFor="overlay" className="cursor-pointer">
         Overlay Taken Courses
       </Label>
diff --git a/packages/server/convex/programs.ts b/packages/server/convex/programs.ts
index f3d47712..092cd152 100644
--- a/packages/server/convex/programs.ts
+++ b/packages/server/convex/programs.ts
@@ -88,7 +88,9 @@ export const getProgramWithGroupedRequirements = protectedQuery({
 
       if ("creditsRequired" in req && req.creditsRequired) {
         // CASE: Options type with creditsRequired
-        const uniquePrefixes = [...new Set(courses.map(c => c.split(" ")[0]))];
+        const uniquePrefixes = [
+          ...new Set(courses.map((c) => c.split(" ")[0])),
+        ];
 
         if (uniquePrefixes.length === 1) {
           // All same prefix - assign all credits to that one prefix
@@ -97,7 +99,7 @@ export const getProgramWithGroupedRequirements = protectedQuery({
             groupedRequirements[prefix] = { credits: 0, courses: [] };
           }
           groupedRequirements[prefix].credits += req.creditsRequired;
-          groupedRequirements[prefix].courses.push(courses); 
+          groupedRequirements[prefix].courses.push(courses);
         } else {
           // Mixed prefixes - assign to "Other" category
           if (!groupedRequirements.Other) {
@@ -110,7 +112,13 @@ export const getProgramWithGroupedRequirements = protectedQuery({
         // CASE: Required/Alternative type - calculate actual credits per course
         for (const courseCode of courses) {
           const prefix = courseCode.split(" ")[0];
-          const course = await getOneFrom(ctx.db, "courses", "by_course_code", courseCode, "code");
+          const course = await getOneFrom(
+            ctx.db,
+            "courses",
+            "by_course_code",
+            courseCode,
+            "code",
+          );
           const credits = course ? course.credits : 4;
 
           if (!groupedRequirements[prefix]) {
diff --git a/packages/server/convex/schema.ts b/packages/server/convex/schema.ts
index f7c311c7..6191a006 100644
--- a/packages/server/convex/schema.ts
+++ b/packages/server/convex/schema.ts
@@ -15,8 +15,7 @@ export default defineSchema({
     .searchIndex("search_name", {
       searchField: "name",
     }),
-  requirements: defineTable(requirements)
-    .index("by_program", ["programId"]),
+  requirements: defineTable(requirements).index("by_program", ["programId"]),
   courses: defineTable(courses)
     .index("by_course_code", ["code"])
     .index("by_level", ["level"])

From 2576aac73cf884215c81cddde26225c7649f0bd1 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Thu, 30 Oct 2025 11:27:33 -0400
Subject: [PATCH 17/54] fixed svg alt error and made code checking case
 insensitive

---
 .../src/app/dashboard/components/charts/degree-charts.tsx    | 5 ++++-
 apps/web/src/components/ui/checkbox.tsx                      | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index be3b7a01..ad93aa97 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -57,7 +57,10 @@ export function ProgramRequirementsChart({
       )) {
         // Check if the course code is in any of the nested course arrays
         const isInRequirement = data.courses.some((courseGroup) =>
-          courseGroup.includes(userCourse.courseCode),
+          courseGroup.some(
+            (course) =>
+              course.toLowerCase() === userCourse.courseCode.toLowerCase(),
+          ),
         );
 
         if (isInRequirement) {
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index 4528212b..fc0410d0 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -29,6 +29,7 @@ function Checkbox({
             viewBox="0 0 9 9"
             fill="currentcolor"
             xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
           >
             <path
               fillRule="evenodd"
@@ -43,6 +44,7 @@ function Checkbox({
             viewBox="0 0 9 9"
             fill="currentcolor"
             xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
           >
             <path
               fillRule="evenodd"

From 35352dedbf0dc6c7be91ed8a75441759055c9e10 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 31 Oct 2025 03:00:45 -0400
Subject: [PATCH 18/54] fix imports

---
 apps/web/src/app/dashboard/components/charts/degree-charts.tsx  | 2 +-
 .../src/app/dashboard/components/charts/program-selector.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
index ad93aa97..e5dfa2e8 100644
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { api } from "@dev-team-fall-25/server/convex/_generated/api";
+import { api } from "@albert-plus/server/convex/_generated/api";
 import { useQuery } from "convex/react";
 import { useState } from "react";
 import { Bar, BarChart, LabelList, Tooltip, XAxis, YAxis } from "recharts";
diff --git a/apps/web/src/app/dashboard/components/charts/program-selector.tsx b/apps/web/src/app/dashboard/components/charts/program-selector.tsx
index 83973a6a..6baab75d 100644
--- a/apps/web/src/app/dashboard/components/charts/program-selector.tsx
+++ b/apps/web/src/app/dashboard/components/charts/program-selector.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { api } from "@dev-team-fall-25/server/convex/_generated/api";
+import { api } from "@albert-plus/server/convex/_generated/api";
 import { useQuery } from "convex/react";
 import { useState } from "react";
 import {

From 39c8d5c1efdc1ddd9591fa21b5c0af04d9c071ac Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 31 Oct 2025 03:01:49 -0400
Subject: [PATCH 19/54] cleanup

---
 packages/server/convex/_generated/api.d.ts |   2 -
 packages/server/convex/helpers/auth.ts     |   1 -
 packages/server/convex/mockData.ts         | 270 ---------------------
 3 files changed, 273 deletions(-)
 delete mode 100644 packages/server/convex/mockData.ts

diff --git a/packages/server/convex/_generated/api.d.ts b/packages/server/convex/_generated/api.d.ts
index 61cf1452..585131b4 100644
--- a/packages/server/convex/_generated/api.d.ts
+++ b/packages/server/convex/_generated/api.d.ts
@@ -13,7 +13,6 @@ import type * as courseOfferings from "../courseOfferings.js";
 import type * as courses from "../courses.js";
 import type * as helpers_auth from "../helpers/auth.js";
 import type * as http from "../http.js";
-import type * as mockData from "../mockData.js";
 import type * as prerequisites from "../prerequisites.js";
 import type * as programs from "../programs.js";
 import type * as requirements from "../requirements.js";
@@ -49,7 +48,6 @@ declare const fullApi: ApiFromModules<{
   courses: typeof courses;
   "helpers/auth": typeof helpers_auth;
   http: typeof http;
-  mockData: typeof mockData;
   prerequisites: typeof prerequisites;
   programs: typeof programs;
   requirements: typeof requirements;
diff --git a/packages/server/convex/helpers/auth.ts b/packages/server/convex/helpers/auth.ts
index 5cc55e6d..851a8d90 100644
--- a/packages/server/convex/helpers/auth.ts
+++ b/packages/server/convex/helpers/auth.ts
@@ -22,7 +22,6 @@ export async function auth({
 }) {
   const identity = await ctx.auth.getUserIdentity();
   if (identity === null) {
-    console.error("Authentication failed - no identity found");
     throw new Error("Not authenticated");
   }
   return identity;
diff --git a/packages/server/convex/mockData.ts b/packages/server/convex/mockData.ts
deleted file mode 100644
index 6aeffc31..00000000
--- a/packages/server/convex/mockData.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-/**
- * Mock data for NYU CS curriculum
- * This file contains sample program requirements categorized similar to cs.nyu.edu
- */
-
-export const mockProgramsData = {
-  program: {
-    name: "Computer Science (BA)",
-    level: "undergraduate" as const,
-    programUrl: "https://cs.nyu.edu/home/undergrad/major_programs.html",
-  },
-};
-
-export const mockRequirementsData = [
-  // Computer Science Requirements
-  {
-    type: "required" as const,
-    isMajor: true,
-    courses: [
-      "CSCI-UA 101", // Intro to Computer Science
-      "CSCI-UA 102", // Data Structures
-      "CSCI-UA 201", // Computer Systems Organization
-      "CSCI-UA 310", // Basic Algorithms
-      "CSCI-UA 202", // Operating Systems
-      "CSCI-UA 480", // Parallel Computing (Special Topics)
-    ],
-  },
-
-  // Mathematics Requirements
-  {
-    type: "required" as const,
-    isMajor: true,
-    courses: [
-      "MATH-UA 120", // Discrete Mathematics
-      "MATH-UA 121", // Calculus I
-      "MATH-UA 122", // Calculus II
-    ],
-  },
-
-  // Math Alternative (students can choose one)
-  {
-    type: "alternative" as const,
-    isMajor: true,
-    courses: [
-      "MATH-UA 140", // Linear Algebra
-      "MATH-UA 325", // Analysis
-    ],
-  },
-
-  // Advanced CS Electives (options - choose courses to fulfill credit requirements)
-  {
-    type: "options" as const,
-    isMajor: true,
-    courses: [
-      "CSCI-UA 467", // Intro to Machine Learning
-      "CSCI-UA 473", // Fundamentals of AI
-      "CSCI-UA 479", // Data Management & Analysis
-      "CSCI-UA 421", // Computer Graphics
-      "CSCI-UA 453", // Theory of Computation
-      "CSCI-UA 480-009", // Computer Security
-      "CSCI-UA 480-010", // Agile Software Development
-    ],
-    courseLevels: [
-      {
-        program: "CSCI-UA",
-        level: 300,
-      },
-      {
-        program: "CSCI-UA",
-        level: 400,
-      },
-    ],
-    creditsRequired: 12, // 12 credits of electives
-  },
-
-  // Science Requirements
-  {
-    type: "required" as const,
-    isMajor: false,
-    courses: [
-      "PHYS-UA 11", // General Physics I
-      "CHEM-UA 125", // General Chemistry I
-    ],
-  },
-
-  // Science Lab Alternative
-  {
-    type: "alternative" as const,
-    isMajor: false,
-    courses: [
-      "PHYS-UA 91", // Physics Lab
-      "CHEM-UA 127", // Chemistry Lab
-      "BIOL-UA 11", // Biology Lab
-    ],
-  },
-
-  // General Education - Writing Requirements
-  {
-    type: "required" as const,
-    isMajor: false,
-    courses: [
-      "EXPOS-UA 1", // Writing the Essay
-    ],
-  },
-
-  // General Education - Humanities Electives
-  {
-    type: "options" as const,
-    isMajor: false,
-    courses: [
-      "PHIL-UA 101", // Introduction to Philosophy
-      "HIST-UA 101", // World History
-      "ENGL-UA 201", // Literature Survey
-    ],
-    courseLevels: [
-      {
-        program: "PHIL-UA",
-        level: 100,
-      },
-      {
-        program: "HIST-UA",
-        level: 100,
-      },
-      {
-        program: "ENGL-UA",
-        level: 100,
-      },
-    ],
-    creditsRequired: 6, // 6 credits of humanities
-  },
-];
-
-/**
- * Additional sample programs for testing charts
- */
-export const additionalMockPrograms = [
-  {
-    name: "Computer Science (BS)",
-    level: "undergraduate" as const,
-    programUrl: "https://cs.nyu.edu/home/undergrad/major_programs.html",
-  },
-  {
-    name: "Mathematics (BA)",
-    level: "undergraduate" as const,
-    programUrl: "https://math.nyu.edu/undergraduate/major.html",
-  },
-  {
-    name: "Data Science (MS)",
-    level: "graduate" as const,
-    programUrl: "https://cds.nyu.edu/academics/ms-in-data-science/",
-  },
-  {
-    name: "Economics Minor",
-    level: "undergraduate" as const,
-    programUrl: "https://as.nyu.edu/economics/undergrad/minors.html",
-  },
-  {
-    name: "Business Studies Minor",
-    level: "undergraduate" as const,
-    programUrl:
-      "https://www.stern.nyu.edu/programs-admissions/undergraduate/academics/minors",
-  },
-];
-
-/**
- * Mock courses data
- */
-export const mockCoursesData = [
-  {
-    code: "CSCI-UA 101",
-    program: "CSCI-UA",
-    level: 100,
-    title: "Intro to Computer Science",
-    credits: 4,
-    description: "Introduction to computer science and programming",
-    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0101-001/",
-  },
-  {
-    code: "CSCI-UA 102",
-    program: "CSCI-UA",
-    level: 100,
-    title: "Data Structures",
-    credits: 4,
-    description: "Fundamental data structures and algorithms",
-    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0102-001/",
-  },
-  {
-    code: "CSCI-UA 201",
-    program: "CSCI-UA",
-    level: 200,
-    title: "Computer Systems Organization",
-    credits: 4,
-    description: "Computer architecture and systems programming",
-    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0201-001/",
-  },
-  {
-    code: "CSCI-UA 310",
-    program: "CSCI-UA",
-    level: 300,
-    title: "Basic Algorithms",
-    credits: 4,
-    description: "Algorithm design and analysis",
-    courseUrl: "https://cs.nyu.edu/courses/spring25/CSCI-UA.0310-001/",
-  },
-  {
-    code: "MATH-UA 120",
-    program: "MATH-UA",
-    level: 100,
-    title: "Discrete Mathematics",
-    credits: 4,
-    description: "Mathematical foundations for computer science",
-    courseUrl: "https://math.nyu.edu/courses/spring25/MATH-UA.0120-001/",
-  },
-  {
-    code: "MATH-UA 121",
-    program: "MATH-UA",
-    level: 100,
-    title: "Calculus I",
-    credits: 4,
-    description: "Differential calculus",
-    courseUrl: "https://math.nyu.edu/courses/spring25/MATH-UA.0121-001/",
-  },
-];
-
-/**
- * Mock user courses data
- * Note: Pass in a userId when calling the seed function
- */
-export const mockUserCoursesData = [
-  {
-    courseCode: "CSCI-UA 101",
-    title: "Intro to Computer Science",
-    year: 2024,
-    term: "fall" as const,
-    grade: "a" as const,
-  },
-  {
-    courseCode: "MATH-UA 120",
-    title: "Discrete Mathematics",
-    year: 2024,
-    term: "fall" as const,
-    grade: "a-" as const,
-  },
-  {
-    courseCode: "CSCI-UA 102",
-    title: "Data Structures",
-    year: 2025,
-    term: "spring" as const,
-    grade: "b+" as const,
-  },
-  {
-    courseCode: "MATH-UA 121",
-    title: "Calculus I",
-    year: 2025,
-    term: "spring" as const,
-    grade: "a" as const,
-  },
-  {
-    courseCode: "CSCI-UA 201",
-    title: "Computer Systems Organization",
-    year: 2025,
-    term: "fall" as const,
-  },
-  {
-    courseCode: "CSCI-UA 310",
-    title: "Basic Algorithms",
-    year: 2025,
-    term: "fall" as const,
-  },
-];

From 2b237db1ab8c0b460a1a48c1defef36267e4393e Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 31 Oct 2025 03:03:50 -0400
Subject: [PATCH 20/54] instal recharts

---
 apps/web/package.json |  1 +
 bun.lock              | 71 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/apps/web/package.json b/apps/web/package.json
index 0f1b2fb6..8c2ab5f6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -39,6 +39,7 @@
     "react": "^19.2.0",
     "react-day-picker": "^9.11.0",
     "react-dom": "^19.2.0",
+    "recharts": "^3.3.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.12"
diff --git a/bun.lock b/bun.lock
index fadd2fd8..da25912c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -81,6 +81,7 @@
         "react": "^19.2.0",
         "react-day-picker": "^9.11.0",
         "react-dom": "^19.2.0",
+        "recharts": "^3.3.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "zod": "^4.1.12",
@@ -826,6 +827,8 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.9.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^10.0.3", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-ZAYu/NXkl/OhqTz7rfPaAhY0+e8Fr15jqNxte/2exKUxvHyQ/hcqmdekiN1f+Lcw3pE+34FCgX+26zcUE3duCg=="],
+
     "@remixicon/react": ["@remixicon/react@4.7.0", "", { "peerDependencies": { "react": ">=18.2.0" } }, "sha512-ODBQjdbOjnFguCqctYkpDjERXOInNaBnRPDKfZOBvbzExBAwr2BaH/6AHFTg/UAFzBDkwtylfMT8iKPAkLwPLQ=="],
 
     "@scure/base": ["@scure/base@1.2.6", "", {}, "sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg=="],
@@ -842,6 +845,10 @@
 
     "@stablelib/base64": ["@stablelib/base64@1.0.1", "", {}, "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ=="],
 
+    "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
+
+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
+
     "@stripe/stripe-js": ["@stripe/stripe-js@5.6.0", "", {}, "sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw=="],
 
     "@svgr/babel-plugin-add-jsx-attribute": ["@svgr/babel-plugin-add-jsx-attribute@6.5.1", "", { "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ=="],
@@ -956,6 +963,24 @@
 
     "@types/chrome": ["@types/chrome@0.1.24", "", { "dependencies": { "@types/filesystem": "*", "@types/har-format": "*" } }, "sha512-9iO9HL2bMeGS4C8m6gNFWUyuPE5HEUFk+rGh+7oriUjg+ata4Fc9PoVlu8xvGm7yoo3AmS3J6fAjoFj61NL2rw=="],
 
+    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
+
+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
+
+    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
+
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
+
+    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
+
+    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
+
+    "@types/d3-shape": ["@types/d3-shape@3.1.7", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg=="],
+
+    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
+
+    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
+
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/filesystem": ["@types/filesystem@0.0.36", "", { "dependencies": { "@types/filewriter": "*" } }, "sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA=="],
@@ -978,6 +1003,8 @@
 
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
+
     "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
 
     "@vue/compiler-core": ["@vue/compiler-core@3.3.4", "", { "dependencies": { "@babel/parser": "^7.21.3", "@vue/shared": "3.3.4", "estree-walker": "^2.0.2", "source-map-js": "^1.0.2" } }, "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g=="],
@@ -1158,6 +1185,28 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
+
+    "d3-format": ["d3-format@3.1.0", "", {}, "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
+
+    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
+
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
+
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
+
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
 
     "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
@@ -1166,6 +1215,8 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decode-formdata": ["decode-formdata@0.9.0", "", {}, "sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw=="],
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
@@ -1226,6 +1277,8 @@
 
     "error-stack-parser-es": ["error-stack-parser-es@1.0.5", "", {}, "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA=="],
 
+    "es-toolkit": ["es-toolkit@1.41.0", "", {}, "sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA=="],
+
     "esbuild": ["esbuild@0.25.4", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.4", "@esbuild/android-arm": "0.25.4", "@esbuild/android-arm64": "0.25.4", "@esbuild/android-x64": "0.25.4", "@esbuild/darwin-arm64": "0.25.4", "@esbuild/darwin-x64": "0.25.4", "@esbuild/freebsd-arm64": "0.25.4", "@esbuild/freebsd-x64": "0.25.4", "@esbuild/linux-arm": "0.25.4", "@esbuild/linux-arm64": "0.25.4", "@esbuild/linux-ia32": "0.25.4", "@esbuild/linux-loong64": "0.25.4", "@esbuild/linux-mips64el": "0.25.4", "@esbuild/linux-ppc64": "0.25.4", "@esbuild/linux-riscv64": "0.25.4", "@esbuild/linux-s390x": "0.25.4", "@esbuild/linux-x64": "0.25.4", "@esbuild/netbsd-arm64": "0.25.4", "@esbuild/netbsd-x64": "0.25.4", "@esbuild/openbsd-arm64": "0.25.4", "@esbuild/openbsd-x64": "0.25.4", "@esbuild/sunos-x64": "0.25.4", "@esbuild/win32-arm64": "0.25.4", "@esbuild/win32-ia32": "0.25.4", "@esbuild/win32-x64": "0.25.4" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q=="],
 
     "esbuild-register": ["esbuild-register@3.6.0", "", { "dependencies": { "debug": "^4.3.4" }, "peerDependencies": { "esbuild": ">=0.12 <1" } }, "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg=="],
@@ -1330,6 +1383,8 @@
 
     "image-size": ["image-size@0.5.5", "", { "bin": { "image-size": "bin/image-size.js" } }, "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ=="],
 
+    "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
+
     "immutable": ["immutable@5.1.4", "", {}, "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA=="],
 
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
@@ -1340,6 +1395,8 @@
 
     "inquirer": ["inquirer@12.5.0", "", { "dependencies": { "@inquirer/core": "^10.1.9", "@inquirer/prompts": "^7.4.0", "@inquirer/type": "^3.0.5", "ansi-escapes": "^4.3.2", "mute-stream": "^2.0.0", "run-async": "^3.0.0", "rxjs": "^7.8.2" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-aiBBq5aKF1k87MTxXDylLfwpRwToShiHrSv4EmB07EYyLgmnjEz5B3rn0aGw1X3JA/64Ngf2T54oGwc+BCsPIQ=="],
 
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
+
     "is-arrayish": ["is-arrayish@0.3.4", "", {}, "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA=="],
 
     "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
@@ -1622,6 +1679,8 @@
 
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
+
     "react-refresh": ["react-refresh@0.9.0", "", {}, "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.1", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA=="],
@@ -1634,12 +1693,20 @@
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
+    "recharts": ["recharts@3.3.0", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Vi0qmTB0iz1+/Cz9o5B7irVyUjX2ynvEgImbgMt/3sKRREcUM07QiYjS1QpAVrkmVlXqy5gykq4nGWMz9AS4Rg=="],
+
+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
+
+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
+
     "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
 
     "registry-auth-token": ["registry-auth-token@5.1.0", "", { "dependencies": { "@pnpm/npm-conf": "^2.1.0" } }, "sha512-GdekYuwLXLxMuFTwAPg5UKGLW/UXzQrZvH/Zj791BQif5T05T0RsaLfHc9q3ZOKi7n+BoprPD9mJ0O0k4xzUlw=="],
 
     "registry-url": ["registry-url@6.0.1", "", { "dependencies": { "rc": "1.2.8" } }, "sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q=="],
 
+    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
+
     "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
 
     "resolve-alpn": ["resolve-alpn@1.2.1", "", {}, "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="],
@@ -1752,6 +1819,8 @@
 
     "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
 
+    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
+
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
     "toggle-selection": ["toggle-selection@1.0.6", "", {}, "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="],
@@ -1812,6 +1881,8 @@
 
     "utility-types": ["utility-types@3.11.0", "", {}, "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw=="],
 
+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
+
     "viem": ["viem@2.38.4", "", { "dependencies": { "@noble/curves": "1.9.1", "@noble/hashes": "1.8.0", "@scure/bip32": "1.7.0", "@scure/bip39": "1.6.0", "abitype": "1.1.0", "isows": "1.0.7", "ox": "0.9.6", "ws": "8.18.3" }, "peerDependencies": { "typescript": ">=5.0.4" }, "optionalPeers": ["typescript"] }, "sha512-qnyPNg6Lz1EEC86si/1dq7GlOyZVFHSgAW+p8Q31R5idnAYCOdTM2q5KLE4/ykMeMXzY0bnp5MWTtR/wjCtWmQ=="],
 
     "vue": ["vue@3.3.4", "", { "dependencies": { "@vue/compiler-dom": "3.3.4", "@vue/compiler-sfc": "3.3.4", "@vue/runtime-dom": "3.3.4", "@vue/server-renderer": "3.3.4", "@vue/shared": "3.3.4" } }, "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw=="],

From 5e210e919227f56a2010f3a227305c9870c525b4 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 31 Oct 2025 03:10:13 -0400
Subject: [PATCH 21/54] move degree-charts to its own module

---
 .../components/charts/degree-charts.tsx       | 258 ------------------
 .../app/dashboard/components/charts/label.tsx |  21 --
 .../components/charts/program-selector.tsx    |  89 ------
 .../components/degree-charts.tsx              | 245 +++++++++++++++++
 4 files changed, 245 insertions(+), 368 deletions(-)
 delete mode 100644 apps/web/src/app/dashboard/components/charts/degree-charts.tsx
 delete mode 100644 apps/web/src/app/dashboard/components/charts/label.tsx
 delete mode 100644 apps/web/src/app/dashboard/components/charts/program-selector.tsx
 create mode 100644 apps/web/src/modules/degree-progress/components/degree-charts.tsx

diff --git a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx b/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
deleted file mode 100644
index e5dfa2e8..00000000
--- a/apps/web/src/app/dashboard/components/charts/degree-charts.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-"use client";
-
-import { api } from "@albert-plus/server/convex/_generated/api";
-import { useQuery } from "convex/react";
-import { useState } from "react";
-import { Bar, BarChart, LabelList, Tooltip, XAxis, YAxis } from "recharts";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { ChartOverlayToggle } from "./label";
-
-interface ProgramRequirementsChartProps {
-  programName: string;
-}
-
-export function ProgramRequirementsChart({
-  programName,
-}: ProgramRequirementsChartProps) {
-  const program = useQuery(api.programs.getProgramWithGroupedRequirements, {
-    name: programName,
-  });
-
-  const userCourses = useQuery(api.userCourses.getUserCourses, {});
-  const [showProgress, setShowProgress] = useState(false);
-
-  if (program === undefined) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Program Requirements</CardTitle>
-          <CardDescription>Loading...</CardDescription>
-        </CardHeader>
-      </Card>
-    );
-  }
-
-  if (program === null) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Program Requirements</CardTitle>
-          <CardDescription>Program not found</CardDescription>
-        </CardHeader>
-      </Card>
-    );
-  }
-
-  const completedCreditsByCategory: Record<string, number> = {};
-  if (userCourses) {
-    for (const userCourse of userCourses) {
-      for (const [prefix, data] of Object.entries(
-        program.requirementsByCategory,
-      )) {
-        // Check if the course code is in any of the nested course arrays
-        const isInRequirement = data.courses.some((courseGroup) =>
-          courseGroup.some(
-            (course) =>
-              course.toLowerCase() === userCourse.courseCode.toLowerCase(),
-          ),
-        );
-
-        if (isInRequirement) {
-          completedCreditsByCategory[prefix] =
-            (completedCreditsByCategory[prefix] || 0) +
-            (userCourse.course?.credits || 0);
-          break;
-        }
-      }
-    }
-  }
-
-  // Transform the data for the chart
-  const chartData = Object.entries(program.requirementsByCategory)
-    .map(([prefix, data]) => {
-      const completed = completedCreditsByCategory[prefix] || 0;
-      const percentage =
-        data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
-      return {
-        category: prefix,
-        credits: data.credits,
-        completedCredits: completed,
-        remainingCredits: data.credits - completed,
-        percentage,
-      };
-    })
-    .sort((a, b) => {
-      // "Other" should always be at the bottom
-      if (a.category === "Other") return 1;
-      if (b.category === "Other") return -1;
-      // Otherwise, maintain alphabetical order
-      return a.category.localeCompare(b.category);
-    });
-
-  const totalCredits = Object.values(program.requirementsByCategory).reduce(
-    (sum, data) => sum + data.credits,
-    0,
-  );
-
-  const totalCompletedCredits = Object.values(
-    completedCreditsByCategory,
-  ).reduce((sum, credits) => sum + credits, 0);
-
-  const overallPercentage =
-    totalCredits > 0
-      ? Math.round((totalCompletedCredits / totalCredits) * 100)
-      : 0;
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-start justify-between">
-          <div>
-            <CardTitle>Program Requirements by Subject</CardTitle>
-            <CardDescription>
-              {program.name} - Total: {totalCredits} credits
-              {showProgress && (
-                <span className="ml-2 font-semibold text-foreground">
-                  • {overallPercentage}% Complete ({totalCompletedCredits}/
-                  {totalCredits} credits)
-                </span>
-              )}
-            </CardDescription>
-          </div>
-          <ChartOverlayToggle
-            showProgress={showProgress}
-            onToggle={setShowProgress}
-          />
-        </div>
-      </CardHeader>
-      <CardContent>
-        {!showProgress && (
-          <div className="w-full h-[400px]">
-            <BarChart
-              data={chartData}
-              layout="vertical"
-              width={800}
-              height={400}
-              margin={{
-                left: 0,
-                right: 40,
-                bottom: 20,
-              }}
-            >
-              <YAxis
-                dataKey="category"
-                type="category"
-                tickLine={false}
-                tickMargin={10}
-                axisLine={false}
-                width={140}
-                tick={{ fontSize: 12 }}
-              />
-              <XAxis dataKey="credits" type="number" hide />
-              <Bar
-                dataKey="credits"
-                radius={[0, 4, 4, 0]}
-                fill="hsl(var(--muted))"
-              >
-                <LabelList
-                  dataKey="credits"
-                  position="right"
-                  offset={8}
-                  className="fill-foreground"
-                  fontSize={12}
-                />
-              </Bar>
-            </BarChart>
-          </div>
-        )}
-
-        {showProgress && (
-          <div className="w-full h-[400px]">
-            <BarChart
-              data={chartData}
-              layout="vertical"
-              width={800}
-              height={400}
-              margin={{
-                left: 0,
-                right: 40,
-                bottom: 20,
-              }}
-            >
-              <YAxis
-                dataKey="category"
-                type="category"
-                tickLine={false}
-                tickMargin={10}
-                axisLine={false}
-                width={140}
-                tick={{ fontSize: 12 }}
-              />
-              <XAxis dataKey="credits" type="number" hide />
-              <Tooltip
-                content={({ active, payload }) => {
-                  if (active && payload && payload.length) {
-                    const data = payload[0].payload;
-                    return (
-                      <div className="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Category
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {data.category}
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Completed
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {data.completedCredits} / {data.credits} credits
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Progress
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {data.percentage}%
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  }
-                  return null;
-                }}
-              />
-              <Bar dataKey="completedCredits" stackId="stack" fill="#3b82f6" />
-
-              <Bar
-                dataKey="remainingCredits"
-                stackId="stack"
-                fill="hsl(var(--muted))"
-                radius={[0, 4, 4, 0]}
-              >
-                <LabelList
-                  dataKey="credits"
-                  position="right"
-                  offset={8}
-                  className="fill-foreground"
-                  fontSize={12}
-                />
-              </Bar>
-            </BarChart>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/web/src/app/dashboard/components/charts/label.tsx b/apps/web/src/app/dashboard/components/charts/label.tsx
deleted file mode 100644
index a6a2daab..00000000
--- a/apps/web/src/app/dashboard/components/charts/label.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-
-interface ChartOverlayToggleProps {
-  showProgress: boolean;
-  onToggle: (checked: boolean) => void;
-}
-
-export function ChartOverlayToggle({
-  showProgress,
-  onToggle,
-}: ChartOverlayToggleProps) {
-  return (
-    <div className="flex items-center space-x-2">
-      <Checkbox checked={showProgress} onCheckedChange={onToggle} />
-      <Label htmlFor="overlay" className="cursor-pointer">
-        Overlay Taken Courses
-      </Label>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/dashboard/components/charts/program-selector.tsx b/apps/web/src/app/dashboard/components/charts/program-selector.tsx
deleted file mode 100644
index 6baab75d..00000000
--- a/apps/web/src/app/dashboard/components/charts/program-selector.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client";
-
-import { api } from "@albert-plus/server/convex/_generated/api";
-import { useQuery } from "convex/react";
-import { useState } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-
-interface ProgramSelectorProps {
-  onSelectProgram: (programName: string) => void;
-  selectedProgram: string;
-}
-
-export function ProgramSelector({
-  onSelectProgram,
-  selectedProgram,
-}: ProgramSelectorProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const programs = useQuery(api.programs.getPrograms, {
-    query: searchQuery || undefined,
-    paginationOpts: { numItems: 10, cursor: null },
-  });
-
-  const handleProgramClick = (programName: string) => {
-    onSelectProgram(programName);
-    setSearchQuery("");
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Select Program</CardTitle>
-        <CardDescription>
-          Search for a program to view its requirements
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          <Input
-            type="text"
-            placeholder="Search programs (e.g., Computer Science)..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full"
-          />
-
-          {selectedProgram && (
-            <div className="p-3 bg-blue-50 border border-blue-200 rounded">
-              <p className="text-sm font-medium text-blue-900">
-                Currently viewing: {selectedProgram}
-              </p>
-            </div>
-          )}
-
-          {searchQuery && programs && (
-            <div className="space-y-2 max-h-60 overflow-y-auto">
-              {programs.page.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  No programs found
-                </p>
-              ) : (
-                programs.page.map((program) => (
-                  <button
-                    key={program._id}
-                    type="submit"
-                    onClick={() => handleProgramClick(program.name)}
-                    className="w-full text-left p-3 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors"
-                  >
-                    <p className="font-medium">{program.name}</p>
-                    <p className="text-xs text-muted-foreground capitalize">
-                      {program.level}
-                    </p>
-                  </button>
-                ))
-              )}
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
new file mode 100644
index 00000000..c547f5e5
--- /dev/null
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { api } from "@albert-plus/server/convex/_generated/api";
+import { useQuery } from "convex/react";
+import { Bar, BarChart, LabelList, Tooltip, XAxis, YAxis } from "recharts";
+
+interface ProgramRequirementsChartProps {
+  programName: string;
+}
+
+export function ProgramRequirementsChart({
+  programName,
+}: ProgramRequirementsChartProps) {
+  const program = useQuery(api.programs.getProgramWithGroupedRequirements, {
+    name: programName,
+  });
+
+  const userCourses = useQuery(api.userCourses.getUserCourses, {});
+
+  if (program === undefined) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Program Requirements</CardTitle>
+          <CardDescription>Loading...</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (program === null) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Program Requirements</CardTitle>
+          <CardDescription>Program not found</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  const completedCreditsByCategory: Record<string, number> = {};
+  if (userCourses) {
+    for (const userCourse of userCourses) {
+      for (const [prefix, data] of Object.entries(
+        program.requirementsByCategory,
+      )) {
+        // Check if the course code is in any of the nested course arrays
+        const isInRequirement = data.courses.some((courseGroup) =>
+          courseGroup.some(
+            (course) =>
+              course.toLowerCase() === userCourse.courseCode.toLowerCase(),
+          ),
+        );
+
+        if (isInRequirement) {
+          completedCreditsByCategory[prefix] =
+            (completedCreditsByCategory[prefix] || 0) +
+            (userCourse.course?.credits || 0);
+          break;
+        }
+      }
+    }
+  }
+
+  // Transform the data for the chart
+  const chartData = Object.entries(program.requirementsByCategory)
+    .map(([prefix, data]) => {
+      const completed = completedCreditsByCategory[prefix] || 0;
+      const percentage =
+        data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
+      return {
+        category: prefix,
+        credits: data.credits,
+        completedCredits: completed,
+        remainingCredits: data.credits - completed,
+        percentage,
+      };
+    })
+    .sort((a, b) => {
+      // "Other" should always be at the bottom
+      if (a.category === "Other") return 1;
+      if (b.category === "Other") return -1;
+      // Otherwise, maintain alphabetical order
+      return a.category.localeCompare(b.category);
+    });
+
+  const totalCredits = Object.values(program.requirementsByCategory).reduce(
+    (sum, data) => sum + data.credits,
+    0,
+  );
+
+  const totalCompletedCredits = Object.values(
+    completedCreditsByCategory,
+  ).reduce((sum, credits) => sum + credits, 0);
+
+  const overallPercentage =
+    totalCredits > 0
+      ? Math.round((totalCompletedCredits / totalCredits) * 100)
+      : 0;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle>Program Requirements by Subject</CardTitle>
+            <CardDescription>
+              {program.name} - Total: {totalCredits} credits
+              <span className="ml-2 font-semibold text-foreground">
+                • {overallPercentage}% Complete ({totalCompletedCredits}/
+                {totalCredits} credits)
+              </span>
+              )
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="w-full h-[400px]">
+          <BarChart
+            data={chartData}
+            layout="vertical"
+            width={800}
+            height={400}
+            margin={{
+              left: 0,
+              right: 40,
+              bottom: 20,
+            }}
+          >
+            <YAxis
+              dataKey="category"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              width={140}
+              tick={{ fontSize: 12 }}
+            />
+            <XAxis dataKey="credits" type="number" hide />
+            <Bar
+              dataKey="credits"
+              radius={[0, 4, 4, 0]}
+              fill="hsl(var(--muted))"
+            >
+              <LabelList
+                dataKey="credits"
+                position="right"
+                offset={8}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </div>
+        <div className="w-full h-[400px]">
+          <BarChart
+            data={chartData}
+            layout="vertical"
+            width={800}
+            height={400}
+            margin={{
+              left: 0,
+              right: 40,
+              bottom: 20,
+            }}
+          >
+            <YAxis
+              dataKey="category"
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              width={140}
+              tick={{ fontSize: 12 }}
+            />
+            <XAxis dataKey="credits" type="number" hide />
+            <Tooltip
+              content={({ active, payload }) => {
+                if (active && payload && payload.length) {
+                  const data = payload[0].payload;
+                  return (
+                    <div className="rounded-lg border bg-background p-2 shadow-sm">
+                      <div className="grid grid-cols-2 gap-2">
+                        <div className="flex flex-col">
+                          <span className="text-[0.70rem] uppercase text-muted-foreground">
+                            Category
+                          </span>
+                          <span className="font-bold text-muted-foreground">
+                            {data.category}
+                          </span>
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-[0.70rem] uppercase text-muted-foreground">
+                            Completed
+                          </span>
+                          <span className="font-bold text-muted-foreground">
+                            {data.completedCredits} / {data.credits} credits
+                          </span>
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-[0.70rem] uppercase text-muted-foreground">
+                            Progress
+                          </span>
+                          <span className="font-bold text-muted-foreground">
+                            {data.percentage}%
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                }
+                return null;
+              }}
+            />
+            <Bar dataKey="completedCredits" stackId="stack" fill="#3b82f6" />
+
+            <Bar
+              dataKey="remainingCredits"
+              stackId="stack"
+              fill="hsl(var(--muted))"
+              radius={[0, 4, 4, 0]}
+            >
+              <LabelList
+                dataKey="credits"
+                position="right"
+                offset={8}
+                className="fill-foreground"
+                fontSize={12}
+              />
+            </Bar>
+          </BarChart>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

From 344df1ee03e10b00e2be7d875bf2a45448456edc Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 31 Oct 2025 03:11:14 -0400
Subject: [PATCH 22/54] clean up convex client provider

---
 .../src/components/ConvexClientProvider.tsx   | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/apps/web/src/components/ConvexClientProvider.tsx b/apps/web/src/components/ConvexClientProvider.tsx
index bf3974c3..366a180e 100644
--- a/apps/web/src/components/ConvexClientProvider.tsx
+++ b/apps/web/src/components/ConvexClientProvider.tsx
@@ -1,11 +1,10 @@
 "use client";
 
+import { env } from "@/lib/env";
 import { useAuth } from "@clerk/nextjs";
 import { ConvexReactClient } from "convex/react";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
 import type { ReactNode } from "react";
-import { useEffect, useState } from "react";
-import { env } from "@/lib/env";
 
 const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL);
 
@@ -14,25 +13,6 @@ export default function ConvexClientProvider({
 }: {
   children: ReactNode;
 }) {
-  const { isLoaded } = useAuth();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Don't render until both client-side mounted and Clerk is loaded
-  if (!mounted || !isLoaded) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto mb-4"></div>
-          <p className="text-sm text-gray-600">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
       {children}

From fa96053733722195f2c0cb008fc12fa7fe04ed71 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 31 Oct 2025 03:41:41 -0400
Subject: [PATCH 23/54] handle data fetching at the page level

---
 apps/web/src/app/dashboard/page.tsx           | 51 +++++++++++--------
 .../src/components/ConvexClientProvider.tsx   |  2 +-
 .../components/degree-charts.tsx              | 24 +++++----
 3 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 4f4bcc67..9357d161 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -1,12 +1,38 @@
 "use client";
 
-import { useState } from "react";
+import { api } from "@albert-plus/server/convex/_generated/api";
+import {
+  type RequestForQueries,
+  useConvexAuth,
+  useQueries,
+  useQuery,
+} from "convex/react";
+import { ProgramRequirementsChart } from "@/modules/degree-progress/components/degree-charts";
 import DegreeProgreeUpload from "@/modules/report-parsing/components/degree-progress-upload";
-import { ProgramRequirementsChart } from "./components/charts/degree-charts";
-import { ProgramSelector } from "./components/charts/program-selector";
 
 const HomePage = () => {
-  const [selectedProgram, setSelectedProgram] = useState<string>("");
+  const { isAuthenticated } = useConvexAuth();
+  const student = useQuery(
+    api.students.getCurrentStudent,
+    !isAuthenticated ? "skip" : {},
+  );
+
+  const userCourses = useQuery(
+    api.userCourses.getUserCourses,
+    !isAuthenticated ? "skip" : {},
+  );
+
+  const prgramQueries: RequestForQueries = {};
+  if (isAuthenticated && student) {
+    for (const programId of student.programs) {
+      prgramQueries[programId] = {
+        query: api.programs.getProgramById,
+        args: { id: programId },
+      };
+    }
+  }
+
+  const programs = useQueries(prgramQueries);
 
   return (
     <div className="container mx-auto space-y-6 p-6">
@@ -14,22 +40,7 @@ const HomePage = () => {
 
       <DegreeProgreeUpload />
 
-      <ProgramSelector
-        selectedProgram={selectedProgram}
-        onSelectProgram={setSelectedProgram}
-      />
-
-      {selectedProgram && (
-        <ProgramRequirementsChart programName={selectedProgram} />
-      )}
-
-      {!selectedProgram && (
-        <div className="flex items-center justify-center rounded-lg border border-dashed p-12">
-          <p className="text-muted-foreground">
-            Select a program above to view its requirements
-          </p>
-        </div>
-      )}
+      <ProgramRequirementsChart programs={programs} userCourses={userCourses} />
     </div>
   );
 };
diff --git a/apps/web/src/components/ConvexClientProvider.tsx b/apps/web/src/components/ConvexClientProvider.tsx
index 366a180e..6c5e1346 100644
--- a/apps/web/src/components/ConvexClientProvider.tsx
+++ b/apps/web/src/components/ConvexClientProvider.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { env } from "@/lib/env";
 import { useAuth } from "@clerk/nextjs";
 import { ConvexReactClient } from "convex/react";
 import { ConvexProviderWithClerk } from "convex/react-clerk";
 import type { ReactNode } from "react";
+import { env } from "@/lib/env";
 
 const convex = new ConvexReactClient(env.NEXT_PUBLIC_CONVEX_URL);
 
diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index c547f5e5..cd662e9e 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import type { api } from "@albert-plus/server/convex/_generated/api";
+import type { FunctionReturnType } from "convex/server";
+import { Bar, BarChart, LabelList, Tooltip, XAxis, YAxis } from "recharts";
 import {
   Card,
   CardContent,
@@ -7,22 +10,23 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { api } from "@albert-plus/server/convex/_generated/api";
-import { useQuery } from "convex/react";
-import { Bar, BarChart, LabelList, Tooltip, XAxis, YAxis } from "recharts";
 
 interface ProgramRequirementsChartProps {
-  programName: string;
+  programs: Record<
+    string,
+    FunctionReturnType<typeof api.programs.getProgramById> | undefined
+  >;
+  userCourses:
+    | FunctionReturnType<typeof api.userCourses.getUserCourses>
+    | undefined;
 }
 
 export function ProgramRequirementsChart({
-  programName,
+  programs,
+  userCourses,
 }: ProgramRequirementsChartProps) {
-  const program = useQuery(api.programs.getProgramWithGroupedRequirements, {
-    name: programName,
-  });
-
-  const userCourses = useQuery(api.userCourses.getUserCourses, {});
+  // FIXME: set program to null for now just so that it doenst error. should use programs defined above instead
+  const program = null;
 
   if (program === undefined) {
     return (

From be0b97894a52e37ea579867137c9ab0ec2cfa6ea Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 31 Oct 2025 17:05:25 -0400
Subject: [PATCH 24/54] fix typo

---
 apps/web/src/app/dashboard/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 9357d161..cac32b8f 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -22,17 +22,17 @@ const HomePage = () => {
     !isAuthenticated ? "skip" : {},
   );
 
-  const prgramQueries: RequestForQueries = {};
+  const programQueries: RequestForQueries = {};
   if (isAuthenticated && student) {
     for (const programId of student.programs) {
-      prgramQueries[programId] = {
+      programQueries[programId] = {
         query: api.programs.getProgramById,
         args: { id: programId },
       };
     }
   }
 
-  const programs = useQueries(prgramQueries);
+  const programs = useQueries(programQueries);
 
   return (
     <div className="container mx-auto space-y-6 p-6">

From 97eb0ec1504ea16dfd7908f7cd85f18e96703635 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Fri, 7 Nov 2025 17:12:59 -0500
Subject: [PATCH 25/54] fixed function implementation

---
 .../components/degree-charts.tsx              | 89 ++++++++++++++++++-
 packages/server/convex/programs.ts            | 78 ----------------
 2 files changed, 86 insertions(+), 81 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index cd662e9e..b9c6bd07 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -2,7 +2,13 @@
 
 import type { api } from "@albert-plus/server/convex/_generated/api";
 import type { FunctionReturnType } from "convex/server";
-import { Bar, BarChart, LabelList, Tooltip, XAxis, YAxis } from "recharts";
+import {
+  type RequestForQueries,
+  useConvexAuth,
+  useQueries,
+  useQuery,
+} from "convex/react";
+import { Cell, Legend, Pie, PieChart, LabelList, XAxis, YAxis } from "recharts";
 import {
   Card,
   CardContent,
@@ -21,12 +27,89 @@ interface ProgramRequirementsChartProps {
     | undefined;
 }
 
+const getRequirementsByCategory = (programs: Record<
+                                    string,
+                                    FunctionReturnType<typeof api.programs.getProgramById> | undefined
+                                  >) => {
+  if (!programs) return null;
+
+  // Calculate total credits for each category
+  const groupedRequirements: Record<
+    string,
+    { credits: number; courses: string[][] }
+  > = {};
+
+  const programList: string[] = [];
+
+  // FIXME: currently no merging of programs if more than one listed (dual degree), assumes only one program for now
+  for (const [programName, data] of Object.entries(programs)) {
+    programList.push(programName);
+
+    const requirements = data?.requirements;
+    if (requirements) {
+      for (const requirement of requirements) {
+        const courses = requirement.courses;
+        // CASE: requirements is type option
+        if (requirement.type === "options") {
+          const uniquePrefixes = [
+            ...new Set(requirement.courses.map((c: string) => c.split(" ")[0])),
+          ];
+
+          if (uniquePrefixes.length === 1) {
+            // All same prefix - assign all credits to that one prefix
+            const prefix = uniquePrefixes[0];
+            if (!groupedRequirements[prefix]) {
+              groupedRequirements[prefix] = { credits: 0, courses: [] };
+            }
+            groupedRequirements[prefix].credits += requirement.creditsRequired;
+            groupedRequirements[prefix].courses.push(courses);
+          } else {
+            // Mixed prefixes - assign to "Other" category
+            if (!groupedRequirements.Other) {
+              groupedRequirements.Other = { credits: 0, courses: [] };
+            }
+            groupedRequirements.Other.credits += requirement.creditsRequired;
+            groupedRequirements.Other.courses.push(courses);
+          }
+        }
+        // CASE: Required/Alternative type - calculate actual credits per course
+        else {
+          const courseQueries = useQueries(
+            Array.from(courses).map((code) => ({
+              query: api.courses.getCourseByCode,
+              args: { code },
+            }))
+          );
+
+          for (const course of courseQueries) {
+            const code = course.split(" ")[0];
+
+            // FIXME: fallback to 4 credits if number of credits not found
+            const credits = course ? course.credits : 4;
+
+            if (!groupedRequirements[code]) {
+              groupedRequirements[code] = { credits: 0, courses: [] };
+            }
+            groupedRequirements[code].credits += credits;
+            groupedRequirements[code].courses.push([course]);
+          }
+        }
+      }
+    }
+  }
+    
+  return {
+    ...program,
+    requirementsByCategory: groupedRequirements,
+  };
+};
+
 export function ProgramRequirementsChart({
   programs,
   userCourses,
 }: ProgramRequirementsChartProps) {
   // FIXME: set program to null for now just so that it doenst error. should use programs defined above instead
-  const program = null;
+  const program = programs[0];
 
   if (program === undefined) {
     return (
@@ -129,7 +212,7 @@ export function ProgramRequirementsChart({
       </CardHeader>
       <CardContent>
         <div className="w-full h-[400px]">
-          <BarChart
+          <PieChart
             data={chartData}
             layout="vertical"
             width={800}
diff --git a/packages/server/convex/programs.ts b/packages/server/convex/programs.ts
index 87fcc521..d5ebb389 100644
--- a/packages/server/convex/programs.ts
+++ b/packages/server/convex/programs.ts
@@ -60,84 +60,6 @@ export const getProgramByName = protectedQuery({
   },
 });
 
-export const getProgramWithGroupedRequirements = protectedQuery({
-  args: { name: v.string() },
-  handler: async (ctx, args) => {
-    const program = await ctx.db
-      .query("programs")
-      .withIndex("by_program_name", (q) => q.eq("name", args.name))
-      .unique();
-
-    if (!program) return null;
-
-    const requirements = await getManyFrom(
-      ctx.db,
-      "requirements",
-      "by_program",
-      program._id,
-      "programId",
-    );
-
-    // Calculate total credits for each category
-    const groupedRequirements: Record<
-      string,
-      { credits: number; courses: string[][] }
-    > = {};
-
-    for (const req of requirements) {
-      const { courses } = req;
-
-      if ("creditsRequired" in req && req.creditsRequired) {
-        // CASE: Options type with creditsRequired
-        const uniquePrefixes = [
-          ...new Set(courses.map((c) => c.split(" ")[0])),
-        ];
-
-        if (uniquePrefixes.length === 1) {
-          // All same prefix - assign all credits to that one prefix
-          const prefix = uniquePrefixes[0];
-          if (!groupedRequirements[prefix]) {
-            groupedRequirements[prefix] = { credits: 0, courses: [] };
-          }
-          groupedRequirements[prefix].credits += req.creditsRequired;
-          groupedRequirements[prefix].courses.push(courses);
-        } else {
-          // Mixed prefixes - assign to "Other" category
-          if (!groupedRequirements.Other) {
-            groupedRequirements.Other = { credits: 0, courses: [] };
-          }
-          groupedRequirements.Other.credits += req.creditsRequired;
-          groupedRequirements.Other.courses.push(courses);
-        }
-      } else {
-        // CASE: Required/Alternative type - calculate actual credits per course
-        for (const courseCode of courses) {
-          const prefix = courseCode.split(" ")[0];
-          const course = await getOneFrom(
-            ctx.db,
-            "courses",
-            "by_course_code",
-            courseCode,
-            "code",
-          );
-          const credits = course ? course.credits : 4;
-
-          if (!groupedRequirements[prefix]) {
-            groupedRequirements[prefix] = { credits: 0, courses: [] };
-          }
-          groupedRequirements[prefix].credits += credits;
-          groupedRequirements[prefix].courses.push([courseCode]);
-        }
-      }
-    }
-
-    return {
-      ...program,
-      requirementsByCategory: groupedRequirements,
-    };
-  },
-});
-
 export const getPrograms = protectedQuery({
   args: {
     query: v.optional(v.string()),

From 9d176755bca1ca4b217daf6b25de571f1fefc939 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Fri, 7 Nov 2025 17:50:21 -0500
Subject: [PATCH 26/54] migration to pie chart

---
 .../components/degree-charts.tsx              | 387 ++++++++++--------
 1 file changed, 216 insertions(+), 171 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index b9c6bd07..3b9eccb5 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -8,7 +8,10 @@ import {
   useQueries,
   useQuery,
 } from "convex/react";
-import { Cell, Legend, Pie, PieChart, LabelList, XAxis, YAxis } from "recharts";
+import { useMemo, useState } from "react";
+import { Cell, Legend, Pie, PieChart, Tooltip, ResponsiveContainer } from "recharts";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 import {
   Card,
   CardContent,
@@ -27,77 +30,94 @@ interface ProgramRequirementsChartProps {
     | undefined;
 }
 
-const getRequirementsByCategory = (programs: Record<
-                                    string,
-                                    FunctionReturnType<typeof api.programs.getProgramById> | undefined
-                                  >) => {
+// Color palette for pie chart slices
+const COLORS = [
+  "#3b82f6", // blue
+  "#10b981", // green
+  "#f59e0b", // amber
+  "#ef4444", // red
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#06b6d4", // cyan
+  "#84cc16", // lime
+  "#f97316", // orange
+  "#6366f1", // indigo
+];
+
+// Helper function to lighten a color (for completed portion)
+const lightenColor = (color: string, percent: number = 40): string => {
+  const num = parseInt(color.replace("#", ""), 16);
+  const r = Math.min(255, ((num >> 16) & 0xff) + Math.floor((255 - ((num >> 16) & 0xff)) * (percent / 100)));
+  const g = Math.min(255, ((num >> 8) & 0xff) + Math.floor((255 - ((num >> 8) & 0xff)) * (percent / 100)));
+  const b = Math.min(255, (num & 0xff) + Math.floor((255 - (num & 0xff)) * (percent / 100)));
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
+};
+
+const getRequirementsByCategory = (
+  programs: Record<
+    string,
+    FunctionReturnType<typeof api.programs.getProgramById> | undefined
+  >,
+  courseLookup: Map<string, any>
+) => {
   if (!programs) return null;
 
+  // Get the first defined program
+  const program = Object.values(programs).find((p) => p !== undefined);
+  if (!program) return null;
+
   // Calculate total credits for each category
   const groupedRequirements: Record<
     string,
     { credits: number; courses: string[][] }
   > = {};
 
-  const programList: string[] = [];
-
   // FIXME: currently no merging of programs if more than one listed (dual degree), assumes only one program for now
-  for (const [programName, data] of Object.entries(programs)) {
-    programList.push(programName);
-
-    const requirements = data?.requirements;
-    if (requirements) {
-      for (const requirement of requirements) {
-        const courses = requirement.courses;
-        // CASE: requirements is type option
-        if (requirement.type === "options") {
-          const uniquePrefixes = [
-            ...new Set(requirement.courses.map((c: string) => c.split(" ")[0])),
-          ];
-
-          if (uniquePrefixes.length === 1) {
-            // All same prefix - assign all credits to that one prefix
-            const prefix = uniquePrefixes[0];
-            if (!groupedRequirements[prefix]) {
-              groupedRequirements[prefix] = { credits: 0, courses: [] };
-            }
-            groupedRequirements[prefix].credits += requirement.creditsRequired;
-            groupedRequirements[prefix].courses.push(courses);
-          } else {
-            // Mixed prefixes - assign to "Other" category
-            if (!groupedRequirements.Other) {
-              groupedRequirements.Other = { credits: 0, courses: [] };
-            }
-            groupedRequirements.Other.credits += requirement.creditsRequired;
-            groupedRequirements.Other.courses.push(courses);
-          }
+  const requirements = program.requirements;
+  if (!requirements) return null;
+
+  for (const requirement of requirements) {
+    const courses = requirement.courses;
+
+    // CASE: requirements is type option
+    if (requirement.type === "options") {
+      const uniquePrefixes = [
+        ...new Set(requirement.courses.map((c: string) => c.split(" ")[0])),
+      ];
+
+      if (uniquePrefixes.length === 1) {
+        // All same prefix - assign all credits to that one prefix
+        const prefix = uniquePrefixes[0];
+        if (!groupedRequirements[prefix]) {
+          groupedRequirements[prefix] = { credits: 0, courses: [] };
         }
-        // CASE: Required/Alternative type - calculate actual credits per course
-        else {
-          const courseQueries = useQueries(
-            Array.from(courses).map((code) => ({
-              query: api.courses.getCourseByCode,
-              args: { code },
-            }))
-          );
-
-          for (const course of courseQueries) {
-            const code = course.split(" ")[0];
-
-            // FIXME: fallback to 4 credits if number of credits not found
-            const credits = course ? course.credits : 4;
-
-            if (!groupedRequirements[code]) {
-              groupedRequirements[code] = { credits: 0, courses: [] };
-            }
-            groupedRequirements[code].credits += credits;
-            groupedRequirements[code].courses.push([course]);
-          }
+        groupedRequirements[prefix].credits += requirement.creditsRequired;
+        groupedRequirements[prefix].courses.push(courses);
+      } else {
+        // Mixed prefixes - assign to "Other" category
+        if (!groupedRequirements.Other) {
+          groupedRequirements.Other = { credits: 0, courses: [] };
         }
+        groupedRequirements.Other.credits += requirement.creditsRequired;
+        groupedRequirements.Other.courses.push(courses);
+      }
+    }
+    // CASE: Required/Alternative type - calculate actual credits per course
+    else {
+      for (const courseCode of courses) {
+        const prefix = courseCode.split(" ")[0];
+        const course = courseLookup.get(courseCode);
+        const credits = course?.credits ?? 4; // fallback to 4 credits if not found
+
+        if (!groupedRequirements[prefix]) {
+          groupedRequirements[prefix] = { credits: 0, courses: [] };
+        }
+        groupedRequirements[prefix].credits += credits;
+        groupedRequirements[prefix].courses.push([courseCode]);
       }
     }
   }
-    
+
   return {
     ...program,
     requirementsByCategory: groupedRequirements,
@@ -108,8 +128,46 @@ export function ProgramRequirementsChart({
   programs,
   userCourses,
 }: ProgramRequirementsChartProps) {
-  // FIXME: set program to null for now just so that it doenst error. should use programs defined above instead
-  const program = programs[0];
+  // 1. Collect all unique course codes from all requirements
+  const allCourseCodes = useMemo(() => {
+    const codes = new Set<string>();
+
+    for (const [_, programData] of Object.entries(programs)) {
+      if (programData?.requirements) {
+        for (const requirement of programData.requirements) {
+          // Add all course codes from this requirement
+          for (const courseCode of requirement.courses) {
+            codes.add(courseCode);
+          }
+        }
+      }
+    }
+
+    return Array.from(codes);
+  }, [programs]);
+
+  // 2. Fetch all courses in parallel using useQueries
+  const courseQueries = useQueries(
+    allCourseCodes.map((code) => ({
+      query: api.courses.getCourseByCode,
+      args: { code },
+    }))
+  );
+
+  // 3. Create a lookup map from course code to course data
+  const courseLookup = useMemo(() => {
+    const lookup = new Map();
+    allCourseCodes.forEach((code, index) => {
+      if (courseQueries[index]) {
+        lookup.set(code, courseQueries[index]);
+      }
+    });
+    return lookup;
+  }, [allCourseCodes, courseQueries]);
+
+  // 4. Get grouped requirements using the lookup
+  const programWithGroupedReqs = getRequirementsByCategory(programs, courseLookup);
+  const program = programWithGroupedReqs;
 
   if (program === undefined) {
     return (
@@ -193,6 +251,58 @@ export function ProgramRequirementsChart({
       ? Math.round((totalCompletedCredits / totalCredits) * 100)
       : 0;
 
+  // State for toggling completion view
+  const [showCompletion, setShowCompletion] = useState(false);
+
+  // Prepare data based on toggle state
+  const pieChartData = useMemo(() => {
+    if (!showCompletion) {
+      // Default view: just total credits per category
+      return chartData.map((item, index) => ({
+        name: item.category,
+        value: item.credits,
+        fill: COLORS[index % COLORS.length],
+      }));
+    } else {
+      // Completion view: split each category into completed and remaining
+      const splitData: Array<{
+        name: string;
+        value: number;
+        fill: string;
+        isCompleted: boolean;
+        category: string;
+      }> = [];
+
+      chartData.forEach((item, index) => {
+        const baseColor = COLORS[index % COLORS.length];
+
+        // Add completed portion (lighter shade)
+        if (item.completedCredits > 0) {
+          splitData.push({
+            name: `${item.category} (Completed)`,
+            value: item.completedCredits,
+            fill: lightenColor(baseColor),
+            isCompleted: true,
+            category: item.category,
+          });
+        }
+
+        // Add remaining portion (original color)
+        if (item.remainingCredits > 0) {
+          splitData.push({
+            name: `${item.category} (Remaining)`,
+            value: item.remainingCredits,
+            fill: baseColor,
+            isCompleted: false,
+            category: item.category,
+          });
+        }
+      });
+
+      return splitData;
+    }
+  }, [chartData, showCompletion]);
+
   return (
     <Card>
       <CardHeader>
@@ -205,126 +315,61 @@ export function ProgramRequirementsChart({
                 • {overallPercentage}% Complete ({totalCompletedCredits}/
                 {totalCredits} credits)
               </span>
-              )
             </CardDescription>
           </div>
         </div>
-      </CardHeader>
-      <CardContent>
-        <div className="w-full h-[400px]">
-          <PieChart
-            data={chartData}
-            layout="vertical"
-            width={800}
-            height={400}
-            margin={{
-              left: 0,
-              right: 40,
-              bottom: 20,
-            }}
+        <div className="flex items-center space-x-2 mt-4">
+          <Checkbox
+            id="show-completion"
+            checked={showCompletion}
+            onCheckedChange={(checked) => setShowCompletion(checked === true)}
+          />
+          <Label
+            htmlFor="show-completion"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
-            <YAxis
-              dataKey="category"
-              type="category"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              width={140}
-              tick={{ fontSize: 12 }}
-            />
-            <XAxis dataKey="credits" type="number" hide />
-            <Bar
-              dataKey="credits"
-              radius={[0, 4, 4, 0]}
-              fill="hsl(var(--muted))"
-            >
-              <LabelList
-                dataKey="credits"
-                position="right"
-                offset={8}
-                className="fill-foreground"
-                fontSize={12}
-              />
-            </Bar>
-          </BarChart>
+            Show completion progress
+          </Label>
         </div>
-        <div className="w-full h-[400px]">
-          <BarChart
-            data={chartData}
-            layout="vertical"
-            width={800}
-            height={400}
-            margin={{
-              left: 0,
-              right: 40,
-              bottom: 20,
-            }}
-          >
-            <YAxis
-              dataKey="category"
-              type="category"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              width={140}
-              tick={{ fontSize: 12 }}
-            />
-            <XAxis dataKey="credits" type="number" hide />
-            <Tooltip
-              content={({ active, payload }) => {
-                if (active && payload && payload.length) {
-                  const data = payload[0].payload;
-                  return (
-                    <div className="rounded-lg border bg-background p-2 shadow-sm">
-                      <div className="grid grid-cols-2 gap-2">
-                        <div className="flex flex-col">
-                          <span className="text-[0.70rem] uppercase text-muted-foreground">
-                            Category
-                          </span>
-                          <span className="font-bold text-muted-foreground">
-                            {data.category}
-                          </span>
-                        </div>
-                        <div className="flex flex-col">
-                          <span className="text-[0.70rem] uppercase text-muted-foreground">
-                            Completed
-                          </span>
-                          <span className="font-bold text-muted-foreground">
-                            {data.completedCredits} / {data.credits} credits
-                          </span>
-                        </div>
-                        <div className="flex flex-col">
-                          <span className="text-[0.70rem] uppercase text-muted-foreground">
-                            Progress
-                          </span>
-                          <span className="font-bold text-muted-foreground">
-                            {data.percentage}%
+      </CardHeader>
+      <CardContent>
+        <div className="flex justify-center">
+          <ResponsiveContainer width="100%" height={400}>
+            <PieChart>
+              <Pie
+                data={pieChartData}
+                dataKey="value"
+                nameKey="name"
+                cx="50%"
+                cy="50%"
+                outerRadius={120}
+                label={({ name, value }) => `${name}: ${value}`}
+              >
+                {pieChartData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.fill} />
+                ))}
+              </Pie>
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    const data = payload[0].payload as any;
+                    return (
+                      <div className="rounded-lg border bg-background p-2 shadow-sm">
+                        <div className="flex flex-col gap-1">
+                          <span className="text-sm font-bold">{data.name}</span>
+                          <span className="text-sm text-muted-foreground">
+                            Credits: {data.value}
                           </span>
                         </div>
                       </div>
-                    </div>
-                  );
-                }
-                return null;
-              }}
-            />
-            <Bar dataKey="completedCredits" stackId="stack" fill="#3b82f6" />
-
-            <Bar
-              dataKey="remainingCredits"
-              stackId="stack"
-              fill="hsl(var(--muted))"
-              radius={[0, 4, 4, 0]}
-            >
-              <LabelList
-                dataKey="credits"
-                position="right"
-                offset={8}
-                className="fill-foreground"
-                fontSize={12}
+                    );
+                  }
+                  return null;
+                }}
               />
-            </Bar>
-          </BarChart>
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
         </div>
       </CardContent>
     </Card>

From 5d4d876577aa15869562400cb270bb8fb786e9d2 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Fri, 7 Nov 2025 18:02:28 -0500
Subject: [PATCH 27/54] moved course information fetching into page.tsx to
 avoid rendering issues

---
 apps/web/src/app/dashboard/page.tsx           | 29 +++++++++-
 .../components/degree-charts.tsx              | 57 ++++++-------------
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index cac32b8f..b30b9fd4 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -34,13 +34,40 @@ const HomePage = () => {
 
   const programs = useQueries(programQueries);
 
+  // Collect all unique course codes from all programs
+  const allCourseCodes = new Set<string>();
+  for (const [_, programData] of Object.entries(programs)) {
+    if (programData?.requirements) {
+      for (const requirement of programData.requirements) {
+        for (const courseCode of requirement.courses) {
+          allCourseCodes.add(courseCode);
+        }
+      }
+    }
+  }
+
+  // Fetch all courses
+  const courseQueries: RequestForQueries = {};
+  for (const code of allCourseCodes) {
+    courseQueries[code] = {
+      query: api.courses.getCourseByCode,
+      args: { code },
+    };
+  }
+
+  const courses = useQueries(courseQueries);
+
   return (
     <div className="container mx-auto space-y-6 p-6">
       <h1 className="text-3xl font-bold">Dashboard</h1>
 
       <DegreeProgreeUpload />
 
-      <ProgramRequirementsChart programs={programs} userCourses={userCourses} />
+      <ProgramRequirementsChart
+        programs={programs}
+        userCourses={userCourses}
+        courses={courses}
+      />
     </div>
   );
 };
diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 3b9eccb5..2ec6b828 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -2,12 +2,6 @@
 
 import type { api } from "@albert-plus/server/convex/_generated/api";
 import type { FunctionReturnType } from "convex/server";
-import {
-  type RequestForQueries,
-  useConvexAuth,
-  useQueries,
-  useQuery,
-} from "convex/react";
 import { useMemo, useState } from "react";
 import { Cell, Legend, Pie, PieChart, Tooltip, ResponsiveContainer } from "recharts";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -28,6 +22,10 @@ interface ProgramRequirementsChartProps {
   userCourses:
     | FunctionReturnType<typeof api.userCourses.getUserCourses>
     | undefined;
+  courses: Record<
+    string,
+    FunctionReturnType<typeof api.courses.getCourseByCode> | undefined
+  >;
 }
 
 // Color palette for pie chart slices
@@ -127,47 +125,24 @@ const getRequirementsByCategory = (
 export function ProgramRequirementsChart({
   programs,
   userCourses,
+  courses,
 }: ProgramRequirementsChartProps) {
-  // 1. Collect all unique course codes from all requirements
-  const allCourseCodes = useMemo(() => {
-    const codes = new Set<string>();
-
-    for (const [_, programData] of Object.entries(programs)) {
-      if (programData?.requirements) {
-        for (const requirement of programData.requirements) {
-          // Add all course codes from this requirement
-          for (const courseCode of requirement.courses) {
-            codes.add(courseCode);
-          }
-        }
-      }
-    }
-
-    return Array.from(codes);
-  }, [programs]);
-
-  // 2. Fetch all courses in parallel using useQueries
-  const courseQueries = useQueries(
-    allCourseCodes.map((code) => ({
-      query: api.courses.getCourseByCode,
-      args: { code },
-    }))
-  );
-
-  // 3. Create a lookup map from course code to course data
+  // Create a lookup map from courses Record
   const courseLookup = useMemo(() => {
     const lookup = new Map();
-    allCourseCodes.forEach((code, index) => {
-      if (courseQueries[index]) {
-        lookup.set(code, courseQueries[index]);
+    for (const [code, courseData] of Object.entries(courses)) {
+      if (courseData !== undefined) {
+        lookup.set(code, courseData);
       }
-    });
+    }
     return lookup;
-  }, [allCourseCodes, courseQueries]);
+  }, [courses]);
 
-  // 4. Get grouped requirements using the lookup
-  const programWithGroupedReqs = getRequirementsByCategory(programs, courseLookup);
-  const program = programWithGroupedReqs;
+  // Get grouped requirements using the lookup
+  const program = useMemo(
+    () => getRequirementsByCategory(programs, courseLookup),
+    [programs, courseLookup]
+  );
 
   if (program === undefined) {
     return (

From 64ea1f5915c6a87f022bc2a30da2ebeb9df27232 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 14:30:44 -0500
Subject: [PATCH 28/54] react hook fixes

---
 .../src/modules/degree-progress/components/degree-charts.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 2ec6b828..7436ed14 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -127,6 +127,8 @@ export function ProgramRequirementsChart({
   userCourses,
   courses,
 }: ProgramRequirementsChartProps) {
+  const [showCompletion, setShowCompletion] = useState(false);
+
   // Create a lookup map from courses Record
   const courseLookup = useMemo(() => {
     const lookup = new Map();
@@ -226,9 +228,6 @@ export function ProgramRequirementsChart({
       ? Math.round((totalCompletedCredits / totalCredits) * 100)
       : 0;
 
-  // State for toggling completion view
-  const [showCompletion, setShowCompletion] = useState(false);
-
   // Prepare data based on toggle state
   const pieChartData = useMemo(() => {
     if (!showCompletion) {

From 38eabf478bd057f91bc9f760d29e44c6eb569be4 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 14:35:32 -0500
Subject: [PATCH 29/54] flipped color scheme

---
 .../modules/degree-progress/components/degree-charts.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 7436ed14..f8e732da 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -250,23 +250,23 @@ export function ProgramRequirementsChart({
       chartData.forEach((item, index) => {
         const baseColor = COLORS[index % COLORS.length];
 
-        // Add completed portion (lighter shade)
+        // Add completed portion (darker - original color)
         if (item.completedCredits > 0) {
           splitData.push({
             name: `${item.category} (Completed)`,
             value: item.completedCredits,
-            fill: lightenColor(baseColor),
+            fill: baseColor,
             isCompleted: true,
             category: item.category,
           });
         }
 
-        // Add remaining portion (original color)
+        // Add remaining portion (lighter shade)
         if (item.remainingCredits > 0) {
           splitData.push({
             name: `${item.category} (Remaining)`,
             value: item.remainingCredits,
-            fill: baseColor,
+            fill: lightenColor(baseColor),
             isCompleted: false,
             category: item.category,
           });

From 2856c1c8bf1b4a8bd03e9dd22fb8553ea82c33aa Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 14:44:11 -0500
Subject: [PATCH 30/54] fixed label rendering logic

---
 .../components/degree-charts.tsx              | 165 ++++++++++--------
 1 file changed, 88 insertions(+), 77 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index f8e732da..fbb0942c 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -2,7 +2,7 @@
 
 import type { api } from "@albert-plus/server/convex/_generated/api";
 import type { FunctionReturnType } from "convex/server";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect, useRef } from "react";
 import { Cell, Legend, Pie, PieChart, Tooltip, ResponsiveContainer } from "recharts";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -128,6 +128,7 @@ export function ProgramRequirementsChart({
   courses,
 }: ProgramRequirementsChartProps) {
   const [showCompletion, setShowCompletion] = useState(false);
+  const [hasAnimated, setHasAnimated] = useState(false);
 
   // Create a lookup map from courses Record
   const courseLookup = useMemo(() => {
@@ -146,90 +147,61 @@ export function ProgramRequirementsChart({
     [programs, courseLookup]
   );
 
-  if (program === undefined) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Program Requirements</CardTitle>
-          <CardDescription>Loading...</CardDescription>
-        </CardHeader>
-      </Card>
-    );
-  }
+  // Calculate chart data - must be before any early returns
+  const chartData = useMemo(() => {
+    if (!program || program === null) return [];
 
-  if (program === null) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Program Requirements</CardTitle>
-          <CardDescription>Program not found</CardDescription>
-        </CardHeader>
-      </Card>
-    );
-  }
+    const completedCreditsByCategory: Record<string, number> = {};
+    if (userCourses) {
+      for (const userCourse of userCourses) {
+        for (const [prefix, data] of Object.entries(
+          program.requirementsByCategory,
+        )) {
+          // Check if the course code is in any of the nested course arrays
+          const isInRequirement = data.courses.some((courseGroup) =>
+            courseGroup.some(
+              (course) =>
+                course.toLowerCase() === userCourse.courseCode.toLowerCase(),
+            ),
+          );
 
-  const completedCreditsByCategory: Record<string, number> = {};
-  if (userCourses) {
-    for (const userCourse of userCourses) {
-      for (const [prefix, data] of Object.entries(
-        program.requirementsByCategory,
-      )) {
-        // Check if the course code is in any of the nested course arrays
-        const isInRequirement = data.courses.some((courseGroup) =>
-          courseGroup.some(
-            (course) =>
-              course.toLowerCase() === userCourse.courseCode.toLowerCase(),
-          ),
-        );
-
-        if (isInRequirement) {
-          completedCreditsByCategory[prefix] =
-            (completedCreditsByCategory[prefix] || 0) +
-            (userCourse.course?.credits || 0);
-          break;
+          if (isInRequirement) {
+            completedCreditsByCategory[prefix] =
+              (completedCreditsByCategory[prefix] || 0) +
+              (userCourse.course?.credits || 0);
+            break;
+          }
         }
       }
     }
-  }
 
-  // Transform the data for the chart
-  const chartData = Object.entries(program.requirementsByCategory)
-    .map(([prefix, data]) => {
-      const completed = completedCreditsByCategory[prefix] || 0;
-      const percentage =
-        data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
-      return {
-        category: prefix,
-        credits: data.credits,
-        completedCredits: completed,
-        remainingCredits: data.credits - completed,
-        percentage,
-      };
-    })
-    .sort((a, b) => {
-      // "Other" should always be at the bottom
-      if (a.category === "Other") return 1;
-      if (b.category === "Other") return -1;
-      // Otherwise, maintain alphabetical order
-      return a.category.localeCompare(b.category);
-    });
-
-  const totalCredits = Object.values(program.requirementsByCategory).reduce(
-    (sum, data) => sum + data.credits,
-    0,
-  );
-
-  const totalCompletedCredits = Object.values(
-    completedCreditsByCategory,
-  ).reduce((sum, credits) => sum + credits, 0);
-
-  const overallPercentage =
-    totalCredits > 0
-      ? Math.round((totalCompletedCredits / totalCredits) * 100)
-      : 0;
+    // Transform the data for the chart
+    return Object.entries(program.requirementsByCategory)
+      .map(([prefix, data]) => {
+        const completed = completedCreditsByCategory[prefix] || 0;
+        const percentage =
+          data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
+        return {
+          category: prefix,
+          credits: data.credits,
+          completedCredits: completed,
+          remainingCredits: data.credits - completed,
+          percentage,
+        };
+      })
+      .sort((a, b) => {
+        // "Other" should always be at the bottom
+        if (a.category === "Other") return 1;
+        if (b.category === "Other") return -1;
+        // Otherwise, maintain alphabetical order
+        return a.category.localeCompare(b.category);
+      });
+  }, [program, userCourses]);
 
-  // Prepare data based on toggle state
+  // Prepare pie chart data based on toggle state
   const pieChartData = useMemo(() => {
+    if (chartData.length === 0) return [];
+
     if (!showCompletion) {
       // Default view: just total credits per category
       return chartData.map((item, index) => ({
@@ -277,6 +249,43 @@ export function ProgramRequirementsChart({
     }
   }, [chartData, showCompletion]);
 
+  // Mark as animated after first data load
+  useEffect(() => {
+    if (pieChartData.length > 0 && !hasAnimated) {
+      setHasAnimated(true);
+    }
+  }, [pieChartData, hasAnimated]);
+
+  if (program === undefined) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Program Requirements</CardTitle>
+          <CardDescription>Loading...</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (program === null) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Program Requirements</CardTitle>
+          <CardDescription>Program not found</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  // Calculate totals from chartData (already computed in useMemo above)
+  const totalCredits = chartData.reduce((sum, item) => sum + item.credits, 0);
+  const totalCompletedCredits = chartData.reduce((sum, item) => sum + item.completedCredits, 0);
+  const overallPercentage =
+    totalCredits > 0
+      ? Math.round((totalCompletedCredits / totalCredits) * 100)
+      : 0;
+
   return (
     <Card>
       <CardHeader>
@@ -318,6 +327,8 @@ export function ProgramRequirementsChart({
                 cy="50%"
                 outerRadius={120}
                 label={({ name, value }) => `${name}: ${value}`}
+                isAnimationActive={!hasAnimated}
+                animationDuration={800}
               >
                 {pieChartData.map((entry, index) => (
                   <Cell key={`cell-${index}`} fill={entry.fill} />

From 2d8aed3fdbf2ec07bdd158344b48efca41e63bb4 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 14:46:04 -0500
Subject: [PATCH 31/54] keep first load chart animation

---
 .../degree-progress/components/degree-charts.tsx      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index fbb0942c..da6b3214 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -249,10 +249,15 @@ export function ProgramRequirementsChart({
     }
   }, [chartData, showCompletion]);
 
-  // Mark as animated after first data load
+  // Mark as animated after first data load (with a delay to allow the animation to complete)
   useEffect(() => {
     if (pieChartData.length > 0 && !hasAnimated) {
-      setHasAnimated(true);
+      // Set a timeout to mark as animated after the animation completes
+      const timer = setTimeout(() => {
+        setHasAnimated(true);
+      }, 850); // Slightly longer than animationDuration (800ms)
+
+      return () => clearTimeout(timer);
     }
   }, [pieChartData, hasAnimated]);
 
@@ -329,6 +334,8 @@ export function ProgramRequirementsChart({
                 label={({ name, value }) => `${name}: ${value}`}
                 isAnimationActive={!hasAnimated}
                 animationDuration={800}
+                animationBegin={0}
+                animationEasing="ease-out"
               >
                 {pieChartData.map((entry, index) => (
                   <Cell key={`cell-${index}`} fill={entry.fill} />

From b7ea51496f11ced8f73af1626383d6476cfb8208 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 15:08:47 -0500
Subject: [PATCH 32/54] cleaned up imports

---
 apps/web/package.json                         |  1 -
 .../components/degree-charts.tsx              | 45 +++++++++++++------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 287551c2..0c22ddd7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,6 @@
   "packageManager": "bun@1.2.23",
   "dependencies": {
     "@albert-plus/server": "workspace:*",
-    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-select": "^2.2.6",
     "@clerk/nextjs": "^6.34.5",
     "@radix-ui/react-avatar": "^1.1.11",
diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index da6b3214..68be5b91 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -2,10 +2,15 @@
 
 import type { api } from "@albert-plus/server/convex/_generated/api";
 import type { FunctionReturnType } from "convex/server";
-import { useMemo, useState, useEffect, useRef } from "react";
-import { Cell, Legend, Pie, PieChart, Tooltip, ResponsiveContainer } from "recharts";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
 import {
   Card,
   CardContent,
@@ -13,6 +18,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 
 interface ProgramRequirementsChartProps {
   programs: Record<
@@ -28,7 +35,6 @@ interface ProgramRequirementsChartProps {
   >;
 }
 
-// Color palette for pie chart slices
 const COLORS = [
   "#3b82f6", // blue
   "#10b981", // green
@@ -42,12 +48,23 @@ const COLORS = [
   "#6366f1", // indigo
 ];
 
-// Helper function to lighten a color (for completed portion)
+// Helper function to lighten a color (for uncompleted credits)
 const lightenColor = (color: string, percent: number = 40): string => {
   const num = parseInt(color.replace("#", ""), 16);
-  const r = Math.min(255, ((num >> 16) & 0xff) + Math.floor((255 - ((num >> 16) & 0xff)) * (percent / 100)));
-  const g = Math.min(255, ((num >> 8) & 0xff) + Math.floor((255 - ((num >> 8) & 0xff)) * (percent / 100)));
-  const b = Math.min(255, (num & 0xff) + Math.floor((255 - (num & 0xff)) * (percent / 100)));
+  const r = Math.min(
+    255,
+    ((num >> 16) & 0xff) +
+      Math.floor((255 - ((num >> 16) & 0xff)) * (percent / 100)),
+  );
+  const g = Math.min(
+    255,
+    ((num >> 8) & 0xff) +
+      Math.floor((255 - ((num >> 8) & 0xff)) * (percent / 100)),
+  );
+  const b = Math.min(
+    255,
+    (num & 0xff) + Math.floor((255 - (num & 0xff)) * (percent / 100)),
+  );
   return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
 };
 
@@ -56,7 +73,7 @@ const getRequirementsByCategory = (
     string,
     FunctionReturnType<typeof api.programs.getProgramById> | undefined
   >,
-  courseLookup: Map<string, any>
+  courseLookup: Map<string, any>,
 ) => {
   if (!programs) return null;
 
@@ -144,10 +161,9 @@ export function ProgramRequirementsChart({
   // Get grouped requirements using the lookup
   const program = useMemo(
     () => getRequirementsByCategory(programs, courseLookup),
-    [programs, courseLookup]
+    [programs, courseLookup],
   );
 
-  // Calculate chart data - must be before any early returns
   const chartData = useMemo(() => {
     if (!program || program === null) return [];
 
@@ -285,7 +301,10 @@ export function ProgramRequirementsChart({
 
   // Calculate totals from chartData (already computed in useMemo above)
   const totalCredits = chartData.reduce((sum, item) => sum + item.credits, 0);
-  const totalCompletedCredits = chartData.reduce((sum, item) => sum + item.completedCredits, 0);
+  const totalCompletedCredits = chartData.reduce(
+    (sum, item) => sum + item.completedCredits,
+    0,
+  );
   const overallPercentage =
     totalCredits > 0
       ? Math.round((totalCompletedCredits / totalCredits) * 100)

From 32b5406f84a33784eb699fb8b4e824c615ac2e63 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 15:12:27 -0500
Subject: [PATCH 33/54] type fixes

---
 .../degree-progress/components/degree-charts.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 68be5b91..96af7244 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -73,7 +73,10 @@ const getRequirementsByCategory = (
     string,
     FunctionReturnType<typeof api.programs.getProgramById> | undefined
   >,
-  courseLookup: Map<string, any>,
+  courseLookup: Map<
+    string,
+    FunctionReturnType<typeof api.courses.getCourseByCode>
+  >,
 ) => {
   if (!programs) return null;
 
@@ -149,7 +152,10 @@ export function ProgramRequirementsChart({
 
   // Create a lookup map from courses Record
   const courseLookup = useMemo(() => {
-    const lookup = new Map();
+    const lookup = new Map<
+      string,
+      FunctionReturnType<typeof api.courses.getCourseByCode>
+    >();
     for (const [code, courseData] of Object.entries(courses)) {
       if (courseData !== undefined) {
         lookup.set(code, courseData);
@@ -363,7 +369,11 @@ export function ProgramRequirementsChart({
               <Tooltip
                 content={({ active, payload }) => {
                   if (active && payload && payload.length) {
-                    const data = payload[0].payload as any;
+                    const data = payload[0].payload as {
+                      name: string;
+                      value: number;
+                      fill: string;
+                    };
                     return (
                       <div className="rounded-lg border bg-background p-2 shadow-sm">
                         <div className="flex flex-col gap-1">

From edf6ac5c058727ddcfd23f958045db2bc91d54b0 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 15:18:27 -0500
Subject: [PATCH 34/54] moved calculations

---
 .../components/degree-charts.tsx              | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 96af7244..0c65c114 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -170,8 +170,15 @@ export function ProgramRequirementsChart({
     [programs, courseLookup],
   );
 
-  const chartData = useMemo(() => {
-    if (!program || program === null) return [];
+  const { chartData, totalCredits, totalCompletedCredits, overallPercentage } = useMemo(() => {
+    if (!program || program === null) {
+      return {
+        chartData: [],
+        totalCredits: 0,
+        totalCompletedCredits: 0,
+        overallPercentage: 0,
+      };
+    }
 
     const completedCreditsByCategory: Record<string, number> = {};
     if (userCourses) {
@@ -198,7 +205,7 @@ export function ProgramRequirementsChart({
     }
 
     // Transform the data for the chart
-    return Object.entries(program.requirementsByCategory)
+    const data = Object.entries(program.requirementsByCategory)
       .map(([prefix, data]) => {
         const completed = completedCreditsByCategory[prefix] || 0;
         const percentage =
@@ -218,6 +225,24 @@ export function ProgramRequirementsChart({
         // Otherwise, maintain alphabetical order
         return a.category.localeCompare(b.category);
       });
+
+    // Calculate totals
+    const totalCredits = data.reduce((sum, item) => sum + item.credits, 0);
+    const totalCompletedCredits = data.reduce(
+      (sum, item) => sum + item.completedCredits,
+      0,
+    );
+    const overallPercentage =
+      totalCredits > 0
+        ? Math.round((totalCompletedCredits / totalCredits) * 100)
+        : 0;
+
+    return {
+      chartData: data,
+      totalCredits,
+      totalCompletedCredits,
+      overallPercentage,
+    };
   }, [program, userCourses]);
 
   // Prepare pie chart data based on toggle state
@@ -305,17 +330,6 @@ export function ProgramRequirementsChart({
     );
   }
 
-  // Calculate totals from chartData (already computed in useMemo above)
-  const totalCredits = chartData.reduce((sum, item) => sum + item.credits, 0);
-  const totalCompletedCredits = chartData.reduce(
-    (sum, item) => sum + item.completedCredits,
-    0,
-  );
-  const overallPercentage =
-    totalCredits > 0
-      ? Math.round((totalCompletedCredits / totalCredits) * 100)
-      : 0;
-
   return (
     <Card>
       <CardHeader>

From cb63d4699b767c7f15ba9c4d3a8523c6ed8a52f8 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 18:41:28 -0500
Subject: [PATCH 35/54] removed labels

---
 .../components/degree-charts.tsx              | 146 +++++++++---------
 1 file changed, 71 insertions(+), 75 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 0c65c114..5cca11fc 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -170,80 +170,81 @@ export function ProgramRequirementsChart({
     [programs, courseLookup],
   );
 
-  const { chartData, totalCredits, totalCompletedCredits, overallPercentage } = useMemo(() => {
-    if (!program || program === null) {
-      return {
-        chartData: [],
-        totalCredits: 0,
-        totalCompletedCredits: 0,
-        overallPercentage: 0,
-      };
-    }
+  const { chartData, totalCredits, totalCompletedCredits, overallPercentage } =
+    useMemo(() => {
+      if (!program || program === null) {
+        return {
+          chartData: [],
+          totalCredits: 0,
+          totalCompletedCredits: 0,
+          overallPercentage: 0,
+        };
+      }
 
-    const completedCreditsByCategory: Record<string, number> = {};
-    if (userCourses) {
-      for (const userCourse of userCourses) {
-        for (const [prefix, data] of Object.entries(
-          program.requirementsByCategory,
-        )) {
-          // Check if the course code is in any of the nested course arrays
-          const isInRequirement = data.courses.some((courseGroup) =>
-            courseGroup.some(
-              (course) =>
-                course.toLowerCase() === userCourse.courseCode.toLowerCase(),
-            ),
-          );
-
-          if (isInRequirement) {
-            completedCreditsByCategory[prefix] =
-              (completedCreditsByCategory[prefix] || 0) +
-              (userCourse.course?.credits || 0);
-            break;
+      const completedCreditsByCategory: Record<string, number> = {};
+      if (userCourses) {
+        for (const userCourse of userCourses) {
+          for (const [prefix, data] of Object.entries(
+            program.requirementsByCategory,
+          )) {
+            // Check if the course code is in any of the nested course arrays
+            const isInRequirement = data.courses.some((courseGroup) =>
+              courseGroup.some(
+                (course) =>
+                  course.toLowerCase() === userCourse.courseCode.toLowerCase(),
+              ),
+            );
+
+            if (isInRequirement) {
+              completedCreditsByCategory[prefix] =
+                (completedCreditsByCategory[prefix] || 0) +
+                (userCourse.course?.credits || 0);
+              break;
+            }
           }
         }
       }
-    }
 
-    // Transform the data for the chart
-    const data = Object.entries(program.requirementsByCategory)
-      .map(([prefix, data]) => {
-        const completed = completedCreditsByCategory[prefix] || 0;
-        const percentage =
-          data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
-        return {
-          category: prefix,
-          credits: data.credits,
-          completedCredits: completed,
-          remainingCredits: data.credits - completed,
-          percentage,
-        };
-      })
-      .sort((a, b) => {
-        // "Other" should always be at the bottom
-        if (a.category === "Other") return 1;
-        if (b.category === "Other") return -1;
-        // Otherwise, maintain alphabetical order
-        return a.category.localeCompare(b.category);
-      });
+      // Transform the data for the chart
+      const data = Object.entries(program.requirementsByCategory)
+        .map(([prefix, data]) => {
+          const completed = completedCreditsByCategory[prefix] || 0;
+          const percentage =
+            data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
+          return {
+            category: prefix,
+            credits: data.credits,
+            completedCredits: completed,
+            remainingCredits: data.credits - completed,
+            percentage,
+          };
+        })
+        .sort((a, b) => {
+          // "Other" should always be at the bottom
+          if (a.category === "Other") return 1;
+          if (b.category === "Other") return -1;
+          // Otherwise, maintain alphabetical order
+          return a.category.localeCompare(b.category);
+        });
+
+      // Calculate totals
+      const totalCredits = data.reduce((sum, item) => sum + item.credits, 0);
+      const totalCompletedCredits = data.reduce(
+        (sum, item) => sum + item.completedCredits,
+        0,
+      );
+      const overallPercentage =
+        totalCredits > 0
+          ? Math.round((totalCompletedCredits / totalCredits) * 100)
+          : 0;
 
-    // Calculate totals
-    const totalCredits = data.reduce((sum, item) => sum + item.credits, 0);
-    const totalCompletedCredits = data.reduce(
-      (sum, item) => sum + item.completedCredits,
-      0,
-    );
-    const overallPercentage =
-      totalCredits > 0
-        ? Math.round((totalCompletedCredits / totalCredits) * 100)
-        : 0;
-
-    return {
-      chartData: data,
-      totalCredits,
-      totalCompletedCredits,
-      overallPercentage,
-    };
-  }, [program, userCourses]);
+      return {
+        chartData: data,
+        totalCredits,
+        totalCompletedCredits,
+        overallPercentage,
+      };
+    }, [program, userCourses]);
 
   // Prepare pie chart data based on toggle state
   const pieChartData = useMemo(() => {
@@ -296,13 +297,12 @@ export function ProgramRequirementsChart({
     }
   }, [chartData, showCompletion]);
 
-  // Mark as animated after first data load (with a delay to allow the animation to complete)
+  // Mark as animated after first data load
   useEffect(() => {
     if (pieChartData.length > 0 && !hasAnimated) {
-      // Set a timeout to mark as animated after the animation completes
       const timer = setTimeout(() => {
         setHasAnimated(true);
-      }, 850); // Slightly longer than animationDuration (800ms)
+      }, 2000); 
 
       return () => clearTimeout(timer);
     }
@@ -370,11 +370,7 @@ export function ProgramRequirementsChart({
                 cx="50%"
                 cy="50%"
                 outerRadius={120}
-                label={({ name, value }) => `${name}: ${value}`}
                 isAnimationActive={!hasAnimated}
-                animationDuration={800}
-                animationBegin={0}
-                animationEasing="ease-out"
               >
                 {pieChartData.map((entry, index) => (
                   <Cell key={`cell-${index}`} fill={entry.fill} />

From dca9d6ac582a86a21acf910808053af95187a509 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 18:43:01 -0500
Subject: [PATCH 36/54] added donut style

---
 .../components/degree-charts.tsx              | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 5cca11fc..e9f83efb 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -369,6 +369,7 @@ export function ProgramRequirementsChart({
                 nameKey="name"
                 cx="50%"
                 cy="50%"
+                innerRadius={80}
                 outerRadius={120}
                 isAnimationActive={!hasAnimated}
               >
@@ -376,6 +377,27 @@ export function ProgramRequirementsChart({
                   <Cell key={`cell-${index}`} fill={entry.fill} />
                 ))}
               </Pie>
+              <text
+                x="50%"
+                y="50%"
+                textAnchor="middle"
+                dominantBaseline="middle"
+                className="fill-foreground text-2xl font-bold"
+              >
+                {showCompletion
+                  ? `${totalCompletedCredits}/${totalCredits}`
+                  : totalCredits}
+              </text>
+              <text
+                x="50%"
+                y="50%"
+                dy="1.5em"
+                textAnchor="middle"
+                dominantBaseline="middle"
+                className="fill-muted-foreground text-sm"
+              >
+                credits
+              </text>
               <Tooltip
                 content={({ active, payload }) => {
                   if (active && payload && payload.length) {

From 29ce4b8acf86ba19ec2d11091e80830a40c23f05 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 18:48:15 -0500
Subject: [PATCH 37/54] fixed inner text ui

---
 .../degree-progress/components/degree-charts.tsx  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index e9f83efb..080f47a2 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -360,7 +360,7 @@ export function ProgramRequirementsChart({
         </div>
       </CardHeader>
       <CardContent>
-        <div className="flex justify-center">
+        <div className="flex justify-center relative">
           <ResponsiveContainer width="100%" height={400}>
             <PieChart>
               <Pie
@@ -369,8 +369,8 @@ export function ProgramRequirementsChart({
                 nameKey="name"
                 cx="50%"
                 cy="50%"
-                innerRadius={80}
-                outerRadius={120}
+                innerRadius={90}
+                outerRadius={130}
                 isAnimationActive={!hasAnimated}
               >
                 {pieChartData.map((entry, index) => (
@@ -380,9 +380,11 @@ export function ProgramRequirementsChart({
               <text
                 x="50%"
                 y="50%"
+                dy="-15"
                 textAnchor="middle"
                 dominantBaseline="middle"
-                className="fill-foreground text-2xl font-bold"
+                className="fill-foreground font-bold"
+                style={{ fontSize: '36px' }}
               >
                 {showCompletion
                   ? `${totalCompletedCredits}/${totalCredits}`
@@ -391,10 +393,11 @@ export function ProgramRequirementsChart({
               <text
                 x="50%"
                 y="50%"
-                dy="1.5em"
+                dy="25"
                 textAnchor="middle"
                 dominantBaseline="middle"
-                className="fill-muted-foreground text-sm"
+                className="fill-muted-foreground"
+                style={{ fontSize: '20px' }}
               >
                 credits
               </text>

From a8cda458b47d621566caab03a498d3b499ba7699 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 18:50:29 -0500
Subject: [PATCH 38/54] fixed key index error

---
 .../degree-progress/components/degree-charts.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index 080f47a2..b729ea1c 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -302,7 +302,7 @@ export function ProgramRequirementsChart({
     if (pieChartData.length > 0 && !hasAnimated) {
       const timer = setTimeout(() => {
         setHasAnimated(true);
-      }, 2000); 
+      }, 2000);
 
       return () => clearTimeout(timer);
     }
@@ -373,8 +373,8 @@ export function ProgramRequirementsChart({
                 outerRadius={130}
                 isAnimationActive={!hasAnimated}
               >
-                {pieChartData.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={entry.fill} />
+                {pieChartData.map((entry) => (
+                  <Cell key={entry.name} fill={entry.fill} />
                 ))}
               </Pie>
               <text
@@ -384,7 +384,7 @@ export function ProgramRequirementsChart({
                 textAnchor="middle"
                 dominantBaseline="middle"
                 className="fill-foreground font-bold"
-                style={{ fontSize: '36px' }}
+                style={{ fontSize: "36px" }}
               >
                 {showCompletion
                   ? `${totalCompletedCredits}/${totalCredits}`
@@ -397,7 +397,7 @@ export function ProgramRequirementsChart({
                 textAnchor="middle"
                 dominantBaseline="middle"
                 className="fill-muted-foreground"
-                style={{ fontSize: '20px' }}
+                style={{ fontSize: "20px" }}
               >
                 credits
               </text>

From 6027e33bdffe447f0f6831a320c6702cffce9e62 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 9 Nov 2025 18:51:23 -0500
Subject: [PATCH 39/54] disabled tooltip animation

---
 .../web/src/modules/degree-progress/components/degree-charts.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
index b729ea1c..8b20917a 100644
--- a/apps/web/src/modules/degree-progress/components/degree-charts.tsx
+++ b/apps/web/src/modules/degree-progress/components/degree-charts.tsx
@@ -402,6 +402,7 @@ export function ProgramRequirementsChart({
                 credits
               </text>
               <Tooltip
+                animationDuration={0}
                 content={({ active, payload }) => {
                   if (active && payload && payload.length) {
                     const data = payload[0].payload as {

From 0b3fcdfe5f8a6603492891bdf9cdde668c6c8407 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Mon, 10 Nov 2025 18:26:34 -0500
Subject: [PATCH 40/54] clean up

---
 apps/web/src/app/dashboard/page.tsx | 3 ---
 packages/server/convex/programs.ts  | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index b30b9fd4..6fa9f410 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -8,7 +8,6 @@ import {
   useQuery,
 } from "convex/react";
 import { ProgramRequirementsChart } from "@/modules/degree-progress/components/degree-charts";
-import DegreeProgreeUpload from "@/modules/report-parsing/components/degree-progress-upload";
 
 const HomePage = () => {
   const { isAuthenticated } = useConvexAuth();
@@ -61,8 +60,6 @@ const HomePage = () => {
     <div className="container mx-auto space-y-6 p-6">
       <h1 className="text-3xl font-bold">Dashboard</h1>
 
-      <DegreeProgreeUpload />
-
       <ProgramRequirementsChart
         programs={programs}
         userCourses={userCourses}
diff --git a/packages/server/convex/programs.ts b/packages/server/convex/programs.ts
index ef438a02..13b94951 100644
--- a/packages/server/convex/programs.ts
+++ b/packages/server/convex/programs.ts
@@ -1,6 +1,6 @@
 import { paginationOptsValidator } from "convex/server";
 import { v } from "convex/values";
-import { getManyFrom, getOneFrom } from "convex-helpers/server/relationships";
+import { getManyFrom } from "convex-helpers/server/relationships";
 import { internalMutation } from "./_generated/server";
 import { protectedQuery } from "./helpers/auth";
 import { programs } from "./schemas/programs";

From f4d860bdc4e14b079df40130c88853c8dc3eb88c Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Mon, 10 Nov 2025 18:31:25 -0500
Subject: [PATCH 41/54] move degree chart to dashboard components dir

---
 .../dashboard}/components/degree-charts.tsx                     | 0
 apps/web/src/app/dashboard/page.tsx                             | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename apps/web/src/{modules/degree-progress => app/dashboard}/components/degree-charts.tsx (100%)

diff --git a/apps/web/src/modules/degree-progress/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
similarity index 100%
rename from apps/web/src/modules/degree-progress/components/degree-charts.tsx
rename to apps/web/src/app/dashboard/components/degree-charts.tsx
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 6fa9f410..64c9ccb6 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -7,7 +7,7 @@ import {
   useQueries,
   useQuery,
 } from "convex/react";
-import { ProgramRequirementsChart } from "@/modules/degree-progress/components/degree-charts";
+import { ProgramRequirementsChart } from "@/app/dashboard/components/degree-charts";
 
 const HomePage = () => {
   const { isAuthenticated } = useConvexAuth();

From 6954ebbe3029914662438f845ea0618a29cb7450 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Mon, 10 Nov 2025 23:11:30 -0500
Subject: [PATCH 42/54] clean up

---
 apps/web/src/app/dashboard/page.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 64c9ccb6..062ae6ad 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -22,6 +22,7 @@ const HomePage = () => {
   );
 
   const programQueries: RequestForQueries = {};
+
   if (isAuthenticated && student) {
     for (const programId of student.programs) {
       programQueries[programId] = {
@@ -57,15 +58,11 @@ const HomePage = () => {
   const courses = useQueries(courseQueries);
 
   return (
-    <div className="container mx-auto space-y-6 p-6">
-      <h1 className="text-3xl font-bold">Dashboard</h1>
-
-      <ProgramRequirementsChart
-        programs={programs}
-        userCourses={userCourses}
-        courses={courses}
-      />
-    </div>
+    <ProgramRequirementsChart
+      programs={programs}
+      userCourses={userCourses}
+      courses={courses}
+    />
   );
 };
 

From 4b21c9ad1b051faf118658780ac5534f190217b7 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Tue, 11 Nov 2025 00:09:16 -0500
Subject: [PATCH 43/54] type programs

---
 apps/web/src/app/dashboard/page.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 062ae6ad..db9582e6 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -8,6 +8,7 @@ import {
   useQuery,
 } from "convex/react";
 import { ProgramRequirementsChart } from "@/app/dashboard/components/degree-charts";
+import { FunctionReturnType } from "convex/server";
 
 const HomePage = () => {
   const { isAuthenticated } = useConvexAuth();
@@ -32,7 +33,10 @@ const HomePage = () => {
     }
   }
 
-  const programs = useQueries(programQueries);
+  const programs: Record<
+    string,
+    FunctionReturnType<typeof api.programs.getProgramById>
+  > = useQueries(programQueries);
 
   // Collect all unique course codes from all programs
   const allCourseCodes = new Set<string>();

From b51e47fa4a5d6c61b3b87deda098ed9b71c1b8d7 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Fri, 14 Nov 2025 16:07:39 -0500
Subject: [PATCH 44/54] only fetch required/alt courses for credits

---
 apps/web/src/app/dashboard/page.tsx | 10 +++--
 bun.lock                            | 65 +----------------------------
 2 files changed, 8 insertions(+), 67 deletions(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index db9582e6..8f80cc23 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -38,19 +38,21 @@ const HomePage = () => {
     FunctionReturnType<typeof api.programs.getProgramById>
   > = useQueries(programQueries);
 
-  // Collect all unique course codes from all programs
+  // Collect all unique course codes from all programs of type required/alternative
   const allCourseCodes = new Set<string>();
   for (const [_, programData] of Object.entries(programs)) {
     if (programData?.requirements) {
       for (const requirement of programData.requirements) {
-        for (const courseCode of requirement.courses) {
-          allCourseCodes.add(courseCode);
+        if (requirement.type === "required" || requirement.type === "alternative") {
+          for (const courseCode of requirement.courses) {
+            allCourseCodes.add(courseCode);
+          }
         }
       }
     }
   }
 
-  // Fetch all courses
+  // Fetch all courses of type required/alternative
   const courseQueries: RequestForQueries = {};
   for (const code of allCourseCodes) {
     courseQueries[code] = {
diff --git a/bun.lock b/bun.lock
index 0bb534c7..ad404f9b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -64,7 +64,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@albert-plus/server": "workspace:*",
-        "@clerk/nextjs": "^6.35.0",
+        "@clerk/nextjs": "^6.34.5",
         "@radix-ui/react-avatar": "^1.1.11",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-context-menu": "^2.2.16",
@@ -96,8 +96,7 @@
         "radix-ui": "^1.4.3",
         "react": "19.2.0",
         "react-day-picker": "^9.11.1",
-        "react-dom": "19.2.0",
-        "recharts": "^3.3.0",
+        "react-dom": "^19.2.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "zod": "^4.1.12",
@@ -891,8 +890,6 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
-    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.9.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^10.0.3", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-ZAYu/NXkl/OhqTz7rfPaAhY0+e8Fr15jqNxte/2exKUxvHyQ/hcqmdekiN1f+Lcw3pE+34FCgX+26zcUE3duCg=="],
-
     "@remixicon/react": ["@remixicon/react@4.7.0", "", { "peerDependencies": { "react": ">=18.2.0" } }, "sha512-ODBQjdbOjnFguCqctYkpDjERXOInNaBnRPDKfZOBvbzExBAwr2BaH/6AHFTg/UAFzBDkwtylfMT8iKPAkLwPLQ=="],
 
     "@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
@@ -971,8 +968,6 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
 
-    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
-
     "@stripe/stripe-js": ["@stripe/stripe-js@5.6.0", "", {}, "sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw=="],
 
     "@svgr/babel-plugin-add-jsx-attribute": ["@svgr/babel-plugin-add-jsx-attribute@6.5.1", "", { "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ=="],
@@ -1097,24 +1092,6 @@
 
     "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
 
-    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
-
-    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
-
-    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
-
-    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
-
-    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
-
-    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
-
-    "@types/d3-shape": ["@types/d3-shape@3.1.7", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg=="],
-
-    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
-
-    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
-
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
@@ -1155,7 +1132,6 @@
 
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
-    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
     "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
@@ -1392,28 +1368,6 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
-    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
-
-    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
-
-    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
-
-    "d3-format": ["d3-format@3.1.0", "", {}, "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="],
-
-    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
-
-    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
-
-    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
-
-    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
-
-    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
-
-    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
-
-    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
-
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
 
     "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
@@ -1422,8 +1376,6 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
-    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
-
     "decode-formdata": ["decode-formdata@0.9.0", "", {}, "sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw=="],
 
     "decode-named-character-reference": ["decode-named-character-reference@1.2.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q=="],
@@ -1502,7 +1454,6 @@
 
     "error-stack-parser-es": ["error-stack-parser-es@1.0.5", "", {}, "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA=="],
 
-    "es-toolkit": ["es-toolkit@1.41.0", "", {}, "sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA=="],
     "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
 
     "esast-util-from-estree": ["esast-util-from-estree@2.0.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "unist-util-position-from-estree": "^2.0.0" } }, "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ=="],
@@ -1709,7 +1660,6 @@
 
     "inquirer": ["inquirer@12.5.0", "", { "dependencies": { "@inquirer/core": "^10.1.9", "@inquirer/prompts": "^7.4.0", "@inquirer/type": "^3.0.5", "ansi-escapes": "^4.3.2", "mute-stream": "^2.0.0", "run-async": "^3.0.0", "rxjs": "^7.8.2" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-aiBBq5aKF1k87MTxXDylLfwpRwToShiHrSv4EmB07EYyLgmnjEz5B3rn0aGw1X3JA/64Ngf2T54oGwc+BCsPIQ=="],
 
-    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
     "iron-webcrypto": ["iron-webcrypto@1.2.1", "", {}, "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg=="],
 
     "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
@@ -2174,8 +2124,6 @@
 
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
-    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
-
     "react-refresh": ["react-refresh@0.9.0", "", {}, "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.1", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA=="],
@@ -2188,11 +2136,6 @@
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
-    "recharts": ["recharts@3.3.0", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Vi0qmTB0iz1+/Cz9o5B7irVyUjX2ynvEgImbgMt/3sKRREcUM07QiYjS1QpAVrkmVlXqy5gykq4nGWMz9AS4Rg=="],
-
-    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
-
-    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
 
     "recma-jsx": ["recma-jsx@1.0.1", "", { "dependencies": { "acorn-jsx": "^5.0.0", "estree-util-to-js": "^2.0.0", "recma-parse": "^1.0.0", "recma-stringify": "^1.0.0", "unified": "^11.0.0" }, "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w=="],
@@ -2213,7 +2156,6 @@
 
     "registry-url": ["registry-url@6.0.1", "", { "dependencies": { "rc": "1.2.8" } }, "sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q=="],
 
-    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
     "rehype": ["rehype@13.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "rehype-parse": "^9.0.0", "rehype-stringify": "^10.0.0", "unified": "^11.0.0" } }, "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A=="],
 
     "rehype-expressive-code": ["rehype-expressive-code@0.41.3", "", { "dependencies": { "expressive-code": "^0.41.3" } }, "sha512-8d9Py4c/V6I/Od2VIXFAdpiO2kc0SV2qTJsRAaqSIcM9aruW4ASLNe2kOEo1inXAAkIhpFzAHTc358HKbvpNUg=="],
@@ -2382,7 +2324,6 @@
 
     "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
 
-    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
     "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
 
     "tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="],
@@ -2489,8 +2430,6 @@
 
     "utility-types": ["utility-types@3.11.0", "", {}, "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw=="],
 
-    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
-
     "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
 
     "vfile-location": ["vfile-location@5.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg=="],

From 95a894615c3c17b37f769e39dc3bbfea4ef52357 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Fri, 14 Nov 2025 16:29:56 -0500
Subject: [PATCH 45/54] fixed loading state

---
 apps/web/src/app/dashboard/components/degree-charts.tsx | 5 ++++-
 apps/web/src/app/dashboard/page.tsx                     | 7 +++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/dashboard/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
index 8b20917a..dd4aafbe 100644
--- a/apps/web/src/app/dashboard/components/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/degree-charts.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
 
 interface ProgramRequirementsChartProps {
   programs: Record<
@@ -33,6 +34,7 @@ interface ProgramRequirementsChartProps {
     string,
     FunctionReturnType<typeof api.courses.getCourseByCode> | undefined
   >;
+  isLoading: boolean;
 }
 
 const COLORS = [
@@ -146,6 +148,7 @@ export function ProgramRequirementsChart({
   programs,
   userCourses,
   courses,
+  isLoading,
 }: ProgramRequirementsChartProps) {
   const [showCompletion, setShowCompletion] = useState(false);
   const [hasAnimated, setHasAnimated] = useState(false);
@@ -308,7 +311,7 @@ export function ProgramRequirementsChart({
     }
   }, [pieChartData, hasAnimated]);
 
-  if (program === undefined) {
+  if (isLoading) {
     return (
       <Card>
         <CardHeader>
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 8f80cc23..6a950ace 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -63,11 +63,18 @@ const HomePage = () => {
 
   const courses = useQueries(courseQueries);
 
+  const isProgramsLoading = 
+    !isAuthenticated ||
+    student === undefined ||
+    Object.keys(programs).length === 0 || 
+    Object.values(programs).some(p => p === undefined)
+
   return (
     <ProgramRequirementsChart
       programs={programs}
       userCourses={userCourses}
       courses={courses}
+      isLoading={isProgramsLoading}
     />
   );
 };

From 90216863e02869728c9ac0053a1b45f4bda45d52 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Fri, 14 Nov 2025 16:42:38 -0500
Subject: [PATCH 46/54] biome lint fixes

---
 .../src/app/dashboard/components/degree-charts.tsx  |  1 -
 apps/web/src/app/dashboard/page.tsx                 | 13 ++++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
index dd4aafbe..84dfd0ab 100644
--- a/apps/web/src/app/dashboard/components/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/degree-charts.tsx
@@ -20,7 +20,6 @@ import {
 } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { Spinner } from "@/components/ui/spinner";
 
 interface ProgramRequirementsChartProps {
   programs: Record<
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index 6a950ace..e408c649 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -7,8 +7,8 @@ import {
   useQueries,
   useQuery,
 } from "convex/react";
+import type { FunctionReturnType } from "convex/server";
 import { ProgramRequirementsChart } from "@/app/dashboard/components/degree-charts";
-import { FunctionReturnType } from "convex/server";
 
 const HomePage = () => {
   const { isAuthenticated } = useConvexAuth();
@@ -43,7 +43,10 @@ const HomePage = () => {
   for (const [_, programData] of Object.entries(programs)) {
     if (programData?.requirements) {
       for (const requirement of programData.requirements) {
-        if (requirement.type === "required" || requirement.type === "alternative") {
+        if (
+          requirement.type === "required" ||
+          requirement.type === "alternative"
+        ) {
           for (const courseCode of requirement.courses) {
             allCourseCodes.add(courseCode);
           }
@@ -63,11 +66,11 @@ const HomePage = () => {
 
   const courses = useQueries(courseQueries);
 
-  const isProgramsLoading = 
+  const isProgramsLoading =
     !isAuthenticated ||
     student === undefined ||
-    Object.keys(programs).length === 0 || 
-    Object.values(programs).some(p => p === undefined)
+    Object.keys(programs).length === 0 ||
+    Object.values(programs).some((p) => p === undefined);
 
   return (
     <ProgramRequirementsChart

From 307c3b26b319ea5787cd7745b44cd053bf57f65f Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Fri, 14 Nov 2025 17:01:00 -0500
Subject: [PATCH 47/54] hard coded map of course codes to programs

---
 .../dashboard/components/degree-charts.tsx    |  8 +++---
 apps/web/src/lib/department-names.ts          | 27 +++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/lib/department-names.ts

diff --git a/apps/web/src/app/dashboard/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
index 84dfd0ab..437699b9 100644
--- a/apps/web/src/app/dashboard/components/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/degree-charts.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { getDepartmentName } from "@/lib/department-names";
 
 interface ProgramRequirementsChartProps {
   programs: Record<
@@ -255,7 +256,7 @@ export function ProgramRequirementsChart({
     if (!showCompletion) {
       // Default view: just total credits per category
       return chartData.map((item, index) => ({
-        name: item.category,
+        name: getDepartmentName(item.category),
         value: item.credits,
         fill: COLORS[index % COLORS.length],
       }));
@@ -271,11 +272,12 @@ export function ProgramRequirementsChart({
 
       chartData.forEach((item, index) => {
         const baseColor = COLORS[index % COLORS.length];
+        const departmentName = getDepartmentName(item.category);
 
         // Add completed portion (darker - original color)
         if (item.completedCredits > 0) {
           splitData.push({
-            name: `${item.category} (Completed)`,
+            name: `${departmentName} (Completed)`,
             value: item.completedCredits,
             fill: baseColor,
             isCompleted: true,
@@ -286,7 +288,7 @@ export function ProgramRequirementsChart({
         // Add remaining portion (lighter shade)
         if (item.remainingCredits > 0) {
           splitData.push({
-            name: `${item.category} (Remaining)`,
+            name: `${departmentName} (Remaining)`,
             value: item.remainingCredits,
             fill: lightenColor(baseColor),
             isCompleted: false,
diff --git a/apps/web/src/lib/department-names.ts b/apps/web/src/lib/department-names.ts
new file mode 100644
index 00000000..1ac35931
--- /dev/null
+++ b/apps/web/src/lib/department-names.ts
@@ -0,0 +1,27 @@
+// TODO: add in the rest of the departments
+export const DEPARTMENT_NAMES: Record<string, string> = {
+  "CSCI-UA": "Computer Science",
+  "MATH-UA": "Mathematics",
+  "DSGA-UA": "Data Science",
+  "WRIT-UA": "Writing",
+  "PSYCH-UA": "Psychology",
+  "HIST-UA": "History",
+  "CORE-UA": "Core Curriculum",
+  "ECON-UA": "Economics",
+  "PHIL-UA": "Philosophy",
+  "PHYS-UA": "Physics",
+  "CHEM-UA": "Chemistry",
+  "BIOL-UA": "Biology",
+  "ENGL-UA": "English",
+  "POLI-UA": "Political Science",
+  "SOCI-UA": "Sociology",
+} as const;
+
+/**
+ * Gets the display name for a course prefix
+ * @param prefix - The course prefix (e.g., "CSCI-UA", "MATH-UA")
+ * @returns The full department name, or the prefix itself if not found
+ */
+export function getDepartmentName(prefix: string): string {
+  return DEPARTMENT_NAMES[prefix] ?? prefix;
+}

From ba4f015f1d3379558f9794eb424ed42a97ad1fb5 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Mon, 17 Nov 2025 10:19:24 -0500
Subject: [PATCH 48/54] updated fetching of programName for categories

---
 .../dashboard/components/degree-charts.tsx    | 32 +++++++++++--------
 apps/web/src/lib/department-names.ts          | 27 ----------------
 2 files changed, 18 insertions(+), 41 deletions(-)
 delete mode 100644 apps/web/src/lib/department-names.ts

diff --git a/apps/web/src/app/dashboard/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
index 437699b9..13b4429f 100644
--- a/apps/web/src/app/dashboard/components/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/degree-charts.tsx
@@ -20,7 +20,6 @@ import {
 } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { getDepartmentName } from "@/lib/department-names";
 
 interface ProgramRequirementsChartProps {
   programs: Record<
@@ -89,7 +88,7 @@ const getRequirementsByCategory = (
   // Calculate total credits for each category
   const groupedRequirements: Record<
     string,
-    { credits: number; courses: string[][] }
+    { credits: number; courses: string[][]; displayName: string }
   > = {};
 
   // FIXME: currently no merging of programs if more than one listed (dual degree), assumes only one program for now
@@ -108,15 +107,18 @@ const getRequirementsByCategory = (
       if (uniquePrefixes.length === 1) {
         // All same prefix - assign all credits to that one prefix
         const prefix = uniquePrefixes[0];
-        if (!groupedRequirements[prefix]) {
-          groupedRequirements[prefix] = { credits: 0, courses: [] };
+        const displayName = courseLookup.get(courses[0])?.programName || "Other";
+        const key = displayName === "Other" ? "Other" : prefix;
+        if (!groupedRequirements[key]) {
+          groupedRequirements[key] = { credits: 0, courses: [], displayName: displayName };
         }
-        groupedRequirements[prefix].credits += requirement.creditsRequired;
-        groupedRequirements[prefix].courses.push(courses);
+        groupedRequirements[key].credits += requirement.creditsRequired;
+        groupedRequirements[key].courses.push(courses);
+        groupedRequirements[key].displayName = displayName;
       } else {
         // Mixed prefixes - assign to "Other" category
         if (!groupedRequirements.Other) {
-          groupedRequirements.Other = { credits: 0, courses: [] };
+          groupedRequirements.Other = { credits: 0, courses: [], displayName: "Other" };
         }
         groupedRequirements.Other.credits += requirement.creditsRequired;
         groupedRequirements.Other.courses.push(courses);
@@ -126,14 +128,16 @@ const getRequirementsByCategory = (
     else {
       for (const courseCode of courses) {
         const prefix = courseCode.split(" ")[0];
+        const displayName = courseLookup.get(courseCode)?.programName || "Other";
+        const key = displayName === "Other" ? "Other" : prefix;
         const course = courseLookup.get(courseCode);
         const credits = course?.credits ?? 4; // fallback to 4 credits if not found
 
-        if (!groupedRequirements[prefix]) {
-          groupedRequirements[prefix] = { credits: 0, courses: [] };
+        if (!groupedRequirements[key]) {
+          groupedRequirements[key] = { credits: 0, courses: [], displayName: displayName };
         }
-        groupedRequirements[prefix].credits += credits;
-        groupedRequirements[prefix].courses.push([courseCode]);
+        groupedRequirements[key].credits += credits;
+        groupedRequirements[key].courses.push([courseCode]);
       }
     }
   }
@@ -215,7 +219,7 @@ export function ProgramRequirementsChart({
           const percentage =
             data.credits > 0 ? Math.round((completed / data.credits) * 100) : 0;
           return {
-            category: prefix,
+            category: data.displayName,
             credits: data.credits,
             completedCredits: completed,
             remainingCredits: data.credits - completed,
@@ -256,7 +260,7 @@ export function ProgramRequirementsChart({
     if (!showCompletion) {
       // Default view: just total credits per category
       return chartData.map((item, index) => ({
-        name: getDepartmentName(item.category),
+        name: item.category,
         value: item.credits,
         fill: COLORS[index % COLORS.length],
       }));
@@ -272,7 +276,7 @@ export function ProgramRequirementsChart({
 
       chartData.forEach((item, index) => {
         const baseColor = COLORS[index % COLORS.length];
-        const departmentName = getDepartmentName(item.category);
+        const departmentName = item.category;
 
         // Add completed portion (darker - original color)
         if (item.completedCredits > 0) {
diff --git a/apps/web/src/lib/department-names.ts b/apps/web/src/lib/department-names.ts
deleted file mode 100644
index 1ac35931..00000000
--- a/apps/web/src/lib/department-names.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// TODO: add in the rest of the departments
-export const DEPARTMENT_NAMES: Record<string, string> = {
-  "CSCI-UA": "Computer Science",
-  "MATH-UA": "Mathematics",
-  "DSGA-UA": "Data Science",
-  "WRIT-UA": "Writing",
-  "PSYCH-UA": "Psychology",
-  "HIST-UA": "History",
-  "CORE-UA": "Core Curriculum",
-  "ECON-UA": "Economics",
-  "PHIL-UA": "Philosophy",
-  "PHYS-UA": "Physics",
-  "CHEM-UA": "Chemistry",
-  "BIOL-UA": "Biology",
-  "ENGL-UA": "English",
-  "POLI-UA": "Political Science",
-  "SOCI-UA": "Sociology",
-} as const;
-
-/**
- * Gets the display name for a course prefix
- * @param prefix - The course prefix (e.g., "CSCI-UA", "MATH-UA")
- * @returns The full department name, or the prefix itself if not found
- */
-export function getDepartmentName(prefix: string): string {
-  return DEPARTMENT_NAMES[prefix] ?? prefix;
-}

From cdb27196cad10a891ed77aa0ea806197d93fccb4 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Mon, 17 Nov 2025 10:20:42 -0500
Subject: [PATCH 49/54] biome

---
 .../dashboard/components/degree-charts.tsx    | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
index 13b4429f..a95a0d3b 100644
--- a/apps/web/src/app/dashboard/components/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/degree-charts.tsx
@@ -107,10 +107,15 @@ const getRequirementsByCategory = (
       if (uniquePrefixes.length === 1) {
         // All same prefix - assign all credits to that one prefix
         const prefix = uniquePrefixes[0];
-        const displayName = courseLookup.get(courses[0])?.programName || "Other";
+        const displayName =
+          courseLookup.get(courses[0])?.programName || "Other";
         const key = displayName === "Other" ? "Other" : prefix;
         if (!groupedRequirements[key]) {
-          groupedRequirements[key] = { credits: 0, courses: [], displayName: displayName };
+          groupedRequirements[key] = {
+            credits: 0,
+            courses: [],
+            displayName: displayName,
+          };
         }
         groupedRequirements[key].credits += requirement.creditsRequired;
         groupedRequirements[key].courses.push(courses);
@@ -118,7 +123,11 @@ const getRequirementsByCategory = (
       } else {
         // Mixed prefixes - assign to "Other" category
         if (!groupedRequirements.Other) {
-          groupedRequirements.Other = { credits: 0, courses: [], displayName: "Other" };
+          groupedRequirements.Other = {
+            credits: 0,
+            courses: [],
+            displayName: "Other",
+          };
         }
         groupedRequirements.Other.credits += requirement.creditsRequired;
         groupedRequirements.Other.courses.push(courses);
@@ -128,13 +137,18 @@ const getRequirementsByCategory = (
     else {
       for (const courseCode of courses) {
         const prefix = courseCode.split(" ")[0];
-        const displayName = courseLookup.get(courseCode)?.programName || "Other";
+        const displayName =
+          courseLookup.get(courseCode)?.programName || "Other";
         const key = displayName === "Other" ? "Other" : prefix;
         const course = courseLookup.get(courseCode);
         const credits = course?.credits ?? 4; // fallback to 4 credits if not found
 
         if (!groupedRequirements[key]) {
-          groupedRequirements[key] = { credits: 0, courses: [], displayName: displayName };
+          groupedRequirements[key] = {
+            credits: 0,
+            courses: [],
+            displayName: displayName,
+          };
         }
         groupedRequirements[key].credits += credits;
         groupedRequirements[key].courses.push([courseCode]);

From 8485d617c2217b443ae07ba5537b72d797ec6c6a Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Mon, 17 Nov 2025 10:29:43 -0500
Subject: [PATCH 50/54] improved user course lookup efficiency

---
 .../dashboard/components/degree-charts.tsx    | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
index a95a0d3b..43f13b84 100644
--- a/apps/web/src/app/dashboard/components/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/degree-charts.tsx
@@ -119,7 +119,6 @@ const getRequirementsByCategory = (
         }
         groupedRequirements[key].credits += requirement.creditsRequired;
         groupedRequirements[key].courses.push(courses);
-        groupedRequirements[key].displayName = displayName;
       } else {
         // Mixed prefixes - assign to "Other" category
         if (!groupedRequirements.Other) {
@@ -137,10 +136,9 @@ const getRequirementsByCategory = (
     else {
       for (const courseCode of courses) {
         const prefix = courseCode.split(" ")[0];
-        const displayName =
-          courseLookup.get(courseCode)?.programName || "Other";
-        const key = displayName === "Other" ? "Other" : prefix;
         const course = courseLookup.get(courseCode);
+        const displayName = course?.programName || "Other";
+        const key = displayName === "Other" ? "Other" : prefix;
         const credits = course?.credits ?? 4; // fallback to 4 credits if not found
 
         if (!groupedRequirements[key]) {
@@ -202,26 +200,27 @@ export function ProgramRequirementsChart({
         };
       }
 
+      const courseToCategory = new Map<string, string>();
+      for (const [prefix, data] of Object.entries(
+        program.requirementsByCategory,
+      )) {
+        for (const courseGroup of data.courses) {
+          for (const course of courseGroup) {
+            courseToCategory.set(course.toLowerCase(), prefix);
+          }
+        }
+      }
+
       const completedCreditsByCategory: Record<string, number> = {};
       if (userCourses) {
         for (const userCourse of userCourses) {
-          for (const [prefix, data] of Object.entries(
-            program.requirementsByCategory,
-          )) {
-            // Check if the course code is in any of the nested course arrays
-            const isInRequirement = data.courses.some((courseGroup) =>
-              courseGroup.some(
-                (course) =>
-                  course.toLowerCase() === userCourse.courseCode.toLowerCase(),
-              ),
-            );
-
-            if (isInRequirement) {
-              completedCreditsByCategory[prefix] =
-                (completedCreditsByCategory[prefix] || 0) +
-                (userCourse.course?.credits || 0);
-              break;
-            }
+          const category = courseToCategory.get(
+            userCourse.courseCode.toLowerCase(),
+          );
+          if (category) {
+            completedCreditsByCategory[category] =
+              (completedCreditsByCategory[category] || 0) +
+              (userCourse.course?.credits || 0);
           }
         }
       }

From b62074d878be11b84ffebe93591c3413d0995ab0 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Fri, 5 Dec 2025 21:29:29 -0500
Subject: [PATCH 51/54] add recharts to dependency

---
 apps/web/package.json |  1 +
 bun.lock              | 69 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/apps/web/package.json b/apps/web/package.json
index 8e2e7a2a..db628d11 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -47,6 +47,7 @@
     "react": "19.2.1",
     "react-day-picker": "^9.11.3",
     "react-dom": "19.2.1",
+    "recharts": "^3.5.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.1.13"
diff --git a/bun.lock b/bun.lock
index 3c671aec..566d8b2e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -101,6 +101,7 @@
         "react": "19.2.1",
         "react-day-picker": "^9.11.3",
         "react-dom": "19.2.1",
+        "recharts": "^3.5.1",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "zod": "^4.1.13",
@@ -896,6 +897,8 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.0", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-hBjYg0aaRL1O2Z0IqWhnTLytnjDIxekmRxm1snsHjHaKVmIF1HiImWqsq+PuEbn6zdMlkIj9WofK1vR8jjx+Xw=="],
+
     "@remixicon/react": ["@remixicon/react@4.7.0", "", { "peerDependencies": { "react": ">=18.2.0" } }, "sha512-ODBQjdbOjnFguCqctYkpDjERXOInNaBnRPDKfZOBvbzExBAwr2BaH/6AHFTg/UAFzBDkwtylfMT8iKPAkLwPLQ=="],
 
     "@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
@@ -974,6 +977,8 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
 
+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
+
     "@stripe/stripe-js": ["@stripe/stripe-js@5.6.0", "", {}, "sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw=="],
 
     "@svgr/babel-plugin-add-jsx-attribute": ["@svgr/babel-plugin-add-jsx-attribute@6.5.1", "", { "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ=="],
@@ -1096,6 +1101,24 @@
 
     "@types/chrome": ["@types/chrome@0.1.32", "", { "dependencies": { "@types/filesystem": "*", "@types/har-format": "*" } }, "sha512-n5Cqlh7zyAqRLQWLXkeV5K/1BgDZdVcO/dJSTa8x+7w+sx7m73UrDmduAptg4KorMtyTW2TNnPu8RGeaDMKNGg=="],
 
+    "@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
+
+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
+
+    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
+
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
+
+    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
+
+    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
+
+    "@types/d3-shape": ["@types/d3-shape@3.1.7", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg=="],
+
+    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
+
+    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
+
     "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
@@ -1140,6 +1163,8 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
+
     "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
 
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
@@ -1374,6 +1399,28 @@
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
+
+    "d3-format": ["d3-format@3.1.0", "", {}, "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
+
+    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
+
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
+
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
+
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
 
     "date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
@@ -1382,6 +1429,8 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decode-named-character-reference": ["decode-named-character-reference@1.2.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q=="],
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
@@ -1460,6 +1509,8 @@
 
     "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
 
+    "es-toolkit": ["es-toolkit@1.42.0", "", {}, "sha512-SLHIyY7VfDJBM8clz4+T2oquwTQxEzu263AyhVK4jREOAwJ+8eebaa4wM3nlvnAqhDrMm2EsA6hWHaQsMPQ1nA=="],
+
     "esast-util-from-estree": ["esast-util-from-estree@2.0.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "unist-util-position-from-estree": "^2.0.0" } }, "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ=="],
 
     "esast-util-from-js": ["esast-util-from-js@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "acorn": "^8.0.0", "esast-util-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw=="],
@@ -1664,6 +1715,8 @@
 
     "inquirer": ["inquirer@12.5.0", "", { "dependencies": { "@inquirer/core": "^10.1.9", "@inquirer/prompts": "^7.4.0", "@inquirer/type": "^3.0.5", "ansi-escapes": "^4.3.2", "mute-stream": "^2.0.0", "run-async": "^3.0.0", "rxjs": "^7.8.2" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-aiBBq5aKF1k87MTxXDylLfwpRwToShiHrSv4EmB07EYyLgmnjEz5B3rn0aGw1X3JA/64Ngf2T54oGwc+BCsPIQ=="],
 
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
+
     "iron-webcrypto": ["iron-webcrypto@1.2.1", "", {}, "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg=="],
 
     "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
@@ -2130,6 +2183,8 @@
 
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
+
     "react-refresh": ["react-refresh@0.9.0", "", {}, "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.1", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA=="],
@@ -2142,6 +2197,8 @@
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
+    "recharts": ["recharts@3.5.1", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-+v+HJojK7gnEgG6h+b2u7k8HH7FhyFUzAc4+cPrsjL4Otdgqr/ecXzAnHciqlzV1ko064eNcsdzrYOM78kankA=="],
+
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
 
     "recma-jsx": ["recma-jsx@1.0.1", "", { "dependencies": { "acorn-jsx": "^5.0.0", "estree-util-to-js": "^2.0.0", "recma-parse": "^1.0.0", "recma-stringify": "^1.0.0", "unified": "^11.0.0" }, "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w=="],
@@ -2150,6 +2207,10 @@
 
     "recma-stringify": ["recma-stringify@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-to-js": "^2.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g=="],
 
+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
+
+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
+
     "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
 
     "regex": ["regex@6.0.1", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA=="],
@@ -2190,6 +2251,8 @@
 
     "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
 
+    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
+
     "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
 
     "resolve-alpn": ["resolve-alpn@1.2.1", "", {}, "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="],
@@ -2332,6 +2395,8 @@
 
     "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
 
+    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
+
     "tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="],
 
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
@@ -2442,6 +2507,8 @@
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
+
     "viem": ["viem@2.38.6", "", { "dependencies": { "@noble/curves": "1.9.1", "@noble/hashes": "1.8.0", "@scure/bip32": "1.7.0", "@scure/bip39": "1.6.0", "abitype": "1.1.0", "isows": "1.0.7", "ox": "0.9.6", "ws": "8.18.3" }, "peerDependencies": { "typescript": ">=5.0.4" }, "optionalPeers": ["typescript"] }, "sha512-aqO6P52LPXRjdnP6rl5Buab65sYa4cZ6Cpn+k4OLOzVJhGIK8onTVoKMFMT04YjDfyDICa/DZyV9HmvLDgcjkw=="],
 
     "vite": ["vite@6.4.1", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g=="],
@@ -2776,6 +2843,8 @@
 
     "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
+    "@reduxjs/toolkit/immer": ["immer@11.0.1", "", {}, "sha512-naDCyggtcBWANtIrjQEajhhBEuL9b0Zg4zmlWK2CzS6xCWSE39/vvf4LqnMjUAWHBhot4m9MHCM/Z+mfWhUkiA=="],
+
     "@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
     "@scure/bip32/@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],

From 23fc2d4ed3e8a464408f75662816bc35a6240019 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Sun, 7 Dec 2025 11:18:13 -0500
Subject: [PATCH 52/54] fixed so that query only passes in id not the entire
 program obj

---
 apps/web/src/app/dashboard/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index e408c649..1494b460 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -25,10 +25,10 @@ const HomePage = () => {
   const programQueries: RequestForQueries = {};
 
   if (isAuthenticated && student) {
-    for (const programId of student.programs) {
-      programQueries[programId] = {
+    for (const program of student.programs) {
+      programQueries[program._id] = {
         query: api.programs.getProgramById,
-        args: { id: programId },
+        args: { id: program._id },
       };
     }
   }

From 16edfa31d8c45d4417d040bf3da7cfcf9fd95828 Mon Sep 17 00:00:00 2001
From: Chenxin Yan <yanchenxin2004@gmail.com>
Date: Wed, 10 Dec 2025 16:12:38 -0500
Subject: [PATCH 53/54] fix rechart error

---
 apps/web/package.json |  4 ++--
 bun.lock              | 56 ++++++++++++++++++++++++-------------------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 417fc857..82da57e1 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -39,7 +39,7 @@
     "convex": "^1.29.3",
     "date-fns": "^4.1.0",
     "framer-motion": "^12.23.24",
-    "lucide-react": "^0.555.0",
+    "lucide-react": "^0.559.0",
     "next": "16.0.5",
     "next-themes": "^0.4.6",
     "pdfjs-dist": "^5.4.449",
@@ -47,8 +47,8 @@
     "react": "19.2.1",
     "react-day-picker": "^9.11.3",
     "react-dom": "19.2.1",
-    "recharts": "^3.5.1",
     "react-draggable": "^4.5.0",
+    "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.1.13"
diff --git a/bun.lock b/bun.lock
index 13698186..cc3bbd57 100644
--- a/bun.lock
+++ b/bun.lock
@@ -93,7 +93,7 @@
         "convex": "^1.29.3",
         "date-fns": "^4.1.0",
         "framer-motion": "^12.23.24",
-        "lucide-react": "^0.555.0",
+        "lucide-react": "^0.559.0",
         "next": "16.0.5",
         "next-themes": "^0.4.6",
         "pdfjs-dist": "^5.4.449",
@@ -101,8 +101,8 @@
         "react": "19.2.1",
         "react-day-picker": "^9.11.3",
         "react-dom": "19.2.1",
-        "recharts": "^3.5.1",
         "react-draggable": "^4.5.0",
+        "recharts": "2.15.4",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "zod": "^4.1.13",
@@ -894,8 +894,6 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
-    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.0", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-hBjYg0aaRL1O2Z0IqWhnTLytnjDIxekmRxm1snsHjHaKVmIF1HiImWqsq+PuEbn6zdMlkIj9WofK1vR8jjx+Xw=="],
-
     "@remixicon/react": ["@remixicon/react@4.7.0", "", { "peerDependencies": { "react": ">=18.2.0" } }, "sha512-ODBQjdbOjnFguCqctYkpDjERXOInNaBnRPDKfZOBvbzExBAwr2BaH/6AHFTg/UAFzBDkwtylfMT8iKPAkLwPLQ=="],
 
     "@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
@@ -974,8 +972,6 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
 
-    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
-
     "@stripe/stripe-js": ["@stripe/stripe-js@5.6.0", "", {}, "sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw=="],
 
     "@svgr/babel-plugin-add-jsx-attribute": ["@svgr/babel-plugin-add-jsx-attribute@6.5.1", "", { "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ=="],
@@ -1160,8 +1156,6 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
-    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
-
     "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
 
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
@@ -1464,6 +1458,8 @@
 
     "docs": ["docs@workspace:apps/docs"],
 
+    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
+
     "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
 
     "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
@@ -1500,8 +1496,6 @@
 
     "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
 
-    "es-toolkit": ["es-toolkit@1.42.0", "", {}, "sha512-SLHIyY7VfDJBM8clz4+T2oquwTQxEzu263AyhVK4jREOAwJ+8eebaa4wM3nlvnAqhDrMm2EsA6hWHaQsMPQ1nA=="],
-
     "esast-util-from-estree": ["esast-util-from-estree@2.0.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "unist-util-position-from-estree": "^2.0.0" } }, "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ=="],
 
     "esast-util-from-js": ["esast-util-from-js@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "acorn": "^8.0.0", "esast-util-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw=="],
@@ -1528,7 +1522,7 @@
 
     "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
-    "eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
 
     "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
 
@@ -1542,6 +1536,8 @@
 
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
+    "fast-equals": ["fast-equals@5.3.3", "", {}, "sha512-/boTcHZeIAQ2r/tL11voclBHDeP9WPxLt+tyAbVSyyXuUFyh0Tne7gJZTqGbxnvj79TjLdCXLOY7UIPhyG5MTw=="],
+
     "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
 
     "fast-sha256": ["fast-sha256@1.3.0", "", {}, "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ=="],
@@ -1834,7 +1830,7 @@
 
     "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
-    "lucide-react": ["lucide-react@0.555.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA=="],
+    "lucide-react": ["lucide-react@0.559.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-3ymrkBPXWk3U2bwUDg6TdA6hP5iGDMgPEAMLhchEgTQmA+g0Zk24tOtKtXMx35w1PizTmsBC3RhP88QYm+7mHQ=="],
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
@@ -2164,9 +2160,7 @@
 
     "react-error-overlay": ["react-error-overlay@6.0.9", "", {}, "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="],
 
-    "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
+    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
     "react-refresh": ["react-refresh@0.9.0", "", {}, "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ=="],
 
@@ -2174,13 +2168,19 @@
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
+    "react-smooth": ["react-smooth@4.0.4", "", { "dependencies": { "fast-equals": "^5.0.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q=="],
+
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
+    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
+
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
-    "recharts": ["recharts@3.5.1", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-+v+HJojK7gnEgG6h+b2u7k8HH7FhyFUzAc4+cPrsjL4Otdgqr/ecXzAnHciqlzV1ko064eNcsdzrYOM78kankA=="],
+    "recharts": ["recharts@2.15.4", "", { "dependencies": { "clsx": "^2.0.0", "eventemitter3": "^4.0.1", "lodash": "^4.17.21", "react-is": "^18.3.1", "react-smooth": "^4.0.4", "recharts-scale": "^0.4.4", "tiny-invariant": "^1.3.1", "victory-vendor": "^36.6.8" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw=="],
+
+    "recharts-scale": ["recharts-scale@0.4.5", "", { "dependencies": { "decimal.js-light": "^2.4.1" } }, "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w=="],
 
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
 
@@ -2190,10 +2190,6 @@
 
     "recma-stringify": ["recma-stringify@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-to-js": "^2.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g=="],
 
-    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
-
-    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
-
     "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
 
     "regex": ["regex@6.0.1", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA=="],
@@ -2234,8 +2230,6 @@
 
     "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
 
-    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
-
     "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
 
     "resolve-alpn": ["resolve-alpn@1.2.1", "", {}, "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="],
@@ -2486,7 +2480,7 @@
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
-    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
+    "victory-vendor": ["victory-vendor@36.9.2", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ=="],
 
     "viem": ["viem@2.40.3", "", { "dependencies": { "@noble/curves": "1.9.1", "@noble/hashes": "1.8.0", "@scure/bip32": "1.7.0", "@scure/bip39": "1.6.0", "abitype": "1.1.0", "isows": "1.0.7", "ox": "0.9.6", "ws": "8.18.3" }, "peerDependencies": { "typescript": ">=5.0.4" }, "optionalPeers": ["typescript"] }, "sha512-feYfEpbgjRkZYQpwcgxqkWzjxHI5LSDAjcGetHHwDRuX9BRQHUdV8ohrCosCYpdEhus/RknD3/bOd4qLYVPPuA=="],
 
@@ -2566,6 +2560,8 @@
 
     "@base-org/account/clsx": ["clsx@1.2.1", "", {}, "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="],
 
+    "@base-org/account/eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+
     "@clerk/backend/@clerk/shared": ["@clerk/shared@3.36.0", "", { "dependencies": { "csstype": "3.1.3", "dequal": "2.0.3", "glob-to-regexp": "0.4.1", "js-cookie": "3.0.5", "std-env": "^3.9.0", "swr": "2.3.4" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-Yp4tL/x/iVft40DnxBjT/g/kQilZ+i9mYrqC1Lk6fUnfZV8t7E54GX19JtJSSONzjHsH6sCv3BmJaF1f7Eomkw=="],
 
     "@clerk/backend/cookie": ["cookie@1.0.2", "", {}, "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="],
@@ -2586,6 +2582,8 @@
 
     "@coinbase/wallet-sdk/clsx": ["clsx@1.2.1", "", {}, "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="],
 
+    "@coinbase/wallet-sdk/eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+
     "@cspotcode/source-map-support/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
 
     "@emotion/babel-plugin/@emotion/memoize": ["@emotion/memoize@0.9.0", "", {}, "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="],
@@ -2812,8 +2810,6 @@
 
     "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@reduxjs/toolkit/immer": ["immer@11.0.1", "", {}, "sha512-naDCyggtcBWANtIrjQEajhhBEuL9b0Zg4zmlWK2CzS6xCWSE39/vvf4LqnMjUAWHBhot4m9MHCM/Z+mfWhUkiA=="],
-
     "@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
     "@scure/bip32/@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
@@ -2894,6 +2890,8 @@
 
     "hast-util-to-parse5/property-information": ["property-information@6.5.0", "", {}, "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig=="],
 
+    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
     "htmlnano/cosmiconfig": ["cosmiconfig@9.0.0", "", { "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", "parse-json": "^5.2.0" }, "peerDependencies": { "typescript": ">=4.9.5" }, "optionalPeers": ["typescript"] }, "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg=="],
 
     "htmlparser2/domhandler": ["domhandler@4.3.1", "", { "dependencies": { "domelementtype": "^2.2.0" } }, "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ=="],
@@ -2934,6 +2932,10 @@
 
     "ox/@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
 
+    "ox/eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+
+    "p-queue/eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+
     "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
 
     "plasmo/dotenv": ["dotenv@16.4.7", "", {}, "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ=="],
@@ -2948,6 +2950,8 @@
 
     "posthtml/posthtml-parser": ["posthtml-parser@0.11.0", "", { "dependencies": { "htmlparser2": "^7.1.1" } }, "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw=="],
 
+    "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
     "radix-ui/@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.10", "", { "dependencies": { "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog=="],
 
     "radix-ui/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
@@ -3344,6 +3348,8 @@
 
     "viem/ox/abitype": ["abitype@1.2.0", "", { "peerDependencies": { "typescript": ">=5.0.4", "zod": "^3.22.0 || ^4.0.0" }, "optionalPeers": ["typescript", "zod"] }, "sha512-fD3ROjckUrWsybaSor2AdWxzA0e/DSyV2dA4aYd7bd8orHsoJjl09fOgKfUkTDfk0BsDGBf4NBgu/c7JoS2Npw=="],
 
+    "viem/ox/eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+
     "web/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
     "wrangler/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.0", "", { "os": "aix", "cpu": "ppc64" }, "sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A=="],

From d1676d0de807fab3ef774e2f98cddbb51ce3a849 Mon Sep 17 00:00:00 2001
From: Michael Wang <mzw2010@nyu.edu>
Date: Wed, 10 Dec 2025 18:10:18 -0500
Subject: [PATCH 54/54] ui fixes to chart

---
 .../src/app/dashboard/components/degree-charts.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/dashboard/components/degree-charts.tsx b/apps/web/src/app/dashboard/components/degree-charts.tsx
index 43f13b84..623947f3 100644
--- a/apps/web/src/app/dashboard/components/degree-charts.tsx
+++ b/apps/web/src/app/dashboard/components/degree-charts.tsx
@@ -382,14 +382,14 @@ export function ProgramRequirementsChart({
       </CardHeader>
       <CardContent>
         <div className="flex justify-center relative">
-          <ResponsiveContainer width="100%" height={400}>
+          <ResponsiveContainer width="100%" height={450}>
             <PieChart>
               <Pie
                 data={pieChartData}
                 dataKey="value"
                 nameKey="name"
                 cx="50%"
-                cy="50%"
+                cy="45%"
                 innerRadius={90}
                 outerRadius={130}
                 isAnimationActive={!hasAnimated}
@@ -400,8 +400,8 @@ export function ProgramRequirementsChart({
               </Pie>
               <text
                 x="50%"
-                y="50%"
-                dy="-15"
+                y="36%"
+                dy="0"
                 textAnchor="middle"
                 dominantBaseline="middle"
                 className="fill-foreground font-bold"
@@ -413,8 +413,8 @@ export function ProgramRequirementsChart({
               </text>
               <text
                 x="50%"
-                y="50%"
-                dy="25"
+                y="36%"
+                dy="35"
                 textAnchor="middle"
                 dominantBaseline="middle"
                 className="fill-muted-foreground"
@@ -445,7 +445,7 @@ export function ProgramRequirementsChart({
                   return null;
                 }}
               />
-              <Legend />
+              <Legend verticalAlign="bottom" height={80} />
             </PieChart>
           </ResponsiveContainer>
         </div>