Initial commit

2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
--- a/components/ui/ActionButton.tsx
+++ b/components/ui/ActionButton.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { Button } from 'primereact/button';
+
+interface ActionButtonProps {
+    icon: string;
+    tooltip: string;
+    onClick: () => void;
+    color?: 'default' | 'green' | 'blue' | 'orange' | 'red' | 'purple' | 'teal';
+    disabled?: boolean;
+    size?: 'small' | 'normal' | 'large';
+}
+
+/**
+ * Composant de bouton d'action standardisé pour toute l'application
+ * Utilise le style p-button-text avec des couleurs personnalisées
+ */
+export const ActionButton: React.FC<ActionButtonProps> = ({
+    icon,
+    tooltip,
+    onClick,
+    color = 'default',
+    disabled = false,
+    size = 'small'
+}) => {
+    // Classes de couleur pour les icônes
+    const colorClasses = {
+        default: '',
+        green: 'text-green-500',
+        blue: 'text-blue-500',
+        orange: 'text-orange-500',
+        red: 'text-red-500',
+        purple: 'text-purple-500',
+        teal: 'text-teal-500'
+    };
+
+    // Classes de taille
+    const sizeClasses = {
+        small: 'p-button-sm',
+        normal: '',
+        large: 'p-button-lg'
+    };
+
+    const buttonClasses = [
+        'p-button-rounded',
+        'p-button-text',
+        sizeClasses[size],
+        colorClasses[color]
+    ].filter(Boolean).join(' ');
+
+    return (
+        <Button 
+            icon={icon}
+            className={buttonClasses}
+            tooltip={tooltip}
+            tooltipOptions={{ position: 'top' }}
+            onClick={onClick}
+            disabled={disabled}
+        />
+    );
+};
+
+// Boutons d'actions prédéfinis pour les cas d'usage courants
+export const ViewButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-eye" color="default" {...props} />
+);
+
+export const EditButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-pencil" color="orange" {...props} />
+);
+
+export const DeleteButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-trash" color="red" {...props} />
+);
+
+export const StartButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-play" color="green" {...props} />
+);
+
+export const CompleteButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-check" color="green" {...props} />
+);
+
+export const ProgressButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-percentage" color="blue" {...props} />
+);
+
+export const PauseButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-pause" color="orange" {...props} />
+);
+
+export const ResumeButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-play" color="teal" {...props} />
+);
+
+export const DownloadButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-download" color="blue" {...props} />
+);
+
+export const PrintButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-print" color="purple" {...props} />
+);
+
+export const BudgetPlanButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-calculator" color="purple" {...props} />
+);
+
+export const BudgetTrackButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
+    <ActionButton icon="pi pi-chart-line" color="teal" {...props} />
+);
+
+/**
+ * Container pour grouper les boutons d'actions
+ */
+interface ActionButtonGroupProps {
+    children: React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+    gap?: '1' | '2' | '3';
+}
+
+export const ActionButtonGroup: React.FC<ActionButtonGroupProps> = ({
+    children,
+    align = 'center',
+    gap = '1'
+}) => {
+    const alignClasses = {
+        left: 'justify-content-start',
+        center: 'justify-content-center',
+        right: 'justify-content-end'
+    };
+
+    return (
+        <div className={`flex ${alignClasses[align]} gap-${gap}`}>
+            {children}
+        </div>
+    );
+};