Phase 7: Real data for GPA / Credit-Hour cards (#186)

* Dashboard: wire GPA/Credit-Hour cards to real scraped audit data

The scraper already stores the GPA Totals and Credit Hour Totals
sections; only the last render step was faked (cleanup plan Phase 7).

- Move parseGpaSummary out of degree-audit-page.tsx into
  audit-calculations.ts as pure business logic, and unit-test it —
  including the real snapshot's GPA sentence, which carries no
  "hours … points" and so returns null.

- Credit card: derive from the scraped Credit Hour Totals section
  (isCreditSection), mapping each rule to { status, text } and rendering
  only when non-empty. Render the scraped sentence directly instead of
  the fragile "{hours} of {description}" template. CreditRequirement is
  now { status: Status; text: string }; both hardcoded 21/36 arrays are
  gone. Status passes through all three values so in-progress
  requirements display honestly (green check / blue dash / x).

- GPA card: drop the fabricated default props; footer prop is now
  summary: GpaSummary | null and the sentence renders only when non-null
  (no more "0 hours … 0 points" on real audits).

- Delete the local RequirementStatusIcon met-boolean wrapper (it
  name-collided with a different component in requirement-breakdown) and
  call FramedStatusIcon directly via a Status -> state map.

* remove test

Author: spotta85

features/audit/audit-calculations.ts

@@ -17,6 +17,29 @@ export const isCreditSection = (title: string): boolean =>
 export const isGpaSection = (title: string): boolean =>
   title.toLowerCase().includes("gpa");
 
+export interface GpaSummary {
+  hoursUsed: number;
+  points: number;
+}
+
+/**
+ * Extract the "X hours … Y points" figures from a GPA rule's sentence, if
+ * present. Real scraped GPA text often does not carry these numbers (it states
+ * the required average instead), in which case this returns null and the UI
+ * omits the footer rather than fabricating zeros.
+ */
+export function parseGpaSummary(text: string | undefined): GpaSummary | null {
+  if (!text) return null;
+
+  const match = text.match(/(\d+(?:\.\d+)?)\s+hours.*?(\d+(?:\.\d+)?)\s+points/i);
+  if (!match) return null;
+
+  return {
+    hoursUsed: Number(match[1]),
+    points: Number(match[2]),
+  };
+}
+
 // Give unnamed audits a readable fallback so the UI never shows a blank source.
 function getAuditName(
   audit: CompositeAuditData["audits"][number],

features/dashboard/degree-audit-page.tsx

@@ -2,63 +2,46 @@ import { HStack, VStack } from "@/components/ui/stack";
 import Title from "@/components/ui/text";
 import { CourseSearchPanel } from "@/features/course-search/course-search-panel";
 import { useAuditContext } from "@/features/audit/audit-provider";
-import { isGpaSection } from "@/features/audit/audit-calculations";
+import {
+  isCreditSection,
+  isGpaSection,
+  parseGpaSummary,
+} from "@/features/audit/audit-calculations";
 import { groupAuditSections } from "./section-groups";
 import DegreeSidePanel from "./degree-side-panel";
 import { CreditHourTotalsCard, GPATotalsCard } from "./gpa-credit-cards";
 import RequirementBreakdown, {
   UnifiedDegreeCard,
 } from "./requirement-breakdown";
 
-function parseGpaSummary(text: string | undefined) {
-  if (!text) {
-    return null;
-  }
-
-  const match = text.match(
-    /(\d+(?:\.\d+)?)\s+hours.*?(\d+(?:\.\d+)?)\s+points/i,
-  );
-  if (!match) {
-    return null;
-  }
-
-  return {
-    hoursUsed: Number(match[1]),
-    points: Number(match[2]),
-  };
-}
-
 const SidePanel = () => {
   const { sections } = useAuditContext();
+
   const gpaSection = sections.find((section) => isGpaSection(section.title));
   const gpaRule = gpaSection?.rules[0];
   const gpaSummary = parseGpaSummary(gpaRule?.text);
 
+  const creditSection = sections.find((section) =>
+    isCreditSection(section.title),
+  );
+  const creditRequirements = (creditSection?.rules ?? []).map((rule) => ({
+    status: rule.status,
+    text: rule.text,
+  }));
+
   return (
     <DegreeSidePanel searchPanel={<CourseSearchPanel />}>
       <VStack gap={4} className="w-sm mt-4">
         {gpaRule ? (
           <GPATotalsCard
             required={gpaRule.requiredHours}
             counted={gpaRule.appliedHours}
-            hoursUsed={gpaSummary?.hoursUsed ?? 0}
-            points={gpaSummary?.points ?? 0}
+            summary={gpaSummary}
           />
         ) : null}
-        <CreditHourTotalsCard
-          requirements={[
-            {
-              met: true,
-              hours: 21,
-              description: "upper-division coursework in residence.",
-            },
-            {
-              met: false,
-              hours: 36,
-              description: "upper-division coursework required.",
-            },
-          ]}
-        />
+        {creditRequirements.length > 0 ? (
+          <CreditHourTotalsCard requirements={creditRequirements} />
+        ) : null}
       </VStack>
     </DegreeSidePanel>
   );

features/dashboard/gpa-credit-cards.tsx

@@ -1,12 +1,19 @@
 import { HStack, VStack } from "@/components/ui/stack";
+import type { GpaSummary } from "@/features/audit/audit-calculations";
+import type { Status } from "@/domain/course";
 
 type FramedStatusIconState = "completed" | "not-started" | "in-progress";
 
+const STATUS_ICON_STATE: Record<Status, FramedStatusIconState> = {
+  Completed: "completed",
+  "In Progress": "in-progress",
+  "Not Started": "not-started",
+};
+
 type GPATotalsProps = {
   required: number;
   counted: number;
-  hoursUsed: number;
-  points: number;
+  summary: GpaSummary | null;
 };
 
 const InfoIcon = () => (
@@ -61,15 +68,10 @@ const FramedStatusIcon = ({ state }: { state: FramedStatusIconState }) => (
   </svg>
 );
 
-const RequirementStatusIcon = ({ met }: { met: boolean }) => (
-  <FramedStatusIcon state={met ? "completed" : "not-started"} />
-);
-
 export const GPATotalsCard = ({
-  required = 2.0,
-  counted = 4.0,
-  hoursUsed = 80,
-  points = 320,
+  required,
+  counted,
+  summary,
 }: GPATotalsProps) => {
   return (
     <div className="p-5 rounded-lg border border-gray-200 bg-background shadow-md">
@@ -95,50 +97,37 @@ export const GPATotalsCard = ({
         </VStack>
       </HStack>
 
-      <p className="mt-4 text-sm text-gray-600">
-        {hoursUsed} hours for a total of {points} points were used to calculate
-        the GPA.
-      </p>
+      {summary ? (
+        <p className="mt-4 text-sm text-gray-600">
+          {summary.hoursUsed} hours for a total of {summary.points} points were
+          used to calculate the GPA.
+        </p>
+      ) : null}
     </div>
   );
 };
 
-type CreditRequirement = {
-  met: boolean;
-  hours: number;
-  description: string;
+export type CreditRequirement = {
+  status: Status;
+  text: string;
 };
 
 type CreditHourTotalsProps = {
   requirements: CreditRequirement[];
 };
 
 export const CreditHourTotalsCard = ({
-  requirements = [
-    {
-      met: true,
-      hours: 21,
-      description: "hours of upper-division coursework in residence.",
-    },
-    {
-      met: false,
-      hours: 36,
-      description: "hours of upper-division coursework required.",
-    },
-  ],
+  requirements,
 }: CreditHourTotalsProps) => {
   return (
     <div className="p-5 rounded-lg border border-gray-200 bg-background shadow-md">
       <h3 className="text-xl font-bold text-text">Credit Hour Totals</h3>
 
       <VStack gap={3} className="mt-4">
-        {requirements.map((req, idx) => (
-          <HStack key={idx} gap={3} y="middle">
-            <RequirementStatusIcon met={req.met} />
-            <span className="text-sm text-gray-700">
-              <span className="font-semibold">{req.hours} hours</span> of{" "}
-              {req.description}
-            </span>
+        {requirements.map((req) => (
+          <HStack key={req.text} gap={3} y="middle">
+            <FramedStatusIcon state={STATUS_ICON_STATE[req.status]} />
+            <span className="text-sm text-gray-700">{req.text}</span>
           </HStack>
         ))}
       </VStack>