course-plat/plans/dashboard-design-system.md

Dashboard Design System - Standardization Plan

Problem Analysis

Current dashboards have inconsistent layouts causing width and spacing issues:

Dashboard	Width Constraint	Padding	Layout Component
Admin	max-w-6xl mx-auto p-6	1.5rem	Page-level wrapper
Teacher	None (uses MainSection)	2rem (p-8)	MainSection with no max-width
Student	max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6	Variable	Page-level wrapper
Guardian	max-w-5xl mx-auto	2rem (p-8)	MainSection + inner wrapper

Additional Issues:

1. Global CSS (lines 451-459) adds underline to all links on hover
2. ClassCardsComponent has lg:grid-cols-3 causing 3 cards per row on large screens
3. ClassCard links have default underline on hover

Proposed Solution

1. Update MainSection Component

Add width constraint to standardize all dashboards using it:

// Current
<main className={`flex-1 p-8 overflow-y-auto ${className}`}>

// Proposed
<main className={`flex-1 p-6 overflow-y-auto ${className}`}>
  <div className="max-w-7xl mx-auto">
    {children}
  </div>
</main>

2. Remove Global Link Underline

Remove hover underline from globals.css (lines 457-459):

/* Remove these lines */
a:hover {
  text-decoration: underline;
}

3. Standardize ClassCardsComponent Grid

Change from 3 columns to max 2 columns:

// Current
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

// Proposed
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

4. Ensure ClassCard Has No Underline

Keep the no-underline class on Link:

<Link href={link} className="block no-underline">

5. Standard Dashboard Page Pattern

All dashboard pages should follow this structure:

<MainSection>
  <div className="max-w-6xl mx-auto">
    <PageTitle title="..." subTitle="..."/>
    {/* Content */}
  </div>
</MainSection>

6. Create Shared DashboardLayout Component (Optional)

For future consistency, create a reusable component:

// src/app/(protected)/components/DashboardLayout.jsx
export function DashboardLayout({ title, subtitle, children }) {
  return (
    <MainSection>
      <div className="max-w-6xl mx-auto">
        <PageTitle title={title} subTitle={subtitle}/>
        {children}
      </div>
    </MainSection>
  );
}

Files to Modify

1. src/app/(protected)/components/shared/Main.jsx - Add max-width wrapper
2. src/app/globals.css - Remove link hover underline
3. src/app/(protected)/components/shared/ClassCardsComponent.jsx - Standardize grid
4. src/app/(protected)/components/shared/ClassCard.jsx - Ensure no-underline
5. src/app/(protected)/dashboard/teacher/page.jsx - Remove redundant wrapper
6. (Optional) src/app/(protected)/components/DashboardLayout.jsx - Create reusable component

After Changes

All dashboards will:

• Have consistent max-width (max-w-6xl ≈ 72rem / 1152px)
• Use consistent padding (p-6 ≈ 1.5rem)
• Display max 2 cards per row
• No underline on link hover