Merge pull request 'change and add into components, widgets and pages' (#2) from refact/cleanup into test
Reviewed-on: maximus/aegis#2
This commit was merged in pull request #2.
This commit is contained in:
maximus
+7
-3
@@ -9,9 +9,11 @@ import TrustCenter from '@/pages/TrustCenter';
|
|||||||
import ServiceDesk from '@/pages/ServiceDesk';
|
import ServiceDesk from '@/pages/ServiceDesk';
|
||||||
import DocumentVault from '@/pages/DocumentVault';
|
import DocumentVault from '@/pages/DocumentVault';
|
||||||
import AccountSettings from '@/pages/AccountSettings';
|
import AccountSettings from '@/pages/AccountSettings';
|
||||||
import { InfrastructureEvolution } from '@/pages/InfrastructureEvolution';
|
import { InfrastructureEvolution } from '@/pages/trustcenter/InfrastructureEvolution';
|
||||||
import Analytics from '@/pages/Analytics';
|
import Analytics from '@/pages/trustcenter/Analytics';
|
||||||
import Backups from '@/pages/Backups';
|
import Backups from '@/pages/trustcenter/Backups';
|
||||||
|
import NewTicket from '@/pages/servicedesk/NewTicket';
|
||||||
|
import TicketDetail from '@/pages/servicedesk/TicketDetail';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
|
const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
|
||||||
@@ -59,6 +61,8 @@ function App() {
|
|||||||
<Route path="/evolution-infrastructure" element={<InfrastructureEvolution />} />
|
<Route path="/evolution-infrastructure" element={<InfrastructureEvolution />} />
|
||||||
<Route path="/analytics" element={<Analytics />} />
|
<Route path="/analytics" element={<Analytics />} />
|
||||||
<Route path="/backups" element={<Backups />} />
|
<Route path="/backups" element={<Backups />} />
|
||||||
|
<Route path="/support/new" element={<NewTicket />} />
|
||||||
|
<Route path="/support/tickets/:ticketId" element={<TicketDetail />} />
|
||||||
|
|
||||||
{/* Sécurité : Si l'URL n'existe pas, on redirige vers le dashboard */}
|
{/* Sécurité : Si l'URL n'existe pas, on redirige vers le dashboard */}
|
||||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||||
|
|||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
|
||||||
|
interface LocalLoginFormProps {
|
||||||
|
onSubmit: (email: string, pass: string) => void;
|
||||||
|
isLoading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoading }) => {
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onSubmit(email, password);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
|
||||||
|
<div className="mt-1">
|
||||||
|
<input
|
||||||
|
id="email" type="email" required placeholder="direction@client.com"
|
||||||
|
value={email} onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
|
||||||
|
<div className="mt-1">
|
||||||
|
<input
|
||||||
|
id="password" type="password" required placeholder="••••••••••••"
|
||||||
|
value={password} onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" isLoading={isLoading} className="w-full">
|
||||||
|
Authentification classique
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { QRCodeSVG } from 'qrcode.react';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
|
||||||
|
interface MfaFormProps {
|
||||||
|
isFirstSetup: boolean;
|
||||||
|
qrUrl: string;
|
||||||
|
isLoading: boolean;
|
||||||
|
onVerify: (code: string) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MfaForm: React.FC<MfaFormProps> = ({ isFirstSetup, qrUrl, isLoading, onVerify, onCancel }) => {
|
||||||
|
const [code, setCode] = useState('');
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onVerify(code);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleSubmit}>
|
||||||
|
{isFirstSetup ? (
|
||||||
|
<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.</p>
|
||||||
|
<div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
|
||||||
|
<QRCodeSVG value={qrUrl} size={150} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="text" required maxLength={6} placeholder="000000"
|
||||||
|
value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))} // Force les chiffres
|
||||||
|
className="block w-full rounded-md border border-slate-300 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 font-mono shadow-sm focus:border-blue-900 focus:ring-blue-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<Button type="button" variant="outline" onClick={onCancel} disabled={isLoading} className="w-1/3">
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" isLoading={isLoading} disabled={code.length !== 6} className="w-2/3 bg-emerald-600 hover:bg-emerald-700">
|
||||||
|
Déverrouiller
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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';
|
import { cn } from '@/utils/utils';
|
||||||
|
|
||||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
// 1. Dictionnaire des variantes (Sémantique de couleurs GISE)
|
||||||
variant?: 'primary' | 'outline' | 'ghost';
|
const variantStyles = {
|
||||||
size?: 'sm' | 'md' | 'lg';
|
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;
|
isLoading?: boolean;
|
||||||
|
leftIcon?: React.ReactNode;
|
||||||
|
rightIcon?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Button: React.FC<ButtonProps> = ({
|
export const Button = forwardRef<HTMLButtonElement, 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";
|
className,
|
||||||
|
variant = 'primary',
|
||||||
const variants = {
|
size = 'md',
|
||||||
primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm",
|
isLoading = false,
|
||||||
outline: "border border-slate-200 text-slate-900 hover:border-blue-900 hover:bg-blue-50 focus:ring-blue-900",
|
leftIcon,
|
||||||
ghost: "text-slate-600 hover:text-slate-900 hover:bg-slate-100 focus:ring-slate-500",
|
rightIcon,
|
||||||
};
|
children,
|
||||||
|
disabled,
|
||||||
const sizes = {
|
type = "button",
|
||||||
sm: "px-3 py-1.5 text-sm",
|
...props
|
||||||
md: "px-4 py-2 text-base",
|
},
|
||||||
lg: "w-full py-3 text-base",
|
ref
|
||||||
};
|
) => {
|
||||||
|
const newLocal = "ml-2 flex-shrink-0";
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
|
ref={ref} // Indispensable pour l'accessibilité ou des librairies externes
|
||||||
|
type={type}
|
||||||
disabled={disabled || isLoading}
|
disabled={disabled || isLoading}
|
||||||
className={cn(baseStyles, variants[variant], sizes[size], (disabled || isLoading) && "opacity-50 cursor-not-allowed", className)}
|
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}
|
{...props}
|
||||||
>
|
>
|
||||||
{isLoading && <span className="mr-2 w-4 h-4 rounded-full border-2 border-current border-b-transparent animate-spin" />}
|
{/* Spinner SVG optimisé pour le chargement */}
|
||||||
{children}
|
{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>
|
||||||
|
|
||||||
|
{/* Icône de droite */}
|
||||||
|
{rightIcon && <span className={newLocal}>{rightIcon}</span>}
|
||||||
</button>
|
</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',
|
bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
|
||||||
dot: 'bg-emerald-500',
|
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
|
// Statuts Intermédiaires / En cours
|
||||||
'Dégradé': {
|
'Dégradé': {
|
||||||
bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
|
bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
|
||||||
dot: 'bg-amber-500',
|
dot: 'bg-amber-500',
|
||||||
},
|
},
|
||||||
'En déploiement': {
|
'En Déploiement': {
|
||||||
bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
|
bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
|
||||||
dot: 'bg-blue-500',
|
dot: 'bg-blue-500',
|
||||||
},
|
},
|
||||||
|
'En Analyse': { bg: 'bg-amber-50 text-amber-700 border-amber-200/60', dot: 'bg-amber-500' },
|
||||||
|
|
||||||
// Statuts Alertes / Inactifs
|
// Statuts Alertes / Inactifs
|
||||||
'Hors Ligne': {
|
'Hors Ligne': {
|
||||||
bg: 'bg-red-50 text-red-700 border-red-200/60',
|
bg: 'bg-red-50 text-red-700 border-red-200/60',
|
||||||
dot: 'bg-red-500',
|
dot: 'bg-red-500',
|
||||||
},
|
},
|
||||||
'Suspendu': {
|
'Annulé': {
|
||||||
bg: 'bg-slate-100 text-slate-700 border-slate-200',
|
bg: 'bg-slate-100 text-slate-700 border-slate-200',
|
||||||
dot: 'bg-slate-400',
|
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 }) => {
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
|
||||||
|
interface TicketPayload {
|
||||||
|
category: string;
|
||||||
|
ci: string;
|
||||||
|
subject: string;
|
||||||
|
affectedAsset: string;
|
||||||
|
incidentTime: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useCreateTicket = () => {
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const createTicket = async (payload: TicketPayload): Promise<string | null> => {
|
||||||
|
setError(null);
|
||||||
|
setIsSubmitting(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const currentUser = pb.authStore.record || pb.authStore.model;
|
||||||
|
if (!currentUser) throw new Error("Utilisateur non authentifié");
|
||||||
|
|
||||||
|
// Construction de la description enrichie avec les métadonnées techniques
|
||||||
|
let fullDescription = payload.description;
|
||||||
|
|
||||||
|
if (payload.affectedAsset.trim()) {
|
||||||
|
fullDescription = `[Équipement concerné: ${payload.affectedAsset}]\n` + fullDescription;
|
||||||
|
}
|
||||||
|
if (payload.category === 'Incident Critique' && payload.incidentTime) {
|
||||||
|
fullDescription = `[Heure de l'incident: ${new Date(payload.incidentTime).toLocaleString('fr-FR')}]\n` + fullDescription;
|
||||||
|
}
|
||||||
|
if (payload.ci !== 'general') {
|
||||||
|
fullDescription = `[CI: ${payload.ci}]\n` + fullDescription;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enregistrement dans PocketBase
|
||||||
|
const record = await pb.collection('aegis_tickets').create({
|
||||||
|
author: currentUser.id,
|
||||||
|
company: currentUser.company,
|
||||||
|
category: payload.category,
|
||||||
|
subject: payload.subject,
|
||||||
|
description: fullDescription,
|
||||||
|
status: 'Ouvert',
|
||||||
|
});
|
||||||
|
|
||||||
|
return record.id; // On retourne l'ID pour la redirection
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur lors de la création du ticket :", err);
|
||||||
|
setError("Impossible d'enregistrer le ticket sur le serveur sécurisé.");
|
||||||
|
return null;
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { createTicket, isSubmitting, error };
|
||||||
|
};
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
import * as OTPAuth from 'otpauth';
|
||||||
|
|
||||||
|
interface MfaConfig {
|
||||||
|
userId: string;
|
||||||
|
totpSecret: string;
|
||||||
|
qrUrl: string;
|
||||||
|
isFirstSetup: boolean;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useLoginFlow = (onLoginSuccess: () => void) => {
|
||||||
|
const [step, setStep] = useState<1 | 2>(1);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [mfaConfig, setMfaConfig] = useState<MfaConfig | null>(null);
|
||||||
|
|
||||||
|
// --- SSO ZITADEL ---
|
||||||
|
const loginWithZitadel = async () => {
|
||||||
|
setError('');
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
|
||||||
|
if (authData) onLoginSuccess();
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
setError("Échec de la connexion via GISE Identity.");
|
||||||
|
pb.authStore.clear();
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- LOCAL LOGIN (Étape 1) ---
|
||||||
|
const loginWithLocal = async (email: string, pass: string) => {
|
||||||
|
setError('');
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const authData = await pb.collection('aegis_users').authWithPassword(email, pass);
|
||||||
|
|
||||||
|
if (authData.record.mfa_enabled) {
|
||||||
|
let secret = authData.record.totp_secret;
|
||||||
|
let qrUrl = '';
|
||||||
|
let isFirstSetup = false;
|
||||||
|
|
||||||
|
// Génération d'un nouveau secret si première fois
|
||||||
|
if (!secret) {
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
issuer: 'AEGIS by GISE',
|
||||||
|
label: email,
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
secret: new OTPAuth.Secret({ size: 20 })
|
||||||
|
});
|
||||||
|
secret = totp.secret.base32;
|
||||||
|
qrUrl = totp.toString();
|
||||||
|
isFirstSetup = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
setMfaConfig({ userId: authData.record.id, totpSecret: secret, qrUrl, isFirstSetup, email });
|
||||||
|
setStep(2);
|
||||||
|
} else {
|
||||||
|
onLoginSuccess();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError("Identifiants incorrects ou accès révoqué.");
|
||||||
|
pb.authStore.clear();
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- VALIDATION MFA (Étape 2) ---
|
||||||
|
const verifyMfa = async (mfaCode: string) => {
|
||||||
|
if (!mfaConfig) return;
|
||||||
|
setError('');
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const totp = new OTPAuth.TOTP({
|
||||||
|
issuer: 'AEGIS by GISE',
|
||||||
|
label: mfaConfig.email,
|
||||||
|
algorithm: 'SHA1',
|
||||||
|
digits: 6,
|
||||||
|
period: 30,
|
||||||
|
secret: OTPAuth.Secret.fromBase32(mfaConfig.totpSecret)
|
||||||
|
});
|
||||||
|
|
||||||
|
const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;
|
||||||
|
|
||||||
|
if (isValid) {
|
||||||
|
if (mfaConfig.isFirstSetup) {
|
||||||
|
await pb.collection('aegis_users').update(mfaConfig.userId, { totp_secret: mfaConfig.totpSecret });
|
||||||
|
}
|
||||||
|
onLoginSuccess();
|
||||||
|
} else {
|
||||||
|
setError("Code de sécurité invalide ou expiré.");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError("Erreur critique lors de la vérification.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelMfa = () => {
|
||||||
|
pb.authStore.clear();
|
||||||
|
setStep(1);
|
||||||
|
setMfaConfig(null);
|
||||||
|
setError('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return { step, isLoading, error, mfaConfig, loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa };
|
||||||
|
};
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
import type { Ticket } from '@/types/Ticket';
|
||||||
|
import type { TicketMessage } from '@/types/Message';
|
||||||
|
|
||||||
|
export const useTicketDetail = (ticketId?: string) => {
|
||||||
|
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||||
|
const [messages, setMessages] = useState<TicketMessage[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isSending, setIsSending] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const currentUser = pb.authStore.record; // ou .model selon votre version PocketBase
|
||||||
|
|
||||||
|
const fetchTicketData = useCallback(async () => {
|
||||||
|
if (!ticketId) return;
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 1. Récupération du ticket
|
||||||
|
const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
|
||||||
|
setTicket(ticketData);
|
||||||
|
|
||||||
|
// 2. Récupération des messages associés
|
||||||
|
const messageRecords = await pb.collection('aegis_ticket_messages').getFullList<TicketMessage>({
|
||||||
|
filter: `ticket = "${ticketId}"`,
|
||||||
|
expand: 'author',
|
||||||
|
sort: 'created',
|
||||||
|
});
|
||||||
|
setMessages(messageRecords);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur lors du chargement de la discussion :", err);
|
||||||
|
setError("Ticket introuvable ou accès non autorisé.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, [ticketId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTicketData();
|
||||||
|
}, [fetchTicketData]);
|
||||||
|
|
||||||
|
const sendMessage = async (content: string) => {
|
||||||
|
if (!content.trim() || !currentUser || !ticketId) return;
|
||||||
|
|
||||||
|
setIsSending(true);
|
||||||
|
try {
|
||||||
|
await pb.collection('aegis_ticket_messages').create({
|
||||||
|
ticket: ticketId,
|
||||||
|
author: currentUser.id,
|
||||||
|
content: content.trim(),
|
||||||
|
});
|
||||||
|
await fetchTicketData(); // On recharge les messages après l'envoi
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur lors de l'envoi du message :", err);
|
||||||
|
throw new Error("Impossible d'envoyer le message.");
|
||||||
|
} finally {
|
||||||
|
setIsSending(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { ticket, messages, isLoading, error, isSending, sendMessage, currentUser };
|
||||||
|
};
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { pb } from '@/services/pocketbase';
|
||||||
|
import type { Ticket } from '@/types/Ticket';
|
||||||
|
|
||||||
|
export const useTickets = () => {
|
||||||
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchTickets = useCallback(async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const records = await pb.collection('aegis_tickets').getFullList<Ticket>({
|
||||||
|
sort: '-created', // Du plus récent au plus ancien
|
||||||
|
});
|
||||||
|
setTickets(records);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erreur lors de la récupération des tickets :", err);
|
||||||
|
setError("Impossible de charger l'historique de vos requêtes.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTickets();
|
||||||
|
}, [fetchTickets]);
|
||||||
|
|
||||||
|
return { tickets, isLoading, error, refetch: fetchTickets };
|
||||||
|
};
|
||||||
@@ -3,3 +3,17 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* --- VOS UTILITAIRES PERSONNALISÉS --- */
|
||||||
|
@layer utilities {
|
||||||
|
.scrollbar-hide {
|
||||||
|
/* Masquer pour IE, Edge et Firefox */
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Masquer pour Chrome, Safari et Opera */
|
||||||
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -13,7 +13,7 @@ export default function DashboardLayout({ children, onLogout }: DashboardLayoutP
|
|||||||
<Sidebar onLogout={onLogout} />
|
<Sidebar onLogout={onLogout} />
|
||||||
|
|
||||||
{/* CONTENU PRINCIPAL */}
|
{/* CONTENU PRINCIPAL */}
|
||||||
<main className="flex-1 overflow-y-auto">
|
<main className="flex-1 overflow-y-auto scrollbar-hide">
|
||||||
<div className="p-8">
|
<div className="p-8">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,215 +0,0 @@
|
|||||||
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;
|
|
||||||
+30
-201
@@ -1,139 +1,22 @@
|
|||||||
import React, { useState } from 'react';
|
import { useLoginFlow } from '@/hooks/useLoginFlow';
|
||||||
import { pb } from '@services/pocketbase';
|
import { LocalLoginForm } from '@/components/auth/LocalLoginForm';
|
||||||
import * as OTPAuth from 'otpauth';
|
import { MfaForm } from '@/components/auth/MfaForm';
|
||||||
import { QRCodeSVG } from 'qrcode.react';
|
import { Card, CardContent } from '@/components/ui/Card';
|
||||||
|
|
||||||
interface LoginProps {
|
interface LoginProps {
|
||||||
onLoginSuccess: () => void;
|
onLoginSuccess: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Login({ onLoginSuccess }: LoginProps) {
|
export default function Login({ onLoginSuccess }: LoginProps) {
|
||||||
const [email, setEmail] = useState('');
|
const {
|
||||||
const [password, setPassword] = useState('');
|
step, isLoading, error, mfaConfig,
|
||||||
const [mfaCode, setMfaCode] = useState('');
|
loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa
|
||||||
const [error, setError] = useState('');
|
} = useLoginFlow(onLoginSuccess);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [step, setStep] = useState<1 | 2>(1);
|
|
||||||
|
|
||||||
// États pour la cryptographie TOTP (Flux Local)
|
|
||||||
const [userId, setUserId] = useState('');
|
|
||||||
const [totpSecret, setTotpSecret] = useState('');
|
|
||||||
const [qrUrl, setQrUrl] = useState('');
|
|
||||||
const [isFirstSetup, setIsFirstSetup] = useState(false);
|
|
||||||
|
|
||||||
// --------------------------------------------------------
|
|
||||||
// 1 Connexion Zitadel (SSO)
|
|
||||||
// --------------------------------------------------------
|
|
||||||
const handleZitadelLogin = async () => {
|
|
||||||
setError('');
|
|
||||||
setIsLoading(true);
|
|
||||||
try {
|
|
||||||
// PocketBase gère automatiquement la popup vers Zitadel et le retour du token
|
|
||||||
const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
|
|
||||||
console.log("Données d'authentification SSO :", authData);
|
|
||||||
|
|
||||||
if (authData) {
|
|
||||||
// Zitadel a déjà géré la sécurité et le MFA de son côté.
|
|
||||||
// On ouvre directement le coffre-fort.
|
|
||||||
onLoginSuccess();
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error("Erreur d'authentification SSO :", err);
|
|
||||||
setError("Échec de la connexion sécurisée via GISE Identity.");
|
|
||||||
pb.authStore.clear();
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// --------------------------------------------------------
|
|
||||||
// 2 Connexion Email - Mot de passe
|
|
||||||
// --------------------------------------------------------
|
|
||||||
const handleLocalLogin = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError('');
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const authData = await pb.collection('aegis_users').authWithPassword(email, password);
|
|
||||||
|
|
||||||
if (authData.record.mfa_enabled) {
|
|
||||||
setUserId(authData.record.id);
|
|
||||||
|
|
||||||
if (!authData.record.totp_secret) {
|
|
||||||
const totp = new OTPAuth.TOTP({
|
|
||||||
issuer: 'AEGIS by GISE',
|
|
||||||
label: email,
|
|
||||||
algorithm: 'SHA1',
|
|
||||||
digits: 6,
|
|
||||||
period: 30,
|
|
||||||
secret: new OTPAuth.Secret({ size: 20 })
|
|
||||||
});
|
|
||||||
|
|
||||||
setTotpSecret(totp.secret.base32);
|
|
||||||
setQrUrl(totp.toString());
|
|
||||||
setIsFirstSetup(true);
|
|
||||||
} else {
|
|
||||||
setTotpSecret(authData.record.totp_secret);
|
|
||||||
setIsFirstSetup(false);
|
|
||||||
}
|
|
||||||
setStep(2); // On passe à l'étape MFA locale
|
|
||||||
} else {
|
|
||||||
onLoginSuccess();
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
setError("Identifiants institutionnels incorrects ou accès révoqué.");
|
|
||||||
pb.authStore.clear();
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFinalStep = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError('');
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const totp = new OTPAuth.TOTP({
|
|
||||||
issuer: 'AEGIS by GISE',
|
|
||||||
label: email,
|
|
||||||
algorithm: 'SHA1',
|
|
||||||
digits: 6,
|
|
||||||
period: 30,
|
|
||||||
secret: OTPAuth.Secret.fromBase32(totpSecret)
|
|
||||||
});
|
|
||||||
|
|
||||||
const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;
|
|
||||||
|
|
||||||
if (isValid) {
|
|
||||||
if (isFirstSetup) {
|
|
||||||
await pb.collection('aegis_users').update(userId, { totp_secret: totpSecret });
|
|
||||||
}
|
|
||||||
onLoginSuccess();
|
|
||||||
} else {
|
|
||||||
setError("Code de sécurité invalide ou expiré.");
|
|
||||||
setMfaCode('');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError("Une erreur critique est survenue lors de la vérification.");
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancelMFA = () => {
|
|
||||||
pb.authStore.clear();
|
|
||||||
setStep(1);
|
|
||||||
setPassword('');
|
|
||||||
setMfaCode('');
|
|
||||||
setError('');
|
|
||||||
setIsFirstSetup(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
|
<div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
|
||||||
|
|
||||||
|
{/* HEADER LOGO */}
|
||||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
|
<div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
|
||||||
@@ -150,33 +33,33 @@ export default function Login({ onLoginSuccess }: LoginProps) {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* BOÎTE CENTRALE DÉCLINÉE AVEC NOTRE OBJET CARD */}
|
||||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
<div className="bg-white py-8 px-4 shadow-sm border border-slate-200 rounded-xl sm:px-10">
|
<Card className="shadow-sm border-slate-200">
|
||||||
|
<CardContent className="p-6 sm:p-10">
|
||||||
|
|
||||||
{step === 1 ? (
|
{/* AFFICHAGE DES ERREURS GLOBALES */}
|
||||||
<div className="space-y-6">
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
|
<div className="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
|
||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* BOUTON SSO ZITADEL */}
|
{/* ROUTAGE INTERNE DES ÉTAPES */}
|
||||||
<div>
|
{step === 1 ? (
|
||||||
|
<div className="space-y-6">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleZitadelLogin}
|
onClick={loginWithZitadel}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className="flex w-full justify-center items-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none transition-colors disabled:opacity-70"
|
className="flex w-full justify-center items-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none transition-colors disabled:opacity-70 cursor-pointer"
|
||||||
>
|
>
|
||||||
<svg className="w-5 h-5 mr-2 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
|
<svg className="w-5 h-5 mr-2 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
||||||
</svg>
|
</svg>
|
||||||
{isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
|
{isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* SÉPARATEUR VISUEL */}
|
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="absolute inset-0 flex items-center">
|
<div className="absolute inset-0 flex items-center">
|
||||||
<div className="w-full border-t border-slate-200" />
|
<div className="w-full border-t border-slate-200" />
|
||||||
@@ -186,76 +69,22 @@ export default function Login({ onLoginSuccess }: LoginProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* FORMULAIRE CLASSIQUE */}
|
<LocalLoginForm onSubmit={loginWithLocal} isLoading={isLoading} />
|
||||||
<form className="space-y-6" onSubmit={handleLocalLogin}>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
|
|
||||||
<div className="mt-1">
|
|
||||||
<input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="direction@client.com" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
|
|
||||||
<div className="mt-1">
|
|
||||||
<input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="••••••••••••" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button type="submit" disabled={isLoading} className="flex w-full justify-center rounded-md border border-transparent bg-blue-900 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none transition-colors disabled:opacity-70">
|
|
||||||
{isLoading ? 'Chiffrement en cours...' : 'Authentification classique'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleFinalStep}>
|
<MfaForm
|
||||||
{error && (
|
isFirstSetup={mfaConfig?.isFirstSetup || false}
|
||||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
|
qrUrl={mfaConfig?.qrUrl || ''}
|
||||||
{error}
|
isLoading={isLoading}
|
||||||
</div>
|
onVerify={verifyMfa}
|
||||||
)}
|
onCancel={cancelMfa}
|
||||||
|
|
||||||
{isFirstSetup ? (
|
|
||||||
<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 shadow-sm">
|
|
||||||
<QRCodeSVG value={qrUrl} size={150} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-center mb-6">
|
|
||||||
<p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
|
|
||||||
<p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={mfaCode}
|
|
||||||
onChange={(e) => setMfaCode(e.target.value)}
|
|
||||||
required
|
|
||||||
maxLength={6}
|
|
||||||
className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 placeholder-slate-300 shadow-sm focus:border-blue-900 focus:outline-none font-mono"
|
|
||||||
placeholder="000000"
|
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex space-x-3">
|
|
||||||
<button type="button" onClick={handleCancelMFA} disabled={isLoading} className="flex w-1/3 justify-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors disabled:opacity-70">
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button type="submit" disabled={isLoading || mfaCode.length !== 6} className="flex w-2/3 justify-center rounded-md border border-transparent bg-emerald-600 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 transition-colors disabled:opacity-70">
|
|
||||||
{isLoading ? 'Vérification...' : 'Déverrouiller'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,216 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { pb } from '@services/pocketbase';
|
|
||||||
|
|
||||||
interface NewTicketProps {
|
|
||||||
onCancel: () => void;
|
|
||||||
onTicketCreated: () => void; // Rappel pour recharger la liste et revenir en arrière
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function NewTicket({ onCancel, onTicketCreated }: NewTicketProps) {
|
|
||||||
const [category, setCategory] = useState<'Incident Critique' | 'Évolution' | 'Administratif'>('Incident Critique');
|
|
||||||
const [ci, Ci] = useState('general');
|
|
||||||
const [subject, setSubject] = useState('');
|
|
||||||
const [affectedAsset, setAffectedAsset] = useState('');
|
|
||||||
const [incidentTime, setIncidentTime] = useState('');
|
|
||||||
const [description, setDescription] = useState('');
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError('');
|
|
||||||
setIsSubmitting(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const currentUser = pb.authStore.record;
|
|
||||||
if (!currentUser) throw new Error("Utilisateur non authentifié");
|
|
||||||
|
|
||||||
// Construction de la description enrichie avec les métadonnées techniques
|
|
||||||
let fullDescription = description;
|
|
||||||
if (affectedAsset.trim()) {
|
|
||||||
fullDescription = `[Équipement concerné: ${affectedAsset}]\n` + fullDescription;
|
|
||||||
}
|
|
||||||
if (category === 'Incident Critique' && incidentTime) {
|
|
||||||
fullDescription = `[Heure de l'incident: ${new Date(incidentTime).toLocaleString('fr-FR')}]\n` + fullDescription;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Enregistrement dans PocketBase
|
|
||||||
await pb.collection('aegis_tickets').create({
|
|
||||||
author: currentUser.id,
|
|
||||||
company: currentUser.company,
|
|
||||||
category,
|
|
||||||
subject,
|
|
||||||
description: fullDescription,
|
|
||||||
status: 'Ouvert',
|
|
||||||
});
|
|
||||||
|
|
||||||
onTicketCreated(); // Retourne à la liste et rafraîchit
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Erreur lors de la création du ticket :", err);
|
|
||||||
setError("Impossible d'enregistrer le ticket sur le serveur sécurisé.");
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-slate-50 font-sans text-slate-900 pb-12">
|
|
||||||
|
|
||||||
{/* Header */}
|
|
||||||
<header className="bg-white border-b border-slate-200 px-8 py-4 sticky top-0 z-10 shadow-sm">
|
|
||||||
<div className="max-w-7xl mx-auto flex items-center">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onCancel}
|
|
||||||
className="mr-4 p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-full transition-colors"
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* Formulaire Principal */}
|
|
||||||
<main className="max-w-4xl mx-auto px-8 pt-8">
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-8 bg-white rounded-xl shadow-sm border border-slate-200 p-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">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="category" className="block text-sm font-medium text-slate-700 mb-1">Type de demande</label>
|
|
||||||
<select
|
|
||||||
id="category"
|
|
||||||
value={category}
|
|
||||||
onChange={(e) => setCategory(e.target.value as any)}
|
|
||||||
className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
|
|
||||||
>
|
|
||||||
<option value="Incident Critique">Incident Critique (Panne, Dégradation)</option>
|
|
||||||
<option value="Évolution">Évolution (Ajout de ressources, Modification)</option>
|
|
||||||
<option value="Administratif">Administratif (Facturation, Contrat)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="ci" className="block text-sm font-medium text-slate-700 mb-1">Infrastructure concernée (CI)</label>
|
|
||||||
<select
|
|
||||||
id="ci"
|
|
||||||
value={ci}
|
|
||||||
onChange={(e) => Ci(e.target.value)}
|
|
||||||
className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
|
|
||||||
>
|
|
||||||
<option value="general">Général / Non spécifique</option>
|
|
||||||
<option value="px1">Serveur Proxmox Principal (Hyperviseur)</option>
|
|
||||||
<option value="fw1">Pare-feu Périphérique (WAN)</option>
|
|
||||||
<option value="db1">Base de données MariaDB</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Section 2 : Détails techniques & Actifs */}
|
|
||||||
<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">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="subject" className="block text-sm font-medium text-slate-700 mb-1">Sujet de l'intervention <span className="text-blue-900 font-bold">*</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="subject"
|
|
||||||
required
|
|
||||||
value={subject}
|
|
||||||
onChange={(e) => setSubject(e.target.value)}
|
|
||||||
placeholder="Ex: Perte de paquets sur le lien WAN principal"
|
|
||||||
className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="affectedAsset" className="block text-sm font-medium text-slate-700 mb-1">
|
|
||||||
Équipement ou Produit concerné <span className="text-slate-400 font-normal">(Optionnel)</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="affectedAsset"
|
|
||||||
value={affectedAsset}
|
|
||||||
onChange={(e) => setAffectedAsset(e.target.value)}
|
|
||||||
placeholder="Ex: Ordinateur Direction, Imprimante X, etc."
|
|
||||||
className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{category === 'Incident Critique' && (
|
|
||||||
<div>
|
|
||||||
<label htmlFor="incidentTime" className="block text-sm font-medium text-slate-700 mb-1">
|
|
||||||
Heure exacte du début de l'incident <span className="text-red-500 font-bold">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
id="incidentTime"
|
|
||||||
required
|
|
||||||
value={incidentTime}
|
|
||||||
onChange={(e) => setIncidentTime(e.target.value)}
|
|
||||||
className="block w-full max-w-md rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="description" className="block text-sm font-medium text-slate-700 mb-1">
|
|
||||||
Description détaillée <span className="text-blue-900 font-bold">*</span>
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
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..."
|
|
||||||
className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 resize-y"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="pt-4 flex justify-end space-x-3 border-t border-slate-100">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onCancel}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className={`px-6 py-2 text-sm font-medium text-white rounded-lg transition-colors shadow-sm ${
|
|
||||||
category === 'Incident Critique' ? 'bg-red-600 hover:bg-red-700 focus:ring-red-600' : 'bg-blue-900 hover:bg-blue-800 focus:ring-blue-900'
|
|
||||||
} focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50`}
|
|
||||||
>
|
|
||||||
{isSubmitting ? 'Transmission en cours...' : 'Soumettre le ticket'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+18
-141
@@ -1,153 +1,30 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { pb } from '@services/pocketbase';
|
import { Button } from '@/components/ui/Button';
|
||||||
import NewTicket from './NewTicket';
|
import { PageHeader } from '@/components/ui/PageHeader';
|
||||||
import TicketDetail from './TicketDetail';
|
import { TicketsWidget } from '@/components/widgets/TicketsWidget';
|
||||||
|
|
||||||
interface Ticket {
|
|
||||||
id: string;
|
|
||||||
subject: string;
|
|
||||||
category: string;
|
|
||||||
status: 'Ouvert' | 'En analyse' | 'Résolu';
|
|
||||||
created: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ServiceDesk() {
|
export default function ServiceDesk() {
|
||||||
const [tickets, setTickets] = useState<Ticket[]>([]);
|
const navigate = useNavigate();
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
|
|
||||||
// États de navigation interne au module Service Desk
|
|
||||||
const [currentView, setCurrentView] = useState<'list' | 'new' | 'detail'>('list');
|
|
||||||
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Récupération des tickets de l'entreprise connectée
|
|
||||||
const fetchTickets = async () => {
|
|
||||||
try {
|
|
||||||
const records = await pb.collection('aegis_tickets').getFullList<Ticket>({
|
|
||||||
sort: '-created', // Du plus récent au plus ancien
|
|
||||||
});
|
|
||||||
setTickets(records);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Erreur lors de la récupération des tickets :", error);
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchTickets();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Gestion du clic sur un ticket pour ouvrir la discussion
|
|
||||||
const handleSelectTicket = (id: string) => {
|
|
||||||
setSelectedTicketId(id);
|
|
||||||
setCurrentView('detail');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Styles visuels pour les statuts
|
|
||||||
const getStatusStyle = (status: Ticket['status']) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'Ouvert': return 'bg-blue-50 text-blue-700 border-blue-100';
|
|
||||||
case 'En analyse': return 'bg-amber-50 text-amber-700 border-amber-100';
|
|
||||||
case 'Résolu': return 'bg-emerald-50 text-emerald-700 border-emerald-100';
|
|
||||||
default: return 'bg-slate-50 text-slate-700 border-slate-100';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Rendu conditionnel selon la vue active
|
|
||||||
if (currentView === 'new') {
|
|
||||||
return (
|
return (
|
||||||
<NewTicket
|
<div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
|
||||||
onCancel={() => setCurrentView('list')}
|
<main className="max-w-7xl mx-auto px-4 sm:px-8 py-8 space-y-6">
|
||||||
onTicketCreated={() => {
|
|
||||||
setCurrentView('list');
|
|
||||||
fetchTickets(); // On recharge la liste pour afficher le nouveau ticket
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentView === 'detail' && selectedTicketId) {
|
{/* HEADER EXTRAIT */}
|
||||||
return (
|
<PageHeader
|
||||||
<TicketDetail
|
title="Centre de Support (Service Desk)"
|
||||||
ticketId={selectedTicketId}
|
description="Canal de communication sécurisé avec vos experts GISE."
|
||||||
onBack={() => {
|
|
||||||
setCurrentView('list');
|
|
||||||
setSelectedTicketId(null);
|
|
||||||
fetchTickets();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vue par défaut : La liste des tickets
|
|
||||||
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">Centre de Support (Service Desk)</h1>
|
|
||||||
<p className="text-sm text-slate-500 mt-1">Canal de communication sécurisé avec vos experts GISE.</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<button
|
|
||||||
onClick={() => setCurrentView('new')}
|
|
||||||
className="bg-blue-900 hover:bg-blue-800 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-colors shadow-sm"
|
|
||||||
>
|
>
|
||||||
|
<Button onClick={() => navigate('/support/new')}>
|
||||||
Ouvrir un ticket sécurisé
|
Ouvrir un ticket sécurisé
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</PageHeader>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main className="max-w-7xl mx-auto px-8 py-8">
|
{/* WIDGET DES TICKETS */}
|
||||||
|
<TicketsWidget
|
||||||
|
onSelectTicket={(ticketId) => navigate(`/support/tickets/${ticketId}`)}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Liste des tickets */}
|
|
||||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex justify-center items-center py-12">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-900"></div>
|
|
||||||
</div>
|
|
||||||
) : tickets.length === 0 ? (
|
|
||||||
<div className="text-center py-12 text-sm text-slate-500 italic">
|
|
||||||
Aucun ticket enregistré pour le moment.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="divide-y divide-slate-100">
|
|
||||||
{tickets.map((ticket) => (
|
|
||||||
<div
|
|
||||||
key={ticket.id}
|
|
||||||
onClick={() => handleSelectTicket(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>
|
|
||||||
<span className={`px-3 py-1 rounded-full text-xs font-medium border ${getStatusStyle(ticket.status)}`}>
|
|
||||||
{ticket.status}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,201 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { pb } from '@services/pocketbase';
|
|
||||||
|
|
||||||
interface Ticket {
|
|
||||||
id: string;
|
|
||||||
subject: string;
|
|
||||||
description: string;
|
|
||||||
category: string;
|
|
||||||
status: 'Ouvert' | 'En analyse' | 'Résolu';
|
|
||||||
created: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Message {
|
|
||||||
id: string;
|
|
||||||
content: string;
|
|
||||||
created: string;
|
|
||||||
expand?: {
|
|
||||||
author?: {
|
|
||||||
id?: string;
|
|
||||||
name?: string;
|
|
||||||
email?: string;
|
|
||||||
avatar?: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TicketDetailProps {
|
|
||||||
ticketId: string;
|
|
||||||
onBack: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TicketDetail({ ticketId, onBack }: TicketDetailProps) {
|
|
||||||
const [ticket, setTicket] = useState<Ticket | null>(null);
|
|
||||||
const [messages, setMessages] = useState<Message[]>([]);
|
|
||||||
const [newMessage, setNewMessage] = useState('');
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const [isSending, setIsSending] = useState(false);
|
|
||||||
|
|
||||||
const currentUser = pb.authStore.record;
|
|
||||||
|
|
||||||
// Récupération du ticket et de ses messages associés
|
|
||||||
const fetchTicketData = async () => {
|
|
||||||
try {
|
|
||||||
const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
|
|
||||||
setTicket(ticketData);
|
|
||||||
|
|
||||||
const messageRecords = await pb.collection('aegis_ticket_messages').getFullList<Message>({
|
|
||||||
filter: `ticket = "${ticketId}"`,
|
|
||||||
expand: 'author',
|
|
||||||
sort: 'created',
|
|
||||||
});
|
|
||||||
setMessages(messageRecords);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Erreur lors du chargement de la discussion :", error);
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchTicketData();
|
|
||||||
}, [ticketId]);
|
|
||||||
|
|
||||||
// Envoi d'un nouveau message dans la discussion
|
|
||||||
const handleSendMessage = async (e: React.SubmitEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!newMessage.trim() || !currentUser) return;
|
|
||||||
|
|
||||||
setIsSending(true);
|
|
||||||
try {
|
|
||||||
await pb.collection('aegis_ticket_messages').create({
|
|
||||||
ticket: ticketId,
|
|
||||||
author: currentUser.id,
|
|
||||||
content: newMessage.trim(),
|
|
||||||
});
|
|
||||||
|
|
||||||
setNewMessage('');
|
|
||||||
await fetchTicketData(); // Recharger les messages
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Erreur lors de l'envoi du message :", error);
|
|
||||||
alert("Impossible d'envoyer le message.");
|
|
||||||
} finally {
|
|
||||||
setIsSending(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center items-center py-20">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-900"></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!ticket) {
|
|
||||||
return (
|
|
||||||
<div className="bg-white rounded-xl p-6 text-center border border-slate-200">
|
|
||||||
<p className="text-sm text-slate-500 mb-4">Ticket introuvable ou accès non autorisé.</p>
|
|
||||||
<button onClick={onBack} className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium">
|
|
||||||
Retour aux tickets
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6 max-w-4xl mx-auto">
|
|
||||||
{/* Barre de navigation / Retour */}
|
|
||||||
<div className="flex items-center justify-between bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
|
||||||
<button
|
|
||||||
onClick={onBack}
|
|
||||||
className="flex items-center space-x-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
|
|
||||||
</svg>
|
|
||||||
<span>Retour au Centre de Support</span>
|
|
||||||
</button>
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<span className="text-xs font-semibold px-2.5 py-1 bg-slate-100 text-slate-700 rounded border border-slate-200 uppercase">
|
|
||||||
{ticket.category}
|
|
||||||
</span>
|
|
||||||
<span className={`px-3 py-1 rounded-full text-xs font-medium border ${
|
|
||||||
ticket.status === 'Résolu' ? 'bg-emerald-50 text-emerald-700 border-emerald-100' : 'bg-blue-50 text-blue-700 border-blue-100'
|
|
||||||
}`}>
|
|
||||||
{ticket.status}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* En-tête du ticket & Description initiale */}
|
|
||||||
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
|
|
||||||
<h1 className="text-xl font-bold text-slate-900">{ticket.subject}</h1>
|
|
||||||
<div className="bg-slate-50 p-4 rounded-lg border border-slate-100 text-sm text-slate-700 whitespace-pre-wrap">
|
|
||||||
<p className="text-xs font-semibold text-slate-400 mb-1">Description initiale :</p>
|
|
||||||
{ticket.description}
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-slate-400">
|
|
||||||
Créé le {new Date(ticket.created).toLocaleString('fr-FR')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Fil de discussion / Messages */}
|
|
||||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-[500px]">
|
|
||||||
<div className="p-4 border-b border-slate-100 bg-slate-50/50">
|
|
||||||
<h2 className="text-sm font-semibold text-slate-800">Échanges avec l'équipe GISE</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Liste des messages */}
|
|
||||||
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
|
||||||
{messages.length === 0 ? (
|
|
||||||
<div className="text-center py-12 text-sm text-slate-400 italic">
|
|
||||||
Aucun message pour l'instant. Démarrez la conversation ci-dessous.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
messages.map((msg) => {
|
|
||||||
const isMyMessage = msg.expand?.author?.id === currentUser?.id;
|
|
||||||
const authorName = msg.expand?.author?.name || msg.expand?.author?.email || 'Expert GISE';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={msg.id} className={`flex flex-col ${isMyMessage ? 'items-end' : 'items-start'}`}>
|
|
||||||
<div className="flex items-center space-x-2 mb-1">
|
|
||||||
<span className="text-xs font-medium text-slate-600">{authorName}</span>
|
|
||||||
<span className="text-[10px] text-slate-400">
|
|
||||||
{new Date(msg.created).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className={`max-w-[80%] 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'
|
|
||||||
}`}>
|
|
||||||
{msg.content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Formulaire de réponse */}
|
|
||||||
<form onSubmit={handleSendMessage} className="p-4 border-t border-slate-100 bg-white flex items-center space-x-3">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={newMessage}
|
|
||||||
onChange={(e) => setNewMessage(e.target.value)}
|
|
||||||
placeholder="Écrivez votre message ou complément d'information..."
|
|
||||||
className="flex-1 rounded-lg border border-slate-300 px-4 py-2.5 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSending || !newMessage.trim()}
|
|
||||||
className="bg-blue-900 hover:bg-blue-800 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 shadow-sm"
|
|
||||||
>
|
|
||||||
{isSending ? 'Envoi...' : 'Envoyer'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+17
-16
@@ -4,36 +4,36 @@ import BackupWidget from '@/components/widgets/BackupWidget';
|
|||||||
import SecurityWidget from '@/components/widgets/SecurityWidget';
|
import SecurityWidget from '@/components/widgets/SecurityWidget';
|
||||||
import ServicesWidget from '@/components/widgets/ServicesWidget';
|
import ServicesWidget from '@/components/widgets/ServicesWidget';
|
||||||
import SupportCtaWidget from '@/components/widgets/SupportCtaWidget';
|
import SupportCtaWidget from '@/components/widgets/SupportCtaWidget';
|
||||||
|
import { PageHeader } from '@/components/ui/PageHeader';
|
||||||
|
|
||||||
export default function TrustCenter() {
|
export default function TrustCenter() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
|
<div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
|
||||||
|
<main className="max-w-7xl mx-auto px-4 sm:px-8 py-8 space-y-6">
|
||||||
|
|
||||||
{/* Header */}
|
{/* HEADER EXTRAIT */}
|
||||||
<header className="bg-white border-b border-slate-200 px-8 py-6">
|
<PageHeader
|
||||||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
title="Tableau de bord de l'infrastructure"
|
||||||
<div>
|
description="Espace sécurisé AEGIS • Synchronisation en temps réel"
|
||||||
<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>
|
{/* L'indicateur de connexion devient le "children" du header */}
|
||||||
</div>
|
<div className="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100">
|
||||||
<div className="flex items-center space-x-3">
|
<span className="flex h-2.5 w-2.5 relative">
|
||||||
<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="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 className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-semibold uppercase tracking-wide text-slate-600">
|
||||||
|
Connexion chiffrée
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm font-medium text-slate-700">Connexion chiffrée</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</PageHeader>
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* Main Grid */}
|
{/* GRILLE DES WIDGETS */}
|
||||||
<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="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<div className="lg:col-span-2 space-y-6">
|
<div className="lg:col-span-2 space-y-6">
|
||||||
<UptimeWidget />
|
<UptimeWidget />
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<BackupWidget onClick={() => navigate('/backups')} />
|
<BackupWidget onClick={() => navigate('/backups')} />
|
||||||
<SecurityWidget onClick={() => navigate('/analytics')} />
|
<SecurityWidget onClick={() => navigate('/analytics')} />
|
||||||
@@ -45,6 +45,7 @@ export default function TrustCenter() {
|
|||||||
<SupportCtaWidget />
|
<SupportCtaWidget />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { NewTicketWidget } from '@/components/widgets/NewTicketWidget';
|
||||||
|
import { BackButton } from '@/components/ui/BackButton'; // Importation de notre nouvel Atome
|
||||||
|
|
||||||
|
export default function NewTicket() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
|
||||||
|
|
||||||
|
{/* BOUTON DE RETOUR EXTRAIT */}
|
||||||
|
<BackButton to="/support" label="Annuler et retourner au Service Desk" />
|
||||||
|
|
||||||
|
{/* WIDGET DU FORMULAIRE */}
|
||||||
|
<NewTicketWidget
|
||||||
|
onCancel={() => navigate('/support')}
|
||||||
|
onSuccess={(ticketId) => navigate(`/support/tickets/${ticketId}`)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import { useTicketDetail } from '@/hooks/useTicketDetail';
|
||||||
|
|
||||||
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Loader } from '@/components/ui/Loader';
|
||||||
|
import { EmptyState } from '@/components/ui/EmptyState';
|
||||||
|
import { BackButton } from '@/components/ui/BackButton'; // Importation
|
||||||
|
|
||||||
|
import { TicketInfoWidget } from '@/components/widgets/TicketInfoWidget';
|
||||||
|
import { TicketChatWidget } from '@/components/widgets/TicketChatWidget';
|
||||||
|
|
||||||
|
export default function TicketDetail() {
|
||||||
|
const { ticketId } = useParams<{ ticketId: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const {
|
||||||
|
ticket, messages, isLoading, error, isSending,
|
||||||
|
sendMessage, currentUser
|
||||||
|
} = useTicketDetail(ticketId);
|
||||||
|
|
||||||
|
if (isLoading) return <div className="py-20"><Loader /></div>;
|
||||||
|
|
||||||
|
if (error || !ticket) {
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto py-12 px-4">
|
||||||
|
<Card className="text-center py-12">
|
||||||
|
<EmptyState message={error || "Ticket introuvable."} className="text-red-500 mb-6 not-italic font-medium" />
|
||||||
|
<Button onClick={() => navigate('/support')} variant="outline">
|
||||||
|
Retour au Centre de Support
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
|
||||||
|
|
||||||
|
{/* BOUTON DE RETOUR EXTRAIT */}
|
||||||
|
<BackButton to="/support" label="Retour au Centre de Support" />
|
||||||
|
|
||||||
|
{/* WIDGETS */}
|
||||||
|
<TicketInfoWidget ticket={ticket} />
|
||||||
|
|
||||||
|
<TicketChatWidget
|
||||||
|
messages={messages}
|
||||||
|
currentUserId={currentUser?.id}
|
||||||
|
isSending={isSending}
|
||||||
|
onSendMessage={sendMessage}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,18 +1,12 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||||
|
import BackButton from '@/components/ui/BackButton';
|
||||||
|
|
||||||
export const Analytics: React.FC = () => {
|
export const Analytics: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-5xl mx-auto py-8 px-8">
|
<div className="max-w-5xl mx-auto py-8 px-8">
|
||||||
<button
|
<BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
|
||||||
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>
|
<Card>
|
||||||
<CardHeader className="bg-slate-50">
|
<CardHeader className="bg-slate-50">
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||||
|
import BackButton from '@/components/ui/BackButton';
|
||||||
|
|
||||||
// On pourrait extraire ces données dans un Custom Hook plus tard
|
// On pourrait extraire ces données dans un Custom Hook plus tard
|
||||||
const BACKUP_HISTORY = [
|
const BACKUP_HISTORY = [
|
||||||
@@ -11,16 +11,10 @@ const BACKUP_HISTORY = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export const Backups: React.FC = () => {
|
export const Backups: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-5xl mx-auto py-8 px-8">
|
<div className="max-w-5xl mx-auto py-8 px-8">
|
||||||
<button
|
<BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
|
||||||
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>
|
<Card>
|
||||||
<CardHeader className="bg-slate-50">
|
<CardHeader className="bg-slate-50">
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
export interface TicketMessage {
|
||||||
|
id: string;
|
||||||
|
content: string;
|
||||||
|
created: string;
|
||||||
|
expand?: {
|
||||||
|
author?: {
|
||||||
|
id?: string;
|
||||||
|
name?: string;
|
||||||
|
email?: string;
|
||||||
|
avatar?: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
+5
-2
@@ -2,7 +2,10 @@
|
|||||||
export type NodeStatus = 'Opérationnel' | 'Dégradé' | 'Hors Ligne';
|
export type NodeStatus = 'Opérationnel' | 'Dégradé' | 'Hors Ligne';
|
||||||
|
|
||||||
// Statuts relatifs aux contrats d'infogérance
|
// Statuts relatifs aux contrats d'infogérance
|
||||||
export type ContractStatus = 'Actif' | 'En déploiement' | 'Suspendu';
|
export type ContractStatus = 'Actif' | 'En Déploiement' | 'Annulé';
|
||||||
|
|
||||||
|
// Status relatifs aux tickets du service desk
|
||||||
|
export type TicketStatus = 'Ouvert' | 'En Analyse' | 'Résolu';
|
||||||
|
|
||||||
// Type unifié regroupant tous les statuts possibles sur la plateforme AEGIS
|
// Type unifié regroupant tous les statuts possibles sur la plateforme AEGIS
|
||||||
export type AegisStatus = NodeStatus | ContractStatus;
|
export type AegisStatus = NodeStatus | ContractStatus | TicketStatus;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import type { TicketStatus } from '@/types/Status';
|
||||||
|
|
||||||
|
export interface Ticket {
|
||||||
|
id: string;
|
||||||
|
subject: string;
|
||||||
|
description: string;
|
||||||
|
category: string;
|
||||||
|
status: TicketStatus;
|
||||||
|
created: string;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user