# 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:
```jsx
// 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):
```css
/* Remove these lines */
a:hover {
  text-decoration: underline;
}
```

### 3. Standardize ClassCardsComponent Grid
Change from 3 columns to max 2 columns:
```jsx
// 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:
```jsx
<Link href={link} className="block no-underline">
```

### 5. Standard Dashboard Page Pattern
All dashboard pages should follow this structure:
```jsx
<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:
```jsx
// 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`](src/app/\(protected\)/components/shared/Main.jsx) - Add max-width wrapper
2. [`src/app/globals.css`](src/app/globals.css) - Remove link hover underline
3. [`src/app/(protected)/components/shared/ClassCardsComponent.jsx`](src/app/\(protected\)/components/shared/ClassCardsComponent.jsx) - Standardize grid
4. [`src/app/(protected)/components/shared/ClassCard.jsx`](src/app/\(protected\)/components/shared/ClassCard.jsx) - Ensure no-underline
5. [`src/app/(protected)/dashboard/teacher/page.jsx`](src/app/\(protected\)/dashboard/teacher/page.jsx) - Remove redundant wrapper
6. (Optional) [`src/app/(protected)/components/DashboardLayout.jsx`](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