refact & cleanup : Sidebar, Button, card, EmptyState, Loader, ServiceObject, StatusBadge, UptameObject, BackupWidget, SecurityWidget, ServicesWidget, SupportCtaWidget, UptimeWidget, DashboardLayout
This commit is contained in:
LathanDevers
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
|
||||
export const Analytics: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto py-8 px-8">
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 mb-6"
|
||||
>
|
||||
← Retour au tableau de bord
|
||||
</button>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="bg-slate-50">
|
||||
<h3 className="text-xl font-bold text-slate-900">Télémétrie & Analytics</h3>
|
||||
<p className="text-sm text-slate-500">Données réseau en temps réel</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
|
||||
<p className="text-2xl font-bold text-emerald-600">100%</p>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
|
||||
<p className="text-2xl font-bold text-slate-900">14%</p>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
|
||||
<p className="text-2xl font-bold text-slate-900">1.2 TB</p>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
|
||||
<p className="text-2xl font-bold text-blue-900">3,492</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Représentation visuelle du graphe */}
|
||||
<h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
|
||||
<div className="h-48 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
|
||||
{[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
|
||||
<div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Analytics;
|
||||
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
|
||||
// On pourrait extraire ces données dans un Custom Hook plus tard
|
||||
const BACKUP_HISTORY = [
|
||||
{ date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
|
||||
{ date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
|
||||
{ date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
|
||||
{ date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
|
||||
];
|
||||
|
||||
export const Backups: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto py-8 px-8">
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 mb-6"
|
||||
>
|
||||
← Retour au tableau de bord
|
||||
</button>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="bg-slate-50">
|
||||
<h3 className="text-xl font-bold text-slate-900">Historique des Sauvegardes PRA</h3>
|
||||
<p className="text-sm text-slate-500">Journal d'exécution de la règle 3-2-1-1-0</p>
|
||||
</CardHeader>
|
||||
|
||||
{/* On retire le padding sur le content pour que le tableau touche les bords */}
|
||||
<CardContent className="p-0 overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-slate-200">
|
||||
<thead className="bg-white">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date d'exécution</th>
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Cible (Nœud)</th>
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Volume</th>
|
||||
<th className="px-6 py-4 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{BACKUP_HISTORY.map((bkp, i) => (
|
||||
<tr key={i} className="hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right">
|
||||
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200/60">
|
||||
Succès (Chiffré)
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Backups;
|
||||
@@ -0,0 +1,215 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { cn } from '@/utils/utils';
|
||||
import {
|
||||
EVOLUTION_OPTIONS,
|
||||
EVOLUTION_CATEGORIES,
|
||||
type EvolutionOption
|
||||
} from '@/data/evolutionOptions';
|
||||
|
||||
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 vers le Dashboard après confirmation de la demande
|
||||
useEffect(() => {
|
||||
if (submitSuccess) {
|
||||
const timer = setTimeout(() => {
|
||||
navigate('/dashboard');
|
||||
}, 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [submitSuccess, navigate]);
|
||||
|
||||
// Filtrage combiné par onglet et recherche textuelle
|
||||
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">
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1"
|
||||
>
|
||||
← Retour au tableau de bord
|
||||
</button>
|
||||
<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 CONFIRMATION AVEC 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 ONGLETS DE FILTRAGE */}
|
||||
<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-1 overflow-x-auto pb-2 sm:pb-0 scrollbar-none">
|
||||
{EVOLUTION_CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={cn(
|
||||
"px-3.5 py-2 text-xs font-semibold rounded-lg whitespace-nowrap transition-all duration-150",
|
||||
selectedCategory === cat.id
|
||||
? "bg-slate-900 text-white shadow-sm"
|
||||
: "bg-white text-slate-600 hover:bg-slate-100 border border-slate-200"
|
||||
)}
|
||||
>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Champ de recherche */}
|
||||
<div className="relative min-w-60">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher une initiative..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2 text-xs bg-white border border-slate-200 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-900 focus:border-transparent"
|
||||
/>
|
||||
<svg className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" 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>
|
||||
|
||||
{/* AFFICHAGE DES ERREURS D'ENVOI */}
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm flex items-center justify-between">
|
||||
<span>{error}</span>
|
||||
</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) => {
|
||||
const isThisSubmitting = isSubmitting && selectedOptionId === option.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={option.id}
|
||||
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",
|
||||
isThisSubmitting ? "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={isThisSubmitting}
|
||||
disabled={isSubmitting}
|
||||
onClick={() => handleSelectOption(option)}
|
||||
className="w-full sm:w-auto text-xs"
|
||||
>
|
||||
Engager cette initiative →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* PIED DE PAGE D'ASSISTANCE */}
|
||||
<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">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white">Besoin d'un cadrage sur-mesure ?</h4>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Nos ingénieurs restent joignables par téléphone pour les demandes urgentes ou complexes.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigate('/support')}
|
||||
className="border-slate-700 text-slate-200 hover:bg-slate-800 hover:border-slate-600 text-xs whitespace-nowrap"
|
||||
>
|
||||
Consulter le Service Desk
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfrastructureEvolution;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { pb } from '../../config/pocketbase';
|
||||
import { pb } from '@services/pocketbase';
|
||||
import * as OTPAuth from 'otpauth';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
|
||||
@@ -221,7 +221,7 @@ export default function Login({ onLoginSuccess }: LoginProps) {
|
||||
<div className="text-center mb-6">
|
||||
<p className="text-sm font-medium text-slate-900">Configuration de la sécurité</p>
|
||||
<p className="text-xs text-slate-500 mt-2 mb-4">Scannez ce QR Code avec Google Authenticator ou Authy pour lier votre appareil.</p>
|
||||
<div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg inline-block shadow-sm">
|
||||
<div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
|
||||
<QRCodeSVG value={qrUrl} size={150} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { pb } from '../../config/pocketbase';
|
||||
import { pb } from '@services/pocketbase';
|
||||
|
||||
interface NewTicketProps {
|
||||
onCancel: () => void;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { pb } from '../../config/pocketbase';
|
||||
import NewTicket from './NewTicket'; // Ajustez le chemin d'import selon votre arborescence
|
||||
import TicketDetail from './TicketDetail'; // Ajustez le chemin d'import selon votre arborescence
|
||||
import { pb } from '@services/pocketbase';
|
||||
import NewTicket from './NewTicket';
|
||||
import TicketDetail from './TicketDetail';
|
||||
|
||||
interface Ticket {
|
||||
id: string;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { pb } from '../../config/pocketbase';
|
||||
import { pb } from '@services/pocketbase';
|
||||
|
||||
interface Ticket {
|
||||
id: string;
|
||||
@@ -0,0 +1,51 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import UptimeWidget from '@/components/widgets/UptimeWidget';
|
||||
import BackupWidget from '@/components/widgets/BackupWidget';
|
||||
import SecurityWidget from '@/components/widgets/SecurityWidget';
|
||||
import ServicesWidget from '@/components/widgets/ServicesWidget';
|
||||
import SupportCtaWidget from '@/components/widgets/SupportCtaWidget';
|
||||
|
||||
export default function TrustCenter() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
|
||||
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-slate-200 px-8 py-6">
|
||||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 tracking-tight">Tableau de bord de l'infrastructure</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Espace sécurisé AEGIS • Synchronisation en temps réel</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="flex h-3 w-3 relative">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
|
||||
</span>
|
||||
<span className="text-sm font-medium text-slate-700">Connexion chiffrée</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Grid */}
|
||||
<main className="max-w-7xl mx-auto px-8 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<UptimeWidget />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<BackupWidget onClick={() => navigate('/backups')} />
|
||||
<SecurityWidget onClick={() => navigate('/analytics')} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<ServicesWidget />
|
||||
<SupportCtaWidget />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import UptimeWidget from '../../components/widgets/UptimeWidget';
|
||||
import BackupWidget from '../../components/widgets/BackupWidget';
|
||||
import SecurityWidget from '../../components/widgets/SecurityWidget';
|
||||
import ServicesWidget from '../../components/widgets/ServicesWidget';
|
||||
|
||||
interface TrustCenterProps {
|
||||
onNavigate?: (view: 'dashboard' | 'support' | 'vault' | 'account') => void;
|
||||
}
|
||||
|
||||
export default function TrustCenter({ onNavigate }: TrustCenterProps) {
|
||||
const [activeModal, setActiveModal] = useState<'none' | 'evolution' | 'analytics' | 'backups'>('none');
|
||||
//const [selectedService, setSelectedService] = useState<string>('');
|
||||
const [evolutionChoice, setEvolutionChoice] = useState<string>('');
|
||||
|
||||
const closeModal = () => setActiveModal('none');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 font-sans text-slate-900 relative">
|
||||
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-slate-200 px-8 py-6">
|
||||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 tracking-tight">Tableau de bord de l'infrastructure</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Espace sécurisé AEGIS • Synchronisation en temps réel</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="flex h-3 w-3 relative">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
|
||||
</span>
|
||||
<span className="text-sm font-medium text-slate-700">Connexion chiffrée</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Grid */}
|
||||
<main className="max-w-7xl mx-auto px-8 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<UptimeWidget />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<BackupWidget onClick={() => setActiveModal('backups')} />
|
||||
<SecurityWidget />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<ServicesWidget />
|
||||
|
||||
{/* CTA Support ITSM Actif */}
|
||||
<div className="bg-blue-900 rounded-xl shadow-sm border border-blue-800 p-6 text-white">
|
||||
<h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
|
||||
<p className="text-blue-200 text-sm mb-4 leading-relaxed">
|
||||
Déclarez un incident critique ou demandez une évolution de votre infrastructure.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => onNavigate && onNavigate('support')}
|
||||
className="w-full bg-white text-blue-900 hover:bg-slate-50 font-medium py-2.5 px-4 rounded-lg transition-colors shadow-sm"
|
||||
>
|
||||
Ouvrir un ticket sécurisé
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* --- OVERLAY MODALES --- */}
|
||||
{activeModal !== 'none' && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
|
||||
|
||||
{/* MODALE 1 : ÉVOLUTION STRATÉGIQUE */}
|
||||
{activeModal === 'evolution' && (
|
||||
<div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
||||
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
|
||||
<h3 className="text-lg font-bold text-slate-900">Demande d'évolution d'infrastructure</h3>
|
||||
<button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h4 className="text-base font-semibold text-slate-900 mb-4">Quel est votre prochain objectif d'infrastructure ?</h4>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ id: 'sec', title: 'Renforcer la sécurité face aux cybermenaces', desc: 'Audits de vulnérabilité, Plan de Reprise d\'Activité (PRA)' },
|
||||
{ id: 'net', title: 'Étendre les capacités du réseau actuel', desc: 'Migration Cloud Privé, ouverture de nouveaux sites' },
|
||||
{ id: 'gov', title: 'Mise en conformité légale & Gouvernance', desc: 'Accompagnement RGPD, Directive NIS2, vCISO' },
|
||||
{ id: 'oth', title: 'Autre demande stratégique', desc: 'Outils souverains, audit spécifique' }
|
||||
].map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
onClick={() => setEvolutionChoice(option.id)}
|
||||
className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${evolutionChoice === option.id ? 'border-blue-900 bg-blue-50' : 'border-slate-200 hover:border-blue-300'}`}
|
||||
>
|
||||
<p className="font-semibold text-slate-900">{option.title}</p>
|
||||
<p className="text-sm text-slate-500 mt-1">{option.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-8 flex justify-end space-x-3">
|
||||
<button onClick={closeModal} className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded-lg">Annuler</button>
|
||||
<button onClick={() => { alert('Redirection vers un ticket projet avec le choix stratégique.'); closeModal(); }} className="px-6 py-2 text-sm font-medium text-white bg-blue-900 hover:bg-blue-800 rounded-lg shadow-sm">Valider la demande stratégique</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* MODALE 2 : ANALYTICS SERVICES */}
|
||||
{activeModal === 'analytics' && (
|
||||
<div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
||||
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-slate-900">Télémétrie & Analytics</h3>
|
||||
<p className="text-sm text-slate-500">{'selectedService'}</p>
|
||||
</div>
|
||||
<button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
|
||||
<p className="text-2xl font-bold text-emerald-600">100%</p>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
|
||||
<p className="text-2xl font-bold text-slate-900">14%</p>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
|
||||
<p className="text-2xl font-bold text-slate-900">1.2 TB</p>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
|
||||
<p className="text-2xl font-bold text-blue-900">3,492</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Représentation visuelle d'un graphe */}
|
||||
<h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
|
||||
<div className="h-32 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
|
||||
{[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
|
||||
<div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* MODALE 3 : HISTORIQUE DES SAUVEGARDES */}
|
||||
{activeModal === 'backups' && (
|
||||
<div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
||||
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
|
||||
<h3 className="text-lg font-bold text-slate-900">Historique des Sauvegardes PRA</h3>
|
||||
<button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||
</div>
|
||||
<div className="p-0 overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-slate-200">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date d'exécution</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Cible (Nœud)</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Volume</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Statut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{[
|
||||
{ date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
|
||||
{ date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
|
||||
{ date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
|
||||
{ date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
|
||||
].map((bkp, i) => (
|
||||
<tr key={i} className="hover:bg-slate-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
|
||||
Succès (Chiffré)
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user