change and add into components, widgets and pages

2026-07-30 14:08:49 +02:00
parent ec900efe3a
commit 057aa628a3
39 changed files with 1620 additions and 1062 deletions
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, type ButtonProps } from '@/components/ui/Button';
+
+export interface BackButtonProps extends Omit<ButtonProps, 'onClick'> {
+  /** Route explicite vers laquelle naviguer (ex: "/support"). Si non spécifié, fait un retour arrière navigateur (-1) */
+  to?: string;
+  /** Texte à afficher à côté de la flèche */
+  label?: string;
+  /** Callback optionnel si vous souhaitez intercepter le clic */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const BackButton: React.FC<BackButtonProps> = ({
+  to,
+  label = "Retour",
+  onClick,
+  variant = "ghost",
+  size = "sm",
+  children,
+  className,
+  ...props
+}) => {
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(e);
+    } else if (to) {
+      navigate(to);
+    } else {
+      navigate(-1); // Comportement natif "Précédent" dans l'historique
+    }
+  };
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={handleClick}
+      leftIcon={
+        <svg 
+          className="w-4 h-4 transition-transform group-hover:-translate-x-0.5" 
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      }
+      className={className}
+      {...props}
+    >
+      {children || label}
+    </Button>
+  );
+};
+
+export default BackButton;
@@ -1,37 +1,90 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { cn } from '@/utils/utils';

-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+// 1. Dictionnaire des variantes (Sémantique de couleurs GISE)
+const variantStyles = {
+  primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm border border-transparent",
+  secondary: "bg-slate-900 text-white hover:bg-slate-800 focus:ring-slate-900 shadow-sm border border-transparent",
+  danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 shadow-sm border border-transparent",
+  success: "bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-600 shadow-sm border border-transparent",
+  outline: "bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-900",
+  ghost: "bg-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-900 border border-transparent",
+};
+
+// 2. Dictionnaire des tailles
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2.5 text-sm",
+  lg: "px-6 py-3 text-base w-full sm:w-auto", // w-full sur mobile par défaut, auto sur desktop
+  icon: "p-2", // Format carré optimisé pour les boutons sans texte
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof variantStyles;
+  size?: keyof typeof sizeStyles;
  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
 }

-export const Button: React.FC<ButtonProps> = ({
-  children, variant = 'primary', size = 'md', isLoading, className, disabled, ...props
-}) => {
-  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
-  
-  const variants = {
-    primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm",
-    outline: "border border-slate-200 text-slate-900 hover:border-blue-900 hover:bg-blue-50 focus:ring-blue-900",
-    ghost: "text-slate-600 hover:text-slate-900 hover:bg-slate-100 focus:ring-slate-500",
-  };
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { 
+      className, 
+      variant = 'primary', 
+      size = 'md', 
+      isLoading = false, 
+      leftIcon, 
+      rightIcon, 
+      children, 
+      disabled, 
+      type = "button",
+      ...props 
+    }, 
+    ref
+  ) => {
+    const newLocal = "ml-2 flex-shrink-0";
+    return (
+      <button
+        ref={ref} // Indispensable pour l'accessibilité ou des librairies externes
+        type={type}
+        disabled={disabled || isLoading}
+        className={cn(
+          // Styles de base structurels
+          "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200",
+          "focus:outline-none active:scale-[0.98]",
+          "disabled:opacity-60 disabled:pointer-events-none disabled:active:scale-100",
+          // Application dynamique des dictionnaires
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {/* Spinner SVG optimisé pour le chargement */}
+        {isLoading && (
+          <svg 
+            className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" 
+            xmlns="http://www.w3.org/2000/svg" 
+            fill="none" 
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        )}
+        
+        {/* Icône de gauche (masquée si chargement) */}
+        {!isLoading && leftIcon && <span className="mr-2 shrink-0">{leftIcon}</span>}
+        
+        {/* Texte du bouton */}
+        <span className="truncate">{children}</span>

-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-base",
-    lg: "w-full py-3 text-base",
-  };
+        {/* Icône de droite */}
+        {rightIcon && <span className={newLocal}>{rightIcon}</span>}
+      </button>
+    );
+  }
+);

-  return (
-    <button
-      disabled={disabled || isLoading}
-      className={cn(baseStyles, variants[variant], sizes[size], (disabled || isLoading) && "opacity-50 cursor-not-allowed", className)}
-      {...props}
-    >
-      {isLoading && <span className="mr-2 w-4 h-4 rounded-full border-2 border-current border-b-transparent animate-spin" />}
-      {children}
-    </button>
-  );
-};
+Button.displayName = "Button";
@@ -0,0 +1,75 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2.5 text-sm",
+};
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  sizeVariant?: keyof typeof sizeStyles; // Gestion de la taille
+  leftIcon?: React.ReactNode;          // Icône optionnelle intégrée à gauche
+  rightIcon?: React.ReactNode;         // Icône optionnelle intégrée à droite
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ 
+    className, 
+    label, 
+    error, 
+    id, 
+    sizeVariant = 'md', 
+    leftIcon, 
+    rightIcon, 
+    ...props 
+  }, ref) => {
+    const autoId = useId();
+    const inputId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        
+        <div className="relative flex items-center w-full">
+          {/* Icône à gauche */}
+          {leftIcon && (
+            <span className="absolute left-3 text-slate-400 pointer-events-none flex items-center">
+              {leftIcon}
+            </span>
+          )}
+
+          <input
+            id={inputId}
+            ref={ref}
+            className={cn(
+              "flex w-full rounded-lg border border-slate-300 bg-white text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors",
+              sizeStyles[sizeVariant],
+              leftIcon && "pl-9",  // Décale le texte à droite si icône gauche
+              rightIcon && "pr-9", // Décale le texte à gauche si icône droite
+              error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+              className
+            )}
+            {...props}
+          />
+
+          {/* Icône à droite */}
+          {rightIcon && (
+            <span className="absolute right-3 text-slate-400 pointer-events-none flex items-center">
+              {rightIcon}
+            </span>
+          )}
+        </div>
+
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
@@ -0,0 +1,34 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+import type { TicketMessage } from '@/types/Message';
+
+interface MessageBubbleProps {
+  message: TicketMessage;
+  currentUserId?: string;
+}
+
+export const MessageBubble: React.FC<MessageBubbleProps> = ({ message, currentUserId }) => {
+  const isMyMessage = message.expand?.author?.id === currentUserId;
+  const authorName = message.expand?.author?.name || message.expand?.author?.email || 'Expert GISE';
+  const time = new Date(message.created).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+
+  return (
+    <div className={cn("flex flex-col", isMyMessage ? "items-end" : "items-start")}>
+      <div className="flex items-center space-x-2 mb-1 px-1">
+        <span className="text-xs font-medium text-slate-600">{authorName}</span>
+        <span className="text-[10px] text-slate-400">{time}</span>
+      </div>
+      
+      <div 
+        className={cn(
+          "max-w-[85%] rounded-2xl px-4 py-3 text-sm shadow-sm",
+          isMyMessage 
+            ? "bg-blue-900 text-white rounded-br-none" 
+            : "bg-slate-100 text-slate-800 rounded-bl-none border border-slate-200/60"
+        )}
+      >
+        {message.content}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card, CardContent } from '@/components/ui/Card';
+
+interface PageHeaderProps {
+  title: string;
+  description: string;
+  /** Le contenu optionnel à afficher sur la droite (Bouton, Badge, etc.) */
+  children?: React.ReactNode; 
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ title, description, children }) => {
+  return (
+    <Card className="border-slate-200 shadow-sm">
+      <CardContent className="p-6 sm:px-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
+            {title}
+          </h1>
+          <p className="text-sm text-slate-500 mt-1">
+            {description}
+          </p>
+        </div>
+        
+        {/* S'il y a des actions passées en "children", on les affiche ici */}
+        {children && (
+          <div className="shrink-0">
+            {children}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PageHeader;
@@ -0,0 +1,55 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+}
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  options: SelectOption[];
+  placeholder?: string; // Optionnel : ajoute un choix vide par défaut
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, label, error, id, options, placeholder, ...props }, ref) => {
+    const autoId = useId();
+    const selectId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={selectId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        <select
+          id={selectId}
+          ref={ref}
+          className={cn(
+            "flex w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors cursor-pointer",
+            error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+            className
+          )}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
@@ -20,26 +20,29 @@ const STATUS_CONFIG: Record<AegisStatus, { bg: string; dot: string }> = {
    bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
    dot: 'bg-emerald-500',
  },
+  'Ouvert': { bg: 'bg-blue-50 text-blue-700 border-blue-200/60', dot: 'bg-blue-500' },

  // Statuts Intermédiaires / En cours
  'Dégradé': {
    bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
    dot: 'bg-amber-500',
  },
-  'En déploiement': {
+  'En Déploiement': {
    bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
    dot: 'bg-blue-500',
  },
+  'En Analyse': { bg: 'bg-amber-50 text-amber-700 border-amber-200/60', dot: 'bg-amber-500' },

  // Statuts Alertes / Inactifs
  'Hors Ligne': {
    bg: 'bg-red-50 text-red-700 border-red-200/60',
    dot: 'bg-red-500',
  },
-  'Suspendu': {
+  'Annulé': {
    bg: 'bg-slate-100 text-slate-700 border-slate-200',
    dot: 'bg-slate-400',
  },
+  'Résolu': { bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60', dot: 'bg-emerald-500' },
 };

 export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) => {
@@ -0,0 +1,38 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, label, error, id, rows = 4, ...props }, ref) => {
+    const autoId = useId();
+    const textareaId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={textareaId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        <textarea
+          id={textareaId}
+          ref={ref}
+          rows={rows}
+          className={cn(
+            "flex w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors resize-y",
+            error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";
@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Ticket } from '@/types/Ticket';
+import { StatusBadge } from '@/components/ui/StatusBadge';
+
+interface TicketRowProps {
+  ticket: Ticket;
+  onClick: (id: string) => void;
+}
+
+export const TicketRow: React.FC<TicketRowProps> = ({ ticket, onClick }) => {
+  return (
+    <div 
+      onClick={() => onClick(ticket.id)}
+      className="p-6 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group"
+    >
+      <div className="space-y-1">
+        <div className="flex items-center space-x-3">
+          <span className="text-xs font-semibold px-2 py-0.5 bg-slate-100 text-slate-700 rounded border border-slate-200">
+            {ticket.category}
+          </span>
+          <span className="text-xs text-slate-400">
+            Ouvert le {new Date(ticket.created).toLocaleDateString('fr-FR')}
+          </span>
+        </div>
+        <h3 className="text-sm font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">
+          {ticket.subject}
+        </h3>
+      </div>
+      
+      <div>
+        <StatusBadge status={ticket.status} />
+      </div>
+    </div>
+  );
+};