const { useState, useMemo } = React; const AREA_ICONS = { '1A': () => , '1B': () => , '1C': () => , '2': () => , '3A': () => , '3B': () => , '4': () => , '5A': () => , '5B': () => , '5C': () => , '6': () => , }; function ProgressRing({ completed, total, size = 88 }) { const stroke = 7, r = (size - stroke) / 2; const circ = 2 * Math.PI * r; const pct = total > 0 ? completed / total : 0; const done = pct === 1; return (
{completed} /{total}
); } function AreaCard({ area, selected, autoSelected, inPlan, onToggle, expanded, onToggleExpand }) { const Icon = AREA_ICONS[area.id] || AREA_ICONS['1A']; const isDone = area.id === '5C' ? autoSelected.length > 0 : selected.length >= (area.rule === 'two_disciplines' ? 2 : area.required); const isAuto = autoSelected.length > 0 && selected.length === 0; const deptGroups = useMemo(() => { const groups = {}; for (const c of area.courses) { if (!groups[c.prefix]) groups[c.prefix] = []; groups[c.prefix].push(c); } return Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0])); }, [area.courses]); const effective = [...new Set([...selected, ...autoSelected])]; if (area.id === '5C') { return (
Area {area.id}
{area.name}
{isDone ?
{autoSelected[0]} satisfies this
:
Pick a 5A or 5B course with a lab component
}
{isDone ? : }
); } return (
onToggleExpand(area.id)} style={{ cursor: 'pointer' }}>
Area {area.id}
{area.name}
{isDone ?
{effective.join(', ')}{isAuto ? ' · auto-filled' : ''}
:
{area.rule === 'two_disciplines' ? '2 courses from 2 different disciplines' : `${area.required} course required`} {` · ${area.courses.length} options`}
}
{isDone ? : } {expanded ? '▴' : '▾'}
{expanded && (
{deptGroups.map(([dept, courses]) => (
{dept}
{courses.map(c => { const isSel = selected.includes(c.key) || autoSelected.includes(c.key); const isInPlan = inPlan.has(c.key); return ( ); })}
))} {effective.length > 0 && (
Selected: {effective.map(k => ( {k} ))}
)}
)}
); } function CalGETCView({ profile, onUpdateProfile }) { const [mode, setMode] = useState(profile.calgetcMode || 'full'); const [expandedId, setExpandedId] = useState(null); const inPlan = useMemo(() => { const keys = new Set(Object.values(profile.semesters || {}).flat()); Object.keys(profile.courseStatuses || {}).forEach(k => keys.add(k)); return keys; }, [profile]); // Auto-detect from plan const autoSelections = useMemo(() => { const auto = {}; for (const area of window.MOCK_CALGETC) { if (area.id === '5C') continue; const matches = area.courses.filter(c => inPlan.has(c.key)); if (matches.length > 0) { const needed = area.rule === 'two_disciplines' ? 2 : area.required; auto[area.id] = matches.slice(0, needed).map(c => c.key); } } // 5C: auto if any 5A or 5B with is_lab const area5a = window.MOCK_CALGETC.find(a => a.id === '5A'); const area5b = window.MOCK_CALGETC.find(a => a.id === '5B'); const labCourses = [...(area5a?.courses || []), ...(area5b?.courses || [])].filter(c => c.is_lab && inPlan.has(c.key)); if (labCourses.length > 0) auto['5C'] = [labCourses[0].key]; return auto; }, [inPlan]); const selections = profile.calgetcSelections || {}; const handleToggle = (areaId, courseKey, max) => { const current = selections[areaId] || []; let next; if (current.includes(courseKey)) { next = current.filter(k => k !== courseKey); } else if (current.length < max) { next = [...current, courseKey]; } else { next = [...current.slice(1), courseKey]; } onUpdateProfile({ calgetcSelections: { ...selections, [areaId]: next } }); }; const handleAutoFill = () => { const newSel = {}; for (const [areaId, keys] of Object.entries(autoSelections)) { newSel[areaId] = keys; } onUpdateProfile({ calgetcSelections: newSel }); }; const BREADTH_AREAS = ['1A', '1B', '2', '3A', '3B', '4', '5A', '5B']; const visibleAreas = mode === 'breadth' ? window.MOCK_CALGETC.filter(a => BREADTH_AREAS.includes(a.id)) : window.MOCK_CALGETC; const completedCount = visibleAreas.filter(area => { if (area.id === '5C') return (autoSelections['5C'] || []).length > 0; const sel = [...(selections[area.id] || []), ...(autoSelections[area.id] || [])]; const unique = [...new Set(sel)]; return unique.length >= (area.rule === 'two_disciplines' ? 2 : area.required); }).length; const totalAreas = visibleAreas.length; return (

Cal-GETC Tracker

{mode === 'full' ? 'Complete all 11 areas for full GE certification' : '7-course minimum breadth pattern for UC eligibility'}

{visibleAreas.map(area => ( setExpandedId(prev => prev === id ? null : id)} /> ))}
{completedCount === totalAreas && (
All {totalAreas} areas complete! Your Cal-GETC is certified.
)}
); } Object.assign(window, { CalGETCView });