# 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