282 lines
11 KiB
TypeScript
282 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useMemo, useCallback } from "react" // <-- useCallback ajouté
|
|
import { useRouter } from "next/navigation"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
Folder,
|
|
Search,
|
|
FolderPlus,
|
|
Clock,
|
|
StickyNote,
|
|
FileText,
|
|
UploadCloud,
|
|
X // <-- Ajout de X pour la notification
|
|
} from "lucide-react"
|
|
import { FolderData, FolderCreated, FolderPrivateFields, setDefaultFolderRoles } from "@/lib/4nk/models/FolderData"
|
|
import MessageBus from "@/lib/4nk/MessageBus"
|
|
import { iframeUrl } from "@/app/page"
|
|
import FolderModal from "@/components/4nk/FolderModal"
|
|
import FolderChat from "@/components/4nk/FolderChat"
|
|
import { use4NK, EnrichedFolderData } from "@/lib/contexts/FourNKContext"
|
|
|
|
// Fonction simple pour formater la taille des fichiers
|
|
const formatBytes = (bytes: number, decimals = 2) => {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const dm = decimals < 0 ? 0 : decimals;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
|
}
|
|
|
|
type FolderType = 'contrat' | 'projet' | 'rapport' | 'finance' | 'rh' | 'marketing' | 'autre';
|
|
|
|
export default function DashboardPage() {
|
|
const router = useRouter()
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [folderType, setFolderType] = useState<FolderType | null>(null);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [notification, setNotification] = useState<{ type: "success" | "error" | "info"; message: string } | null>(null)
|
|
|
|
const [selectedFolder, setSelectedFolder] = useState<EnrichedFolderData | null>(null);
|
|
|
|
const {
|
|
isConnected,
|
|
userPairingId,
|
|
folders,
|
|
loadingFolders,
|
|
setFolderProcesses,
|
|
setMyFolderProcesses,
|
|
setFolderPrivateData
|
|
} = use4NK();
|
|
|
|
const filteredFolders = folders.filter(folder => {
|
|
const matchesSearch = folder.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
folder.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
folder.folderNumber.toLowerCase().includes(searchTerm.toLowerCase()) // On garde la recherche par ID
|
|
return matchesSearch
|
|
})
|
|
|
|
const showNotification = (type: "success" | "error" | "info", message: string) => {
|
|
setNotification({ type, message })
|
|
setTimeout(() => setNotification(null), 5000)
|
|
}
|
|
|
|
const handleOpenModal = (type: FolderType) => {
|
|
setFolderType(type);
|
|
setIsModalOpen(true);
|
|
};
|
|
const handleCloseModal = () => {
|
|
setIsModalOpen(false);
|
|
setFolderType(null);
|
|
};
|
|
|
|
const handleSaveNewFolder = useCallback(
|
|
(folderData: FolderData) => {
|
|
if (!isConnected || !userPairingId) {
|
|
showNotification("error", "Vous devez être connecté à 4NK pour créer un dossier");
|
|
return;
|
|
}
|
|
const roles = setDefaultFolderRoles(userPairingId);
|
|
const folderPrivateFields = FolderPrivateFields;
|
|
MessageBus.getInstance(iframeUrl)
|
|
.createFolder(folderData, folderPrivateFields, roles)
|
|
.then((_folderCreated: FolderCreated) => {
|
|
const firstStateId = _folderCreated.process.states[0].state_id;
|
|
MessageBus.getInstance(iframeUrl)
|
|
.notifyProcessUpdate(_folderCreated.processId, firstStateId)
|
|
.then(() => {
|
|
const { processId, process } = _folderCreated;
|
|
|
|
setFolderProcesses((prevProcesses: any) => ({ ...prevProcesses, [processId]: process }));
|
|
setMyFolderProcesses((prevMyProcesses: string[]) => {
|
|
if (prevMyProcesses.includes(processId)) return prevMyProcesses;
|
|
return [...prevMyProcesses, processId];
|
|
});
|
|
setFolderPrivateData((prevData) => ({ ...prevData, [firstStateId]: folderData }));
|
|
|
|
showNotification("success", "Dossier créé avec succès !");
|
|
handleCloseModal();
|
|
});
|
|
})
|
|
.catch((error: any) => {
|
|
console.error('Erreur lors de la création du dossier:', error);
|
|
showNotification("error", "Erreur lors de la création du dossier");
|
|
});
|
|
},
|
|
[isConnected, userPairingId, setFolderProcesses, setMyFolderProcesses, setFolderPrivateData]
|
|
);
|
|
|
|
return (
|
|
<div className="flex h-full text-gray-100 p-6 space-x-6">
|
|
|
|
{/* --- COLONNE 1: LISTE DES DOSSIERS (Largeur fixe) --- */}
|
|
<div className="w-80 flex-shrink-0 flex flex-col h-full">
|
|
{/* Header Colonne 1 */}
|
|
<div className="flex-shrink-0">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold text-gray-100">Dossiers</h2>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleOpenModal("autre")}
|
|
disabled={!isConnected}
|
|
className="text-gray-400 hover:text-gray-100 hover:bg-gray-700"
|
|
>
|
|
<FolderPlus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="relative mb-4">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
placeholder="Rechercher..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 bg-gray-800 border-gray-700"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Liste scrollable */}
|
|
<div className="flex-1 overflow-y-auto -mr-3 pr-3">
|
|
{loadingFolders ? (
|
|
<p className="text-gray-400">Chargement...</p>
|
|
) : filteredFolders.length === 0 ? (
|
|
<p className="text-gray-500 text-sm">Aucun dossier trouvé.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{filteredFolders.map((folder) => (
|
|
<Card
|
|
key={folder.folderNumber}
|
|
className={`transition-shadow bg-gray-800 border border-gray-700 cursor-pointer ${selectedFolder?.folderNumber === folder.folderNumber
|
|
? 'border-blue-500' // Dossier sélectionné
|
|
: 'hover:border-gray-600'
|
|
}`}
|
|
onClick={() => setSelectedFolder(folder)}
|
|
>
|
|
<CardContent className="p-3">
|
|
<div className="flex items-center space-x-3">
|
|
<Folder className="h-5 w-5 text-blue-500 flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<h3 className="font-medium text-gray-100 truncate">{folder.name}</h3>
|
|
{/* ID du dossier supprimé */}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- COLONNE 2: RÉSUMÉ DU DOSSIER (Largeur fixe) --- */}
|
|
<div className="w-[600px] flex-shrink-0 flex flex-col h-full overflow-y-auto">
|
|
{!selectedFolder ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-gray-500">Sélectionnez un dossier pour voir le résumé</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Header Colonne 2 */}
|
|
<div className="flex-shrink-0">
|
|
<h1 className="text-2xl font-semibold">{selectedFolder.name}</h1>
|
|
<p className="text-gray-400 mt-2">{selectedFolder.description}</p>
|
|
{/* Badge ID supprimé */}
|
|
</div>
|
|
|
|
{/* Contenu Colonne 2 */}
|
|
<div className="flex-1 mt-6 space-y-6">
|
|
<Card className="bg-gray-800 border-gray-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-medium text-gray-100 flex items-center">
|
|
<StickyNote className="h-5 w-5 mr-2 text-yellow-400" />
|
|
Notes du dossier
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{selectedFolder.notes && selectedFolder.notes.length > 0 ? (
|
|
<ul className="list-disc pl-5 space-y-2">
|
|
{selectedFolder.notes.map((note, index) => (
|
|
<li key={index} className="text-gray-300">
|
|
{note}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="text-gray-500">Aucune note pour ce dossier.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-gray-800 border-gray-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-medium text-gray-100 flex items-center">
|
|
<FileText className="h-5 w-5 mr-2 text-blue-400" />
|
|
Fichiers
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{selectedFolder.files && selectedFolder.files.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{selectedFolder.files.map((file, index) => (
|
|
<div key={index} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
|
|
<div className="flex items-center space-x-3 min-w-0">
|
|
<FileText className="h-5 w-5 text-gray-400 flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium text-gray-100 truncate">{file.name || 'Fichier'}</p>
|
|
<p className="text-xs text-gray-400">{formatBytes(file.size || 0)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500">Aucun fichier dans ce dossier.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* --- COLONNE 3: CHAT (flex-1) --- */}
|
|
<div className="flex-1 bg-gray-800 border border-gray-700 rounded-lg flex flex-col overflow-hidden h-full">
|
|
<FolderChat
|
|
folder={selectedFolder} // Passe le dossier sélectionné (ou null)
|
|
/>
|
|
</div>
|
|
|
|
{/* --- MODALS (hors layout) --- */}
|
|
{isModalOpen && (
|
|
<FolderModal
|
|
isOpen={isModalOpen}
|
|
onClose={handleCloseModal}
|
|
onSave={handleSaveNewFolder}
|
|
onCancel={handleCloseModal}
|
|
folderType={folderType || "autre"}
|
|
/>
|
|
)}
|
|
{notification && (
|
|
<div className="fixed top-4 right-4 z-50">
|
|
<div className={`p-4 rounded-md shadow-lg ${notification.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
|
|
notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
|
|
"bg-blue-50 text-blue-800 border border-blue-200"
|
|
}`}>
|
|
<div className="flex items-center justify-between">
|
|
<span>{notification.message}</span>
|
|
<Button variant="ghost" size="sm" onClick={() => setNotification(null)}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} |