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,124 @@
+// Fichier : src/pages/InfrastructureEvolution.tsx
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
+
+import { BackButton } from '@/components/ui/BackButton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Button } from '@/components/ui/Button';
+
+// Nos nouveaux composants
+import { EvolutionOptionCard } from '@/components/widgets/EvolutionOptionCard';
+import { EvolutionFilterBar } from '@/components/widgets/EvolutionFilterBar';
+
+import { EVOLUTION_OPTIONS, type EvolutionOption } from '@/data/evolutionOptions';
+import SupportFooterWidget from '@/components/widgets/SupportFooterWidget';
+
+export const InfrastructureEvolution: React.FC = () => {
+  const navigate = useNavigate();
+  const { submitRequest, isSubmitting, submitSuccess, error } = useEvolutionRequest();
+  
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);
+
+  // Redirection automatique
+  useEffect(() => {
+    if (submitSuccess) {
+      const timer = setTimeout(() => navigate('/dashboard'), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [submitSuccess, navigate]);
+
+  // Logique de filtrage
+  const filteredOptions = EVOLUTION_OPTIONS.filter((opt) => {
+    const matchesCategory = selectedCategory === 'all' || opt.category === selectedCategory;
+    const matchesSearch = opt.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                          opt.description.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  const handleSelectOption = (option: EvolutionOption) => {
+    setSelectedOptionId(option.id);
+    submitRequest(option.subject, option.payloadDescription);
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto py-8 px-4 sm:px-6">
+      
+      {/* EN-TÊTE DE LA PAGE */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <BackButton to="/dashboard" label="Retour au tableau de bord" />
+          <span className="text-xs font-mono font-bold tracking-widest text-slate-400 uppercase">
+            AEGIS • Catalogue Projets
+          </span>
+        </div>
+        <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">
+          Évolution & Extension de l'Infrastructure
+        </h1>
+        <p className="text-slate-600 mt-2 text-base">
+          Sélectionnez une initiative stratégique. Votre demande ouvrira immédiatement un ticket projet sécurisé auprès de votre référent technique GISE.
+        </p>
+      </div>
+
+      {/* ÉTAT DE SUCCÈS */}
+      {submitSuccess ? (
+        <div className="bg-white rounded-xl border border-emerald-200 shadow-sm p-12 text-center max-w-xl mx-auto my-12 animate-in fade-in zoom-in-95 duration-200">
+          <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
+            <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold text-slate-900 mb-2">Demande d'évolution enregistrée</h2>
+          <p className="text-slate-600 text-sm mb-6 leading-relaxed">
+            Votre ticket projet a été chiffré et transmis à notre équipe d'ingénierie. Un expert GISE analyse vos prérequis et reprendra contact avec vous sous 24h ouvrées.
+          </p>
+          <p className="text-xs text-slate-400 font-mono">Redirection automatique vers le Trust Center...</p>
+        </div>
+      ) : (
+        <>
+          {/* BARRE DE RECHERCHE ET FILTRES */}
+          <EvolutionFilterBar 
+            selectedCategory={selectedCategory}
+            onSelectCategory={setSelectedCategory}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+          />
+
+          {/* AFFICHAGE DES ERREURS */}
+          {error && (
+            <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {/* GRILLE DES OPTIONS */}
+          {filteredOptions.length === 0 ? (
+            <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
+              <EmptyState message="Aucune initiative ne correspond à votre recherche." />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              {filteredOptions.map((option) => (
+                <EvolutionOptionCard
+                  key={option.id}
+                  option={option}
+                  isSubmitting={isSubmitting && selectedOptionId === option.id}
+                  isDisabled={isSubmitting} // On bloque toutes les cartes pendant un envoi
+                  onSelect={handleSelectOption}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* PIED DE PAGE D'ASSISTANCE */}
+          <SupportFooterWidget />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default InfrastructureEvolution;