add useDocuments and load saved documents in DocumentsVault
This commit is contained in:
LathanDevers
+12
-72
@@ -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,26 +23,15 @@ 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">
|
||||
<div className="relative flex-1 max-w-lg">
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user