GISE/aegis
2
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

add useDocuments and load saved documents in DocumentsVault

Browse Source
This commit is contained in:
LathanDevers
2026-07-31 21:37:56 +02:00
parent c7389d747b
commit 6b93d21d19
16 changed files with 280 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
-184
View File
@@ -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);
}
}
src/components/layout/Sidebar.tsx
+9 -5
View File
@@ -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
src/components/ui/Card.tsx
+3 -2
View File
@@ -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
src/components/ui/ServiceObject.tsx
+1 -1
View File
@@ -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' */}
src/components/ui/ThemeToggle.tsx
+52
View File
@@ -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>
);
}
src/components/ui/UptimeObject.tsx
+14 -12
View File
@@ -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>
);
};
src/components/widgets/DocumentsWidget.tsx
+77
View File
@@ -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;
src/components/widgets/EvolutionOptionCard.tsx
+1 -1
View File
@@ -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"
)}
>
src/components/widgets/UptimeWidget.tsx
+8 -6
View File
@@ -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>
);
src/hooks/useDocuments.ts
+31
View File
@@ -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 };
};
src/hooks/useTheme.ts
+42
View File
@@ -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 };
}
src/index.css
+2
View File
@@ -4,6 +4,8 @@
@tailwind components;
@tailwind utilities;
@custom-variant dark (&:where(.dark, .dark *));
/* --- VOS UTILITAIRES PERSONNALISÉS --- */
@layer utilities {
.scrollbar-hide {
src/pages/DocumentVault.tsx
+11 -71
View File
@@ -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 >
);
}
src/pages/ServiceDesk.tsx
+2 -2
View File
@@ -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
src/styles/Neumorphism.ts
+12 -2
View File
@@ -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;
src/types/Document.ts
+7
View File
@@ -0,0 +1,7 @@
export interface Document {
id: string;
title: string;
category: string;
file: File;
created: string;
}