# SmartStack Responsive Design Guidelines

> **Objectif:** Toutes les pages SmartStack DOIVENT etre 100% responsives.
> Strategy: Progressive degradation (Desktop → Tablet → Mobile)

---

## REGLE ABSOLUE

```
Toute page avec un tableau DOIT implementer:
1. Desktop (lg+)  → Tableau complet avec toutes les colonnes
2. Tablette (md)  → Tableau avec colonnes secondaires masquees
3. Mobile (<md)   → Vue carte (cards), pas de tableau
```

---

## Pattern: Table Responsive + Cards Mobile

### Structure JSX

```tsx
// ============================================================
// CONTENU RESPONSIVE
// ============================================================

{/* Mobile: Toujours afficher les cartes */}
<div className="md:hidden">
  {renderCardsView()}
</div>

{/* Tablette+: Afficher la vue selectionnee */}
<div className="hidden md:block">
  {viewMode === 'table' && renderTableView()}
  {viewMode === 'cards' && renderCardsView()}
  {viewMode === 'kanban' && renderKanbanView()}
</div>
```

### ViewToggle (masquer sur mobile)

```tsx
{/* View Toggle - masque sur mobile (toujours cartes sur mobile) */}
<div className="hidden md:block">
  <ViewToggle
    viewMode={viewMode}
    onChange={setViewMode}
    tableLabel="Table"
    cardsLabel="Cards"
    kanbanLabel="Kanban"
  />
</div>
```

---

## Pattern: Colonnes Responsives dans Table

### Priorite des colonnes

| Priorite | Breakpoint | Exemple colonnes |
|----------|------------|------------------|
| 1 - Critique | Toujours visible | Nom, Status, Actions |
| 2 - Important | `md:table-cell` | Email, Role |
| 3 - Secondaire | `lg:table-cell` | Date creation |
| 4 - Optionnel | `xl:table-cell` | Source, Groupe, Audit |

### Implementation

```tsx
<thead>
  <tr className="bg-[var(--bg-secondary)]">
    {/* Toujours visible */}
    <th className="px-4 py-3">Nom</th>

    {/* Visible md+ (tablette) */}
    <th className="px-4 py-3 hidden md:table-cell">Email</th>

    {/* Visible lg+ (desktop) */}
    <th className="px-4 py-3 hidden lg:table-cell">Role</th>

    {/* Toujours visible */}
    <th className="px-4 py-3">Status</th>

    {/* Visible xl+ (grand ecran) */}
    <th className="px-4 py-3 hidden xl:table-cell">Source</th>
    <th className="px-4 py-3 hidden xl:table-cell">Groupe</th>

    {/* Toujours visible */}
    <th className="px-4 py-3">Actions</th>
  </tr>
</thead>

<tbody>
  {items.map(item => (
    <tr key={item.id}>
      <td className="px-4 py-3">{item.name}</td>
      <td className="px-4 py-3 hidden md:table-cell">{item.email}</td>
      <td className="px-4 py-3 hidden lg:table-cell">{item.role}</td>
      <td className="px-4 py-3">{item.status}</td>
      <td className="px-4 py-3 hidden xl:table-cell">{item.source}</td>
      <td className="px-4 py-3 hidden xl:table-cell">{item.group}</td>
      <td className="px-4 py-3">{/* Actions */}</td>
    </tr>
  ))}
</tbody>
```

### Afficher info masquee sur petits ecrans

```tsx
{/* Dans la cellule Nom, afficher l'email sur mobile */}
<td className="px-4 py-3">
  <div className="font-medium">{item.name}</div>
  {/* Email visible uniquement sur mobile (quand colonne email masquee) */}
  <div className="text-sm text-[var(--text-tertiary)] md:hidden">
    {item.email}
  </div>
</td>
```

---

## Pattern: Cards View

### Grid responsive

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  {items.map(item => (
    <div key={item.id} className="card p-4">
      {/* Header avec avatar et status */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-3">
          <Avatar name={item.name} />
          <div>
            <div className="font-medium">{item.name}</div>
            <div className="text-sm text-[var(--text-tertiary)]">{item.email}</div>
          </div>
        </div>
        <StatusBadge status={item.status} />
      </div>

      {/* Corps avec infos supplementaires */}
      <div className="space-y-2 mb-4">
        <div className="flex items-center gap-2 text-sm">
          <Shield className="w-4 h-4 text-[var(--text-tertiary)]" />
          <span>{item.role}</span>
        </div>
      </div>

      {/* Actions */}
      <div className="flex items-center justify-end gap-1 pt-3 border-t border-[var(--border-color)]">
        <button className="btn btn-ghost p-2">
          <Eye className="w-4 h-4" />
        </button>
        <button className="btn btn-ghost p-2">
          <Edit2 className="w-4 h-4" />
        </button>
      </div>
    </div>
  ))}
</div>
```

---

## Pattern: Header Responsive

```tsx
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
  <div>
    <h1 className="text-2xl font-bold">{title}</h1>
    <p className="text-sm text-[var(--text-tertiary)] mt-1">
      {count} elements
    </p>
  </div>
  <div className="flex items-center gap-2">
    <button className="btn btn-primary">
      <Plus className="w-4 h-4" />
      <span className="hidden sm:inline">Creer</span>
    </button>
  </div>
</div>
```

---

## Pattern: Filters Responsive

```tsx
{/* Barre de recherche + filtres */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
  {/* Recherche - pleine largeur sur mobile */}
  <div className="flex items-center gap-3 flex-1">
    <div className="relative flex-1 max-w-md">
      <input type="text" className="input w-full" />
    </div>
    <button className="btn btn-secondary">
      <Filter className="w-4 h-4" />
      <span className="hidden sm:inline">Filtres</span>
    </button>
  </div>

  {/* View Toggle - masque sur mobile */}
  <div className="hidden md:block">
    <ViewToggle viewMode={viewMode} onChange={setViewMode} />
  </div>
</div>

{/* Panel filtres avances */}
{showFilters && (
  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    {/* Chaque filtre */}
  </div>
)}
```

---

## Breakpoints Tailwind Reference

| Breakpoint | Min Width | Usage |
|------------|-----------|-------|
| `sm:` | 640px | Petit mobile → Grand mobile |
| `md:` | 768px | Mobile → Tablette |
| `lg:` | 1024px | Tablette → Desktop |
| `xl:` | 1280px | Desktop → Grand ecran |
| `2xl:` | 1536px | Grand ecran |

---

## Checklist Responsive

Avant de valider une page, verifier:

- [ ] **Mobile** : Vue carte fonctionne (pas de tableau)
- [ ] **Tablette** : Colonnes secondaires masquees
- [ ] **Desktop** : Toutes les colonnes visibles
- [ ] **ViewToggle** : Masque sur mobile
- [ ] **Boutons** : Texte masque sur petit ecran (`hidden sm:inline`)
- [ ] **Header** : Stack vertical sur mobile (`flex-col sm:flex-row`)
- [ ] **Filtres** : Grid responsive (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`)
- [ ] **Cards** : Grid responsive (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`)

---

## Anti-Patterns a Eviter

```tsx
// ❌ MAUVAIS: Pas de breakpoint
<th>Email</th>

// ✅ BON: Avec breakpoint responsive
<th className="hidden md:table-cell">Email</th>
```

```tsx
// ❌ MAUVAIS: Meme vue partout
{viewMode === 'table' && renderTableView()}

// ✅ BON: Cards forces sur mobile
<div className="md:hidden">{renderCardsView()}</div>
<div className="hidden md:block">
  {viewMode === 'table' && renderTableView()}
</div>
```

```tsx
// ❌ MAUVAIS: ViewToggle visible sur mobile
<ViewToggle viewMode={viewMode} onChange={setViewMode} />

// ✅ BON: Masque sur mobile
<div className="hidden md:block">
  <ViewToggle viewMode={viewMode} onChange={setViewMode} />
</div>
```
