---
description: Design system conventions for all Filament page views in this application
globs:
  - resources/views/filament/pages/**/*.blade.php
  - resources/views/components/logistics/**/*.blade.php
---

# Design System -- API Logistics

## Composants Blade reutilisables

Tous les elements visuels recurrents sont centralises dans `resources/views/components/logistics/`.
Utiliser ces composants au lieu de dupliquer du HTML/CSS.

| Composant | Usage | Fichier |
|---|---|---|
| `<x-logistics.card>` | Conteneur principal (panneau blanc arrondi) | `logistics/card.blade.php` |
| `<x-logistics.section-header>` | En-tete de section (titre + description + slot actions) | `logistics/section-header.blade.php` |
| `<x-logistics.error-banner>` | Bandeau d'erreur API | `logistics/error-banner.blade.php` |
| `<x-logistics.stat-bar>` | Barre de metadata/statistiques | `logistics/stat-bar.blade.php` |
| `<x-logistics.stat-item>` | Element individuel dans stat-bar | `logistics/stat-item.blade.php` |
| `<x-logistics.data-table>` | Tableau de donnees dynamique | `logistics/data-table.blade.php` |
| `<x-logistics.empty-state>` | Etat vide (icone + texte) | `logistics/empty-state.blade.php` |
| `<x-logistics.search-input>` | Champ de recherche avec icone loupe | `logistics/search-input.blade.php` |
| `<x-logistics.form-field>` | Champ de formulaire (label + input) | `logistics/form-field.blade.php` |
| `<x-logistics.json-block>` | Bloc JSON formate | `logistics/json-block.blade.php` |

## Conventions CSS

### Carte (card)
- `rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10`

### En-tete de section dans une carte
- Wrapper: `border-b border-gray-200 px-6 py-4 dark:border-white/10`
- Titre: `text-base font-semibold text-gray-950 dark:text-white`
- Description: `mt-1 text-xs text-gray-500 dark:text-gray-400`

### Contenu de carte
- Padding: `p-6`

### Tableau de donnees
- Conteneur: `overflow-x-auto`
- Table: `w-full text-left text-sm`
- Thead tr: `border-b border-gray-200 dark:border-white/10`
- Th: `px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400`
- Tbody: `divide-y divide-gray-100 dark:divide-white/5`
- Tr: `transition-colors hover:bg-gray-50 dark:hover:bg-white/5`
- Td: `px-3 py-2.5 text-sm text-gray-700 dark:text-gray-300`
- Td valeur technique (ID, code): ajouter `font-mono`

### Badge compteur
- `rounded-full px-2 py-0.5 text-xs font-medium tabular-nums bg-gray-100 text-gray-600 dark:bg-white/10 dark:text-gray-300`

### Champ de formulaire (input)
- `w-full rounded-lg border-gray-300 py-2 text-sm shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-white/10 dark:bg-white/5 dark:text-white`
- Label: `block text-sm font-medium text-gray-700 dark:text-gray-300`
- Espacement label/input: `mt-1.5`

### Bloc JSON (pre)
- `rounded-lg border border-gray-200 bg-gray-50 p-4 text-xs font-mono leading-relaxed text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300`

### Etat vide
- Conteneur: `flex flex-col items-center justify-center py-12 text-center`
- Icone: `h-10 w-10 text-gray-300 dark:text-gray-600`
- Titre: `mt-3 text-sm font-medium text-gray-900 dark:text-white`
- Description: `mt-1 text-sm text-gray-500 dark:text-gray-400`

### Erreur API
- `rounded-lg bg-danger-50 p-4 text-sm text-danger-600 dark:bg-danger-400/10 dark:text-danger-400`

### Stat bar
- `flex flex-wrap items-center gap-x-6 gap-y-2`
- Chaque item: icone h-4 w-4 + texte text-sm text-gray-500

### Loading
- Utiliser `<x-filament::loading-indicator>` + `wire:loading` / `wire:loading.remove`

## Structure d'une page type

```blade
<x-filament-panels::page>
    <x-logistics.error-banner :message="$errorMessage" />

    {{-- Stat bar optionnelle --}}

    {{-- Section formulaire --}}
    <x-logistics.card>
        <x-logistics.section-header title="..." description="..." />
        <div class="p-6">
            {{-- Formulaire avec grille --}}
        </div>
    </x-logistics.card>

    {{-- Section resultats --}}
    <x-logistics.card>
        <x-logistics.section-header title="..." />
        <div class="p-6">
            <x-logistics.data-table :data="$data" :metadata="$metadata" />
        </div>
    </x-logistics.card>
</x-filament-panels::page>
```

## Regles

- Toujours utiliser les composants `x-logistics.*` au lieu de dupliquer les classes CSS.
- Un composant `<x-logistics.card>` n'a PAS de padding interne. Le padding est gere par les enfants.
- Les formulaires dans une carte utilisent `<div class="p-6">` pour le contenu.
- Toujours afficher un etat de chargement (`wire:loading`) sur les actions reseau.
- Les blocs JSON utilisent `<x-logistics.json-block>` et non `<pre>` brut.