telvero_whatson_talpa/plans/planner-redesign-plan.md

# Planner Redesign Plan - Uniforme UI & Typografie

## Overzicht
Redesign van de planner interface om een cleane, uniforme uitstraling te creëren met consistente knoppen, typografie en kleurgebruik. Focus op het verminderen van visuele ruis en het verbeteren van de gebruiksvriendelijkheid.

## Huidige Problemen

### Planner Interface ([`planner.php`](planner.php))
1. **Inconsistente knoppen**: Mix van verschillende button stijlen en groottes
   - "Gepland" badge, "Leeg" badge, "Niet Gepland" badge (verschillende kleuren)
   - "Starttijd aanpassen" knop met tekst + icoon
   - "Kopieer Blok" knop met tekst + icoon
   - "Sync naar Talpa" knop met tekst + icoon
   - Omhoog/omlaag/verwijder knoppen in tabel (klein formaat)
   - "Toevoegen" knop in dropdown rij

2. **Drukke header van blokken**: Te veel informatie en knoppen naast elkaar
3. **Inconsistente spacing**: Verschillende marges en paddings
4. **Te veel tekst op knoppen**: Kan compacter met alleen iconen waar duidelijk

### Andere Schermen
- [`calendar.php`](calendar.php): Sidebar met infomercials, zoom controls, block info
- [`blocks.php`](blocks.php): Template management met formulieren
- [`index.php`](index.php): Dashboard met statistieken en snelle acties
- [`infomercials.php`](infomercials.php): Lijst met infomercials en upload status

## Design System

### 1. Kleurenpalet (Rustig & Consistent)

#### Brand Colors (Behouden)
```css
--brand-primary: #32327D;    /* Paars - hoofdkleur */
--brand-accent: #32B4AA;     /* Turquoise - accent */
```

#### UI Kleuren (Nieuw - Rustig Palet)
```css
/* Neutrale basis */
--ui-bg-primary: #FFFFFF;
--ui-bg-secondary: #F8F9FA;
--ui-bg-tertiary: #E9ECEF;
--ui-border: #DEE2E6;
--ui-border-light: #E9ECEF;

/* Tekst */
--text-primary: #212529;
--text-secondary: #6C757D;
--text-muted: #ADB5BD;

/* Status kleuren (gedempter) */
--status-success: #28A745;
--status-success-light: #D4EDDA;
--status-warning: #FFC107;
--status-warning-light: #FFF3CD;
--status-danger: #DC3545;
--status-danger-light: #F8D7DA;
--status-info: #17A2B8;
--status-info-light: #D1ECF1;

/* Interactie */
--hover-bg: #F1F3F5;
--active-bg: #E9ECEF;
--focus-ring: rgba(50, 50, 125, 0.25);
```

#### Infomercial Kleuren
Blijven zoals ze zijn - dynamisch toegewezen per infomercial

### 2. Typografie Hiërarchie

```css
/* Headings */
--font-h1: 2rem;      /* 32px - Page titles */
--font-h2: 1.5rem;    /* 24px - Section titles */
--font-h3: 1.25rem;   /* 20px - Card headers */
--font-h4: 1.125rem;  /* 18px - Subsections */
--font-h5: 1rem;      /* 16px - Small headers */
--font-h6: 0.875rem;  /* 14px - Tiny headers */

/* Body */
--font-base: 0.9375rem;  /* 15px - Base text */
--font-small: 0.875rem;  /* 14px - Small text */
--font-tiny: 0.8125rem;  /* 13px - Tiny text */

/* Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Line heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
```

### 3. Button System

#### Button Sizes
```css
/* Extra Small - Voor tabel acties */
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  min-width: 32px;
  height: 28px;
}

/* Small - Voor compacte UI */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  min-width: 36px;
  height: 32px;
}

/* Medium (default) - Standaard knoppen */
.btn {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
  min-width: 40px;
  height: 38px;
}

/* Large - Call-to-action knoppen */
.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  min-width: 48px;
  height: 44px;
}
```

#### Button Variants

**Icon-Only Buttons** (Geen tekst, alleen icoon)
- Verwijderen: `<button class="btn-icon btn-icon-danger"><i class="bi bi-trash"></i></button>`
- Bewerken: `<button class="btn-icon btn-icon-primary"><i class="bi bi-pencil"></i></button>`
- Omhoog: `<button class="btn-icon btn-icon-secondary"><i class="bi bi-arrow-up"></i></button>`
- Omlaag: `<button class="btn-icon btn-icon-secondary"><i class="bi bi-arrow-down"></i></button>`
- Kopiëren: `<button class="btn-icon btn-icon-info"><i class="bi bi-files"></i></button>`
- Sync: `<button class="btn-icon btn-icon-success"><i class="bi bi-cloud-upload"></i></button>`
- Tijd aanpassen: `<button class="btn-icon btn-icon-secondary"><i class="bi bi-clock"></i></button>`

**Text + Icon Buttons** (Voor belangrijke acties)
- Primaire acties: "Toevoegen", "Opslaan", "Synchroniseren"
- Gebruik alleen waar context nodig is

**Ghost Buttons** (Subtiele acties)
- Transparante achtergrond, alleen border
- Voor secundaire acties

#### Button States
```css
/* Default state */
.btn-icon {
  background: transparent;
  border: 1px solid var(--ui-border);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

/* Hover state */
.btn-icon:hover {
  background: var(--hover-bg);
  border-color: var(--ui-border);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* Active state */
.btn-icon:active {
  background: var(--active-bg);
  transform: translateY(0);
}

/* Focus state */
.btn-icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
```

### 4. Spacing System

```css
/* Consistent spacing scale */
--space-xs: 0.25rem;   /* 4px */
--space-sm: 0.5rem;    /* 8px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-2xl: 3rem;     /* 48px */
```

### 5. Badges & Status Indicators

```css
/* Sync status badges */
.badge-sync {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-sync-complete {
  background: var(--status-success-light);
  color: var(--status-success);
}

.badge-sync-partial {
  background: var(--status-warning-light);
  color: #856404;
}

.badge-sync-none {
  background: var(--status-danger-light);
  color: var(--status-danger);
}

.badge-sync-empty {
  background: var(--ui-bg-tertiary);
  color: var(--text-secondary);
}
```

## Implementatie Plan

### Fase 1: Core Design System ([`assets/css/custom.css`](assets/css/custom.css))

1. **Voeg CSS variabelen toe**
   - Kleurenpalet
   - Typografie schaal
   - Spacing systeem

2. **Creëer button system**
   - `.btn-icon` classes
   - Size variants (xs, sm, md, lg)
   - Color variants (primary, secondary, success, danger, info, warning)
   - States (hover, active, focus, disabled)

3. **Creëer badge system**
   - Status badges
   - Sync indicators
   - Count badges

4. **Typography utilities**
   - Heading classes
   - Text size utilities
   - Weight utilities

### Fase 2: Planner Redesign ([`planner.php`](planner.php))

#### Block Header Redesign
**Voor:**
```html
<div class="block-header">
  <span class="badge">Gepland</span>
  <button class="btn btn-sm">Starttijd aanpassen</button>
  <button class="btn btn-sm">Kopieer Blok</button>
  <button class="btn btn-sm">Sync naar Talpa</button>
</div>
```

**Na:**
```html
<div class="block-header">
  <div class="block-header-left">
    <h6 class="block-title">SBS9 Nachtblok</h6>
    <span class="badge-sync badge-sync-complete">
      <i class="bi bi-check-circle-fill"></i>
      Gepland
    </span>
  </div>
  <div class="block-header-actions">
    <button class="btn-icon btn-icon-sm btn-icon-secondary" title="Starttijd">
      <i class="bi bi-clock"></i>
    </button>
    <button class="btn-icon btn-icon-sm btn-icon-info" title="Kopieer">
      <i class="bi bi-files"></i>
    </button>
    <button class="btn-icon btn-icon-sm btn-icon-success" title="Sync">
      <i class="bi bi-cloud-upload"></i>
    </button>
  </div>
  <div class="block-header-time">
    02:00 - 04:30 | <strong>24 min</strong> resterend
  </div>
</div>
```

#### Table Actions Redesign
**Voor:**
```html
<div class="btn-group btn-group-sm">
  <button class="btn btn-outline-secondary"><i class="bi bi-arrow-up"></i></button>
  <button class="btn btn-outline-secondary"><i class="bi bi-arrow-down"></i></button>
  <button class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
</div>
```

**Na:**
```html
<div class="action-buttons">
  <button class="btn-icon btn-icon-xs btn-icon-secondary">
    <i class="bi bi-arrow-up"></i>
  </button>
  <button class="btn-icon btn-icon-xs btn-icon-secondary">
    <i class="bi bi-arrow-down"></i>
  </button>
  <button class="btn-icon btn-icon-xs btn-icon-danger">
    <i class="bi bi-trash"></i>
  </button>
</div>
```

#### Infomercial Sidebar Cleanup
- Compactere items
- Betere spacing
- Duidelijkere hover states

### Fase 3: Calendar View ([`calendar.php`](calendar.php))

1. **Block info cards**: Compacter design met icon-only buttons
2. **Zoom controls**: Icon-only buttons
3. **Sidebar**: Consistente styling met planner
4. **Modals**: Uniforme button styling

### Fase 4: Blocks Management ([`blocks.php`](blocks.php))

1. **Form styling**: Consistente input styling
2. **Table actions**: Icon-only buttons
3. **Status badges**: Nieuwe badge system

### Fase 5: Dashboard ([`index.php`](index.php))

1. **Stat cards**: Cleaner design met betere typografie
2. **Quick actions**: Consistente card styling
3. **Tables**: Uniforme button styling

### Fase 6: Infomercials ([`infomercials.php`](infomercials.php))

1. **List view**: Compacter met icon-only actions
2. **Upload status**: Nieuwe badge system
3. **Forms**: Consistente styling

## Visuele Voorbeelden

### Button Groepen
```
┌─────────────────────────────────────────┐
│ Block Header                            │
├─────────────────────────────────────────┤
│ SBS9 Nachtblok  [✓ Gepland]            │
│                                         │
│ [🕐] [📋] [☁️]    02:00-04:30 | 24 min │
└─────────────────────────────────────────┘
```

### Table Actions
```
┌──────────────────────────────────────────┐
│ Product         | Duur | Acties          │
├──────────────────────────────────────────┤
│ Clever Cane     | 30m  | [↑] [↓] [🗑️]   │
│ Sani Skin       | 15m  | [↑] [↓] [🗑️]   │
└──────────────────────────────────────────┘
```

### Status Badges
```
[✓ Gepland]        - Groen (alle items gesynchroniseerd)
[⚠ Deels (2/5)]   - Geel (sommige items gesynchroniseerd)
[✗ Niet Gepland]  - Rood (geen items gesynchroniseerd)
[○ Leeg]          - Grijs (geen items in blok)
```

## Implementatie Volgorde

1. ✅ **Design System Documentatie** (dit document)
2. **CSS Updates** ([`assets/css/custom.css`](assets/css/custom.css))
   - Voeg CSS variabelen toe
   - Creëer button system
   - Creëer badge system
   - Typography utilities
3. **Planner Redesign** ([`planner.php`](planner.php))
   - Block headers
   - Table actions
   - Sidebar
4. **Calendar View** ([`calendar.php`](calendar.php))
5. **Blocks Management** ([`blocks.php`](blocks.php))
6. **Dashboard** ([`index.php`](index.php))
7. **Infomercials** (nog niet in codebase, maar voorbereiden)

## Mermaid Diagram: Component Hiërarchie

```mermaid
graph TD
    A[Design System] --> B[Colors]
    A --> C[Typography]
    A --> D[Spacing]
    A --> E[Components]
    
    E --> F[Buttons]
    E --> G[Badges]
    E --> H[Cards]
    E --> I[Tables]
    
    F --> F1[Icon-Only]
    F --> F2[Text + Icon]
    F --> F3[Ghost]
    
    G --> G1[Status]
    G --> G2[Sync]
    G --> G3[Count]
    
    B --> B1[Brand Colors]
    B --> B2[UI Colors]
    B --> B3[Status Colors]
    
    C --> C1[Headings]
    C --> C2[Body Text]
    C --> C3[Weights]
```

## Mermaid Diagram: Implementatie Flow

```mermaid
graph LR
    A[CSS Variables] --> B[Button System]
    B --> C[Badge System]
    C --> D[Typography]
    D --> E[Planner PHP]
    E --> F[Calendar PHP]
    F --> G[Blocks PHP]
    G --> H[Index PHP]
    H --> I[Testing]
    I --> J[Refinement]
```

## Belangrijke Overwegingen

### Toegankelijkheid
- Voldoende contrast ratios (WCAG AA)
- Focus states voor keyboard navigatie
- Duidelijke hover states
- Geen tooltips nodig (iconen zijn duidelijk genoeg)

### Performance
- Gebruik CSS variabelen voor snelle theming
- Minimale JavaScript voor interacties
- Hergebruik van classes

### Consistentie
- Alle knoppen gebruiken hetzelfde systeem
- Alle badges gebruiken hetzelfde systeem
- Alle spacing gebruikt de spacing scale
- Alle kleuren komen uit het palet

### Responsive Design
- Buttons blijven bruikbaar op kleine schermen
- Stack buttons verticaal op mobiel indien nodig
- Behoud touch-friendly sizes (min 44x44px)

## Volgende Stappen

1. Review dit plan met het team
2. Goedkeuring voor implementatie
3. Start met CSS updates
4. Implementeer per scherm
5. Test en verfijn
6. Documenteer voor toekomstig gebruik