# SEO Dashboard Admin Panel Patterns

**Last Updated:** 2025-11-23

## Overview

The SEO Strategy Dashboard is a standalone admin panel matching the exact structure and styling of `produkt_updates_admin.php`. It uses a fixed sidebar navigation, consistent design tokens, and no website header/footer dependencies.

## Design System

### CSS Variables

All design tokens are defined in `v2/admin/seo-dashboard/assets/css/admin-base.css`:

```css
:root {
  --ordio-blue: #4d8ef3;
  --ordio-blue-dark: #286bcd;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 80px;
  --header-height: 72px;
}
```

### Layout Structure

The dashboard uses a fixed sidebar layout:

```html
<div class="admin-layout">
  <aside class="admin-sidebar" id="adminSidebar">
    <!-- Sidebar navigation -->
  </aside>
  <main class="admin-main" id="adminMain">
    <div class="admin-container">
      <div class="admin-header">
        <!-- Header content -->
      </div>
      <!-- Tab content -->
    </div>
  </main>
</div>
```

## Component Patterns

### Cards

Use the `.card` class for content sections:

```html
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Title</h3>
  </div>
  <!-- Card content -->
</div>
```

### Metric Cards

Use `.metric-card` for KPI displays:

```html
<div class="metric-card">
  <div class="metric-label">Label</div>
  <div class="metric-value">Value</div>
  <div class="metric-change positive">
    <span>↑</span>
    <span>Status</span>
  </div>
</div>
```

### Buttons

Use `.button` for primary actions and `.button-secondary` for secondary actions:

```html
<a href="#" class="button">Primary Action</a>
<a href="#" class="button button-secondary">Secondary Action</a>
```

### Status Badges

Use status badge classes:

```html
<span class="status-badge status-on-track">On Track</span>
<span class="status-badge status-warning">Warning</span>
<span class="status-badge status-danger">Error</span>
```

## Navigation

### Sidebar Navigation

Navigation items are in the sidebar with sections:

```html
<nav class="sidebar-nav">
  <div class="nav-section">
    <div class="nav-section-title">Main</div>
    <a
      href="#"
      class="nav-item active"
      onclick="showSection('overview'); return false;"
    >
      <svg>...</svg>
      <span class="nav-item-text">Overview</span>
    </a>
  </div>
</nav>
```

### Tab Routing

Tabs use URL parameters: `/seo-dashboard?tab=overview`

The `showSection()` function in `footer.php` handles navigation by updating the URL parameter.

## JavaScript Patterns

### Sidebar Toggle

```javascript
function toggleSidebar() {
  const sidebar = document.getElementById("adminSidebar");
  const main = document.getElementById("adminMain");
  const overlay = document.getElementById("sidebarOverlay");
  const isMobile = window.innerWidth <= 768;

  if (isMobile) {
    sidebar.classList.toggle("mobile-open");
    overlay.classList.toggle("show");
  } else {
    sidebar.classList.toggle("collapsed");
    main.classList.toggle("sidebar-collapsed");
    localStorage.setItem(
      "sidebarCollapsed",
      sidebar.classList.contains("collapsed")
    );
  }
}
```

### Navigation

```javascript
function showSection(sectionId) {
  const url = new URL(window.location);
  url.searchParams.set("tab", sectionId);
  window.location.href = url.toString();
}
```

## File Structure

```
v2/admin/seo-dashboard/
├── index.php                 # Main entry point
├── config.php                # Configuration
├── includes/
│   ├── auth.php              # Authentication
│   ├── header.php            # Header with sidebar
│   └── footer.php            # Footer with scripts
├── tabs/
│   ├── overview.php          # Overview tab
│   ├── goals.php             # Goals tab
│   ├── metrics.php           # Metrics tab
│   ├── insights.php          # Insights tab
│   ├── actions.php           # Action steps tab
│   ├── strategy.php          # Strategy tab
│   ├── data-sources.php      # Data sources tab
│   └── reports.php           # Reports tab
├── assets/
│   ├── css/
│   │   ├── admin-base.css    # Base styles (design tokens)
│   │   ├── dashboard.css     # Dashboard-specific styles
│   │   └── charts.css        # Chart styles
│   └── js/
│       ├── dashboard.js      # Core dashboard functionality
│       ├── charts.js          # Chart initialization
│       ├── filters.js         # Filter functionality
│       └── exports.js         # Export functionality
└── lib/
    ├── CacheManager.php       # Cache management
    └── DataLoader.php         # Data loading
```

## Styling Guidelines

1. **Always use CSS variables** from `admin-base.css` for colors, spacing, and other design tokens
2. **Use semantic class names** that match the design system (`.card`, `.metric-card`, `.button`, etc.)
3. **Follow the layout structure** - sidebar, main content area, admin-container
4. **Responsive design** - sidebar becomes overlay on mobile (≤768px)
5. **No inline styles** - use CSS classes and variables

## Authentication

Authentication is handled in `includes/auth.php` with session-based login. The login page matches the admin panel styling.

## Best Practices

1. **No v2 base component dependencies** - This is a standalone admin panel
2. **Consistent styling** - All components should match `produkt_updates_admin.php`
3. **Responsive first** - Design for mobile, enhance for desktop
4. **Accessibility** - Use proper ARIA labels, keyboard navigation, focus indicators
5. **Performance** - Lazy load charts, optimize assets, use caching

## Common Patterns

### Loading States

```html
<div class="loading">
  <div class="spinner"></div>
</div>
```

### Error Messages

```html
<div class="alert alert-danger">Error message here</div>
```

### Tables

```html
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
</div>
```

## Testing Checklist

- [ ] Sidebar toggle works on desktop and mobile
- [ ] Navigation between tabs works correctly
- [ ] All tabs load and display data
- [ ] Charts render correctly
- [ ] Responsive design works on all screen sizes
- [ ] Authentication flow works
- [ ] No console errors
- [ ] Performance meets targets (Lighthouse > 90)

## Related Documentation

See [docs/ai/RULE_TO_DOC_MAPPING.md](../../docs/ai/RULE_TO_DOC_MAPPING.md) for complete mapping.

**Key Documentation:**

- [docs/seo-strategy-2026/](../../docs/seo-strategy-2026/) - `docs/seo-strategy-2026/` - SEO dashboard documentation (if tracked)