Merge branch 'master' into feat/workflow
This commit is contained in:
maximus
Generated
+3339
File diff suppressed because it is too large
Load Diff
+184
@@ -0,0 +1,184 @@
|
|||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+30
-56
@@ -1,72 +1,46 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
|
import { pb } from './config/pocketbase';
|
||||||
import { pb } from '@/services/pocketbase';
|
import Login from './pages/Auth/Login';
|
||||||
|
import DashboardLayout from './layouts/DashboardLayout';
|
||||||
// Layout & Pages
|
import TrustCenter from './pages/TrustCenter/TrustCenter';
|
||||||
import Login from '@/pages/Login';
|
import ServiceDesk from './pages/Support/ServiceDesk';
|
||||||
import DashboardLayout from '@/layouts/DashboardLayout';
|
import DocumentVault from './pages/Vault/DocumentVault';
|
||||||
import TrustCenter from '@/pages/TrustCenter';
|
import AccountSettings from './pages/Account/AccountSettings';
|
||||||
import ServiceDesk from '@/pages/ServiceDesk';
|
|
||||||
import DocumentVault from '@/pages/DocumentVault';
|
|
||||||
import AccountSettings from '@/pages/AccountSettings';
|
|
||||||
import { InfrastructureEvolution } from '@/pages/trustcenter/InfrastructureEvolution';
|
|
||||||
import Analytics from '@/pages/trustcenter/Analytics';
|
|
||||||
import Backups from '@/pages/trustcenter/Backups';
|
|
||||||
import NewTicket from '@/pages/servicedesk/NewTicket';
|
|
||||||
import TicketDetail from '@/pages/servicedesk/TicketDetail';
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
// On initialise l'état avec la présence du token, mais on ne met plus
|
||||||
|
// d'écouteur automatique. C'est le composant Login qui gérera le flux.
|
||||||
const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
|
const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
|
||||||
const navigate = useNavigate();
|
const [activeView, setActiveView] = useState<'dashboard' | 'support' | 'vault' | 'account'>('dashboard');
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
pb.authStore.clear();
|
pb.authStore.clear(); // Détruit le jeton de sécurité
|
||||||
setIsAuthenticated(false);
|
setIsAuthenticated(false);
|
||||||
navigate('/', { replace: true });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- SAS DE SÉCURITÉ (Auth Guard) ---
|
// Tant que l'utilisateur n'est pas totalement authentifié (MFA inclus),
|
||||||
// Si non authentifié, on force l'affichage du composant Login peu importe l'URL demandée.
|
// on le maintient dans le sas de sécurité.
|
||||||
if (!isAuthenticated) {
|
if (!isAuthenticated) {
|
||||||
return (
|
return <Login onLoginSuccess={() => setIsAuthenticated(true)} />;
|
||||||
<Routes>
|
|
||||||
<Route
|
|
||||||
path="*"
|
|
||||||
element={
|
|
||||||
<Login onLoginSuccess={() => {
|
|
||||||
setIsAuthenticated(true);
|
|
||||||
navigate('/dashboard', { replace: true });
|
|
||||||
}} />
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- APPLICATION SÉCURISÉE ---
|
const renderContent = () => {
|
||||||
// Une fois connecté, le DashboardLayout enveloppe nos véritables routes (URLs)
|
switch (activeView) {
|
||||||
|
case 'dashboard': return <TrustCenter onNavigate={setActiveView} />;
|
||||||
|
case 'support': return <ServiceDesk />;
|
||||||
|
case 'vault': return <DocumentVault />;
|
||||||
|
case 'account': return <AccountSettings />;
|
||||||
|
default: return <TrustCenter onNavigate={setActiveView} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout onLogout={handleLogout}>
|
<DashboardLayout
|
||||||
<Routes>
|
activeView={activeView}
|
||||||
{/* Redirection par défaut */}
|
onNavigate={setActiveView}
|
||||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
onLogout={handleLogout}
|
||||||
|
>
|
||||||
{/* Pages du menu principal */}
|
{renderContent()}
|
||||||
<Route path="/dashboard" element={<TrustCenter />} />
|
|
||||||
<Route path="/support" element={<ServiceDesk />} />
|
|
||||||
<Route path="/vault" element={<DocumentVault />} />
|
|
||||||
<Route path="/account" element={<AccountSettings />} />
|
|
||||||
|
|
||||||
{/* Pages stratégiques (anciennes modales) */}
|
|
||||||
<Route path="/evolution-infrastructure" element={<InfrastructureEvolution />} />
|
|
||||||
<Route path="/analytics" element={<Analytics />} />
|
|
||||||
<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 */}
|
|
||||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
|
||||||
</Routes>
|
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,46 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Button } from '@/components/ui/Button';
|
|
||||||
import { Input } from '../ui/Input';
|
|
||||||
|
|
||||||
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)}
|
|
||||||
/>
|
|
||||||
</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)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button type="submit" isLoading={isLoading} className="w-full">
|
|
||||||
Authentification classique
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { NavLink } from 'react-router-dom';
|
|
||||||
import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-react';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
import { Card } from '@/components/ui/Card';
|
|
||||||
import { NEUMORPHISM } from '@/styles/Neumorphism';
|
|
||||||
import { useTheme } from '@/hooks/useTheme';
|
|
||||||
import { ThemeToggle } from '@ui/ThemeToggle';
|
|
||||||
|
|
||||||
interface SidebarProps {
|
|
||||||
onLogout: () => void;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Liste de tes liens réels avec leurs icônes associées
|
|
||||||
const NAVIGATION_ITEMS = [
|
|
||||||
{ name: 'Trust Center', path: '/dashboard', icon: ShieldCheck },
|
|
||||||
{ name: 'Service Desk', path: '/support', icon: HelpCircle },
|
|
||||||
{ name: 'Coffre-fort', path: '/vault', icon: Lock },
|
|
||||||
{ name: 'Paramètres', path: '/account', icon: Settings },
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
|
|
||||||
const { isDark, toggleTheme } = useTheme();
|
|
||||||
return (
|
|
||||||
<Card className={cn("w-60 flex flex-col p-6 shrink-0", className)}>
|
|
||||||
{/* 1. EN-TÊTE / LOGO */}
|
|
||||||
<div className="flex items-center gap-4 mb-10 px-2">
|
|
||||||
{/* Petit badge logo avec effet creusé */}
|
|
||||||
<div className={cn(
|
|
||||||
"w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b] transition-all duration-300 ease-in-out",
|
|
||||||
"shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]"
|
|
||||||
)}>
|
|
||||||
<Shield className="w-6 h-6 text-blue-600 dark:text-blue-500 transition-all duration-300 ease-in-out" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none transition-all duration-300 ease-in-out">AEGIS</h1>
|
|
||||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 2. NAVIGATION PRINCIPALE (Basée sur l'URL) */}
|
|
||||||
<nav className="flex flex-col gap-4 flex-1">
|
|
||||||
{NAVIGATION_ITEMS.map((item) => {
|
|
||||||
const Icon = item.icon;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NavLink
|
|
||||||
key={item.path}
|
|
||||||
to={item.path}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
cn(
|
|
||||||
"w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ease-in-out cursor-pointer",
|
|
||||||
"bg-[#e8e8e8] dark:bg-[#1e293b]",
|
|
||||||
isActive
|
|
||||||
? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "text-blue-600! dark:text-blue-400! font-black")
|
|
||||||
: cn(NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{({ isActive }) => (
|
|
||||||
<>
|
|
||||||
<Icon
|
|
||||||
className={cn(
|
|
||||||
"w-5 h-5 transition-transform duration-300 ease-in-out shrink-0",
|
|
||||||
isActive ? "scale-110" : "scale-100"
|
|
||||||
)}
|
|
||||||
strokeWidth={isActive ? 2.5 : 2}
|
|
||||||
/>
|
|
||||||
<span className="text-sm">{item.name}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</NavLink>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />
|
|
||||||
{/* 3. ZONE DE DÉCONNEXION */}
|
|
||||||
<div className="pt-6 mt-6 border-t border-white/40 dark:border-slate-800/50">
|
|
||||||
<button
|
|
||||||
onClick={onLogout}
|
|
||||||
className={cn(
|
|
||||||
"w-full flex items-center justify-start gap-4 px-5 py-4 rounded-2xl cursor-pointer transition-all duration-300 ease-in-out",
|
|
||||||
"bg-[#e8e8e8] dark:bg-[#1e293b]",
|
|
||||||
NEUMORPHISM.lightShadow,
|
|
||||||
NEUMORPHISM.darkShadow,
|
|
||||||
"active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
|
|
||||||
"text-rose-500 dark:text-rose-400 font-bold"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<LogOut className="w-5 h-5" />
|
|
||||||
<span className="text-sm font-bold">Déconnexion</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Sidebar;
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { Button, type ButtonProps } from '@/components/ui/Button';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
|
|
||||||
export interface BackButtonProps extends Omit<ButtonProps, 'onClick'> {
|
|
||||||
/** Route explicite (ex: "/support"). Si omis, fait un retour arrière dans l'historique (-1) */
|
|
||||||
to?: string;
|
|
||||||
/** Texte par défaut du bouton */
|
|
||||||
label?: string;
|
|
||||||
/** Fonction personnalisée au clic */
|
|
||||||
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const BackButton: React.FC<BackButtonProps> = ({
|
|
||||||
to,
|
|
||||||
label = "Retour",
|
|
||||||
onClick,
|
|
||||||
variant = "ghost", // Style par défaut : ultra discret sur la surface Neumorphic
|
|
||||||
size = "sm",
|
|
||||||
children,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}) => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
// Logique du clic (priorité : onClick perso > destination 'to' > retour historique)
|
|
||||||
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
||||||
if (onClick) {
|
|
||||||
onClick(e);
|
|
||||||
} else if (to) {
|
|
||||||
navigate(to);
|
|
||||||
} else {
|
|
||||||
navigate(-1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant={variant}
|
|
||||||
size={size}
|
|
||||||
onClick={handleClick}
|
|
||||||
leftIcon={
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4 transition-transform duration-200 group-hover:-translate-x-1"
|
|
||||||
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={cn("group", className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children || label}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BackButton;
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
|
|
||||||
interface BadgeProps {
|
|
||||||
className?: string;
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default StatusBadge;
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
import React, { forwardRef } from 'react';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
import { NEUMORPHISM } from '@/styles/Neumorphism';
|
|
||||||
|
|
||||||
// Couleurs de texte pour chaque variante
|
|
||||||
const variantStyles = {
|
|
||||||
primary: "text-[#090909] dark:text-white font-bold",
|
|
||||||
secondary: "text-slate-500 dark:text-slate-400 font-bold",
|
|
||||||
danger: "text-rose-600 dark:text-rose-400 font-bold",
|
|
||||||
success: "text-emerald-600 dark:text-emerald-400 font-bold",
|
|
||||||
outline: "text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700",
|
|
||||||
ghost: "text-slate-600 dark:text-slate-400 border-transparent shadow-none dark:shadow-none",
|
|
||||||
};
|
|
||||||
|
|
||||||
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
||||||
variant?: keyof typeof variantStyles;
|
|
||||||
size?: keyof typeof NEUMORPHISM.sizeStyles;
|
|
||||||
isLoading?: boolean;
|
|
||||||
leftIcon?: React.ReactNode;
|
|
||||||
rightIcon?: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
||||||
(
|
|
||||||
{
|
|
||||||
className,
|
|
||||||
variant = 'primary',
|
|
||||||
size = 'md',
|
|
||||||
isLoading = false,
|
|
||||||
leftIcon,
|
|
||||||
rightIcon,
|
|
||||||
children,
|
|
||||||
disabled,
|
|
||||||
type = "button",
|
|
||||||
...props
|
|
||||||
},
|
|
||||||
ref
|
|
||||||
) => {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
ref={ref}
|
|
||||||
type={type}
|
|
||||||
disabled={disabled || isLoading}
|
|
||||||
className={cn(
|
|
||||||
// Style de base & Neumorphism
|
|
||||||
"inline-flex items-center justify-center cursor-pointer outline-none transition-all duration-300 ease-in-out",
|
|
||||||
"bg-[#e8e8e8] dark:bg-[#1e293b]",
|
|
||||||
"border border-[#e8e8e8] dark:border-[#1e293b]",
|
|
||||||
"hover:border-white dark:hover:border-[#2a3850]",
|
|
||||||
NEUMORPHISM.lightShadow,
|
|
||||||
NEUMORPHISM.lightActive,
|
|
||||||
NEUMORPHISM.darkShadow,
|
|
||||||
NEUMORPHISM.darkActive,
|
|
||||||
"disabled:opacity-50 disabled:pointer-events-none",
|
|
||||||
|
|
||||||
// Variantes & Tailles
|
|
||||||
variantStyles[variant],
|
|
||||||
NEUMORPHISM.sizeStyles[size],
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{/* Spinner SVG si en chargement */}
|
|
||||||
{isLoading && (
|
|
||||||
<svg
|
|
||||||
className="animate-spin -ml-1 mr-2 h-5 w-5 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="ml-2 shrink-0">{rightIcon}</span>}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
Button.displayName = "Button";
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
import { NEUMORPHISM } from '@/styles/Neumorphism';
|
|
||||||
|
|
||||||
|
|
||||||
// IMPORTANT — contraste texte :
|
|
||||||
// Le fond clair (#e8e8e8) est assez lumineux. Dans le contenu de la Card,
|
|
||||||
// évite text-slate-400/500 en light mode (ratio WCAG insuffisant sur ce fond) :
|
|
||||||
// utilise plutôt text-slate-600 (ou plus foncé) pour le texte secondaire en light mode.
|
|
||||||
// Ex: className="text-slate-600 dark:text-slate-400"
|
|
||||||
|
|
||||||
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
||||||
// 'raised' : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
|
|
||||||
// 'flat' : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
|
|
||||||
variant?: 'raised' | 'flat'|'digged'|'prophunt';
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
||||||
({ className, variant = 'raised', ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
// Style de base
|
|
||||||
"rounded-3xl border-none transition-all duration-300 ease-in-out flex flex-col",
|
|
||||||
"bg-[#e8e8e8] dark:bg-[#1e293b]",
|
|
||||||
// Relief neumorphique (par défaut)
|
|
||||||
variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
|
|
||||||
variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
|
|
||||||
variant === 'prophunt' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight,NEUMORPHISM.lightShadowHover,NEUMORPHISM.darkShadowHover],
|
|
||||||
// Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
|
|
||||||
variant === 'flat' && "border border-black/5 dark:border-white/10",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
Card.displayName = "Card";
|
|
||||||
|
|
||||||
export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
// Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
|
|
||||||
"px-6 py-5 flex flex-col space-y-1.5 border-b border-black/5 dark:border-white/5 transition-all duration-300 ease-in-out",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
CardHeader.displayName = "CardHeader";
|
|
||||||
|
|
||||||
export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
CardContent.displayName = "CardContent";
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Download } from 'lucide-react';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
import type { Document } from '@/types/Document';
|
|
||||||
import { Button } from './Button';
|
|
||||||
import { useDocumentDownload } from '@/hooks/useDocumentDownload';
|
|
||||||
|
|
||||||
interface DocumentObjectProps {
|
|
||||||
doc: Document;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const DocumentObject: React.FC<DocumentObjectProps> = ({ doc }) => {
|
|
||||||
// 2. On initialise le Hook pour ce document spécifique
|
|
||||||
const { downloadFile, isDownloading } = useDocumentDownload();
|
|
||||||
|
|
||||||
const getCategoryBadge = (category: string) => {
|
|
||||||
switch (category) {
|
|
||||||
case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
|
|
||||||
case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
|
|
||||||
case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
|
|
||||||
default: return 'bg-blue-50 text-blue-700 border-blue-200';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr key={doc.id} className={cn('hover:bg-amber-50 hover:dark:bg-slate-600 cursor-default transition-all duration-300')}>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
<div>
|
|
||||||
<div className="text-sm font-medium text-slate-900 dark:text-slate-100">{doc.title}</div>
|
|
||||||
<div className="text-xs text-slate-500 dark:text-slate-400">{doc.file} • PDF</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap">
|
|
||||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
|
|
||||||
{doc.category}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">
|
|
||||||
{/* Petit conseil d'optimisation : utiliser une fonction date pour éviter les crashs si doc.created est mal formaté */}
|
|
||||||
{doc.created ? `${doc.created.split(" ")[0]} ${doc.created.split(" ")[1]?.substring(0,5)}` : 'N/A'}
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 items-center">
|
|
||||||
{/* 3. On relie le bouton à l'état et à la fonction du Hook */}
|
|
||||||
<Button
|
|
||||||
className="text-blue-900 dark:text-blue-400 hover:text-blue-700 px-3 py-1.5 flex ml-auto"
|
|
||||||
size='sm'
|
|
||||||
leftIcon={<Download className="w-4 h-4" />}
|
|
||||||
onClick={() => downloadFile(doc)}
|
|
||||||
isLoading={isDownloading} // Si votre composant Button supporte cette prop !
|
|
||||||
disabled={isDownloading}
|
|
||||||
>
|
|
||||||
{isDownloading ? 'Téléchargement...' : 'Télécharger'}
|
|
||||||
</Button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { cn } from '@utils/utils';
|
|
||||||
|
|
||||||
interface EmptyStateProps {
|
|
||||||
message: string;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const EmptyState: React.FC<EmptyStateProps> = ({ message, className }) => {
|
|
||||||
return (
|
|
||||||
<div className={cn(
|
|
||||||
"flex-1 flex justify-center items-center py-8 text-sm text-slate-500 italic",
|
|
||||||
className
|
|
||||||
)}>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import React, { forwardRef, useId } from 'react';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
import { NEUMORPHISM } from '@/styles/Neumorphism';
|
|
||||||
|
|
||||||
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
||||||
label?: string;
|
|
||||||
error?: string;
|
|
||||||
size?: keyof typeof NEUMORPHISM.sizeStyles;
|
|
||||||
leftIcon?: React.ReactNode;
|
|
||||||
rightIcon?: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
||||||
({
|
|
||||||
className,
|
|
||||||
label,
|
|
||||||
error,
|
|
||||||
id,
|
|
||||||
size = 'md',
|
|
||||||
leftIcon,
|
|
||||||
rightIcon,
|
|
||||||
required,
|
|
||||||
disabled,
|
|
||||||
...props
|
|
||||||
}, ref) => {
|
|
||||||
const autoId = useId();
|
|
||||||
const inputId = id || autoId;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full flex flex-col gap-1.5">
|
|
||||||
{/* Label */}
|
|
||||||
{label && (
|
|
||||||
<label
|
|
||||||
htmlFor={inputId}
|
|
||||||
className="block text-sm font-bold text-slate-700 dark:text-slate-300"
|
|
||||||
>
|
|
||||||
{label} {required && <span className="text-rose-500 font-bold">*</span>}
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="relative flex items-center w-full">
|
|
||||||
{/* Icône à gauche */}
|
|
||||||
{leftIcon && (
|
|
||||||
<span className="absolute left-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
|
|
||||||
{leftIcon}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Champ HTML avec les ombres creusées centralisées */}
|
|
||||||
<input
|
|
||||||
id={inputId}
|
|
||||||
ref={ref}
|
|
||||||
disabled={disabled}
|
|
||||||
className={cn(
|
|
||||||
// Base & Couleurs de fond
|
|
||||||
"w-full transition-all duration-300 ease-in-out outline-none border border-transparent",
|
|
||||||
"bg-[#e8e8e8] dark:bg-[#1e293b]",
|
|
||||||
"text-slate-800 dark:text-slate-100 font-medium placeholder:text-slate-400 dark:placeholder:text-slate-500",
|
|
||||||
|
|
||||||
// 🎯 Utilisation directe de tes constantes Neumorphic creusées
|
|
||||||
NEUMORPHISM.insetLight,
|
|
||||||
NEUMORPHISM.insetDark,
|
|
||||||
|
|
||||||
// Focus & État désactivé
|
|
||||||
"focus:border-blue-500/40 dark:focus:border-blue-400/40",
|
|
||||||
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
||||||
|
|
||||||
// Tailles & Marges d'icônes
|
|
||||||
NEUMORPHISM.sizeStyles[size],
|
|
||||||
leftIcon && "pl-11",
|
|
||||||
rightIcon && "pr-11",
|
|
||||||
|
|
||||||
// Style en cas d'erreur
|
|
||||||
error && "border-rose-500 focus:border-rose-500 text-rose-600 dark:text-rose-400",
|
|
||||||
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Icône à droite */}
|
|
||||||
{rightIcon && (
|
|
||||||
<span className="absolute right-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
|
|
||||||
{rightIcon}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Message d'erreur */}
|
|
||||||
{error && (
|
|
||||||
<p className="text-xs font-semibold text-rose-500 dark:text-rose-400">{error}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
Input.displayName = "Input";
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { cn } from '@utils/utils';
|
|
||||||
|
|
||||||
interface LoaderProps {
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Loader: React.FC<LoaderProps> = ({ className }) => {
|
|
||||||
return (
|
|
||||||
<div className={cn("flex-1 flex justify-center items-center py-8", className)}>
|
|
||||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-slate-900"></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
export function LogoGise(){
|
|
||||||
return(
|
|
||||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
|
||||||
<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">
|
|
||||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
|
|
||||||
AEGIS <span className="font-light text-slate-500">by GISE</span>
|
|
||||||
</h2>
|
|
||||||
<p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
|
|
||||||
Accès restreint
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default LogoGise;
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
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>
|
|
||||||
<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;
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
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";
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import type { ManagedContract } from '@/types/ManagedContract';
|
|
||||||
import { StatusBadge } from '@/components/ui/StatusBadge';
|
|
||||||
import { Card } from './Card';
|
|
||||||
|
|
||||||
interface ServiceObjectProps {
|
|
||||||
contract: ManagedContract;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
|
|
||||||
return (
|
|
||||||
<Card variant= 'prophunt' className="p-4 flex flex-col cursor-pointer">
|
|
||||||
<div className='flex flex-row justify-between'>
|
|
||||||
<h3 className="text-sm font-medium text-slate-900">{contract.service_name}</h3>
|
|
||||||
{/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
|
|
||||||
<StatusBadge status={contract.status} />
|
|
||||||
</div>
|
|
||||||
{contract.description && (
|
|
||||||
<p className="text-xs text-slate-500 mt-1">{contract.description}</p>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
import type { AegisStatus } from '@/types/Status';
|
|
||||||
|
|
||||||
interface StatusBadgeProps {
|
|
||||||
status: AegisStatus;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Configuration visuelle unique pour chaque statut
|
|
||||||
const STATUS_CONFIG: Record<AegisStatus, { bg: string; dot: string }> = {
|
|
||||||
// Statuts Infrastructure & Contrats Positifs
|
|
||||||
'Opérationnel': {
|
|
||||||
bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
|
|
||||||
dot: 'bg-emerald-500',
|
|
||||||
},
|
|
||||||
'Actif': {
|
|
||||||
bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
|
|
||||||
dot: 'bg-emerald-500',
|
|
||||||
},
|
|
||||||
'Ouvert': { bg: 'bg-blue-50 text-blue-700 border-blue-200/60', dot: 'bg-blue-500' },
|
|
||||||
|
|
||||||
// Statuts Intermédiaires / En cours
|
|
||||||
'Dégradé': {
|
|
||||||
bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
|
|
||||||
dot: 'bg-amber-500',
|
|
||||||
},
|
|
||||||
'En Déploiement': {
|
|
||||||
bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
|
|
||||||
dot: 'bg-blue-500',
|
|
||||||
},
|
|
||||||
'En Analyse': { bg: 'bg-amber-50 text-amber-700 border-amber-200/60', dot: 'bg-amber-500' },
|
|
||||||
|
|
||||||
// Statuts Alertes / Inactifs
|
|
||||||
'Hors Ligne': {
|
|
||||||
bg: 'bg-red-50 text-red-700 border-red-200/60',
|
|
||||||
dot: 'bg-red-500',
|
|
||||||
},
|
|
||||||
'Annulé': {
|
|
||||||
bg: 'bg-slate-100 text-slate-700 border-slate-200',
|
|
||||||
dot: 'bg-slate-400',
|
|
||||||
},
|
|
||||||
'Résolu': { bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60', dot: 'bg-emerald-500' },
|
|
||||||
};
|
|
||||||
|
|
||||||
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) => {
|
|
||||||
// Récupération de la configuration ou fallback de sécurité
|
|
||||||
const config = STATUS_CONFIG[status] || {
|
|
||||||
bg: 'bg-slate-50 text-slate-600 border-slate-200',
|
|
||||||
dot: 'bg-slate-400',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
|
|
||||||
config.bg,
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<span className={cn("w-1.5 h-1.5 rounded-full mr-2 shrink-0", config.dot)} />
|
|
||||||
{status}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default StatusBadge;
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
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";
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { Sun, Moon } from "lucide-react";
|
|
||||||
import { cn } from "@utils/utils";
|
|
||||||
|
|
||||||
interface ThemeToggleProps {
|
|
||||||
isDark: boolean;
|
|
||||||
toggleTheme: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ThemeToggle({ isDark, toggleTheme }: ThemeToggleProps) {
|
|
||||||
|
|
||||||
const lightInset = "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]";
|
|
||||||
const darkInset = "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]";
|
|
||||||
|
|
||||||
const lightExtrude = "shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff]";
|
|
||||||
const darkExtrude = "dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
onClick={toggleTheme}
|
|
||||||
// 1. On ajoute la transition globale sur le fond du bouton principal
|
|
||||||
className="group relative flex items-center w-20 h-10 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] outline-none cursor-pointer shrink-0 transition-all duration-300 ease-in-out"
|
|
||||||
aria-label="Basculer le thème"
|
|
||||||
>
|
|
||||||
{/* 2. Le Rail : On s'assure qu'il est bien à 300ms ease-in-out */}
|
|
||||||
<div className={cn(
|
|
||||||
"absolute inset-0 rounded-full transition-all duration-300 ease-in-out",
|
|
||||||
lightInset, darkInset
|
|
||||||
)}></div>
|
|
||||||
|
|
||||||
{/* 3. La Bille : On remplace 'transition-transform duration-500' par la transition globale */}
|
|
||||||
<div className={cn(
|
|
||||||
"absolute left-1 w-8 h-8 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] z-10 flex items-center justify-center",
|
|
||||||
"transition-all duration-300 ease-in-out", // <-- LA CORRECTION EST ICI
|
|
||||||
lightExtrude, darkExtrude,
|
|
||||||
isDark ? "translate-x-10" : "translate-x-0"
|
|
||||||
)}>
|
|
||||||
|
|
||||||
{/* 4. Les icônes : On les passe aussi à 300ms pour que la rotation suive le mouvement */}
|
|
||||||
<Sun className={cn(
|
|
||||||
"absolute w-4 h-4 text-amber-500 transition-all duration-300 ease-in-out",
|
|
||||||
isDark ? "opacity-0 rotate-90 scale-50" : "opacity-100 rotate-0 scale-100"
|
|
||||||
)} strokeWidth={2.5} />
|
|
||||||
|
|
||||||
<Moon className={cn(
|
|
||||||
"absolute w-4 h-4 text-indigo-400 transition-all duration-300 ease-in-out",
|
|
||||||
isDark ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-50"
|
|
||||||
)} strokeWidth={2.5} />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
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-amber-50 transition-colors"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import type { InfrastructureNode } from '@/types/InfrastructureNode';
|
|
||||||
import { StatusBadge } from '@ui/StatusBadge';
|
|
||||||
import { cn } from '@/utils/utils';
|
|
||||||
|
|
||||||
interface UptimeObjectProps {
|
|
||||||
node: InfrastructureNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const UptimeObject: React.FC<UptimeObjectProps> = ({ node }) => {
|
|
||||||
return (
|
|
||||||
// La "key" a été retirée d'ici, elle sera gérée par le parent
|
|
||||||
<tr className={cn(
|
|
||||||
"hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
|
|
||||||
)}>
|
|
||||||
|
|
||||||
{/* Infos Serveur */}
|
|
||||||
<td className='p-2'>
|
|
||||||
<p className="font-medium text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.label}</p>
|
|
||||||
<p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Métriques & Badge */}
|
|
||||||
<td className='p-2'>
|
|
||||||
<p className="text-xs text-slate-500">SLA</p>
|
|
||||||
<p className="text-sm font-semibold text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.uptime_sla}</p>
|
|
||||||
</td>
|
|
||||||
<td className='text-right p-2'>
|
|
||||||
<StatusBadge status={node.status} />
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
|
||||||
import { Lock } from "lucide-react";
|
|
||||||
|
|
||||||
export function AccessWidget() {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="p-6 border-slate-100">
|
|
||||||
<h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center"><Lock className="w-5 h-5 mr-2 text-slate-400"></Lock>Sécurité de l'accès</h2>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent className="space-y-6">
|
|
||||||
{/* MFA Status */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
|
|
||||||
<p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
|
|
||||||
</div>
|
|
||||||
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
|
|
||||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
|
|
||||||
Actif
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-4 border-t border-slate-100">
|
|
||||||
<button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
|
|
||||||
Générer de nouveaux codes de secours
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mot de passe */}
|
|
||||||
<div className="pt-4 border-t border-slate-100">
|
|
||||||
<p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
|
|
||||||
<p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
|
|
||||||
<button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
|
|
||||||
Modifier le mot de passe
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export default AccessWidget;
|
|
||||||
@@ -1,32 +1,25 @@
|
|||||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
export default function BackupWidget({ onClick }: { onClick?: () => void }) {
|
||||||
import { Check } from 'lucide-react';
|
|
||||||
import Badge from '@ui/Badge';
|
|
||||||
|
|
||||||
interface BackupWidgetProps {
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function BackupWidget({ onClick }: BackupWidgetProps) {
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<div
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
className="cursor-pointer transition-all duration-300 ease-in-out"
|
className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
|
||||||
>
|
>
|
||||||
<CardHeader>
|
<div className="flex items-center justify-between mb-4">
|
||||||
<h2 className="text-lg font-semibold">Sauvegardes</h2>
|
<h2 className="text-lg font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">Sauvegardes</h2>
|
||||||
<Badge className="max-w-fit min-w-fit" name="PRA Immuable">
|
<span className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded font-medium border border-slate-200">
|
||||||
</Badge>
|
PRA Immuable
|
||||||
</CardHeader>
|
</span>
|
||||||
<CardContent className="p-6">
|
</div>
|
||||||
<Card variant='digged' className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4">
|
|
||||||
<p className="text-sm text-slate-500 mb-1">Dernier snapshot système</p>
|
<div className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4 group-hover:bg-blue-50/50 transition-colors">
|
||||||
<p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
|
<p className="text-sm text-slate-500 mb-1">Dernier snapshot système</p>
|
||||||
</Card>
|
<p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
|
||||||
<div className="flex items-center text-emerald-600 text-sm font-medium">
|
</div>
|
||||||
<Check></Check>
|
|
||||||
Intégrité validée avec succès
|
<div className="flex items-center text-emerald-600 text-sm font-medium">
|
||||||
</div>
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" /></svg>
|
||||||
</CardContent>
|
Intégrité validée avec succès
|
||||||
</Card>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import { useDocuments } from '@/hooks/useDocuments';
|
|
||||||
import {DocumentObject} from '@ui/DocumentObject'
|
|
||||||
import { Card } from '../ui/Card';
|
|
||||||
|
|
||||||
export function DocumentsWidget(){
|
|
||||||
const { documents } = useDocuments();
|
|
||||||
return (
|
|
||||||
<Card className='pb-7'>
|
|
||||||
<table className="min-w-full divide-y divide-slate-200">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
|
||||||
Nom du fichier
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
|
||||||
Catégorie
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
|
||||||
Ajouté le
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
|
||||||
Action
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="divide-y divide-slate-200">
|
|
||||||
{documents.map((doc) => (
|
|
||||||
<DocumentObject doc={doc}></DocumentObject>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DocumentsWidget;
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
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"
|
|
||||||
// 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;
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
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-300 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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
|
||||||
import { Building } from "lucide-react";
|
|
||||||
|
|
||||||
export function InformationWidget() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="p-6 border-slate-100">
|
|
||||||
<h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center">
|
|
||||||
<Building className="w-5 h-5 mr-2 text-slate-400" />
|
|
||||||
Profil de l'Organisation
|
|
||||||
</h2>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent>
|
|
||||||
<dl className="space-y-4 text-sm">
|
|
||||||
<div>
|
|
||||||
<dt className="text-slate-500 font-medium">Entité Légale</dt>
|
|
||||||
<dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-slate-500 font-medium">Administrateur du compte</dt>
|
|
||||||
<dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
|
|
||||||
<dd className="mt-1 flex items-center">
|
|
||||||
<span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
|
|
||||||
<span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InformationWidget;
|
|
||||||
@@ -1,34 +1,23 @@
|
|||||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
export default function SecurityWidget() {
|
||||||
|
|
||||||
interface SecurityWidgetProps {
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SecurityWidget({ onClick }: SecurityWidgetProps) {
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
||||||
onClick={onClick}
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">Posture de Sécurité</h2>
|
||||||
className="cursor-pointer hover:border-blue-300 transition-all duration-300 ease-in-out"
|
|
||||||
>
|
<div className="flex items-baseline space-x-2 mb-4">
|
||||||
<CardHeader>
|
<span className="text-3xl font-bold text-slate-900">1,432</span>
|
||||||
<h2 className="text-lg font-semibold transition-colors">Posture de Sécurité</h2>
|
<span className="text-sm text-slate-500">menaces bloquées (30j)</span>
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent className="p-6">
|
|
||||||
<div className="flex items-baseline space-x-2 mb-4">
|
<div className="space-y-3">
|
||||||
<span className="text-3xl font-bold text-slate-900">1,432</span>
|
<div className="flex justify-between items-center text-sm">
|
||||||
<span className="text-sm text-slate-500">menaces bloquées (30j)</span>
|
<span className="text-slate-600">Bouclier Cloudflare WAF</span>
|
||||||
|
<span className="text-emerald-500 font-medium">Actif</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-3">
|
<div className="flex justify-between items-center text-sm">
|
||||||
<div className="flex justify-between items-center text-sm">
|
<span className="text-slate-600">Dernier audit de vulnérabilité</span>
|
||||||
<span className="text-slate-600">Bouclier Cloudflare WAF</span>
|
<span className="text-slate-900 font-medium">Il y a 12 jours</span>
|
||||||
<span className="text-emerald-500 font-medium">Actif</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center text-sm">
|
|
||||||
<span className="text-slate-600">Dernier audit de vulnérabilité</span>
|
|
||||||
<span className="text-slate-900 font-medium">Il y a 12 jours</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,40 +1,193 @@
|
|||||||
import { useNavigate } from 'react-router-dom';
|
import { useState, useEffect } from 'react';
|
||||||
import { useContracts } from '@/hooks/useContracts';
|
import { pb } from '../../config/pocketbase';
|
||||||
import { ServiceObject } from '@/components/ui/ServiceObject';
|
|
||||||
import { Card, CardContent } from '@/components/ui/Card';
|
|
||||||
import { Button } from '@/components/ui/Button';
|
|
||||||
import { Loader } from '@/components/ui/Loader';
|
|
||||||
import { EmptyState } from '@/components/ui/EmptyState';
|
|
||||||
|
|
||||||
export default function ServicesWidget() {
|
export default function ServicesWidget() {
|
||||||
const { contracts, isLoading, error } = useContracts();
|
const [contracts, setContracts] = useState<any[]>([]);
|
||||||
const navigate = useNavigate();
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const [submitSuccess, setSubmitSuccess] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchContracts = async () => {
|
||||||
|
try {
|
||||||
|
const records = await pb.collection('aegis_managed_contracts').getFullList({
|
||||||
|
sort: '-created',
|
||||||
|
});
|
||||||
|
setContracts(records);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur lors de la récupération des contrats :", error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchContracts();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Fonction pour envoyer la demande d'évolution vers PocketBase
|
||||||
|
const handleEvolutionRequest = async (subject: string, description: string) => {
|
||||||
|
setIsSubmitting(true);
|
||||||
|
try {
|
||||||
|
await pb.collection('aegis_tickets').create({
|
||||||
|
author: pb.authStore.model?.id,
|
||||||
|
company: pb.authStore.model?.company,
|
||||||
|
category: "Évolution",
|
||||||
|
subject: subject,
|
||||||
|
description: description,
|
||||||
|
status: "Ouvert"
|
||||||
|
});
|
||||||
|
|
||||||
|
setSubmitSuccess(true);
|
||||||
|
|
||||||
|
// Ferme la modale après 2.5 secondes de message de succès
|
||||||
|
setTimeout(() => {
|
||||||
|
setSubmitSuccess(false);
|
||||||
|
setIsModalOpen(false);
|
||||||
|
}, 2500);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur lors de la création du ticket d'évolution :", error);
|
||||||
|
alert("Une erreur est survenue. Veuillez contacter le support par téléphone.");
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card>
|
<>
|
||||||
<CardContent className="p-6 flex flex-col h-full">
|
<div className= "bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col" >
|
||||||
|
<div className="mb-4" >
|
||||||
|
<h2 className="text-lg font-semibold text-slate-900" > Vos services gérés </h2>
|
||||||
|
< p className = "text-sm text-slate-500" > Catalogue des contrats d'infogérance actifs</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mb-4">
|
< div className = "flex-1 overflow-y-auto mb-6 space-y-3" >
|
||||||
<h2 className="text-lg font-semibold text-slate-900">Vos services gérés</h2>
|
{
|
||||||
<p className="text-sm text-slate-500">Catalogue des contrats d'infogérance actifs</p>
|
isLoading?(
|
||||||
</div>
|
<p className = "text-sm text-slate-500 animate-pulse" > Chargement de vos contrats sécurisés...</ p >
|
||||||
|
) : contracts.length === 0 ? (
|
||||||
<div className="flex-1 mb-6 space-y-3">
|
<p className= "text-sm text-slate-500" > Aucun contrat actif détecté.</p>
|
||||||
{error && <EmptyState message={error} className="text-red-500" />}
|
) : (
|
||||||
{isLoading && !error && <Loader />}
|
contracts.map((contract?: any) => (
|
||||||
{!isLoading && !error && contracts.length === 0 && (
|
<div key= { contract.id } className = "p-4 bg-slate-50 rounded-lg border border-slate-100 flex justify-between items-center" >
|
||||||
<EmptyState message="Aucun contrat actif détecté." />
|
<div>
|
||||||
|
<h3 className="text-sm font-medium text-slate-900" > { contract.service_name } </h3>
|
||||||
|
{
|
||||||
|
contract.description && (
|
||||||
|
<p className="text-xs text-slate-500 mt-1"> { contract.description } </p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
< span className = {`text-xs px-2 py-1 rounded-full font-medium ${contract.status === 'Actif' ? 'bg-emerald-50 text-emerald-600' :
|
||||||
|
contract.status === 'En déploiement' ? 'bg-blue-50 text-blue-600' :
|
||||||
|
'bg-slate-100 text-slate-600'
|
||||||
|
}`}>
|
||||||
|
{ contract.status }
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
)}
|
)}
|
||||||
{!isLoading && !error && contracts.map((contract) => (
|
</div>
|
||||||
<ServiceObject key={contract.id} contract={contract} />
|
|
||||||
))}
|
< button
|
||||||
|
onClick = {() => setIsModalOpen(true)}
|
||||||
|
className = "w-full bg-blue-900 text-white font-medium py-3 rounded-lg hover:bg-blue-800 transition-colors shadow-sm"
|
||||||
|
>
|
||||||
|
Demander une évolution du parc
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* MODALE STRATÉGIQUE */ }
|
||||||
|
{
|
||||||
|
isModalOpen && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 backdrop-blur-sm p-4" >
|
||||||
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in-95 duration-200" >
|
||||||
|
<div className="p-6" >
|
||||||
|
<div className="flex justify-between items-center mb-5" >
|
||||||
|
<h3 className="text-xl font-bold text-slate-900" > Évolution de l'infrastructure</h3>
|
||||||
|
{
|
||||||
|
!isSubmitting && !submitSuccess && (
|
||||||
|
<button onClick={ () => setIsModalOpen(false) } className = "text-slate-400 hover:text-slate-600" >
|
||||||
|
<svg className="w-6 h-6" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
|
||||||
|
<path strokeLinecap="round" strokeLinejoin = "round" strokeWidth = { 2} d = "M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{
|
||||||
|
submitSuccess ? (
|
||||||
|
<div className= "text-center py-8" >
|
||||||
|
<div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4" >
|
||||||
|
<svg className="w-8 h-8" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
|
||||||
|
<path strokeLinecap="round" strokeLinejoin = "round" strokeWidth = { 2} d = "M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
< h4 className = "text-lg font-semibold text-slate-900 mb-2" > Demande transmise avec succès </h4>
|
||||||
|
< p className = "text-sm text-slate-500" > Un expert GISE analyse votre besoin et reviendra vers vous sous 24h.</p>
|
||||||
|
</div>
|
||||||
|
) : isSubmitting ? (
|
||||||
|
<div className= "text-center py-12" >
|
||||||
|
<p className="text-sm font-medium text-slate-500 animate-pulse" > Création de votre ticket projet sécurisé...</p>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p className= "text-sm text-slate-600 mb-6" >
|
||||||
|
Quel est votre prochain objectif d'infrastructure ? Sélectionnez une initiative stratégique pour ouvrir un ticket projet avec votre expert.
|
||||||
|
</p>
|
||||||
|
|
||||||
<Button size="lg" onClick={() => navigate('/evolution-infrastructure')}>
|
< div className = "space-y-3" >
|
||||||
Demander une évolution du parc
|
<button
|
||||||
</Button>
|
onClick={ () => handleEvolutionRequest("Projet d'Évolution : Cybersécurité", "Le client souhaite renforcer sa sécurité (Audits, Tests d'intrusion, Plan de Reprise d'Activité).") }
|
||||||
|
className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
|
||||||
|
>
|
||||||
|
<h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Renforcer la sécurité face aux cybermenaces </h4>
|
||||||
|
< p className = "text-xs text-slate-500 mt-1" > Audits de sécurité, tests d'intrusion et Plan de Reprise d'Activité(PRA).</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
</CardContent>
|
< button
|
||||||
</Card>
|
onClick = {() => handleEvolutionRequest("Projet d'Évolution : Architecture Réseau", "Le client souhaite étendre ses capacités (Migration Cloud Privé, nouvelles succursales).")
|
||||||
|
}
|
||||||
|
className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
|
||||||
|
>
|
||||||
|
<h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Étendre les capacités du réseau actuel </h4>
|
||||||
|
< p className = "text-xs text-slate-500 mt-1" > Migration vers Cloud Privé Sécurisé, ajout de succursales sécurisées.</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
< button
|
||||||
|
onClick = {() => handleEvolutionRequest("Projet d'Évolution : Conformité Légal", "Le client demande un accompagnement vCISO pour la mise en conformité (RGPD, NIS2).")
|
||||||
|
}
|
||||||
|
className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
|
||||||
|
>
|
||||||
|
<h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Mise en conformité légale(RGPD, NIS2) </h4>
|
||||||
|
< p className = "text-xs text-slate-500 mt-1" > Accompagnement vCISO et mise aux normes de votre système d'information.</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
< button
|
||||||
|
onClick = {() => handleEvolutionRequest("Projet d'Évolution : Outils Souverains", "Le client souhaite déployer de nouveaux outils collaboratifs souverains.")}
|
||||||
|
className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
|
||||||
|
>
|
||||||
|
<h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Autre demande stratégique </h4>
|
||||||
|
< p className = "text-xs text-slate-500 mt-1" > Déploiement d'outils collaboratifs souverains ou besoins spécifiques.</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{
|
||||||
|
!isSubmitting && !submitSuccess && (
|
||||||
|
<div className="bg-slate-50 px-6 py-4 border-t border-slate-200 flex justify-end" >
|
||||||
|
<button onClick={ () => setIsModalOpen(false) } className = "text-sm font-medium text-slate-600 hover:text-slate-900" >
|
||||||
|
Annuler
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { Card, CardContent } from '@/components/ui/Card';
|
|
||||||
import { Button } from '@/components/ui/Button';
|
|
||||||
|
|
||||||
export const SupportCtaWidget: React.FC = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-6">
|
|
||||||
<h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
|
|
||||||
<p className="text-blue-900 text-sm mb-4 leading-relaxed">
|
|
||||||
Déclarez un incident critique ou demandez une évolution de votre infrastructure.
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
onClick={() => navigate('/support')}
|
|
||||||
className="w-full text-blue-900"
|
|
||||||
>
|
|
||||||
Ouvrir un ticket sécurisé
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SupportCtaWidget;
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
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;
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
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>
|
|
||||||
<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 max-w-fit" />
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent>
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
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 className='pb-7'>
|
|
||||||
<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;
|
|
||||||
@@ -1,41 +1,99 @@
|
|||||||
import { useInfrastructureNodes } from '@/hooks/useInfrastructureNodes';
|
import { useState, useEffect } from 'react';
|
||||||
import { UptimeObject } from '@/components/ui/UptimeObject';
|
import { pb } from '../../config/pocketbase';
|
||||||
import { Card, CardContent } from '@/components/ui/Card';
|
|
||||||
import { Loader } from '@/components/ui/Loader';
|
interface InfrastructureNode {
|
||||||
import { EmptyState } from '@/components/ui/EmptyState';
|
id: string;
|
||||||
|
label: string;
|
||||||
|
type: string;
|
||||||
|
status: string;
|
||||||
|
uptime_sla: string;
|
||||||
|
}
|
||||||
|
|
||||||
export default function UptimeWidget() {
|
export default function UptimeWidget() {
|
||||||
const { nodes, isLoading, error } = useInfrastructureNodes();
|
const [nodes, setNodes] = useState<InfrastructureNode[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchNodes = async () => {
|
||||||
|
try {
|
||||||
|
// Récupération sécurisée filtrée automatiquement par le Token JWT de la compagnie
|
||||||
|
const records = await pb.collection('aegis_infrastructure_nodes').getFullList<InfrastructureNode>({
|
||||||
|
sort: 'created',
|
||||||
|
});
|
||||||
|
setNodes(records);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur lors de la récupération des nœuds :", error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchNodes();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Fonction pour adapter dynamiquement la couleur du badge selon le statut renvoyé par la base
|
||||||
|
const getStatusStyle = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Opérationnel':
|
||||||
|
return {
|
||||||
|
bg: 'bg-emerald-50 text-emerald-600 border-emerald-100',
|
||||||
|
dot: 'bg-emerald-500'
|
||||||
|
};
|
||||||
|
case 'Dégradé':
|
||||||
|
return {
|
||||||
|
bg: 'bg-amber-50 text-amber-600 border-amber-100',
|
||||||
|
dot: 'bg-amber-500'
|
||||||
|
};
|
||||||
|
case 'Hors Ligne':
|
||||||
|
return {
|
||||||
|
bg: 'bg-red-50 text-red-600 border-red-100',
|
||||||
|
dot: 'bg-red-500'
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
bg: 'bg-slate-50 text-slate-600 border-slate-100',
|
||||||
|
dot: 'bg-slate-400'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card>
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col">
|
||||||
<CardContent className="p-6 flex flex-col h-full">
|
<h2 className="text-lg font-semibold text-slate-900 mb-4">État des Services & SLA</h2>
|
||||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-400 mb-4 transition-all duration-300 ease-in-out">État des Services & SLA</h2>
|
|
||||||
|
|
||||||
{/* 1. Gestion de l'erreur */}
|
{isLoading ? (
|
||||||
{error && (
|
<div className="flex-1 flex justify-center items-center py-8">
|
||||||
<EmptyState message={error} className="text-red-500 not-italic font-medium" />
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-slate-900"></div>
|
||||||
)}
|
</div>
|
||||||
|
) : nodes.length === 0 ? (
|
||||||
{/* 2. Gestion du chargement */}
|
<div className="flex-1 flex justify-center items-center py-8 text-sm text-slate-500 italic">
|
||||||
{isLoading && !error && <Loader />}
|
Aucun équipement enregistré pour ce contrat.
|
||||||
|
</div>
|
||||||
{/* 3. Gestion de l'état vide */}
|
) : (
|
||||||
{!isLoading && !error && nodes.length === 0 && (
|
<div className="divide-y divide-slate-100 flex-1">
|
||||||
<EmptyState message="Aucun équipement enregistré pour ce contrat." />
|
{nodes.map((node) => {
|
||||||
)}
|
const style = getStatusStyle(node.status);
|
||||||
|
return (
|
||||||
{/* 4. Affichage des données */}
|
<div key={node.id} className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
|
||||||
<table className="divide-y divide-slate-100 table-auto">
|
<div>
|
||||||
{!isLoading && !error && nodes.length > 0 && (
|
<p className="font-medium text-slate-900">{node.label}</p>
|
||||||
<tbody className=''>
|
<p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
|
||||||
{nodes.map((node) => (
|
</div>
|
||||||
<UptimeObject key={node.id} node={node} />
|
<div className="flex items-center space-x-6">
|
||||||
))}
|
<div className="text-right">
|
||||||
</tbody>
|
<p className="text-xs text-slate-500">SLA</p>
|
||||||
)}
|
<p className="text-sm font-semibold text-slate-900">{node.uptime_sla}%</p>
|
||||||
</table>
|
</div>
|
||||||
</CardContent>
|
<div className={`${style.bg} px-3 py-1 rounded-full text-xs font-medium flex items-center border`}>
|
||||||
</Card>
|
<div className={`w-1.5 h-1.5 rounded-full ${style.dot} mr-2`}></div>
|
||||||
|
{node.status}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import PocketBase from 'pocketbase';
|
import PocketBase from 'pocketbase';
|
||||||
|
|
||||||
const PB_URL = import.meta.env.VITE_PB_URL;
|
const PB_URL = 'https://pocket.bunker.lan';
|
||||||
|
|
||||||
export const pb = new PocketBase(PB_URL);
|
export const pb = new PocketBase(PB_URL);
|
||||||
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
// Fichier : src/data/evolutionOptions.ts
|
|
||||||
|
|
||||||
export interface EvolutionOption {
|
|
||||||
id: string;
|
|
||||||
category: 'security' | 'cloud' | 'sovereignty' | 'governance' | 'custom';
|
|
||||||
categoryLabel: string;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
subject: string;
|
|
||||||
payloadDescription: string;
|
|
||||||
badgeText?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface EvolutionCategory {
|
|
||||||
id: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const EVOLUTION_CATEGORIES = [
|
|
||||||
{ id: 'all', label: 'Toutes les initiatives' },
|
|
||||||
{ id: 'security', label: 'Cybersécurité & Zero Trust' },
|
|
||||||
{ id: 'cloud', label: 'Cloud Privé & Réseau' },
|
|
||||||
{ id: 'sovereignty', label: 'Outils Souverains & Data' },
|
|
||||||
{ id: 'governance', label: 'Conformité & vCISO' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export const EVOLUTION_OPTIONS: EvolutionOption[] = [
|
|
||||||
// --- CYBERSÉCURITÉ & ZERO TRUST ---
|
|
||||||
{
|
|
||||||
id: 'sec-zero-trust',
|
|
||||||
category: 'security',
|
|
||||||
categoryLabel: 'Cybersécurité',
|
|
||||||
title: 'Segmentation Réseau Zero Trust & Firewalls Dedicated',
|
|
||||||
description: 'Mise en place de micro-segmentation par VLANs et déploiement de pare-feu virtuels/physiques (OPNsense) hautement sécurisés.',
|
|
||||||
subject: "Projet d'Évolution : Zero Trust & Pare-feu",
|
|
||||||
payloadDescription: "Le client souhaite déployer une politique Zero Trust avec segmentation par VLANs et pare-feu OPNsense dédiés.",
|
|
||||||
badgeText: 'Socle Souverain'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sec-pentest-pra',
|
|
||||||
category: 'security',
|
|
||||||
categoryLabel: 'Cybersécurité',
|
|
||||||
title: 'Audit de Vulnérabilités & Plan de Reprise d\'Activité (PRA)',
|
|
||||||
description: 'Tests d\'intrusion (Pen-test) de surface, audit de configuration et rédaction du Plan de Reprise d\'Activité en cas de sinistre majeur.',
|
|
||||||
subject: "Projet d'Évolution : Audits & PRA",
|
|
||||||
payloadDescription: "Demande d'audit de vulnérabilités, tests d'intrusion et élaboration/revue du Plan de Reprise d'Activité (PRA).",
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- CLOUD PRIVÉ & INFRASTRUCTURE ---
|
|
||||||
{
|
|
||||||
id: 'cloud-proxmox',
|
|
||||||
category: 'cloud',
|
|
||||||
categoryLabel: 'Cloud Privé',
|
|
||||||
title: 'Migration vers Hyperviseur Bare-Metal Proxmox',
|
|
||||||
description: 'Migration des serveurs physiques vétustes vers nos hyperviseurs bare-metal chiffrés et interconnectés via tunnels VPN dédiés.',
|
|
||||||
subject: "Projet d'Évolution : Migration Cloud Privé Proxmox",
|
|
||||||
payloadDescription: "Le client souhaite migrer ses serveurs locaux/vétustes vers des hyperviseurs bare-metal Proxmox managés par GISE.",
|
|
||||||
badgeText: 'Haute Disponibilité'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'cloud-sdwan-vpn',
|
|
||||||
category: 'cloud',
|
|
||||||
categoryLabel: 'Réseau',
|
|
||||||
title: 'Interconnexion Multi-site & Tunnels VPN WireGuard',
|
|
||||||
description: 'Liaison chiffrée permanente entre vos différentes succursales et le datacenter avec basculement automatique en cas de coupure.',
|
|
||||||
subject: "Projet d'Évolution : Architecture Multi-site & VPN",
|
|
||||||
payloadDescription: "Demande d'extension du réseau avec interconnexion VPN WireGuard/OPNsense entre plusieurs sites.",
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- OU TILS SOUVERAINS & DONNÉES ---
|
|
||||||
{
|
|
||||||
id: 'sov-suite',
|
|
||||||
category: 'sovereignty',
|
|
||||||
categoryLabel: 'Souveraineté',
|
|
||||||
title: 'Suite Collaborative Souveraine (GED & Coffre-Fort)',
|
|
||||||
description: 'Déploiement d\'espaces de stockage chiffrés (Nextcloud souverain), coffre-fort de mots de passe d\'entreprise (Vaultwarden) et visioconférence sécurisée.',
|
|
||||||
subject: "Projet d'Évolution : Suite Collaborative Souveraine",
|
|
||||||
payloadDescription: "Le client demande le déploiement de la suite souveraine (GED Nextcloud, Vaultwarden d'entreprise, outils chiffrés).",
|
|
||||||
badgeText: '100% Souverain'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sov-backups',
|
|
||||||
category: 'sovereignty',
|
|
||||||
categoryLabel: 'Sauvegardes',
|
|
||||||
title: 'Sauvegardes Immuables & Anti-Ransomware (Règle 3-2-1-1-0)',
|
|
||||||
description: 'Stockage des sauvegardes dans un coffre-fort numérique immuable (non modifiable et non supprimable même en cas de piratage).',
|
|
||||||
subject: "Projet d'Évolution : Sauvegardes Immuables",
|
|
||||||
payloadDescription: "Mise en place ou renforcement de la politique de sauvegardes immuables anti-ransomware (Règle 3-2-1-1-0).",
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- CONFORMITÉ & GOUVERNANCE ---
|
|
||||||
{
|
|
||||||
id: 'gov-vciso',
|
|
||||||
category: 'governance',
|
|
||||||
categoryLabel: 'Gouvernance',
|
|
||||||
title: 'Accompagnement vCISO (Directeur Sécurité Partagé)',
|
|
||||||
description: 'Mise à disposition d\'un expert RSSI/vCISO dédié pour piloter la stratégie SI, former vos collaborateurs et auditer les prestataires.',
|
|
||||||
subject: "Projet d'Évolution : Accompagnement vCISO",
|
|
||||||
payloadDescription: "Le client souhaite un accompagnement vCISO (RSSI dédié à temps partagé) pour piloter sa gouvernance IT.",
|
|
||||||
badgeText: 'Conseil VIP'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'gov-compliance',
|
|
||||||
category: 'governance',
|
|
||||||
categoryLabel: 'Conformité',
|
|
||||||
title: 'Mise en Conformité Légale (RGPD, NIS2, DORA)',
|
|
||||||
description: 'Analyse d\'écart et mise aux normes réglementaires européennes imposées aux infrastructures critiques et professions réglementées.',
|
|
||||||
subject: "Projet d'Évolution : Conformité NIS2 / RGPD / DORA",
|
|
||||||
payloadDescription: "Demande de mise en conformité réglementaire (RGPD, directive NIS2, DORA ou normes sectorielles).",
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- DEMANDE SUR MESURE ---
|
|
||||||
{
|
|
||||||
id: 'custom-project',
|
|
||||||
category: 'custom',
|
|
||||||
categoryLabel: 'Sur-Mesure',
|
|
||||||
title: 'Projet d\'Ingénierie & Besoins Spécifiques',
|
|
||||||
description: 'Vous avez une contrainte technique spécifique ou un projet d\'extension sur-mesure ? Discutez-en directement avec votre directeur de compte.',
|
|
||||||
subject: "Projet d'Évolution : Demande spécifique",
|
|
||||||
payloadDescription: "Le client formule une demande d'évolution stratégique spécifique à cadrer lors d'un entretien.",
|
|
||||||
}
|
|
||||||
];
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { pb } from '@/services/pocketbase';
|
|
||||||
import type { ManagedContract } from '@/types/ManagedContract';
|
|
||||||
|
|
||||||
export const useContracts = () => {
|
|
||||||
const [contracts, setContracts] = useState<ManagedContract[]>([]);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchContracts = async () => {
|
|
||||||
try {
|
|
||||||
setIsLoading(true);
|
|
||||||
const records = await pb.collection('aegis_managed_contracts').getFullList<ManagedContract>({
|
|
||||||
sort: '-created',
|
|
||||||
});
|
|
||||||
setContracts(records);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Erreur contrats :", err);
|
|
||||||
setError("Impossible de charger le catalogue des services.");
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
fetchContracts();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { contracts, isLoading, error };
|
|
||||||
};
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
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 };
|
|
||||||
};
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
// Importez votre instance PocketBase
|
|
||||||
import {pb} from '@/services/pocketbase';
|
|
||||||
import type { Document } from '@/types/Document';
|
|
||||||
|
|
||||||
export function useDocumentDownload() {
|
|
||||||
const [isDownloading, setIsDownloading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const downloadFile = async (doc: Document) => {
|
|
||||||
try {
|
|
||||||
setIsDownloading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
// 1. Demander un jeton éphémère de téléchargement (Sécurité Max)
|
|
||||||
// Ce jeton autorise le navigateur à télécharger un fichier protégé sans exposer votre session
|
|
||||||
const fileToken = await pb.files.getToken();
|
|
||||||
|
|
||||||
// 2. Générer l'URL du fichier
|
|
||||||
// ATTENTION : Pour que getUrl fonctionne, 'doc' DOIT contenir doc.id ET doc.collectionId (ou doc.collectionName)
|
|
||||||
const fileUrl = pb.files.getUrl(doc, doc.file);
|
|
||||||
|
|
||||||
// 3. Ajouter le jeton sécurisé et forcer le téléchargement (?download=1)
|
|
||||||
const downloadUrl = `${fileUrl}?token=${fileToken}&download=1`;
|
|
||||||
|
|
||||||
// 4. Créer un lien invisible pour forcer le navigateur à télécharger
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = downloadUrl;
|
|
||||||
// On s'assure d'avoir un nom de fichier par défaut si doc.title est vide
|
|
||||||
link.setAttribute("download", doc.title || "document_aegis.pdf");
|
|
||||||
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Erreur lors du téléchargement sécurisé :", err);
|
|
||||||
setError("Accès refusé au coffre-fort documentaire.");
|
|
||||||
} finally {
|
|
||||||
setIsDownloading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return { downloadFile, isDownloading, error };
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { pb } from '@/services/pocketbase';
|
|
||||||
|
|
||||||
export const useEvolutionRequest = () => {
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [submitSuccess, setSubmitSuccess] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const submitRequest = async (subject: string, description: string) => {
|
|
||||||
setIsSubmitting(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
await pb.collection('aegis_tickets').create({
|
|
||||||
author: pb.authStore.model?.id,
|
|
||||||
company: pb.authStore.model?.company,
|
|
||||||
category: "Évolution",
|
|
||||||
subject,
|
|
||||||
description,
|
|
||||||
status: "Ouvert"
|
|
||||||
});
|
|
||||||
setSubmitSuccess(true);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Erreur ticket d'évolution :", err);
|
|
||||||
setError("Une erreur de communication est survenue. Nos systèmes sont alertés.");
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return { submitRequest, isSubmitting, submitSuccess, error };
|
|
||||||
};
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
|
|
||||||
type Theme = 'light' | 'dark';
|
|
||||||
|
|
||||||
export function useTheme() {
|
|
||||||
// Initialisation de l'état avec une fonction pour ne lire le localStorage qu'une seule fois
|
|
||||||
const [theme, setTheme] = useState<Theme>(() => {
|
|
||||||
// 1. On vérifie si un choix a déjà été sauvegardé
|
|
||||||
const storedTheme = localStorage.getItem('theme');
|
|
||||||
if (storedTheme === 'dark' || storedTheme === 'light') {
|
|
||||||
return storedTheme;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Sinon, on vérifie la préférence système de l'utilisateur
|
|
||||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
||||||
return 'dark';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Par défaut, mode clair
|
|
||||||
return 'light';
|
|
||||||
});
|
|
||||||
|
|
||||||
// À chaque fois que 'theme' change, on met à jour le HTML et on sauvegarde
|
|
||||||
useEffect(() => {
|
|
||||||
const root = window.document.documentElement;
|
|
||||||
|
|
||||||
if (theme === 'dark') {
|
|
||||||
root.classList.add('dark');
|
|
||||||
} else {
|
|
||||||
root.classList.remove('dark');
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage.setItem('theme', theme);
|
|
||||||
}, [theme]);
|
|
||||||
|
|
||||||
// Fonction utilitaire pour basculer facilement
|
|
||||||
const toggleTheme = () => {
|
|
||||||
setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
|
|
||||||
};
|
|
||||||
|
|
||||||
return { theme, isDark: theme === 'dark', toggleTheme, setTheme };
|
|
||||||
}
|
|
||||||
@@ -3,19 +3,3 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@custom-variant dark (&:where(.dark, .dark *));
|
|
||||||
|
|
||||||
/* --- 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,23 +1,93 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Sidebar from '@/components/layout/Sidebar';
|
|
||||||
|
|
||||||
|
// Définition stricte des propriétés attendues par le Layout
|
||||||
interface DashboardLayoutProps {
|
interface DashboardLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
activeView: 'dashboard' | 'support' | 'vault' | 'account';
|
||||||
|
onNavigate: (view: 'dashboard' | 'support' | 'vault' | 'account') => void;
|
||||||
onLogout: () => void;
|
onLogout: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function DashboardLayout({ children, onLogout }: DashboardLayoutProps) {
|
export default function DashboardLayout({ children, activeView, onNavigate, onLogout }: DashboardLayoutProps) {
|
||||||
return (
|
|
||||||
<div className="h-screen w-full flex bg-[#e8e8e8] dark:bg-[#1e293b] text-slate-800 dark:text-slate-100 font-sans transition-all duration-300 ease-in-out">
|
|
||||||
{/* Intégration de la navbar extraite */}
|
|
||||||
<Sidebar onLogout={onLogout} className='my-4 ml-4'/>
|
|
||||||
|
|
||||||
{/* CONTENU PRINCIPAL */}
|
const navItems = [
|
||||||
<main className="flex-1 overflow-y-auto scrollbar-hide">
|
{ id: 'dashboard', label: 'Tableau de bord', icon: (
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
|
||||||
|
)},
|
||||||
|
{ id: 'support', label: 'Centre de Support', icon: (
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
|
||||||
|
)},
|
||||||
|
{ id: 'vault', label: 'Coffre-Fort', icon: (
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
||||||
|
)}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen bg-slate-50 overflow-hidden font-sans selection:bg-blue-900 selection:text-white">
|
||||||
|
|
||||||
|
{/* Sidebar Latérale (Institutionnelle) */}
|
||||||
|
<aside className="w-64 bg-white border-r border-slate-200 flex flex-col justify-between shadow-sm z-10">
|
||||||
|
|
||||||
|
{/* En-tête Sidebar */}
|
||||||
<div>
|
<div>
|
||||||
{children}
|
<div className="h-20 flex items-center px-8 border-b border-slate-100">
|
||||||
|
<h2 className="text-2xl font-bold tracking-tight text-slate-900">
|
||||||
|
AEGIS <span className="text-xs font-semibold text-blue-900 ml-1 bg-blue-50 px-2 py-1 rounded">VIP</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="p-4 space-y-1">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => onNavigate(item.id as any)}
|
||||||
|
className={`w-full flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors duration-200 ${
|
||||||
|
activeView === item.id
|
||||||
|
? 'bg-blue-50 text-blue-900'
|
||||||
|
: 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className={`mr-3 ${activeView === item.id ? 'text-blue-900' : 'text-slate-400'}`}>
|
||||||
|
{item.icon}
|
||||||
|
</span>
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Pied de la Sidebar (Profil & Déconnexion) */}
|
||||||
|
<div className="p-4 border-t border-slate-100">
|
||||||
|
<button
|
||||||
|
onClick={() => onNavigate('account')}
|
||||||
|
className={`w-full flex items-center px-4 py-3 rounded-lg transition-colors duration-200 text-left ${
|
||||||
|
activeView === 'account' ? 'bg-slate-100 ring-1 ring-slate-200' : 'hover:bg-slate-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold text-sm shrink-0">
|
||||||
|
DC
|
||||||
|
</div>
|
||||||
|
<div className="ml-3 overflow-hidden">
|
||||||
|
<p className="text-sm font-medium text-slate-900 truncate">Direction Client</p>
|
||||||
|
<p className="text-xs text-slate-500 truncate">Paramètres du compte</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onLogout}
|
||||||
|
className="w-full flex items-center px-4 py-2 text-sm font-medium text-red-600 rounded-lg hover:bg-red-50 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
|
||||||
|
Verrouiller la session
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Zone de contenu principal */}
|
||||||
|
<main className="flex-1 overflow-y-auto">
|
||||||
|
{children}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
+1
-4
@@ -2,12 +2,9 @@ import { StrictMode } from 'react'
|
|||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
import App from './App.tsx'
|
import App from './App.tsx'
|
||||||
import { BrowserRouter } from 'react-router-dom'
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
createRoot(document.getElementById('root')!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<BrowserRouter>
|
<App />
|
||||||
<App />
|
|
||||||
</BrowserRouter>
|
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -0,0 +1,92 @@
|
|||||||
|
export default function AccountSettings() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-900 selection:text-white">
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white border-b border-slate-200 px-8 py-6">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 tracking-tight">Paramètres du compte</h1>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">Gestion de la sécurité et informations contractuelles</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Contenu Principal */}
|
||||||
|
<main className="max-w-7xl mx-auto px-8 py-8 space-y-8">
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
|
||||||
|
{/* Colonne 1 : Sécurité */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
|
||||||
|
<svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
||||||
|
Sécurité de l'accès
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* MFA Status */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
|
||||||
|
</div>
|
||||||
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
|
||||||
|
Actif
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4 border-t border-slate-100">
|
||||||
|
<button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
|
||||||
|
Générer de nouveaux codes de secours
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mot de passe */}
|
||||||
|
<div className="pt-4 border-t border-slate-100">
|
||||||
|
<p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
|
||||||
|
<p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
|
||||||
|
<button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
|
||||||
|
Modifier le mot de passe
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Colonne 2 : Organisation & Contrat */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
<section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
|
||||||
|
<svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
|
||||||
|
Profil de l'Organisation
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<dl className="space-y-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<dt className="text-slate-500 font-medium">Entité Légale</dt>
|
||||||
|
<dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt className="text-slate-500 font-medium">Administrateur du compte</dt>
|
||||||
|
<dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
|
||||||
|
<dd className="mt-1 flex items-center">
|
||||||
|
<span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
|
||||||
|
<span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import PageHeader from "@/components/ui/PageHeader";
|
|
||||||
import AccessWidget from "@/components/widgets/AccessWidget";
|
|
||||||
import InformationWidget from "@/components/widgets/InformationWidget";
|
|
||||||
|
|
||||||
export default function AccountSettings() {
|
|
||||||
return (
|
|
||||||
<div className="font-sans relative min-h-[calc(100vh-4rem)]">
|
|
||||||
|
|
||||||
|
|
||||||
{/* Contenu Principal */}
|
|
||||||
<main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
|
|
||||||
{/* Header */}
|
|
||||||
<PageHeader
|
|
||||||
title="Paramètres du compte"
|
|
||||||
description="Gestion de la sécurité et informations contractuelles" />
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
||||||
|
|
||||||
{/* Colonne 1 : Sécurité */}
|
|
||||||
<AccessWidget/>
|
|
||||||
|
|
||||||
{/* Colonne 2 : Organisation & Contrat */}
|
|
||||||
<InformationWidget/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,261 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { pb } from '../../config/pocketbase';
|
||||||
|
import * as OTPAuth from 'otpauth';
|
||||||
|
import { QRCodeSVG } from 'qrcode.react';
|
||||||
|
|
||||||
|
interface LoginProps {
|
||||||
|
onLoginSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Login({ onLoginSuccess }: LoginProps) {
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [password, setPassword] = useState('');
|
||||||
|
const [mfaCode, setMfaCode] = useState('');
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
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 (
|
||||||
|
<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="sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
|
<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">
|
||||||
|
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
|
||||||
|
AEGIS <span className="font-light text-slate-500">by GISE</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
|
||||||
|
Accès restreint
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
|
||||||
|
{step === 1 ? (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{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">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* BOUTON SSO ZITADEL */}
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleZitadelLogin}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
{isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SÉPARATEUR VISUEL */}
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 flex items-center">
|
||||||
|
<div className="w-full border-t border-slate-200" />
|
||||||
|
</div>
|
||||||
|
<div className="relative flex justify-center text-sm">
|
||||||
|
<span className="bg-white px-2 text-slate-400">Ou via vos identifiants locaux</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FORMULAIRE CLASSIQUE */}
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleFinalStep}>
|
||||||
|
{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">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{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 inline-block 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"
|
||||||
|
/>
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import { Input } from '@/components/ui/Input';
|
|
||||||
import PageHeader from '@/components/ui/PageHeader';
|
|
||||||
import DocumentsWidget from '@/components/widgets/DocumentsWidget';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function DocumentVault() {
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="font-sans relative min-h-[calc(100vh-4rem)]">
|
|
||||||
|
|
||||||
{/* Contenu Principal */}
|
|
||||||
<main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
|
|
||||||
<PageHeader
|
|
||||||
title='Coffre-Fort Documentaire'
|
|
||||||
description='Espace de stockage chiffré de bout en bout'>
|
|
||||||
</PageHeader>
|
|
||||||
|
|
||||||
{/* Barre de recherche (Visuelle) */}
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder="Rechercher un document, une facture..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Liste des Documents (La Carte) */}
|
|
||||||
<DocumentsWidget></DocumentsWidget>
|
|
||||||
</main>
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
import { useLoginFlow } from '@/hooks/useLoginFlow';
|
|
||||||
import { LocalLoginForm } from '@/components/auth/LocalLoginForm';
|
|
||||||
import { MfaForm } from '@/components/auth/MfaForm';
|
|
||||||
import { Card, CardContent } from '@/components/ui/Card';
|
|
||||||
import LogoGise from '@/components/ui/LogoGise';
|
|
||||||
import { Button } from '@/components/ui/Button';
|
|
||||||
import { GlobeLock } from 'lucide-react';
|
|
||||||
import Badge from '@/components/ui/Badge';
|
|
||||||
|
|
||||||
interface LoginProps {
|
|
||||||
onLoginSuccess: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Login({ onLoginSuccess }: LoginProps) {
|
|
||||||
const {
|
|
||||||
step, isLoading, error, mfaConfig,
|
|
||||||
loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa
|
|
||||||
} = useLoginFlow(onLoginSuccess);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-[#e8e8e8] dark:bg-[#1e293b] flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
|
|
||||||
|
|
||||||
{/* HEADER LOGO */}
|
|
||||||
<LogoGise />
|
|
||||||
|
|
||||||
{/* BOÎTE CENTRALE DÉCLINÉE AVEC NOTRE OBJET CARD */}
|
|
||||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md justify-center flex">
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-6 sm:p-10">
|
|
||||||
|
|
||||||
{/* AFFICHAGE DES ERREURS GLOBALES */}
|
|
||||||
{error && (
|
|
||||||
<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}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ROUTAGE INTERNE DES ÉTAPES */}
|
|
||||||
{step === 1 ? (
|
|
||||||
<div className="space-y-6 items-center">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
onClick={loginWithZitadel}
|
|
||||||
disabled={isLoading}
|
|
||||||
leftIcon={<GlobeLock className="w-5 h-5 mr-2 text-blue-900" />}>
|
|
||||||
{isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<div className="absolute inset-0 flex items-center">
|
|
||||||
<div className="w-full border-t border-slate-200" />
|
|
||||||
</div>
|
|
||||||
<div className="relative flex justify-center text-sm">
|
|
||||||
<Badge name="Ou via authentification classique"></Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<LocalLoginForm onSubmit={loginWithLocal} isLoading={isLoading} />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<MfaForm
|
|
||||||
isFirstSetup={mfaConfig?.isFirstSetup || false}
|
|
||||||
qrUrl={mfaConfig?.qrUrl || ''}
|
|
||||||
isLoading={isLoading}
|
|
||||||
onVerify={verifyMfa}
|
|
||||||
onCancel={cancelMfa}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { Button } from '@/components/ui/Button';
|
|
||||||
import { PageHeader } from '@/components/ui/PageHeader';
|
|
||||||
import { TicketsWidget } from '@/components/widgets/TicketsWidget';
|
|
||||||
|
|
||||||
export default function ServiceDesk() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="font-sans relative min-h-[calc(100vh-4rem)]">
|
|
||||||
<main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
|
|
||||||
|
|
||||||
{/* HEADER EXTRAIT */}
|
|
||||||
<PageHeader
|
|
||||||
title="Centre de Support (Service Desk)"
|
|
||||||
description="Canal de communication sécurisé avec vos experts GISE."
|
|
||||||
>
|
|
||||||
<Button onClick={() => navigate('/support/new')}>
|
|
||||||
Ouvrir un ticket sécurisé
|
|
||||||
</Button>
|
|
||||||
</PageHeader>
|
|
||||||
|
|
||||||
{/* WIDGET DES TICKETS */}
|
|
||||||
<TicketsWidget
|
|
||||||
onSelectTicket={(ticketId) => navigate(`/support/tickets/${ticketId}`)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,216 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { pb } from '../../config/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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { pb } from '../../config/pocketbase';
|
||||||
|
import NewTicket from './NewTicket'; // Ajustez le chemin d'import selon votre arborescence
|
||||||
|
import TicketDetail from './TicketDetail'; // Ajustez le chemin d'import selon votre arborescence
|
||||||
|
|
||||||
|
interface Ticket {
|
||||||
|
id: string;
|
||||||
|
subject: string;
|
||||||
|
category: string;
|
||||||
|
status: 'Ouvert' | 'En analyse' | 'Résolu';
|
||||||
|
created: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ServiceDesk() {
|
||||||
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||||
|
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 (
|
||||||
|
<NewTicket
|
||||||
|
onCancel={() => setCurrentView('list')}
|
||||||
|
onTicketCreated={() => {
|
||||||
|
setCurrentView('list');
|
||||||
|
fetchTickets(); // On recharge la liste pour afficher le nouveau ticket
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentView === 'detail' && selectedTicketId) {
|
||||||
|
return (
|
||||||
|
<TicketDetail
|
||||||
|
ticketId={selectedTicketId}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
Ouvrir un ticket sécurisé
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="max-w-7xl mx-auto px-8 py-8">
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,201 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { pb } from '../../config/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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import UptimeWidget from '@/components/widgets/UptimeWidget';
|
|
||||||
import BackupWidget from '@/components/widgets/BackupWidget';
|
|
||||||
import SecurityWidget from '@/components/widgets/SecurityWidget';
|
|
||||||
import ServicesWidget from '@/components/widgets/ServicesWidget';
|
|
||||||
import SupportCtaWidget from '@/components/widgets/SupportCtaWidget';
|
|
||||||
import { PageHeader } from '@/components/ui/PageHeader';
|
|
||||||
|
|
||||||
export default function TrustCenter() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="font-sans relative min-h-[calc(100vh-4rem)]">
|
|
||||||
<main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
|
|
||||||
|
|
||||||
{/* HEADER EXTRAIT */}
|
|
||||||
<PageHeader
|
|
||||||
title="Tableau de bord de l'infrastructure"
|
|
||||||
description="Espace sécurisé AEGIS • Synchronisation en temps réel"
|
|
||||||
>
|
|
||||||
{/* L'indicateur de connexion devient le "children" du header */}
|
|
||||||
<div className="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100">
|
|
||||||
<span className="flex h-2.5 w-2.5 relative">
|
|
||||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
|
||||||
<span className="relative inline-flex rounded-full h-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>
|
|
||||||
</div>
|
|
||||||
</PageHeader>
|
|
||||||
|
|
||||||
{/* GRILLE DES WIDGETS */}
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
|
|
||||||
<div className="lg:col-span-3 space-y-6">
|
|
||||||
<UptimeWidget />
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<BackupWidget onClick={() => navigate('/backups')} />
|
|
||||||
<SecurityWidget onClick={() => navigate('/analytics')} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-6 lg:col-span-2">
|
|
||||||
<ServicesWidget />
|
|
||||||
<SupportCtaWidget />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import UptimeWidget from '../../components/widgets/UptimeWidget';
|
||||||
|
import BackupWidget from '../../components/widgets/BackupWidget';
|
||||||
|
import SecurityWidget from '../../components/widgets/SecurityWidget';
|
||||||
|
import ServicesWidget from '../../components/widgets/ServicesWidget';
|
||||||
|
|
||||||
|
interface TrustCenterProps {
|
||||||
|
onNavigate?: (view: 'dashboard' | 'support' | 'vault' | 'account') => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TrustCenter({ onNavigate }: TrustCenterProps) {
|
||||||
|
const [activeModal, setActiveModal] = useState<'none' | 'evolution' | 'analytics' | 'backups'>('none');
|
||||||
|
//const [selectedService, setSelectedService] = useState<string>('');
|
||||||
|
const [evolutionChoice, setEvolutionChoice] = useState<string>('');
|
||||||
|
|
||||||
|
const closeModal = () => setActiveModal('none');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 font-sans text-slate-900 relative">
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white border-b border-slate-200 px-8 py-6">
|
||||||
|
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 tracking-tight">Tableau de bord de l'infrastructure</h1>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">Espace sécurisé AEGIS • Synchronisation en temps réel</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<span className="flex h-3 w-3 relative">
|
||||||
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||||
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-medium text-slate-700">Connexion chiffrée</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Main Grid */}
|
||||||
|
<main className="max-w-7xl mx-auto px-8 py-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
<UptimeWidget />
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<BackupWidget onClick={() => setActiveModal('backups')} />
|
||||||
|
<SecurityWidget />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<ServicesWidget />
|
||||||
|
|
||||||
|
{/* CTA Support ITSM Actif */}
|
||||||
|
<div className="bg-blue-900 rounded-xl shadow-sm border border-blue-800 p-6 text-white">
|
||||||
|
<h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
|
||||||
|
<p className="text-blue-200 text-sm mb-4 leading-relaxed">
|
||||||
|
Déclarez un incident critique ou demandez une évolution de votre infrastructure.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => onNavigate && onNavigate('support')}
|
||||||
|
className="w-full bg-white text-blue-900 hover:bg-slate-50 font-medium py-2.5 px-4 rounded-lg transition-colors shadow-sm"
|
||||||
|
>
|
||||||
|
Ouvrir un ticket sécurisé
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* --- OVERLAY MODALES --- */}
|
||||||
|
{activeModal !== 'none' && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
|
||||||
|
|
||||||
|
{/* MODALE 1 : ÉVOLUTION STRATÉGIQUE */}
|
||||||
|
{activeModal === 'evolution' && (
|
||||||
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
||||||
|
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
|
||||||
|
<h3 className="text-lg font-bold text-slate-900">Demande d'évolution d'infrastructure</h3>
|
||||||
|
<button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h4 className="text-base font-semibold text-slate-900 mb-4">Quel est votre prochain objectif d'infrastructure ?</h4>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{[
|
||||||
|
{ id: 'sec', title: 'Renforcer la sécurité face aux cybermenaces', desc: 'Audits de vulnérabilité, Plan de Reprise d\'Activité (PRA)' },
|
||||||
|
{ id: 'net', title: 'Étendre les capacités du réseau actuel', desc: 'Migration Cloud Privé, ouverture de nouveaux sites' },
|
||||||
|
{ id: 'gov', title: 'Mise en conformité légale & Gouvernance', desc: 'Accompagnement RGPD, Directive NIS2, vCISO' },
|
||||||
|
{ id: 'oth', title: 'Autre demande stratégique', desc: 'Outils souverains, audit spécifique' }
|
||||||
|
].map((option) => (
|
||||||
|
<div
|
||||||
|
key={option.id}
|
||||||
|
onClick={() => setEvolutionChoice(option.id)}
|
||||||
|
className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${evolutionChoice === option.id ? 'border-blue-900 bg-blue-50' : 'border-slate-200 hover:border-blue-300'}`}
|
||||||
|
>
|
||||||
|
<p className="font-semibold text-slate-900">{option.title}</p>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">{option.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-8 flex justify-end space-x-3">
|
||||||
|
<button onClick={closeModal} className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded-lg">Annuler</button>
|
||||||
|
<button onClick={() => { alert('Redirection vers un ticket projet avec le choix stratégique.'); closeModal(); }} className="px-6 py-2 text-sm font-medium text-white bg-blue-900 hover:bg-blue-800 rounded-lg shadow-sm">Valider la demande stratégique</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* MODALE 2 : ANALYTICS SERVICES */}
|
||||||
|
{activeModal === 'analytics' && (
|
||||||
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
||||||
|
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold text-slate-900">Télémétrie & Analytics</h3>
|
||||||
|
<p className="text-sm text-slate-500">{'selectedService'}</p>
|
||||||
|
</div>
|
||||||
|
<button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||||
|
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||||
|
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
|
||||||
|
<p className="text-2xl font-bold text-emerald-600">100%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||||
|
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900">14%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||||
|
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900">1.2 TB</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
||||||
|
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
|
||||||
|
<p className="text-2xl font-bold text-blue-900">3,492</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Représentation visuelle d'un graphe */}
|
||||||
|
<h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
|
||||||
|
<div className="h-32 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
|
||||||
|
{[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
|
||||||
|
<div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* MODALE 3 : HISTORIQUE DES SAUVEGARDES */}
|
||||||
|
{activeModal === 'backups' && (
|
||||||
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
||||||
|
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
|
||||||
|
<h3 className="text-lg font-bold text-slate-900">Historique des Sauvegardes PRA</h3>
|
||||||
|
<button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||||
|
</div>
|
||||||
|
<div className="p-0 overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-slate-200">
|
||||||
|
<thead className="bg-slate-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date d'exécution</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Cible (Nœud)</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Volume</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Statut</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-slate-100">
|
||||||
|
{[
|
||||||
|
{ date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
|
||||||
|
{ date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
|
||||||
|
{ date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
|
||||||
|
{ date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
|
||||||
|
].map((bkp, i) => (
|
||||||
|
<tr key={i} className="hover:bg-slate-50">
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-right">
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
|
||||||
|
Succès (Chiffré)
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
// Données fictives pour le maquettage visuel
|
||||||
|
const mockDocuments = [
|
||||||
|
{ id: 'DOC-102', title: 'Rapport d\'Audit de Vulnérabilité Q2', category: 'Audit', date: '12 Juil. 2026', size: '2.4 MB', encrypted: true },
|
||||||
|
{ id: 'DOC-101', title: 'Facture Infogérance - Juin 2026', category: 'Facture', date: '01 Juil. 2026', size: '1.1 MB', encrypted: true },
|
||||||
|
{ id: 'DOC-095', title: 'Certificat de Conformité ISO 27001', category: 'Rapport de conformité', date: '15 Jan. 2026', size: '4.8 MB', encrypted: true }
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function DocumentVault() {
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
|
||||||
|
const getCategoryBadge = (category: string) => {
|
||||||
|
switch (category) {
|
||||||
|
case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
|
||||||
|
case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
|
||||||
|
case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
|
||||||
|
default: return 'bg-blue-50 text-blue-700 border-blue-200';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-900 selection:text-white">
|
||||||
|
|
||||||
|
{/* Header du Coffre-Fort */}
|
||||||
|
<header className="bg-white border-b border-slate-200 px-8 py-6">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 tracking-tight">Coffre-Fort Documentaire</h1>
|
||||||
|
<p className="text-sm text-slate-500 mt-1 flex items-center">
|
||||||
|
<svg className="w-4 h-4 mr-1.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||||
|
</svg>
|
||||||
|
Espace de stockage chiffré de bout en bout
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Contenu Principal */}
|
||||||
|
<main className="max-w-7xl mx-auto px-8 py-8">
|
||||||
|
|
||||||
|
{/* Barre de recherche (Visuelle) */}
|
||||||
|
<div className="mb-6 flex">
|
||||||
|
<div className="relative flex-1 max-w-lg">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<svg className="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<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>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Rechercher un document, une facture..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 sm:text-sm shadow-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Liste des Documents (La Carte) */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||||
|
<table className="min-w-full divide-y divide-slate-200">
|
||||||
|
<thead className="bg-slate-50">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
||||||
|
Nom du fichier
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
||||||
|
Catégorie
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
||||||
|
Ajouté le
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
|
||||||
|
Action
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-slate-200">
|
||||||
|
{mockDocuments.map((doc) => (
|
||||||
|
<tr key={doc.id} className="hover:bg-slate-50 transition-colors">
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg className="flex-shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-slate-900">{doc.title}</div>
|
||||||
|
<div className="text-xs text-slate-500">{doc.size} • PDF</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
|
||||||
|
{doc.category}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
|
||||||
|
{doc.date}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<button className="text-blue-900 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded flex items-center justify-end ml-auto transition-colors">
|
||||||
|
<svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||||
|
</svg>
|
||||||
|
Télécharger
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
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,50 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
|
||||||
import BackButton from '@/components/ui/BackButton';
|
|
||||||
|
|
||||||
export const Analytics: React.FC = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="max-w-5xl mx-auto py-8 px-8">
|
|
||||||
<BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="bg-slate-50">
|
|
||||||
<h3 className="text-xl font-bold text-slate-900">Télémétrie & Analytics</h3>
|
|
||||||
<p className="text-sm text-slate-500">Données réseau en temps réel</p>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
||||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
|
||||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
|
|
||||||
<p className="text-2xl font-bold text-emerald-600">100%</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
|
||||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
|
|
||||||
<p className="text-2xl font-bold text-slate-900">14%</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
|
||||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
|
|
||||||
<p className="text-2xl font-bold text-slate-900">1.2 TB</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
|
|
||||||
<p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
|
|
||||||
<p className="text-2xl font-bold text-blue-900">3,492</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Représentation visuelle du graphe */}
|
|
||||||
<h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
|
|
||||||
<div className="h-48 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
|
|
||||||
{[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
|
|
||||||
<div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Analytics;
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
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
|
|
||||||
const BACKUP_HISTORY = [
|
|
||||||
{ date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
|
|
||||||
{ date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
|
|
||||||
{ date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
|
|
||||||
{ date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export const Backups: React.FC = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="max-w-5xl mx-auto py-8 px-8">
|
|
||||||
<BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="bg-slate-50">
|
|
||||||
<h3 className="text-xl font-bold text-slate-900">Historique des Sauvegardes PRA</h3>
|
|
||||||
<p className="text-sm text-slate-500">Journal d'exécution de la règle 3-2-1-1-0</p>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
{/* On retire le padding sur le content pour que le tableau touche les bords */}
|
|
||||||
<CardContent className="p-0 overflow-x-auto">
|
|
||||||
<table className="min-w-full divide-y divide-slate-200">
|
|
||||||
<thead className="bg-white">
|
|
||||||
<tr>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date d'exécution</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Cible (Nœud)</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
|
|
||||||
<th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Volume</th>
|
|
||||||
<th className="px-6 py-4 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="bg-white divide-y divide-slate-100">
|
|
||||||
{BACKUP_HISTORY.map((bkp, i) => (
|
|
||||||
<tr key={i} className="hover:bg-slate-50 transition-colors">
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-right">
|
|
||||||
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200/60">
|
|
||||||
Succès (Chiffré)
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Backups;
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
// Styles neumorphiques réutilisables.
|
|
||||||
|
|
||||||
export const NEUMORPHISM = {
|
|
||||||
|
|
||||||
// Reliefs au repos
|
|
||||||
lightShadow: "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
|
|
||||||
darkShadow: "dark:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
|
|
||||||
|
|
||||||
lightShadowHover: "hover:shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
|
|
||||||
darkShadowHover: "dark:hover:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
|
|
||||||
|
|
||||||
// Ombres Neumorphic quand on clique (enfoncé)
|
|
||||||
lightActive: "active:shadow-[4px_4px_12px_#c5c5c5,-4px_-4px_12px_#ffffff]",
|
|
||||||
darkActive: "dark:active:shadow-[4px_4px_12px_#121926,-4px_-4px_12px_#2a3850]",
|
|
||||||
|
|
||||||
|
|
||||||
insetLightActive: "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
|
|
||||||
insetDarkActive: "dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
|
|
||||||
|
|
||||||
insetLightHover: "hover:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
|
|
||||||
insetDarkHover: "dark:hover:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
|
|
||||||
|
|
||||||
sizeStyles: {
|
|
||||||
sm: "px-5 py-2 text-sm rounded-md",
|
|
||||||
md: "px-[1.7em] py-[0.7em] text-[18px] rounded-[0.5em]",
|
|
||||||
lg: "px-10 py-4 text-xl rounded-xl",
|
|
||||||
icon: "p-3 rounded-lg",
|
|
||||||
},
|
|
||||||
// Ombres du bouton ACTIF (effet enfoncé/creusé "inset")
|
|
||||||
insetLight: "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
|
|
||||||
insetDark: "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
|
|
||||||
|
|
||||||
} as const;
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
export interface Document {
|
|
||||||
id: string;
|
|
||||||
collectionId: string; // <-- OBLIGATOIRE pour pb.files.getUrl()
|
|
||||||
collectionName: string; // (ex: 'aegis_documents_vault')
|
|
||||||
created: string;
|
|
||||||
updated: string;
|
|
||||||
title: string;
|
|
||||||
file: string; // Le nom du fichier généré par PocketBase (ex: 'rapport_7b3a.pdf')
|
|
||||||
category: string;
|
|
||||||
company?: string; // L'ID du client (Relation)
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import type { NodeStatus } from '@/types/Status';
|
|
||||||
|
|
||||||
export interface InfrastructureNode {
|
|
||||||
id: string;
|
|
||||||
label: string;
|
|
||||||
type: string;
|
|
||||||
status: NodeStatus;
|
|
||||||
uptime_sla: string;
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import type { ContractStatus } from '@/types/Status';
|
|
||||||
|
|
||||||
export interface ManagedContract {
|
|
||||||
id: string;
|
|
||||||
service_name: string;
|
|
||||||
description?: string;
|
|
||||||
status: ContractStatus;
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
export interface TicketMessage {
|
|
||||||
id: string;
|
|
||||||
content: string;
|
|
||||||
created: string;
|
|
||||||
expand?: {
|
|
||||||
author?: {
|
|
||||||
id?: string;
|
|
||||||
name?: string;
|
|
||||||
email?: string;
|
|
||||||
avatar?: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
// Statuts relatifs aux équipements d'infrastructure
|
|
||||||
export type NodeStatus = 'Opérationnel' | 'Dégradé' | 'Hors Ligne';
|
|
||||||
|
|
||||||
// Statuts relatifs aux contrats d'infogérance
|
|
||||||
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
|
|
||||||
export type AegisStatus = NodeStatus | ContractStatus | TicketStatus;
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import type { TicketStatus } from '@/types/Status';
|
|
||||||
|
|
||||||
export interface Ticket {
|
|
||||||
id: string;
|
|
||||||
subject: string;
|
|
||||||
description: string;
|
|
||||||
category: string;
|
|
||||||
status: TicketStatus;
|
|
||||||
created: string;
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { clsx, type ClassValue } from "clsx";
|
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
|
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return twMerge(clsx(inputs));
|
|
||||||
}
|
|
||||||
@@ -8,23 +8,6 @@
|
|||||||
"allowArbitraryExtensions": true,
|
"allowArbitraryExtensions": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./src/*"],
|
|
||||||
"@components/*": ["./src/components/*"],
|
|
||||||
"@ui/*": ["./src/components/ui/*"],
|
|
||||||
"@common/*": ["./src/components/common/*"],
|
|
||||||
"@pages/*": ["./src/pages/*"],
|
|
||||||
"@hooks/*": ["./src/hooks/*"],
|
|
||||||
"@layouts/*": ["./src/layouts/*"],
|
|
||||||
"@features/*": ["./src/features/*"],
|
|
||||||
"@services/*": ["./src/services/*"],
|
|
||||||
"@utils/*": ["./src/utils/*"],
|
|
||||||
"@assets/*": ["./src/assets/*"],
|
|
||||||
"@types/*": ["./src/types/*"],
|
|
||||||
"@widgets/*": ["./src/components/widgets/*"],
|
|
||||||
"@styles/*": ["./src/styles/*"],
|
|
||||||
},
|
|
||||||
|
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react'
|
||||||
import tailwindcss from '@tailwindcss/vite'
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
import path from 'path'
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@@ -9,22 +8,4 @@ export default defineConfig({
|
|||||||
react(),
|
react(),
|
||||||
tailwindcss()
|
tailwindcss()
|
||||||
],
|
],
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': path.resolve(__dirname, './src'),
|
|
||||||
'@components': path.resolve(__dirname, './src/components'),
|
|
||||||
'@ui': path.resolve(__dirname, './src/components/ui'),
|
|
||||||
'@common': path.resolve(__dirname, './src/components/common'),
|
|
||||||
'@pages': path.resolve(__dirname, './src/pages'),
|
|
||||||
'@hooks': path.resolve(__dirname, './src/hooks'),
|
|
||||||
'@layouts': path.resolve(__dirname, './src/layouts'),
|
|
||||||
'@features': path.resolve(__dirname, './src/features'),
|
|
||||||
'@services': path.resolve(__dirname, './src/services'),
|
|
||||||
'@utils': path.resolve(__dirname, './src/utils'),
|
|
||||||
'@assets': path.resolve(__dirname, './src/assets'),
|
|
||||||
'@data': path.resolve(__dirname, './src/data'),
|
|
||||||
'@widgets': path.resolve(__dirname, './src/components/widgets'),
|
|
||||||
'@styles': path.resolve(__dirname, './src/styles'),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user