import React from 'react'; // AggieUX v0.9.2 Color Palette const colors = { aggieMaroon: '#500000', linkBlue: '#006483', accentGold: '#AF8846', steelBlue: '#3A567B', rougue: '#95463B', olive: '#5B6236', brandLight: '#732F2F', teal: '#1B9D92', purple: '#7F6078', green: '#76987B', // Semantic good: '#607858', neutral: '#D6D3C4', bad: '#3C0000', // UI background: '#FFFFFF', secondaryBg: '#F6F6F6', foreground: '#202020', secondaryText: '#535353', border: '#EAEAEA', }; const styles = { dashboard: { fontFamily: "'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif", backgroundColor: colors.secondaryBg, borderRadius: '8px', overflow: 'hidden', }, header: { backgroundColor: colors.aggieMaroon, color: '#FFFFFF', padding: '16px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', }, headerTitle: { fontFamily: "'Oswald', sans-serif", fontSize: '24px', fontWeight: '500', margin: 0, letterSpacing: '0.5px', }, kpiCard: { backgroundColor: '#FFFFFF', borderRadius: '6px', padding: '20px', textAlign: 'center' as const, boxShadow: '0 1px 3px rgba(0,0,0,0.06)', }, kpiValue: { fontFamily: "'Oswald', sans-serif", fontSize: '36px', fontWeight: '500', color: colors.aggieMaroon, lineHeight: 1, }, // ... (full styles object - see component file) }; // Sample data const enrollmentData = [ { college: 'Engineering', undergrad: 85, graduate: 45, online: 15 }, { college: 'Liberal Arts', undergrad: 72, graduate: 35, online: 25 }, // ... ]; export default function AggieUXDashboard(): React.ReactElement { return (

{/* Header */}

ACADEMIC AFFAIRS

{/* KPI Cards */}

Total Enrollment

73,284

▲ +2.3% YoY

{/* ... more cards */}

{/* Charts, tables, etc. */}

); }

preview

Light & Dark Mode