resolution de conflits
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '../ui/Input';
|
||||
|
||||
interface LocalLoginFormProps {
|
||||
onSubmit: (email: string, pass: string) => void;
|
||||
@@ -20,10 +21,9 @@ export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoad
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
<Input
|
||||
id="email" type="email" required placeholder="direction@client.com"
|
||||
value={email} onChange={(e) => setEmail(e.target.value)}
|
||||
className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,10 +31,9 @@ export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoad
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
<Input
|
||||
id="password" type="password" required placeholder="••••••••••••"
|
||||
value={password} onChange={(e) => setPassword(e.target.value)}
|
||||
className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm"
|
||||
value={password} onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,8 @@ import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-
|
||||
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;
|
||||
@@ -21,20 +23,21 @@ const NAVIGATION_ITEMS = [
|
||||
|
||||
|
||||
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]",
|
||||
"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" />
|
||||
<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">AEGIS</h1>
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">by GISE</span>
|
||||
<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>
|
||||
|
||||
@@ -52,7 +55,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
|
||||
"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.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")
|
||||
)
|
||||
}
|
||||
@@ -74,6 +77,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
|
||||
})}
|
||||
</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
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
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;
|
||||
@@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
{isLoading && (
|
||||
<svg
|
||||
className="animate-spin -ml-1 mr-2 h-5 w-5 text-current"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
|
||||
@@ -12,7 +12,7 @@ import { NEUMORPHISM } from '@/styles/Neumorphism';
|
||||
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';
|
||||
variant?: 'raised' | 'flat'|'digged'|'prophunt';
|
||||
}
|
||||
|
||||
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
||||
@@ -21,11 +21,12 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
||||
ref={ref}
|
||||
className={cn(
|
||||
// Style de base
|
||||
"rounded-3xl border-none transition-[background-color,box-shadow] duration-300 ease-in-out flex flex-col overflow-hidden",
|
||||
"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
|
||||
@@ -42,7 +43,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
|
||||
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",
|
||||
"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}
|
||||
@@ -55,7 +56,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("p-6 flex-1", className)}
|
||||
className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
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;
|
||||
@@ -9,7 +9,7 @@ interface ServiceObjectProps {
|
||||
|
||||
export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
|
||||
return (
|
||||
<Card variant= 'digged' className="p-4 rounded-lg border border-slate-100 flex flex-col">
|
||||
<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' */}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
// Fichier : src/components/ui/StatusBadge.tsx
|
||||
|
||||
import React from 'react';
|
||||
import { cn } from '@/utils/utils';
|
||||
import type { AegisStatus } from '@/types/Status';
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -11,7 +11,7 @@ export const TicketRow: React.FC<TicketRowProps> = ({ ticket, onClick }) => {
|
||||
return (
|
||||
<div
|
||||
onClick={() => onClick(ticket.id)}
|
||||
className="p-6 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group"
|
||||
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">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import type { InfrastructureNode } from '@/types/InfrastructureNode';
|
||||
import { StatusBadge } from '@ui/StatusBadge';
|
||||
import { cn } from '@/utils/utils';
|
||||
|
||||
interface UptimeObjectProps {
|
||||
node: InfrastructureNode;
|
||||
@@ -9,24 +10,25 @@ interface UptimeObjectProps {
|
||||
export const UptimeObject: React.FC<UptimeObjectProps> = ({ node }) => {
|
||||
return (
|
||||
// La "key" a été retirée d'ici, elle sera gérée par le parent
|
||||
<div className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
|
||||
|
||||
{/* Infos Serveur */}
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">{node.label}</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
|
||||
</div>
|
||||
|
||||
{/* Métriques & Badge */}
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-slate-500">SLA</p>
|
||||
<p className="text-sm font-semibold text-slate-900">{node.uptime_sla}</p>
|
||||
</div>
|
||||
|
||||
<StatusBadge status={node.status} />
|
||||
</div>
|
||||
<tr className={cn(
|
||||
"hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
|
||||
)}>
|
||||
|
||||
</div>
|
||||
{/* 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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
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,4 +1,6 @@
|
||||
import { Card, CardContent } from '@/components/ui/Card';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||
import { Check } from 'lucide-react';
|
||||
import Badge from '@ui/Badge';
|
||||
|
||||
interface BackupWidgetProps {
|
||||
onClick?: () => void;
|
||||
@@ -6,27 +8,22 @@ interface BackupWidgetProps {
|
||||
|
||||
export default function BackupWidget({ onClick }: BackupWidgetProps) {
|
||||
return (
|
||||
<Card
|
||||
<Card
|
||||
onClick={onClick}
|
||||
className="cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
|
||||
className="cursor-pointer transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold">Sauvegardes</h2>
|
||||
<Badge className="max-w-fit min-w-fit" name="PRA Immuable">
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">Sauvegardes</h2>
|
||||
<span className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded font-medium border border-slate-200">
|
||||
PRA Immuable
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg p-4 border border-slate-100 mb-4 group-hover:bg-blue-50/50 transition-colors">
|
||||
<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>
|
||||
<p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
<div className="flex items-center text-emerald-600 text-sm font-medium">
|
||||
<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>
|
||||
<Check></Check>
|
||||
Intégrité validée avec succès
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
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;
|
||||
@@ -19,7 +19,7 @@ export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-200 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
|
||||
"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"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
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;
|
||||
@@ -5,7 +5,6 @@ import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { Textarea } from '@/components/ui/Textarea';
|
||||
import { cn } from '@/utils/utils';
|
||||
|
||||
interface NewTicketWidgetProps {
|
||||
onCancel: () => void;
|
||||
@@ -22,6 +21,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
|
||||
const [affectedAsset, setAffectedAsset] = useState('');
|
||||
const [incidentTime, setIncidentTime] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [buttonVariant, setButtonVariant]=useState('primary');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -39,7 +39,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="bg-slate-50 border-b border-slate-100">
|
||||
<CardHeader>
|
||||
<h1 className="text-xl font-bold text-slate-900 tracking-tight">Ouvrir un nouveau ticket</h1>
|
||||
<p className="text-sm text-slate-500 mt-0.5">Qualification de votre requête ITSM</p>
|
||||
</CardHeader>
|
||||
@@ -62,7 +62,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
|
||||
<Select
|
||||
label="Type de demande"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value as any)}
|
||||
onChange={(e) => {setCategory(e.target.value as any); setButtonVariant(e.target.value==="Incident Critique"?"danger":"primary")}}
|
||||
options={[
|
||||
{ value: 'Incident Critique', label: 'Incident Critique (Panne, Dégradation)' },
|
||||
{ value: 'Évolution', label: 'Évolution (Ajout de ressources, Modification)' },
|
||||
@@ -143,11 +143,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
|
||||
<Button
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
className={cn(
|
||||
category === 'Incident Critique'
|
||||
? "bg-red-600 hover:bg-red-700 focus:ring-red-600"
|
||||
: ""
|
||||
)}
|
||||
variant={buttonVariant}
|
||||
>
|
||||
Soumettre le ticket
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Card, CardContent } from '@/components/ui/Card';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||
|
||||
interface SecurityWidgetProps {
|
||||
onClick?: () => void;
|
||||
@@ -6,18 +6,18 @@ interface SecurityWidgetProps {
|
||||
|
||||
export default function SecurityWidget({ onClick }: SecurityWidgetProps) {
|
||||
return (
|
||||
<Card
|
||||
<Card
|
||||
onClick={onClick}
|
||||
className="cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
|
||||
className="cursor-pointer hover:border-blue-300 transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold transition-colors">Posture de Sécurité</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4 group-hover:text-blue-900 transition-colors">Posture de Sécurité</h2>
|
||||
|
||||
<div className="flex items-baseline space-x-2 mb-4">
|
||||
<span className="text-3xl font-bold text-slate-900">1,432</span>
|
||||
<span className="text-sm text-slate-500">menaces bloquées (30j)</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-slate-600">Bouclier Cloudflare WAF</span>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { TicketMessage } from '@/types/Message';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
@@ -34,13 +34,13 @@ export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col h-[500px] overflow-hidden shadow-sm">
|
||||
<div className="p-4 border-b border-slate-100 bg-slate-50">
|
||||
<h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés avec l'ingénierie</h2>
|
||||
</div>
|
||||
<Card className="h-125">
|
||||
<CardHeader>
|
||||
<h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés</h2>
|
||||
</CardHeader>
|
||||
|
||||
{/* Zone des messages */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide bg-white">
|
||||
<CardContent className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{messages.length === 0 ? (
|
||||
<EmptyState message="Aucun message pour l'instant. Démarrez la conversation ci-dessous." />
|
||||
) : (
|
||||
@@ -48,10 +48,10 @@ export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({
|
||||
<MessageBubble key={msg.id} message={msg} currentUserId={currentUserId} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Zone de saisie avec notre composant UI */}
|
||||
<form onSubmit={handleSubmit} className="p-4 border-t border-slate-100 bg-slate-50 flex items-start space-x-3">
|
||||
<form onSubmit={handleSubmit} className="p-4 flex items-start space-x-3">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
value={newMessage}
|
||||
|
||||
@@ -10,7 +10,7 @@ interface TicketInfoWidgetProps {
|
||||
export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="bg-slate-50 border-b border-slate-100 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
|
||||
<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">
|
||||
@@ -24,10 +24,10 @@ export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) =>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<StatusBadge status={ticket.status} className="shrink-0" />
|
||||
<StatusBadge status={ticket.status} className="shrink-0 max-w-fit" />
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-6 bg-white">
|
||||
<CardContent>
|
||||
<p className="text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">
|
||||
Description du besoin :
|
||||
</p>
|
||||
|
||||
@@ -13,7 +13,7 @@ export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket })
|
||||
const { tickets, isLoading, error } = useTickets();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card className='pb-7'>
|
||||
<CardContent className="p-0">
|
||||
{/* En-tête du Widget */}
|
||||
<div className="p-6 border-b border-slate-100">
|
||||
|
||||
@@ -10,8 +10,8 @@ export default function UptimeWidget() {
|
||||
return (
|
||||
<Card>
|
||||
<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 */}
|
||||
{error && (
|
||||
<EmptyState message={error} className="text-red-500 not-italic font-medium" />
|
||||
@@ -26,13 +26,15 @@ export default function UptimeWidget() {
|
||||
)}
|
||||
|
||||
{/* 4. Affichage des données */}
|
||||
<table className="divide-y divide-slate-100 table-auto">
|
||||
{!isLoading && !error && nodes.length > 0 && (
|
||||
<div className="divide-y divide-slate-100 flex-1">
|
||||
{nodes.map((node) => (
|
||||
<UptimeObject key={node.id} node={node} />
|
||||
))}
|
||||
</div>
|
||||
<tbody className=''>
|
||||
{nodes.map((node) => (
|
||||
<UptimeObject key={node.id} node={node} />
|
||||
))}
|
||||
</tbody>
|
||||
)}
|
||||
</table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user