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,62 @@
+import React from 'react';
+import { EVOLUTION_CATEGORIES } from '@/data/evolutionOptions';
+
+// Importation de nos atomes UI
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+interface EvolutionFilterBarProps {
+  selectedCategory: string;
+  onSelectCategory: (categoryId: string) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export const EvolutionFilterBar: React.FC<EvolutionFilterBarProps> = ({
+  selectedCategory,
+  onSelectCategory,
+  searchQuery,
+  onSearchChange,
+}) => {
+  return (
+    <div className="space-y-4 mb-8">
+      <div className="flex flex-col sm:flex-row gap-4 justify-between items-stretch sm:items-center">
+
+        {/* ONGLETS DE CATÉGORIES */}
+        <div className="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 scrollbar-hide">
+          {EVOLUTION_CATEGORIES.map((cat) => (
+            <Button
+              key={cat.id}
+              size="sm"
+              // Magie du Design System : on bascule simplement entre la variante sombre et claire
+              variant={selectedCategory === cat.id ? 'secondary' : 'outline'}
+              onClick={() => onSelectCategory(cat.id)}
+              className="whitespace-nowrap"
+            >
+              {cat.label}
+            </Button>
+          ))}
+        </div>
+
+        {/* CHAMP DE RECHERCHE */}
+        <div className="relative min-w-60">
+          <Input
+            type="text"
+            sizeVariant="sm" // Format compact pour la barre de recherche
+            placeholder="Rechercher une initiative..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            leftIcon={
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            }
+          />
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default EvolutionFilterBar;
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/utils/utils';
+import type { EvolutionOption } from '@/data/evolutionOptions';
+
+interface EvolutionOptionCardProps {
+  option: EvolutionOption;
+  isSubmitting: boolean;
+  isDisabled: boolean;
+  onSelect: (option: EvolutionOption) => void;
+}
+
+export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
+  option,
+  isSubmitting,
+  isDisabled,
+  onSelect
+}) => {
+  return (
+    <div
+      className={cn(
+        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-200 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
+        isSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
+      )}
+    >
+      <div>
+        {/* En-tête de la carte */}
+        <div className="flex items-center justify-between gap-2 mb-3">
+          <span className="text-[11px] font-mono font-bold tracking-wider uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600">
+            {option.categoryLabel}
+          </span>
+          {option.badgeText && (
+            <span className="text-[10px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-blue-50 text-blue-800 border border-blue-100">
+              {option.badgeText}
+            </span>
+          )}
+        </div>
+
+        {/* Titre & Description */}
+        <h3 className="text-base font-bold text-slate-900 group-hover:text-blue-900 transition-colors">
+          {option.title}
+        </h3>
+        <p className="text-xs text-slate-600 mt-2 leading-relaxed">
+          {option.description}
+        </p>
+      </div>
+
+      {/* Bouton d'action */}
+      <div className="mt-6 pt-4 border-t border-slate-100 flex justify-end">
+        <Button
+          size="sm"
+          isLoading={isSubmitting}
+          disabled={isDisabled}
+          onClick={() => onSelect(option)}
+          className="w-full sm:w-auto text-xs"
+        >
+          Engager cette initiative →
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { useCreateTicket } from '@/hooks/useCreateTicket';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { Textarea } from '@/components/ui/Textarea';
+import { cn } from '@/utils/utils';
+
+interface NewTicketWidgetProps {
+  onCancel: () => void;
+  onSuccess: (ticketId: string) => void;
+}
+
+export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSuccess }) => {
+  const { createTicket, isSubmitting, error } = useCreateTicket();
+
+  // États locaux isolés dans le widget
+  const [category, setCategory] = useState<'Incident Critique' | 'Évolution' | 'Administratif'>('Incident Critique');
+  const [ci, setCi] = useState('general');
+  const [subject, setSubject] = useState('');
+  const [affectedAsset, setAffectedAsset] = useState('');
+  const [incidentTime, setIncidentTime] = useState('');
+  const [description, setDescription] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Le hook gère la logique de création
+    const newTicketId = await createTicket({
+      category, ci, subject, affectedAsset, incidentTime, description
+    });
+
+    // On délègue la navigation (ou l'action post-création) au composant parent
+    if (newTicketId) {
+      onSuccess(newTicketId);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="bg-slate-50 border-b border-slate-100">
+        <h1 className="text-xl font-bold text-slate-900 tracking-tight">Ouvrir un nouveau ticket</h1>
+        <p className="text-sm text-slate-500 mt-0.5">Qualification de votre requête ITSM</p>
+      </CardHeader>
+
+      <CardContent className="p-6 sm:p-8">
+        <form onSubmit={handleSubmit} className="space-y-8">
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {/* SECTION 1 : QUALIFICATION */}
+          <div>
+            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
+              1. Qualification de la demande
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <Select
+                label="Type de demande"
+                value={category}
+                onChange={(e) => setCategory(e.target.value as any)}
+                options={[
+                  { value: 'Incident Critique', label: 'Incident Critique (Panne, Dégradation)' },
+                  { value: 'Évolution', label: 'Évolution (Ajout de ressources, Modification)' },
+                  { value: 'Administratif', label: 'Administratif (Facturation, Contrat)' },
+                ]}
+              />
+
+              <Select
+                label="Infrastructure concernée (CI)"
+                value={ci}
+                onChange={(e) => setCi(e.target.value)}
+                options={[
+                  { value: 'general', label: 'Général / Non spécifique' },
+                  { value: 'px1', label: 'Serveur Proxmox Principal (Hyperviseur)' },
+                  { value: 'fw1', label: 'Pare-feu Périphérique (WAN)' },
+                  { value: 'db1', label: 'Base de données MariaDB' },
+                ]}
+              />
+            </div>
+          </div>
+
+          {/* SECTION 2 : DÉTAILS */}
+          <div>
+            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
+              2. Détails techniques
+            </h2>
+            <div className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Input
+                  label="Sujet de l'intervention"
+                  required
+                  value={subject}
+                  onChange={(e) => setSubject(e.target.value)}
+                  placeholder="Ex: Perte de paquets sur le lien WAN principal"
+                />
+
+                <Input
+                  label="Équipement ou Produit concerné (Optionnel)"
+                  value={affectedAsset}
+                  onChange={(e) => setAffectedAsset(e.target.value)}
+                  placeholder="Ex: Ordinateur Direction, Imprimante X, etc."
+                />
+              </div>
+
+              {category === 'Incident Critique' && (
+                <div className="animate-in fade-in slide-in-from-top-2 duration-300 max-w-sm">
+                  <Input
+                    type="datetime-local"
+                    label="Heure exacte du début de l'incident"
+                    required
+                    value={incidentTime}
+                    onChange={(e) => setIncidentTime(e.target.value)}
+                    className="bg-red-50/30 border-red-300 focus:border-red-500 focus:ring-red-500"
+                  />
+                </div>
+              )}
+
+              <Textarea
+                label="Description détaillée"
+                required
+                rows={6}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Décrivez précisément votre besoin ou les symptômes observés..."
+              />
+            </div>
+          </div>
+
+          {/* ACTIONS */}
+          <div className="pt-6 flex justify-end gap-3 border-t border-slate-100">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel} // Utilisation de la prop
+            >
+              Annuler
+            </Button>
+            <Button
+              type="submit"
+              isLoading={isSubmitting}
+              className={cn(
+                category === 'Incident Critique'
+                  ? "bg-red-600 hover:bg-red-700 focus:ring-red-600"
+                  : ""
+              )}
+            >
+              Soumettre le ticket
+            </Button>
+          </div>
+
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default NewTicketWidget;
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+
+interface SupportFooterWidgetProps {
+  title?: string;
+  description?: string;
+  buttonText?: string;
+}
+
+export const SupportFooterWidget: React.FC<SupportFooterWidgetProps> = ({
+  title = "Besoin d'un cadrage sur-mesure ?",
+  description = "Nos ingénieurs restent joignables pour les demandes complexes.",
+  buttonText = "Consulter le Service Desk"
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="mt-12 bg-slate-900 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
+      <div>
+        <h4 className="text-sm font-bold text-white">{title}</h4>
+        <p className="text-xs text-slate-400 mt-0.5">
+          {description}
+        </p>
+      </div>
+      <Button
+        variant="ghost" // On utilise ghost pour ne pas avoir le fond blanc par défaut
+        size="sm"
+        onClick={() => navigate('/support')}
+        // On surcharge les couleurs pour l'adapter au fond sombre
+        className="border border-slate-700 text-slate-200 hover:bg-slate-800 hover:text-white hover:border-slate-600 text-xs whitespace-nowrap"
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+};
+
+export default SupportFooterWidget;
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import type { TicketMessage } from '@/types/Message';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { MessageBubble } from '@/components/ui/MessageBubble';
+
+interface TicketChatWidgetProps {
+  messages: TicketMessage[];
+  currentUserId?: string;
+  isSending: boolean;
+  onSendMessage: (content: string) => Promise<void>;
+}
+
+export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({ 
+  messages, 
+  currentUserId, 
+  isSending, 
+  onSendMessage 
+}) => {
+  const [newMessage, setNewMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newMessage.trim()) return;
+
+    try {
+      await onSendMessage(newMessage);
+      setNewMessage(''); // Vide l'input uniquement si l'envoi réussit
+    } catch (err) {
+      alert("Erreur lors de l'envoi.");
+    }
+  };
+
+  return (
+    <Card className="flex flex-col h-[500px] overflow-hidden shadow-sm">
+      <div className="p-4 border-b border-slate-100 bg-slate-50">
+        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés avec l'ingénierie</h2>
+      </div>
+
+      {/* Zone des messages */}
+      <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide bg-white">
+        {messages.length === 0 ? (
+          <EmptyState message="Aucun message pour l'instant. Démarrez la conversation ci-dessous." />
+        ) : (
+          messages.map((msg) => (
+            <MessageBubble key={msg.id} message={msg} currentUserId={currentUserId} />
+          ))
+        )}
+      </div>
+
+      {/* Zone de saisie avec notre composant UI */}
+      <form onSubmit={handleSubmit} className="p-4 border-t border-slate-100 bg-slate-50 flex items-start space-x-3">
+        <div className="flex-1">
+          <Input
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            placeholder="Écrivez votre message..."
+          />
+        </div>
+        <Button
+          type="submit"
+          isLoading={isSending}
+          disabled={isSending || !newMessage.trim()}
+          className="px-6"
+        >
+          Envoyer
+        </Button>
+      </form>
+    </Card>
+  );
+};
@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Ticket } from '@/types/Ticket';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { StatusBadge } from '@/components/ui/StatusBadge';
+
+interface TicketInfoWidgetProps {
+  ticket: Ticket;
+}
+
+export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) => {
+  return (
+    <Card>
+      <CardHeader className="bg-slate-50 border-b border-slate-100 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+        <div className="space-y-2">
+          <div className="flex items-center space-x-3">
+            <span className="text-xs font-bold uppercase tracking-wider px-2.5 py-1 bg-slate-200 text-slate-700 rounded-md">
+              {ticket.category}
+            </span>
+            <span className="text-xs font-mono text-slate-400">ID: {ticket.id}</span>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 leading-snug">{ticket.subject}</h1>
+          <p className="text-xs text-slate-500 font-medium">
+            Créé le {new Date(ticket.created).toLocaleString('fr-FR')}
+          </p>
+        </div>
+        
+        <StatusBadge status={ticket.status} className="shrink-0" />
+      </CardHeader>
+      
+      <CardContent className="p-6 bg-white">
+        <p className="text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">
+          Description du besoin :
+        </p>
+        <div className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
+          {ticket.description}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTickets } from '@/hooks/useTickets';
+import { TicketRow } from '@/components/ui/TicketRow';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Loader } from '@/components/ui/Loader';
+import { EmptyState } from '@/components/ui/EmptyState';
+
+interface TicketsWidgetProps {
+  onSelectTicket: (id: string) => void;
+}
+
+export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket }) => {
+  const { tickets, isLoading, error } = useTickets();
+
+  return (
+    <Card>
+      <CardContent className="p-0">
+        {/* En-tête du Widget */}
+        <div className="p-6 border-b border-slate-100">
+          <h2 className="text-lg font-semibold text-slate-900">Requêtes en cours et historiques</h2>
+        </div>
+
+        {/* Liste des tickets et états de chargement */}
+        <div className="divide-y divide-slate-100">
+          {error && (
+            <div className="p-6">
+              <EmptyState message={error} className="text-red-500 font-medium not-italic" />
+            </div>
+          )}
+          
+          {isLoading && !error && (
+            <Loader />
+          )}
+          
+          {!isLoading && !error && tickets.length === 0 && (
+            <div className="p-6">
+              <EmptyState message="Aucun ticket enregistré pour le moment." />
+            </div>
+          )}
+          
+          {!isLoading && !error && tickets.map((ticket) => (
+            <TicketRow 
+              key={ticket.id} 
+              ticket={ticket} 
+              onClick={onSelectTicket} 
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TicketsWidget;