Marvin
bc82299aa6
- Added a new Blade component `<x-logistics.param-table>` for displaying API parameter tables across all Filament pages, ensuring consistent styling and reducing HTML duplication. - Integrated parameter tables for each endpoint in the Articles, Documents, Divers, Journaux, Tiers, and other pages, providing users with clear reference information. - Updated the documentation to reflect the new structure and details of API parameters, including required fields and descriptions. - Improved user experience by ensuring that endpoints without parameters do not display empty tables. - Overall, enhanced the clarity and usability of API interactions within the application.
113 lines
4.8 KiB
Plaintext
113 lines
4.8 KiB
Plaintext
---
|
|
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` |
|
|
| `<x-logistics.param-table>` | Tableau de reference des parametres API | `logistics/param-table.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.
|
|
- Chaque endpoint doit avoir un tableau de parametres via `<x-logistics.param-table>` (sauf si aucun parametre).
|