Initial commit

2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
--- a/components/ui/README.md
+++ b/components/ui/README.md
@@ -0,0 +1,151 @@
+# Composants UI Standardisés - BTPXpress
+
+## ActionButton - Boutons d'Actions Standardisés
+
+### Vue d'ensemble
+Les composants `ActionButton` fournissent une approche cohérente pour tous les boutons d'actions dans l'application BTPXpress. Ils utilisent le style `p-button-text` pour un rendu subtil et professionnel, similaire au template Atlantis React.
+
+### Utilisation de base
+
+```tsx
+import { ActionButton, ActionButtonGroup } from '../../components/ui/ActionButton';
+
+// Bouton personnalisé
+<ActionButton 
+    icon="pi pi-eye"
+    tooltip="Voir détails"
+    onClick={() => handleView()}
+    color="blue"
+/>
+
+// Groupe de boutons
+<ActionButtonGroup>
+    <ViewButton tooltip="Voir" onClick={() => handleView()} />
+    <EditButton tooltip="Modifier" onClick={() => handleEdit()} />
+    <DeleteButton tooltip="Supprimer" onClick={() => handleDelete()} />
+</ActionButtonGroup>
+```
+
+### Boutons prédéfinis disponibles
+
+- **ViewButton**: `pi pi-eye` - Couleur par défaut (gris)
+- **EditButton**: `pi pi-pencil` - Orange
+- **DeleteButton**: `pi pi-trash` - Rouge
+- **StartButton**: `pi pi-play` - Vert
+- **CompleteButton**: `pi pi-check` - Vert
+- **ProgressButton**: `pi pi-percentage` - Bleu
+- **PauseButton**: `pi pi-pause` - Orange
+- **ResumeButton**: `pi pi-play` - Teal
+- **DownloadButton**: `pi pi-download` - Bleu
+- **PrintButton**: `pi pi-print` - Violet
+
+### Props ActionButton
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | string | - | Icône PrimeIcons (ex: "pi pi-eye") |
+| tooltip | string | - | Texte du tooltip |
+| onClick | function | - | Fonction appelée au clic |
+| color | string | 'default' | Couleur: 'default', 'green', 'blue', 'orange', 'red', 'purple', 'teal' |
+| disabled | boolean | false | Désactiver le bouton |
+| size | string | 'small' | Taille: 'small', 'normal', 'large' |
+
+### Props ActionButtonGroup
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | ReactNode | - | Boutons enfants |
+| align | string | 'center' | Alignement: 'left', 'center', 'right' |
+| gap | string | '1' | Espacement: '1', '2', '3' |
+
+### Exemples d'utilisation dans les tableaux
+
+#### DataTable avec actions contextuelles
+```tsx
+const actionBodyTemplate = (rowData: any) => {
+    return (
+        <ActionButtonGroup>
+            <ViewButton 
+                tooltip="Voir détails"
+                onClick={() => viewDetails(rowData)}
+            />
+            
+            {rowData.status === 'DRAFT' && (
+                <EditButton 
+                    tooltip="Modifier"
+                    onClick={() => editItem(rowData)}
+                />
+            )}
+            
+            {rowData.canDelete && (
+                <DeleteButton 
+                    tooltip="Supprimer"
+                    onClick={() => confirmDelete(rowData)}
+                />
+            )}
+        </ActionButtonGroup>
+    );
+};
+```
+
+#### Actions en en-tête de page
+```tsx
+<ActionButtonGroup align="right" gap="2">
+    <DownloadButton 
+        tooltip="Exporter PDF"
+        onClick={handleExportPDF}
+    />
+    <PrintButton 
+        tooltip="Imprimer"
+        onClick={handlePrint}
+    />
+</ActionButtonGroup>
+```
+
+### Standards visuels
+
+- **Style**: Tous les boutons utilisent `p-button-text` pour un rendu subtil
+- **Forme**: Boutons ronds (`p-button-rounded`)
+- **Taille**: Par défaut petite (`p-button-sm`)
+- **Tooltips**: Toujours positionnés en haut
+- **Couleurs**: Système cohérent basé sur l'action
+  - Actions neutres: Gris par défaut
+  - Actions positives: Vert (démarrer, valider, compléter)
+  - Actions d'information: Bleu (voir, télécharger)
+  - Actions de modification: Orange (éditer, pauser)
+  - Actions destructives: Rouge (supprimer)
+  - Actions spéciales: Violet (imprimer), Teal (reprendre)
+
+### Intégration dans les pages existantes
+
+Pour appliquer ces standards dans vos pages :
+
+1. **Importez les composants nécessaires**
+```tsx
+import { ActionButtonGroup, ViewButton, EditButton, DeleteButton } from '../../components/ui/ActionButton';
+```
+
+2. **Remplacez les boutons existants**
+```tsx
+// Ancien style
+<Button icon="pi pi-eye" className="p-button-text" onClick={handleView} />
+<Button icon="pi pi-pencil" className="p-button-warning" onClick={handleEdit} />
+
+// Nouveau style standardisé
+<ActionButtonGroup>
+    <ViewButton tooltip="Voir" onClick={handleView} />
+    <EditButton tooltip="Modifier" onClick={handleEdit} />
+</ActionButtonGroup>
+```
+
+3. **Adaptez selon le contexte**
+- Utilisez les boutons prédéfinis quand possible
+- Créez des boutons personnalisés avec `ActionButton` si nécessaire
+- Groupez les actions logiquement avec `ActionButtonGroup`
+
+### Maintenance et évolution
+
+- **Cohérence**: Tous les boutons d'actions de l'application doivent utiliser ces composants
+- **Extensibilité**: Ajoutez de nouveaux boutons prédéfinis selon les besoins
+- **Accessibilité**: Les tooltips et l'état disabled sont automatiquement gérés
+- **Responsive**: Les boutons s'adaptent automatiquement aux différentes tailles d'écran