Refact/cleanup #5
-184
@@ -1,184 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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' */}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
<tr className={cn(
|
||||
"hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
|
||||
)}>
|
||||
|
||||
{/* Infos Serveur */}
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">{node.label}</p>
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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} />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</div>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import { useDocuments } from '@/hooks/useDocuments';
|
||||
import { Button } from '../ui/Button';
|
||||
|
||||
interface DocumentsWidgetProps {
|
||||
onSelectDocument: (id: string) => void;
|
||||
}
|
||||
|
||||
export function DocumentsWidget(){
|
||||
const { documents } = useDocuments();
|
||||
|
||||
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="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">
|
||||
{documents.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="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.file.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.created.split(" ")[0]+" "+doc.created.split(" ")[1].split(":")[0]+":"+doc.created.split(" ")[1].split(":")[1]}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
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"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -10,7 +10,7 @@ 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 && (
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { pb } from '@/services/pocketbase';
|
||||
import type { Document } from '@/types/Document';
|
||||
|
||||
export const useDocuments = () => {
|
||||
const [documents, setDocuments] = useState<Document[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchDocuments = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const records = await pb.collection('aegis_documents_vault').getFullList<Document>({
|
||||
sort: '-created', // Du plus récent au plus ancien
|
||||
});
|
||||
setDocuments(records);
|
||||
} catch (err) {
|
||||
console.error("Erreur lors de la récupération des documents :", err);
|
||||
setError("Impossible de charger les documents.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDocuments();
|
||||
}, [fetchDocuments]);
|
||||
|
||||
return { documents, isLoading, error, refetch: fetchDocuments };
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
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 };
|
||||
}
|
||||
@@ -4,6 +4,8 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* --- VOS UTILITAIRES PERSONNALISÉS --- */
|
||||
@layer utilities {
|
||||
.scrollbar-hide {
|
||||
|
||||
+11
-71
@@ -1,3 +1,6 @@
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import PageHeader from '@/components/ui/PageHeader';
|
||||
import DocumentsWidget from '@/components/widgets/DocumentsWidget';
|
||||
import { useState } from 'react';
|
||||
|
||||
// Données fictives pour le maquettage visuel
|
||||
@@ -20,25 +23,14 @@ export default function DocumentVault() {
|
||||
};
|
||||
|
||||
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>
|
||||
<div className="font-sans relative min-h-[calc(100vh-4rem)]">
|
||||
|
||||
{/* Contenu Principal */}
|
||||
<main className="max-w-7xl mx-auto px-8 py-8">
|
||||
<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) */}
|
||||
<div className="mb-6 flex">
|
||||
@@ -59,61 +51,9 @@ export default function DocumentVault() {
|
||||
</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="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>
|
||||
<DocumentsWidget></DocumentsWidget>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
@@ -7,8 +7,8 @@ export default function ServiceDesk() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-8 py-8 space-y-6">
|
||||
<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
|
||||
|
||||
@@ -6,10 +6,20 @@ export const NEUMORPHISM = {
|
||||
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]",
|
||||
@@ -17,7 +27,7 @@ export const NEUMORPHISM = {
|
||||
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]",
|
||||
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;
|
||||
@@ -0,0 +1,7 @@
|
||||
export interface Document {
|
||||
id: string;
|
||||
title: string;
|
||||
category: string;
|
||||
file: File;
|
||||
created: string;
|
||||
}
|
||||
Reference in New Issue
Block a user