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

add downloadable content in vault

Browse Source
This commit is contained in:
LathanDevers
2026-08-01 22:24:49 +02:00
parent 6b93d21d19
commit ff6602dff3
9 changed files with 148 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/Button.tsx
+1 -1
View File
@@ -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"
>
src/components/ui/DocumentObject.tsx
+63
View File
@@ -0,0 +1,63 @@
import React from 'react';
import { Download } from 'lucide-react';
import { cn } from '@/utils/utils';
import { NEUMORPHISM } from '@/styles/Neumorphism';
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>
);
};
src/components/ui/TicketRow.tsx
+1 -1
View File
@@ -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">
src/components/widgets/DocumentsWidget.tsx
+7 -42
View File
@@ -1,6 +1,8 @@
import React from 'react';
import { useDocuments } from '@/hooks/useDocuments';
import {DocumentObject} from '@ui/DocumentObject'
import { Button } from '../ui/Button';
import { Card } from '../ui/Card';
interface DocumentsWidgetProps {
onSelectDocument: (id: string) => void;
@@ -8,19 +10,10 @@ interface DocumentsWidgetProps {
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">
<Card className='pb-7'>
<table className="min-w-full divide-y divide-slate-200">
<thead className="bg-slate-50">
<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
@@ -36,41 +29,13 @@ export function DocumentsWidget(){
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-slate-200">
<tbody className="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>
<DocumentObject doc={doc}></DocumentObject>
))}
</tbody>
</table>
</div>
</Card>
);
};
src/components/widgets/TicketsWidget.tsx
+1 -1
View File
@@ -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">
src/hooks/useDocumentDownload.ts
+45
View File
@@ -0,0 +1,45 @@
import { useState } from 'react';
// Importez votre instance PocketBase
import {pb} from '@/services/pocketbase';
import type { Document } from '@/types/Document';
export function useDocumentDownload() {
const [isDownloading, setIsDownloading] = useState(false);
const [error, setError] = useState<string | null>(null);
const downloadFile = async (doc: Document) => {
try {
setIsDownloading(true);
setError(null);
// 1. Demander un jeton éphémère de téléchargement (Sécurité Max)
// Ce jeton autorise le navigateur à télécharger un fichier protégé sans exposer votre session
const fileToken = await pb.files.getToken();
// 2. Générer l'URL du fichier
// ATTENTION : Pour que getUrl fonctionne, 'doc' DOIT contenir doc.id ET doc.collectionId (ou doc.collectionName)
const fileUrl = pb.files.getUrl(doc, doc.file);
// 3. Ajouter le jeton sécurisé et forcer le téléchargement (?download=1)
const downloadUrl = `${fileUrl}?token=${fileToken}&download=1`;
// 4. Créer un lien invisible pour forcer le navigateur à télécharger
const link = document.createElement("a");
link.href = downloadUrl;
// On s'assure d'avoir un nom de fichier par défaut si doc.title est vide
link.setAttribute("download", doc.title || "document_aegis.pdf");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} catch (err) {
console.error("Erreur lors du téléchargement sécurisé :", err);
setError("Accès refusé au coffre-fort documentaire.");
} finally {
setIsDownloading(false);
}
};
return { downloadFile, isDownloading, error };
}
src/pages/DocumentVault.tsx
+2 -12
View File
@@ -1,4 +1,5 @@
import { Card } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import PageHeader from '@/components/ui/PageHeader';
import DocumentsWidget from '@/components/widgets/DocumentsWidget';
import { useState } from 'react';
@@ -13,15 +14,6 @@ const mockDocuments = [
export default function DocumentVault() {
const [searchTerm, setSearchTerm] = useState('');
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="font-sans relative min-h-[calc(100vh-4rem)]">
@@ -40,19 +32,17 @@ export default function DocumentVault() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
<Input
type="text"
placeholder="Rechercher un document, une facture..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 sm:text-sm shadow-sm"
/>
</div>
</div>
{/* Liste des Documents (La Carte) */}
<DocumentsWidget></DocumentsWidget>
</main>
</div >
);
src/styles/Neumorphism.ts
+19 -19
View File
@@ -3,31 +3,31 @@
export const NEUMORPHISM = {
// Reliefs au repos
lightShadow: "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
darkShadow: "dark:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
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]",
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]",
// 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]",
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]",
sizeStyles: {
sm: "px-5 py-2 text-sm rounded-md",
md: "px-[1.7em] py-[0.7em] text-[18px] rounded-[0.5em]",
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]",
lg: "px-10 py-4 text-xl rounded-xl",
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;
} as const;
src/types/Document.ts
+9 -5
View File
@@ -1,7 +1,11 @@
export interface Document {
id: string;
title: string;
category: string;
file: File;
created: string;
id: string;
collectionId: string; // <-- OBLIGATOIRE pour pb.files.getUrl()
collectionName: string; // (ex: 'aegis_documents_vault')
created: string;
updated: string;
title: string;
file: string; // Le nom du fichier généré par PocketBase (ex: 'rapport_7b3a.pdf')
category: string;
company?: string; // L'ID du client (Relation)
}