add useDocuments and load saved documents in DocumentsVault
This commit is contained in:
LathanDevers
@@ -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,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